贺报样式等优化

src/views/ebiz/congratulation/CongratulationTop.vue

@@ -5,18 +5,21 @@
     <div class="rankWrapper">
       <van-row class="rankTitle">
         <van-col span="3">排名</van-col>
-        <van-col span="3">姓名</van-col>
-        <van-col span="8">分公司</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>
+      <van-loading v-if="showData.topList.length === 0" class="loading" size="24px" vertical>加载中...</van-loading>
+      <template v-if="showData.topList.length !== 0">
         <van-row v-for="(item, index) in showData.topList" :key="item.code" class="rankLine">
-        <van-col span="3">{{ index + 1 }}</van-col>
-        <van-col span="3">{{ item.name }}</van-col>
-        <van-col span="8">{{ item.comName }}</van-col>
-        <van-col span="5">{{ item.ysbb }}</van-col>
-        <van-col span="5">{{ item.bzbf }}</van-col>
+          <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>
 
     <div class="deadline">
@@ -24,18 +27,19 @@
       <span>单位:万元</span>
     </div>
     <van-row>
-      <van-col span="24" class="detail">您的业绩</van-col>
+      <van-col span="24" class="detail score">您的业绩</van-col>
+      <van-col span="20" offset="2" style="border-bottom: 1px solid #ff4040;"></van-col>
       <van-col span="24" class="detail">您本月预收标保{{ showData.achievement.selfAdvanceStand }}万元</van-col>
       <van-col span="24" class="detail">您本月承保标保{{ showData.achievement.selfAcceptStand }}万元</van-col>
       <van-col span="24" class="detail">全系统排名第{{ showData.achievement.ranking }}名</van-col>
       <van-col span="24" class="detail">距上一名差距{{ showData.achievement.previousGap }}元</van-col>
     </van-row>
-    <van-button type="danger" class="bottom-btn" @click="nextStep" v-no-more-click="1000">大单榜</van-button>
+    <van-button color="#ff4d4d" class="bottom-btn" @click="nextStep" v-no-more-click="1000">大单榜</van-button>
   </div>
 </template>
 
 <script>
-import { Col, Row } from 'vant'
+import { Col, Row, Loading } from 'vant'
 import { getCongratulationList } from '@/api/ebiz/congratulation/congratulation.js'
 import dateUtil from '@/assets/js/utils/date-utils.js'
 
@@ -90,12 +94,15 @@ export default {
   },
   components: {
     [Col.name]: Col,
-    [Row.name]: Row
+    [Row.name]: Row,
+    [Loading.name]: Loading
   }
 }
 </script>
 
 <style scoped="scoped" lang="scss">
+$border: 1px solid #ff4040;
+
 .congratulationTop {
   background-color: #fff;
   height: 100vh;
@@ -104,6 +111,7 @@ export default {
 .congratulationTitle {
   height: 60px;
   font-size: 30px;
+  text-shadow: 1px 1px 5px #333;
 }
 
 .rankTitle {
@@ -122,12 +130,14 @@ export default {
 .rankLine {
   font-size: 14px;
   line-height: 2em;
-  border-top: 1px solid red;
+  border-top: $border;
 }
 
 .rankWrapper {
-  height: 300px;
+  max-height: 300px;
   overflow: auto;
+  margin-top: 3px;
+  border-bottom: $border;
 }
 
 .rankTable {
@@ -135,10 +145,11 @@ export default {
 }
 
 .rankCell {
-  border-right: 1px solid red;
+  border-right: $border;
 }
 
 .deadline {
+  font-size: 14px;
   display: flex;
   justify-content: space-between;
   line-height: 2em;
@@ -146,6 +157,19 @@ export default {
 
 .detail {
   color: #ff4040;
-  line-height: 2em;
+  line-height: 2.5em;
+}
+
+.score {
+  text-shadow: 1px 1px 3px #000;
+  font-weight: bold;
+}
+
+.loading {
+  margin: 20px;
+}
+
+.bl {
+  border-left: $border;
 }
 </style>