.

src/main/vue/src/components/CircleProgress.vue

@@ -31,7 +31,7 @@ export default {
         },
         color: {
             type: String,
-            default: '#F7BC1D'
+            default: '#4dcc6f'
         }
     },
     data() {
@@ -58,13 +58,13 @@ export default {
     align-items: center;
     .val {
         font-size: 25px;
-        font-weight: bold;
+        font-weight: 500;
     }
 
     .name {
         font-size: 14px;
-        font-weight: bold;
-        color: @text2;
+        // font-weight: bold;
+        color: #aaacad;
         line-height: 20px;
     }
 }

src/main/vue/src/components/sale/RankItem.vue

@@ -33,9 +33,9 @@ export default {
         ...mapState(['userInfo']),
         rankImg() {
             var imgList = [
-                require('../../assets/sale/xiaoshou_home_icon_no1.png'),
-                require('../../assets/sale/xiaoshou_home_icon_no2.png'),
-                require('../../assets/sale/xiaoshou_home_icon_no3.png')
+                require('../../assets/top01@3x.png'),
+                require('../../assets/top02@3x.png'),
+                require('../../assets/top03@3x.png')
             ];
 
             return imgList[this.rank - 1];
@@ -46,14 +46,14 @@ export default {
 <style lang="less" scoped>
 .rank-item {
     display: inline-block;
+    margin-top: 20px;
     .user {
-        width: 68px;
-        height: 68px;
+        width: 80px;
+        height: 80px;
         border: 3px solid rgba(237, 190, 166, 1);
         border-radius: 100%;
         overflow: hidden;
         margin: 0 auto;
-
         img {
             width: 100%;
             height: 100%;
@@ -62,9 +62,12 @@ export default {
     }
 
     .rank-img {
-        width: 114px;
-        height: 35px;
-        margin: -20px 0 0;
+        width: 80px;
+        height: 72px;
+        margin: -72px 0 30px -84px;
+        //  width: 114px;
+        // height: 35px;
+        // margin: -20px 0 0;
     }
 
     &.bigger {
@@ -78,8 +81,10 @@ export default {
     .name {
         text-align: center;
         font-size: 14px;
-        color: @text3;
-        margin-top: 5px;
+        color: #ffffff;
+        margin-top: -24px;
+        // color: @text3;
+        // margin-top: 5px;
     }
 }
 </style>

src/main/vue/src/styles/app.less

@@ -347,7 +347,8 @@ li {
     }
 }
 .el-card__header{
-    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
+    margin: 0 20px !important;
+    border-bottom:1px solid #080C27 !important;
 }
 .sum-row .col {
     background: #242744 !important;
@@ -428,39 +429,40 @@ li {
     color: #4dcc6f !important;
 }
  .menu1 {
-    min-width: 240px;
-    height: 36px;
+    min-width: 238px;
+    height: 28px;
     border-radius: 18px;
-    border: 1px solid #ffffff;
+    border: 1px solid #4dcc6f;
     background: rgba(255, 255, 255, 0.12);
     &.card-menu{
         min-width: 170px;
     }
      .el-radio-button__inner {
          background-color: transparent;
-         width: 65px;
-         height: 36px;
-         line-height: 18px;
+         width: 66px;
+         height: 28px;
+         color: #4DCC6F;
          border: 0;
+         border-right: 1px solid #4dcc6f !important;
          font-weight: normal;
      }
      .el-radio-button__orig-radio:checked+.el-radio-button__inner {
          color: #fff;
          background: #4dcc6f;
-         border-radius: 18px;
-         border-color: #fff;
          font-weight: bold;
          box-shadow: 0 0 0 0 #000000;
      }
      .el-radio-button {
          &:last-child {
              .el-radio-button__inner {
-                 border: 0;
+                border: 0;
+                border-radius: 0 18px 18px 0;
              }
          }
          &:first-child {
              .el-radio-button__inner {
-                 border: 0;
+                border: 0;
+                border-radius: 18px 0 0 18px;
              }
          }
      }

src/main/vue/src/styles/theme/index.css

@@ -75349,7 +75349,7 @@
 }
 
 .el-card__header {
-    padding: 18px 20px;
+    padding: 18px 0px;
     border-bottom: 1px solid #EBEEF5;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;

src/main/vue/src/views/sale/SaleIndex.vue

@@ -90,10 +90,20 @@
 
                         <div class="more" @click="goNext('/saleTargetList')">
                             <span>查看详情</span>
-                            <img src="../../assets/sale/icon_inter.png" alt="" />
+                            <img src="../../assets/icon_inter@3x.png" alt="" />
                         </div>
                     </div>
                     <div class="content ball-list">
+                        <div
+                            class="ball"
+                            style="width: 153px;
+                                    height: 125px;
+                                    background: #F7FFF9;
+                                    border-radius: 16px;"
+                        >
+                            <div class="ball-name">销售提成金额</div>
+                            <div class="ball-val" style="color:#4DCC6F">¥{{ targetInfo.royaltyAmount || 0 }}</div>
+                        </div>
                         <circle-progress text="完成率" :percentage="targetInfo.percent || 0"> </circle-progress>
 
                         <!-- <div class="ball">
@@ -109,21 +119,16 @@
                             <div class="ball-name">目标合同额</div>
                         </div> -->
 
-                        <div class="ball-center">
-                            <div class="ball">
-                                <div class="ball-val" style="color:#4DCC6F">¥{{ targetInfo.rent || 0 }}</div>
-                                <div class="ball-name">完成合同额</div>
+                        <div>
+                            <div>
+                                <div class="ball-name1">完成合同额</div>
+                                <div class="ball-val" style="color:#FFFFFF">¥{{ targetInfo.rent || 0 }}</div>
                             </div>
-                            <div class="ball" style="margin-top:10px">
-                                <div class="ball-val" style="color:#F7931D">¥{{ targetInfo.target || 0 }}</div>
-                                <div class="ball-name">目标合同额</div>
+                            <div style="margin-top:48px">
+                                <div class="ball-name1">目标合同额</div>
+                                <div class="ball-val" style="color:#FFFFFF">¥{{ targetInfo.target || 0 }}</div>
                             </div>
                         </div>
-
-                        <div class="ball" style="background-color:#FFEFDB">
-                            <div class="ball-val" style="color:#F7931D">¥{{ targetInfo.royaltyAmount || 0 }}</div>
-                            <div class="ball-name">销售提成金额</div>
-                        </div>
                     </div>
                 </el-card>
             </el-col>
@@ -134,20 +139,20 @@
                         <div class="header-name">本月绩效PK榜</div>
                         <div class="more">
                             <span>查看详情</span>
-                            <img src="../../assets/sale/icon_inter.png" alt="" />
+                            <img src="../../assets/icon_inter@3x.png" alt="" />
                         </div>
                     </div>
-                    <div class="content">
-                        <el-carousel trigger="click" height="237px" class="rank">
-                            <el-carousel-item>
-                                <div class="rank-name">合同总金额</div>
-                                <div class="rank-list">
-                                    <rank-item :rank="2" :info="moneyList[1]"> </rank-item>
-                                    <rank-item :info="moneyList[0]"></rank-item>
-                                    <rank-item :rank="3" :info="moneyList[2]"> </rank-item>
-                                </div>
-                            </el-carousel-item>
-                        </el-carousel>
+                    <div class="content" style="height:220px">
+                        <!-- <el-carousel trigger="click" height="237px" class="rank"> -->
+                        <!-- <el-carousel-item> -->
+                        <div class="rank-name">合同总金额</div>
+                        <div class="rank-list">
+                            <rank-item :info="moneyList[0]"></rank-item>
+                            <rank-item :rank="2" :info="moneyList[1]"> </rank-item>
+                            <rank-item :rank="3" :info="moneyList[2]"> </rank-item>
+                        </div>
+                        <!-- </el-carousel-item> -->
+                        <!-- </el-carousel> -->
                     </div>
                 </el-card>
             </el-col>
@@ -170,7 +175,7 @@
 
                         <div class="more" @click="goNext('/saleReportShow')">
                             <span>查看详情</span>
-                            <img src="../../assets/sale/icon_inter.png" alt="" />
+                            <img src="../../assets/icon_inter@3x.png" alt="" />
                         </div>
                     </div>
                     <div class="content data-list">
@@ -206,7 +211,7 @@
 
                         <div class="more" @click="goNext('/saleReportShow')">
                             <span>查看详情</span>
-                            <img src="../../assets/sale/icon_inter.png" alt="" />
+                            <img src="../../assets/icon_inter@3x.png" alt="" />
                         </div>
                     </div>
                     <div class="content">
@@ -284,6 +289,7 @@ export default {
                 this.$message.error(e.error);
             });
         this.$http.get('/saleTarget/allHomePage?page=0&size=3&sort=completionQuota,desc&query=%7B%7D').then(res => {
+            console.log(res);
             this.moneyList = res.content;
         });
     },
@@ -512,6 +518,7 @@ export default {
             img {
                 width: 24px;
                 height: 24px;
+                margin-bottom: 2px;
             }
         }
     }
@@ -520,7 +527,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: space-around;
-    padding: 0 5%;
+    // padding: 0 5%;
     height: 237px;
 
     .ball-center {
@@ -549,30 +556,39 @@ export default {
     }
     .ball-name {
         font-size: 14px;
-        color: @text2;
+        color: #949494;
         line-height: 20px;
         margin-top: 3px;
     }
 }
+.ball-name1 {
+    font-size: 14px;
+    color: #aaacad !important;
+    line-height: 20px;
+}
 .rank-name {
     width: 130px;
     height: 28px;
-    background: rgba(247, 147, 29, 0.1);
+    background: rgba(255, 255, 255, 0.1);
     border-radius: 4px;
     padding: 0 10px;
     font-size: 14px;
     text-align: center;
-    color: rgba(247, 147, 29, 1);
+    color: #4dcc6f;
     line-height: 28px;
     display: block;
     margin: 17px auto 20px;
     box-sizing: border-box;
 }
 .rank-list {
-    padding: 0 10%;
+    margin: 20px 0 0 75px;
     display: flex;
     align-items: center;
-    justify-content: space-around;
+    justify-content: space-between;
+    // padding: 0 10%;
+    // display: flex;
+    // align-items: center;
+    // justify-content: space-around;
 }
 
 .data-list {
@@ -589,7 +605,8 @@ export default {
         .data-val {
             font-size: 37px;
             font-weight: bold;
-            color: rgba(255, 185, 33, 1);
+            // color: rgba(255, 185, 33, 1);
+            color: #ff7f1f;
             line-height: 43px;
         }
 
@@ -603,12 +620,12 @@ export default {
 
         &:nth-child(3n + 2) {
             .data-val {
-                color: #409eff;
+                color: #4dcc6f;
             }
         }
         &:nth-child(3n) {
             .data-val {
-                color: #ff9696;
+                color: #8d85ff;
             }
         }
     }