战队详情

dev_bj
caishi 5 years ago
parent c408c1ecce
commit af72a800ce

@ -1,39 +1,94 @@
<div class="educontent">
<p class="edu-back-white mb20 padding30 mt10 clearfix">
<div class="educontent mb50">
<p class="edu-back-white mb20 padding30 mt10 clearfix lineh-20">
<span class="color-grey-3 font-18 fl">战队详情</span>
<a href="javascript:void(0)" class="color-grey-9 fr">返回</a>
</p>
<div class="edu-back-white mb50">
<p class="padding20-30">实训项目</p>
<table class="edu-pop-table head-color" cellspacing="0" cellpadding="0">
<thead>
<th>创建者</th>
<th>名称</th>
<th>学习人数</th>
<th>fork版的学习人数</th>
<th>有效作品数</th>
<th>制作应用经验值</th>
<div class="edu-back-white mb20">
<p class="pt20 pb20 font-16"><span class="modalTitle">实训项目</span></p>
<table width="100%" class="tBodyScroll edu-txt-center" cellpadding="0" cellspacing="0">
<thead class="lastPart">
<tr>
<th width="10%">创建者</th>
<th width="40%" class="edu-txt-left">名称</th>
<th width="10%">学习人数</th>
<th width="15%">fork版的学习人数</th>
<th width="10%">有效作品数</th>
<th width="15%">经验值</th>
</tr>
</thead>
<tbody>
<tr>
<td>胡莎莎</td>
<td>
<span>单链表的学习与应用I</span>
</td>
<td>2.5万</td>
<td>1456</td>
<td>2.5万</td>
<td>4545667</td>
<tr>
<td width="10%">张三</td>
<td width="40%" class="edu-txt-left">
<span class="task-hide fl" style="max-width: 410px;">MySQL数据库编程开发实训基础入门篇)MySQL数据库编程开发实训基础入门篇)</span>
<span class="connectTag">原创</span>
</td>
<td width="10%">1545</td>
<td width="15%">1246</td>
<th width="10%">111</th>
<td width="15%">54987</td>
</tr>
</tbody>
<tfoot class="tfootLastPart">
<tr class="color-orange font-16">
<th width="10%" class="color-grey-6">合计</th>
<th width="40%" class="edu-txt-left">6</th>
<th width="10%">12万</th>
<th width="15%">11</th>
<th width="10%">22</th>
<th width="15%">33</th>
</tr>
</tfoot>
</table>
</div>
<div class="edu-back-white mb20">
<p class="pt20 pb20 font-16"><span class="modalTitle">翻转课堂</span></p>
<table width="100%" class="tBodyScroll edu-txt-center" cellpadding="0" cellspacing="0">
<thead class="lastPart">
<tr>
<th width="10%">创建者</th>
<th width="40%" class="edu-txt-left">名称</th>
<th width="10%">学生数量</th>
<th width="15%">发布的实训作业数量</th>
<th width="10%">有效作品数</th>
<th width="15%">经验值</th>
</tr>
</thead>
<tbody>
<tr>
<td width="10%">张三</td>
<td width="40%" class="edu-txt-left">
<span class="task-hide fl" style="max-width: 480px;">MySQL数据库编程开发实训基础入门篇)MySQL数据库编程开发实训基础入门篇)</span>
</td>
<td width="10%">1545</td>
<td width="15%">1246</td>
<th width="10%">111</th>
<td width="15%">54987</td>
</tr>
</tbody>
<tfoot class="color-orange">
<th class="color-grey-6">合计:</th>
<th>6</th>
<th>5.5万</th>
<th>7878</th>
<th>2.5万</th>
<th>245364</th>
<tfoot class="tfootLastPart">
<tr class="color-orange font-16">
<th width="10%" class="color-grey-6">合计</th>
<th width="40%" class="edu-txt-left">6</th>
<th width="10%">12万</th>
<th width="15%">11</th>
<th width="10%">22</th>
<th width="15%">33</th>
</tr>
</tfoot>
</table>
</div>
</div>
<script>
$(function(){
if($(".tBodyScroll tbody").get(0).scrollHeight > 420){
$(".tBodyScroll thead").addClass("lastPart");
$(".tBodyScroll tfoot").addClass("tfootLastPart");
}else{
$(".tBodyScroll thead").removeClass("lastPart");
$(".tBodyScroll tfoot").removeClass("tfootLastPart");
}
})
</script>

@ -728,6 +728,47 @@ li.challenge_box:last-child{
width: 360px;height: 70px;background: #2CDAD4;color: #fff!important;font-size: 30px;line-height: 70px;text-align: center;
margin:0px auto;display: block;
}
table.tBodyScroll tbody tr td{
padding:6px 5px;box-sizing: border-box;font-size: 16px;color: #05101A;font-weight: normal;
}
table.tBodyScroll tbody {
display:block;
max-height:420px;
overflow-y:auto;
}
.connectTag{
display: inline-block;background: #4CACFF;border-radius: 12px;height: 24px;line-height: 24px;color: #fff;
padding:0px 12px;font-size: 14px;
}
table.tBodyScroll thead,table.tBodyScroll tfoot,table.tBodyScroll tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
table.tBodyScroll thead,table.tBodyScroll tfoot {
width:100%;
}
table.tBodyScroll tfoot tr th{
padding:10px 5px;box-sizing: border-box;border-top: 1px solid #eaeaea;font-weight: normal!important;
}
.lastPart,.tfootLastPart{
width: calc( 100% - 1em )!important;
}
.lastPart tr th:last-child,.tfootLastPart tr th:last-child{position: relative;}
.tfootLastPart tr th:last-child:after{
content: '';width: 1em;height: 100%;position: absolute;right: -1em;top:0px;border-top: 1px solid #eaeaea;
}
.lastPart tr th:last-child:after{
content: '';background: #F5F5F5;width: 1em;height: 100%;position: absolute;right: -1em;top:0px
}
table.tBodyScroll thead th{
background: #F5F5F5;color: #656565;padding:10px 5px;box-sizing: border-box;
}
.modalTitle{display: block;padding: 0px 30px;position: relative;line-height: 20px}
.modalTitle:before{
position: absolute;height: 100%;width: 2px;content: '';background: #4cacff;left: 0px;top: 0px;
}

Loading…
Cancel
Save