hz/ebiz-h5
1
0
Fork 0
mirror of http://112.124.100.131/GFRS/ebiz-h5.git synced 2025-12-09 06:26:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: 贺报样式修改

Browse Source 
1. 修改页面结构, 使用table替换布局
2. 分公司字段修改为营销服务部
This commit is contained in:
mengxiaolong
2020-11-19 14:19:55 +08:00
parent a5476070a0
commit ef5d887731
1 changed files with 81 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
src/views/ebiz/congratulation/CongratulationTop.vue
View File

@@ -1,25 +1,44 @@
<!-- 上头条 -->
<template>
<div style="min-height: 100vh;" class="bg-white">
<div class="congratulationTop text-center bg-white" v-show="showData.topList.length !== 0">
<div class="congratulationTop text-center" v-show="showData.topList.length !== 0">
<van-row><van-col class="congratulationTitle" span="24">全国TOP30本月业绩排名</van-col></van-row>
<div class="rankWrapper">
<van-row class="rankTitle">
<van-col span="3">排名</van-col>
<van-col span="4">姓名</van-col>
<van-col span="7">分公司</van-col>
<van-col span="5">预收规保</van-col>
<van-col span="5">承保标保</van-col>
</van-row>
<template>
<van-row v-for="(item, index) in showData.topList" :key="item.code" class="rankLine" :class="{ top3: index <= 2 }">
<van-col class="rankCell bl" span="3">{{ index + 1 }}</van-col>
<van-col class="rankCell" span="4">{{ item.name }}</van-col>
<van-col class="rankCell" span="7">{{ item.comName }}</van-col>
<van-col class="rankCell" span="5">{{ item.ysbb }}</van-col>
<van-col class="rankCell" span="5">{{ item.bzbf }}</van-col>
</van-row>
</template>
<div class="sticky-table">
<table>
<tr>
<th>排名</th>
<th>姓名</th>
<th class="company">营销服务部</th>
<th>预收规保</th>
<th>承保标保</th>
</tr>
<tr v-for="(item, index) in showData.topList" :key="item.code">
<td>{{ index + 1 }}</td>
<td>{{ item.name }}</td>
<td class="company">{{ item.comName }}</td>
<td>{{ item.ysbb }}</td>
<td>{{ item.bzbf }}</td>
</tr>
</table>
</div>
<table class="data-table">
<tr>
<th>排名</th>
<th>姓名</th>
<th class="company">营销服务部</th>
<th>预收规保</th>
<th>承保标保</th>
</tr>
<tr v-for="(item, index) in showData.topList" :key="item.code" :class="{ top3: index <= 2 }">
<td>{{ index + 1 }}</td>
<td>{{ item.name }}</td>
<td class="company">{{ item.comName }}</td>
<td>{{ item.ysbb }}</td>
<td>{{ item.bzbf }}</td>
</tr>
</table>
</div>
<div class="deadline">
@@ -143,76 +162,65 @@ $border: 1px solid #ff4040;
.congratulationTop {
min-height: 100vh;
.deadline {
font-size: 14px;
display: flex;
justify-content: space-between;
line-height: 2em;
}
.detail {
color: #ff4040;
line-height: 2em;
}
.score {
font-weight: bold;
}
}
.congratulationTitle {
height: 60px;
font-size: 30px;
text-shadow: 1px 1px 5px #333;
}
.rankTitle {
font-size: 14px;
position: sticky;
top: 0;
}
.rankTitle,
.congratulationTitle {
background-color: #ff4040;
color: #ffffff;
line-height: 2em;
}
.rankLine {
font-size: 14px;
line-height: 2em;
border-top: $border;
}
.rankWrapper {
max-height: 300px;
overflow: auto;
margin-top: 3px;
border-bottom: $border;
}
.rankTable {
border-collapse: collapse;
}
.rankCell {
border-right: $border;
}
.deadline {
font-size: 14px;
display: flex;
justify-content: space-between;
line-height: 2em;
}
.detail {
color: #ff4040;
line-height: 2em;
}
.score {
font-weight: bold;
}
.loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bl {
border-left: $border;
}
.top3 {
color: #ff9900;
.sticky-table {
height: 30px;
overflow: hidden;
position: sticky;
top: 0;
}
.data-table {
margin-top: -30px;
}
table {
width: 100%;
border-collapse: collapse;
.company {
width: 6em;
}
th {
font-size: 14px;
background-color: #ff4040;
color: #ffffff;
line-height: 30px;
height: 30px;
}
td {
padding: 5px;
border: $border;
}
}
.top3 {
color: #ff9900;
}
}
</style>