fix: 贺报样式修改

1. 修改页面结构, 使用table替换布局
2. 分公司字段修改为营销服务部

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">
+        <div class="sticky-table">
-          <van-col span="3">排名</van-col>
+          <table>
-          <van-col span="4">姓名</van-col>
+            <tr>
-          <van-col span="7">分公司</van-col>
+              <th>排名</th>
-          <van-col span="5">预收规保</van-col>
+              <th>姓名</th>
-          <van-col span="5">承保标保</van-col>
+              <th class="company">营销服务部</th>
-        </van-row>
+              <th>预收规保</th>
-        <template>
+              <th>承保标保</th>
-          <van-row v-for="(item, index) in showData.topList" :key="item.code" class="rankLine" :class="{ top3: index <= 2 }">
+            </tr>
-            <van-col class="rankCell bl" span="3">{{ index + 1 }}</van-col>
+            <tr v-for="(item, index) in showData.topList" :key="item.code">
-            <van-col class="rankCell" span="4">{{ item.name }}</van-col>
+              <td>{{ index + 1 }}</td>
-            <van-col class="rankCell" span="7">{{ item.comName }}</van-col>
+              <td>{{ item.name }}</td>
-            <van-col class="rankCell" span="5">{{ item.ysbb }}</van-col>
+              <td class="company">{{ item.comName }}</td>
-            <van-col class="rankCell" span="5">{{ item.bzbf }}</van-col>
+              <td>{{ item.ysbb }}</td>
-          </van-row>
+              <td>{{ item.bzbf }}</td>
-        </template>
+            </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,48 +162,6 @@ $border: 1px solid #ff4040;
 
 .congratulationTop {
   min-height: 100vh;
-}
-
-.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;
@@ -200,19 +177,50 @@ $border: 1px solid #ff4040;
   .score {
     font-weight: bold;
   }
-
-.loading {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
 }
 
-.bl {
+.congratulationTitle {
-  border-left: $border;
+  height: 60px;
+  font-size: 30px;
+  text-shadow: 1px 1px 5px #333;
+  background-color: #ff4040;
+  color: #ffffff;
+  line-height: 2em;
 }
 
+.rankWrapper {
+  max-height: 300px;
+  overflow: auto;
+  margin-top: 3px;
+  .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>