实训界面扩大缩小功能

This commit is contained in:
daiao 2017-03-20 17:14:05 +08:00
parent 5e7dd60194
commit 1d22b7e2b9
3 changed files with 98 additions and 40 deletions

View File

@ -1,55 +1,76 @@
<%= content_for(:header_tags) do %>
<%= javascript_include_tag 'baiduTemplate', 'jquery.datetimepicker.js' %>
<%= javascript_include_tag 'baiduTemplate', 'jquery.datetimepicker.js' %>
<% end %>
<div id="code_results">
</div>
<script id="t:exec_results" type="text/html">
<div class=" col-width fl content-history mt15" >
<div class="panel-header clearfix">
<h3 class="fl">测评历史</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>
<div class="col-width fl mt15 content-half-fix undis" style="margin-top:125px;">
<div class="panel-header clearfix">
<h3 class="fl">测评历史</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="hide_windows();"><i class="fa fa-compress font-14 fl color-grey"></i></a>
</div>
</div>
<div class="content-history-inner" style="height: 100px;">
<div class="clearfix history-success mb10">
<span class="icon-success fl mr5">2</span>
<p class="fl">恭喜,您已经完成了本任务!</p>
<a href="#" class="fr mr10">详情</a>
</div>
<div class="clearfix history-fail mb10">
<span class="icon-fail fl mr5">1</span>
<p class="fl">错误结果!</p>
<a href="#" class="fr mr10">详情</a>
</div>
</div>
</div>
<div class="col-width fl content-history mt15" >
<div class="panel-header clearfix">
<h3 class="fl">测评历史</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="extend_window()"><i class="fa fa-minus-square font-14 fl color-grey"></i></a>
</div>
</div>
<div class="content-history-inner">
<% unless @outputs.blank? %>
<% @outputs.each do |output| %>
<div class="<%= output.code == 0 ? 'clearfix history-success mb10' : 'clearfix history-fail mb10' %>">
<span class="<%= output.code == 0 ? 'icon-success fl mr5' : 'icon-fail fl mr5' %>">2</span>
<p class="fl"><%= output.code == 0 ? '恭喜,您已经完成了本任务!' : '错误结果!' %></p>
<%= link_to "详情", outputs_show_myshixun_game_path(@game, :myshixun_id => @myshixun, :game_output_id => output.id), :class => "fr mr10" %>
<% unless @outputs.blank? %>
<% @outputs.each do |output| %>
<div class="<%= output.code == 0 ? 'clearfix history-success mb10' : 'clearfix history-fail mb10' %>">
<span class="<%= output.code == 0 ? 'icon-success fl mr5' : 'icon-fail fl mr5' %>">2</span>
<p class="fl"><%= output.code == 0 ? '恭喜,您已经完成了本任务!' : '错误结果!' %></p>
<%= link_to "详情", outputs_show_myshixun_game_path(@game, :myshixun_id => @myshixun, :game_output_id => output.id), :class => "fr mr10" %>
</div>
<% end %>
<% end %>
</div>
<% end %>
<% end %>
</div>
</div>
<div class="col-width fl content-output ml15 mt15">
<div class="panel-header ">
<h3 >测试输出</h3>
</div>
<div class="col-width fl content-output ml15 mt15">
<div class="panel-header ">
<h3 >测试输出</h3>
</div>
<div class="content-history-inner">
999999
</div>
999999
</div>
<div class=" col-width fl content-submit ml15 mt15">
<div class="panel-header ">
<h3 >操作</h3>
</div>
<div class=" col-width fl content-submit ml15 mt15">
<div class="panel-header ">
<h3 >操作</h3>
</div>
<div class="content-submitbox">
<a href="#" class="task-btn mb10 ">保存修改</a>
<a href="#" class="task-btn mb10 ">保存修改</a>
<! if(status == 0){ !>
<div id="game_commit">
<a href="javascript:void(0)" class="task-btn task-btn-green" onclick="training_task_submmit();">提交评测</a>
</div>
<! }else if(status == 1){ !>
<a class="task-btn mb10">评测中..</a>
<! }else if(status == 2){ !>
<%= link_to "下 一 步", {:controller => 'games', :action => "next_step", :id => @game, :myshixun_id => @myshixun}, :class => "task-btn task-btn-green", :onclick => "training_task_submmit();", :remote => true %>
<! } !>
</div>
<! if(status == 0){ !>
<div id="game_commit">
<a href="javascript:void(0)" class="task-btn task-btn-green" onclick="training_task_submmit();">提交评测</a>
</div>
<! }else if(status == 1){ !>
<a class="task-btn mb10">评测中..</a>
<! }else if(status == 2){ !>
<%= link_to "下 一 步", {:controller => 'games', :action => "next_step", :id => @game, :myshixun_id => @myshixun}, :class => "task-btn task-btn-green", :onclick => "training_task_submmit();", :remote => true %>
<! } !>
</div>
</div>
</script>
<script >
@ -65,7 +86,7 @@
$.ajax({
url: '<%= game_build_myshixun_game_path(@game, @myshixun) %>',
success: function (){
success: function (){
$("#training_tasl_commit").html("<span class='task-display-span alert-blue mt10'>当前任务正在后台测评中,稍后将显示您的任务完成情况......</span>");
//循环等1分钟
var intId = setInterval(function(){
@ -86,4 +107,36 @@
})
}
function extend_window(){
var web_h = window.innerHeight;
if($.browser.msie) {
$(".content-half-fix").css("width", "42%");
$(".content-half-fix").css("height", web_h - 168 + "px");
}
else if($.browser.safari)
{
$(".content-half-fix").css("width", "42%");
$(".content-half-fix").css("height", web_h - 168 + "px");
}
else if($.browser.mozilla)
{
$(".content-half-fix").css("width", "42%");
$(".content-half-fix").css("height", web_h - 168 + "px");
}
else if($.browser.opera) {
$(".content-half-fix").css("width", "42%");
}else if($.browser.chrome){
if(window.navigator.userAgent.indexOf("MetaSr") == -1){
$(".content-half-fix").css("width", "42.5%");
$(".content-half-fix").css("height", web_h - 160 + "px");
}else{
$(".content-half-fix").css("width", "42.5%");
$(".content-half-fix").css("height", web_h - 155 + "px");
}
}
$(".content-half-fix").show();
}
function hide_windows(){
$(".content-half-fix").hide();
}
</script>

View File

@ -4,7 +4,7 @@
完成任务后,请点击“提交评测”按钮,若通过系统评测,将为你解锁下一关,祝你早日通关,加油!
</div>
<div class="content-row mr15">
<div class="content-info col-width fl ">
<div class="content-info col-width fl">
<div class="panel-header clearfix">
<h3 class="fl">第<%= @game.stage %>关:<%= @game.subject %></h3>
<div class="fr mt5">

View File

@ -98,7 +98,7 @@ a.rightbar-pause{ color:#29bd8b; font-size: 18px; margin-right:245px; margin-top
/*右侧内容*/
.content{ width:100%; min-width:1000px; }
.content-row{ padding:15px; }
.content-info{ width:49%; min-width:450px; }
.content-info{ width:49%; min-width:450px;}
.content-editor{ width:49%; min-width:450px; margin-left:15px; }
.panel-header{ border-bottom:1px solid #eee; padding:10px 15px;}
/* tab */
@ -157,4 +157,9 @@ textarea.task-textarea-pd{ padding-bottom: 0px; padding-top:0px;}
.task-setting-tab{ height:600px;}
.task-pd15-box{ padding:15px;}
.mb20{margin-bottom: 20px;}
input.knowledge_frame{height:30px;line-height:30px;border:none;background:#f3f5f7;}
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 .tab-info-inner{}
.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;}