样式调整

src/components/chart/chart210323/yearRankingApply.vue

@@ -4,7 +4,7 @@
       <li :key="index">
         <div class="name">{{ item.project_name }}</div>
         <div class="progress-box">
-          <div class="block" :style="setStyle(item.rateNum)"></div>
+          <div class="block" :style="setStyle(item.rateNum, getColor[item.project_name])"></div>
         </div>
         <div class="num">{{ item.apply_count }}</div>
       </li>
@@ -17,7 +17,14 @@ import action from '@action'
 export default {
   data () {
     return {
-      data: []
+      data: [],
+      getColor: {
+        Sofia: 'rgba(252, 101, 75, 1)',
+        Kelley: 'rgba(52, 166, 210, 1)',
+        CU: 'rgba(152, 146, 240, 1)',
+        CIIS: 'rgba(239, 177, 174, 1)',
+        SHMS: 'rgba(249, 189, 115, 1)'
+      }
     }
   },
   mounted () {
@@ -38,8 +45,8 @@ export default {
   },
   computed: {
     setStyle() {
-      return (n) => {
-        return `width: ${n}%`
+      return (n, n2) => {
+        return `width: ${n}%;background: ${n2}`
       }
     }
   }

src/pages/chart/chart-210323.vue

@@ -14,10 +14,10 @@
             </div>
             <div class="tagging-box">
               <ul class="tips-box">
-                <template v-for="(item, index) in monthlyIncomeData.projectName">
+                <template v-for="(item, index) in tipsData">
                   <li :key="index">
-                    <div :class="`block col-${item}`"></div>
-                    <div class="project-name">{{ item }}</div>
+                    <div :class="`block col-${item.projectName}`"></div>
+                    <div class="project-name">{{ item.projectName }}（{{ item.num }}万）</div>
                   </li>
                 </template>
               </ul>
@@ -111,8 +111,7 @@ export default {
     yearApply,
     yearRankingApply,
     weekRevenueForecast,
-    Card,
-    tipsData: []
+    Card
   },
   data() {
     return {
@@ -139,7 +138,8 @@ export default {
         CU: 'rgba(152, 146, 240, 1)',
         CIIS: 'rgba(239, 177, 174, 1)',
         SHMS: 'rgba(249, 189, 115, 1)'
-      }
+      },
+      tipsData: []
     }
   },
   mounted() {
@@ -165,6 +165,10 @@ export default {
               }
             }
           )
+          this.tipsData.push({
+            projectName: item.project_name,
+            num: (item.pay_money / 10000).toFixed(2)
+          })
           this.monthlyIncomeData.projectName.push(item.project_name)
           // 达成率数据遍历
           this.monthCompleteRateData = res.data.sell_data
@@ -228,9 +232,9 @@ export default {
             // padding-top: 5%;
             // transform: translateX(-20px);
             li{
-              width: 142px;
+              // width: 142px;
               display: flex;
-              margin-bottom: 20px;
+              margin-bottom: 15px;
               .block{
                 width: 13px;
                 height: 13px;
@@ -251,13 +255,14 @@ export default {
                 }
               }
               .project-name{
-                font-size: 17px;
+                font-size: 14px;
                 color: #F3F3F3;
                 line-height: 13px;
                 margin-left: 12px;
+                white-space:nowrap;
               }
               .num{
-                font-size: 16px;
+                font-size: 14px;
                 color: #F3F3F3;
                 line-height: 13px;
                 margin-left: auto;
@@ -269,11 +274,11 @@ export default {
           position: absolute;
           // bottom: 4.5%;
           top: 50%;
-          left: 50%;
+          right: 5%;
           width: 50%;
           height: 0;
           padding-bottom: 50%;
-          transform: translate(-50%, -50%);
+          transform: translateY(-50%);
           .circle-bg{
             background: url(https://zws-imgs-pub.ezijing.com/static/public/052fbafd85745805c6e0de2f7b0fca17.png);
             background-size: 100% 100%;