<div class="panel-container">
<div>
<table class="table-head" width="80%">
<thead>
<tr>
<th class="headerTable" rowspan="2">名称</th>
<th rowspan="2">性别</th>
<th colspan="2">回来时间</th>
<th colspan="2">出去时间</th>
</tr>
<tr class="num">
<th>准时度</th>
<th>准时率</th>
<th>准时度</th>
<th>准时率</th>
</tr>
</thead>
</table>
</div>
<div class="timeBody">
<table>
<tbody>
<tr v-for="(item, index) in list" :key="index">
<td :title="item.name">{{item.name}}</td>
<td>{{item.sex}}</td>
<td>{{item.outTotal}}</td>
<td>{{item.outPer}}</td>
<td>{{item.inTotal}}</td>
<td>{{item.inPer}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
export default {
data() {
return {
list: [{
name: '地名1',
result: '1',
outTotal: '12',
outPer: '30%',
inTotal: '16',
inPer: '34%'
},{
name: '地名2',
result: '1'
outTotal: '12',
outPer: '30%',
inTotal: '16',
inPer: '34%'
},{
name: '地名3',
result: '0',
outTotal: '12',
outPer: '30%',
inTotal: '16',
inPer: '34%'
}]
}
}
}
</script>
.panel-container {
height: 100%;
.table-head {
width: 100%;
color: #B3BBC7;
border: .01rem solid #2B2F33;
tr {
height: .35rem;
&:first-child {
border-top: .01rem solid #2B2F33;
border-bottom: .01rem solid #2B2F33;
background: #3F4348;
th:first-child, th:nth-child(2) {
width: 13.4%;
}
}
&nth-child(odd) td {
background: #3A3A3A；
}
}
th, td {
background: #3A3E43;
}
td {
text-align: center;
}
}
/deep/ .table-list {
height： 92%；
.ivu-table {
overflow: auto;
.ivu-table-body {
border-bottom: .01rem solid #2B2F33;
}
}
/deep/ thead {
diaplay: none !important;
}
}
.num {
background: #3A3E43;
}
}
.timeBody {
height: 91%;
overflow-y: auto;
::-webkit-scrollbar {
display: none;
}
table {
width: 100%;
tbody {
width: 100%;
color: #B3BBC7;
border: .01rem solid #2B2F33;
tr {
width: 100%;
height: .35rem;
&:first-child {
border-top: .01rem solid #2B2F33;
border-bottom: .01rem solid #2B2F33;
background: #3F4348;
}
&:nth-child(odd) td {
background: #3A3E43;
}
}
th, td {
border-right: .01rem solid #2B2F33;
}
td {
text-align: center;
width: 7.2%;
&:nth-of-type(1) {
width: 13.3%;
}
&:nth-of-type(2) {
width: 13.15%;
}
}
}
}
}
}
.timeBody::-webkit-scrollbar {
display: none;
}