From ef5d8877310c53d83d742a7d077866c8cf99e2cc Mon Sep 17 00:00:00 2001
From: mengxiaolong <meng.xiaolong@ebiz-digits.com>
Date: Thu, 19 Nov 2020 14:19:55 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B4=BA=E6=8A=A5=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 修改页面结构, 使用table替换布局
2. 分公司字段修改为营销服务部
---
 .../ebiz/congratulation/CongratulationTop.vue | 154 +++++++++---------
 1 file changed, 81 insertions(+), 73 deletions(-)

diff --git a/src/views/ebiz/congratulation/CongratulationTop.vue b/src/views/ebiz/congratulation/CongratulationTop.vue
index ed4e478f8..2d4639b28 100644
--- a/src/views/ebiz/congratulation/CongratulationTop.vue
+++ b/src/views/ebiz/congratulation/CongratulationTop.vue
@@ -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>