Merge branch 'hotfix/贺报表格样式修改' into release/20210128

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">
@@ -49,6 +68,7 @@
 import { Col, Row, Loading } from 'vant'
 import { getCongratulationList } from '@/api/ebiz/congratulation/congratulation.js'
 import dateUtil from '@/assets/js/utils/date-utils.js'
+import { orgShortNames } from '@/assets/js/utils/orgShortName'
 
 export default {
   name: 'congratulationTop',
@@ -92,11 +112,17 @@ export default {
         let result = data.content
         if (result.list && result.list.length) {
           let topList = result.list.splice(0, 30)
-          topList.map(value => {
-            value.comName = value.comName.substr(12)
-            return value
-          })
           this.showData.topList.push(...topList)
+
+          // 机构名称替换为简称
+          for (let org of this.showData.topList) {
+            for (let shortName of orgShortNames) {
+              if (org.comCode === shortName.code) {
+                org.comName = shortName.name
+              }
+            }
+          }
+
           this.showData.achievement.selfAdvanceStand = result.ysbb
           this.showData.achievement.selfAcceptStand = result.bzbf
           this.showData.achievement.ranking = result.top
@@ -143,76 +169,67 @@ $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 {
+    font-size: 14px;
+    height: 30px;
+    overflow: hidden;
+    position: sticky;
+    top: 0;
+  }
+  .data-table {
+    font-size: 14px;
+    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>