实训tpi放大缩小效果

app/views/games/_desc_full_show.html.erb

@@ -0,0 +1,115 @@
+<div class="col-width fl content-all-fix undis" style="margin-top:50px">
+  <div class="panel-header clearfix">
+    <h3 class="fl">第1关：Python的初始化</h3>
+    <div class="fr  mt5">
+      <a href="#"><i class="fa fa-minus font-14 mr10 fl color-grey"></i></a>
+      <a href="javascript:void(0);" onclick="close_game_descpition()"><i class="fa fa-compress font-14 fl color-grey"></i></a>
+    </div>
+  </div>
+  <div class="tab_content clearfix" >
+    <ul id="tab_nav">
+      <li id="big_tab_nav_1" class="tab_hover " onclick="HoverLi_new(1);">
+        <a href="javascript:void(0);" class="tab_type">过关任务</a>
+      </li>
+      <li id="big_tab_nav_2"  onclick="HoverLi_new(2);">
+        <a href="javascript:void(0);" class="tab_type" >预备知识</a>
+      </li>
+      <li id="big_tab_nav_3"  onclick="HoverLi_new(3);">
+        <a href="javascript:void(0);" class="tab_type" >参考答案</a>
+      </li>
+    </ul>
+    <div class="cl"></div>
+    <div id="big_tab_con_1" class="tab-info" >
+      <p class="big-tab-info-inner">Python3 代码风格建议<br/>
+        Python3 中使用注释<br/>
+        认识 Python3 模块<br/>
+        实验步骤<br/>
+        1. 解释器<br/>
+        Python 是一个脚本语言，你可以在 Python <br/>解释器中直接写代码或者将代码写到一个文件里，然后执行这个文件（即脚本文件）。<br/>
+        首先，我们从使用解释器开始，打开终端，键入Python3 并回车。这个时候解释器便工作于交互模式。<br/>
+        Python3 中使用注释<br/>
+        认识 Python3 模块<br/>
+        实验步骤<br/>
+        1. 解释器<br/>
+        Python 是一个脚本语言，你可以在 Python <br/>解释器中直接写代码或者将代码写到一个文件里，然后执行这个文件（即脚本文件）。<br/>
+        首先，我们从使用解释器开始，打开终端，键入Python3 并回车。这个时候解释器便工作于交互模式。<br/>
+        Python3 中使用注释<br/>
+        认识 Python3 模块<br/>
+        实验步骤<br/>
+        1. 解释器<br/>
+        Python 是一个脚本语言，你可以在 Python <br/>解释器中直接写代码或者将代码写到一个文件里，然后执行这个文件（即脚本文件）。<br/>
+        首先，我们从使用解释器开始，打开终端，键入Python3 并回车。这个时候解释器便工作于交互模式。<br/>
+        Python3 中使用注释<br/>
+        认识 Python3 模块<br/>
+        实验步骤<br/>
+        1. 解释器<br/>
+        Python 是一个脚本语言，你可以在 Python <br/>解释器中直接写代码或者将代码写到一个文件里，然后执行这个文件（即脚本文件）。<br/>
+        首先，我们从使用解释器开始，打开终端，键入Python3 并回车。这个时候解释器便工作于交互模式。<br/>
+        1. 解释器<br/>
+        Python 是一个脚本语言，你可以在 Python <br/>解释器中直接写代码或者将代码写到一个文件里，然后执行这个文件（即脚本文件）。<br/>
+        首先，我们从使用解释器开始，打开终端，键入Python3 并回车。这个时候解释器便工作于交互模式。<br/>
+        Python3 中使用注释<br/>
+        认识 Python3 模块<br/>
+        实验步骤<br/>
+        1. 解释器<br/>
+        Python 是一个脚本语言，你可以在 Python <br/>解释器中直接写代码或者将代码写到一个文件里，然后执行这个文件（即脚本文件）。<br/>
+        首先，我们从使用解释器开始，打开终端，键入Python3 并回车。这个时候解释器便工作于交互模式。<br/>
+
+      </p>
+    </div>
+    <div id="big_tab_con_2" class="undis tab-info" >
+      <p class="big-tab-info-inner">dfdf</p>
+    </div>
+    <div id="big_tab_con_3" class="undis tab-info" >
+      <p class="big-tab-info-inner">dfdfdfdfdf</p>
+    </div>
+  </div>
+</div>
+<script type="text/javascript" language="javascript">
+    var web_h = window.innerHeight;
+    $(document).ready(function(){
+        if($.browser.msie) {
+            $(".content-all-fix").css("height", web_h - 225 + "px");
+            $(".content-all-fix").css("width", "87%");
+            $(".big-tab-info-inner").css("height", web_h - 185 + "px");
+        }
+        else if($.browser.safari)
+        {
+            $(".content-all-fix").css("height", web_h - 225 + "px");
+            $(".big-tab-info-inner").css("height", web_h - 195 + "px");
+            $(".content-all-fix").css("width", "87%");
+        }
+        else if($.browser.mozilla)
+        {
+            $(".content-all-fix").css("height", web_h - 225 + "px");
+            $(".big-tab-info-inner").css("height", web_h - 185 + "px");
+            $(".content-all-fix").css("width", "87%");
+        }
+        else if($.browser.opera) {
+            $(".content-all-fix").css("height", web_h - 225 + "px");
+            $(".big-tab-info-inner").css("height", web_h - 185 + "px");
+            $(".content-all-fix").css("width", "87%");
+        }else if($.browser.chrome){
+            if(window.navigator.userAgent.indexOf("MetaSr") == -1){
+                $(".content-all-fix").css("height", web_h - 225 + "px");
+                $(".big-tab-info-inner").css("height", web_h - 185 + "px");
+                $(".content-all-fix").css("width", "87.5%");
+            }else{
+                $(".content-all-fix").css("height", web_h - 225 + "px");
+                $(".big-tab-info-inner").css("height", web_h - 185 + "px");
+                $(".content-all-fix").css("width", "87.5%");
+            }
+        }
+    });
+    function close_game_descpition(){
+        $(".content-all-fix").hide();
+    }
+    function HoverLi_new(n){
+        for(var i=1;i<=3;i++){
+            g('big_tab_nav_'+i).className='tab_nomal';
+            g('big_tab_con_'+i).className='undis';
+        }
+        g('big_tab_con_'+n).className='dis';
+        g('big_tab_nav_'+n).className='tab_hover';
+    }
+</script>

app/views/games/_exec_results.html.erb

@@ -120,8 +120,8 @@
         }
         else if($.browser.mozilla)
         {
-            $(".content-half-fix").css("width", "42%");
+            $(".content-half-fix").css("width", "42.5%");
-            $(".content-half-fix").css("height", web_h - 168 + "px");
+            $(".content-half-fix").css("height", web_h - 158 + "px");
         }
         else if($.browser.opera) {
             $(".content-half-fix").css("width", "42%");

app/views/games/_game_show.html.erb

@@ -4,12 +4,13 @@
     完成任务后，请点击“提交评测”按钮，若通过系统评测，将为你解锁下一关，祝你早日通关，加油!
   </div>
   <div class="content-row mr15">
+    <%= render :partial => 'desc_full_show'%>
     <div class="content-info col-width fl">
       <div class="panel-header clearfix">
         <h3 class="fl">第<%= @game.stage %>关：<%= @game.subject %></h3>
         <div class="fr  mt5">
           <a href="#"><i class="fa fa-minus font-14 mr10 fl color-grey"></i></a>
-          <a href="#"><i class="fa fa-minus-square font-14  fl color-grey"></i></a>
+          <a href="javascript:void(0);" onclick="extend_game_description();"><i class="fa fa-minus-square font-14  fl color-grey"></i></a>
         </div>
       </div>
       <div class="tab_content clearfix">
@@ -41,7 +42,7 @@
     <div id="code_content">
       <%= render :partial => 'repository' %>
     </div>
-      <%= render :partial => 'exec_results' %>
+    <%= render :partial => 'exec_results' %>
   </div>
 </div>
 
@@ -62,8 +63,8 @@
         else if($.browser.mozilla)
         {
             $(".content").css("height", web_h - 75 + "px");
-            $(".tab-info-inner").css("height", web_h * 0.48 + "px");  //Firefox
+            $(".tab-info-inner").css("height", web_h * 0.48 + 50 + "px");  //Firefox
-            $(".content-editor").css("height", web_h * 0.48 + 105 + "px");
+            $(".content-editor").css("height", web_h * 0.48 + 155 + "px");
         }
         else if($.browser.opera) {
             $(".content").css("height", web_h - 75 + "px");
@@ -94,4 +95,7 @@
     $("#close_myshixun_tip").click(function(){
         $("#myshixun_tip").hide();
     });
+    function extend_game_description(){
+        $(".content-all-fix").show();
+    }
 </script>

public/stylesheets/css/taskstyle.css

@@ -113,6 +113,7 @@ a.rightbar-pause{ color:#29bd8b; font-size: 18px; margin-right:245px; margin-top
 .tab-info{ }
 .content-editor-inner{ overflow:auto;}
 .tab-info-inner{ overflow:auto; margin:15px 0 0px 15px; }
+.big-tab-info-inner{ overflow:auto; margin:15px 0 0px 15px; }
 .content-history-inner{overflow:auto; padding:15px; height: 80px}
 .content-history{width:49%; min-width:150px; }
 .history-success{ width: 100%; height:40px; line-height: 40px;  background:#eef1f2; color:#666; }
@@ -159,7 +160,7 @@ textarea.task-textarea-pd{ padding-bottom: 0px; padding-top:0px;}
 .mb20{margin-bottom: 20px;}
 input.knowledge_frame{height:30px;line-height:30px;border:none;background:#f3f5f7;}
 /* TPi全屏展示css */
-.content-all-fix{ width:98%; min-width:800px; margin:0; position: absolute; top:15px; z-index:99; }
+.content-all-fix{ margin:0; position: absolute; top:15px; z-index:99; }
-.content-all-fix .tab-info-inner{}
+.content-all-fix .tab-info-inner{ overflow:auto; margin:15px 0 0px 15px; }
 .content-half-fix{ min-width:450px; margin:0; position: absolute; top:15px; z-index:99;}
 .content-half-fix02{width:42.5%; min-width:450px; margin:0; min-height:936px; position: absolute; top:15px; z-index:99; right:15px;}