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,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;
+  .sticky-table {
-}
+    height: 30px;
-
+    overflow: hidden;
-.rankTable {
+    position: sticky;
+    top: 0;
+  }
+  .data-table {
+    margin-top: -30px;
+  }
+  table {
+    width: 100%;
     border-collapse: collapse;
-}
+    .company {
-
+      width: 6em;
-.rankCell {
+    }
-  border-right: $border;
+    th {
-}
-
-.deadline {
       font-size: 14px;
-  display: flex;
+      background-color: #ff4040;
-  justify-content: space-between;
+      color: #ffffff;
-  line-height: 2em;
+      line-height: 30px;
-}
+      height: 30px;
-
+    }
-.detail {
+    td {
-  color: #ff4040;
+      padding: 5px;
-  line-height: 2em;
+      border: $border;
-}
+    }
-
+  }
-.score {
+  .top3 {
-  font-weight: bold;
-}
-
-.loading {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.bl {
-  border-left: $border;
-}
-
-.top3 {
     color: #ff9900;
+  }
 }
 </style>