1

src/components/work/bonus.vue

@@ -235,25 +235,25 @@
     }
 
     .list-box {
-      padding: 0 15px;
+      padding: 0 0.87vw;
     }
 
     .list {
       height: 40px;
       margin-bottom: 15px;
-      padding: 0 35px;
+      padding: 0 1.8vw;
       background-color: #F2F4F7;
       border-radius: 6px;
 
       .name {
         font-size: 14px;
         color: #111111;
-        margin-right: 55px;
+        margin-right: 2.86vw;
         white-space:nowrap;
       }
 
       .progress {
-        width: 5.2vw;
+        width: 5vw;
         font-size: 14px;
         color: #A4A5B7;
         border-radius: 6px;

src/components/work/dasbord.vue

@@ -5,9 +5,9 @@
     </div>
     <div class="row q-gutter-md  no-wrap work-con">
       <div >
-        <div class="item-shadow return-commission" style="flex-shrink:1">
+        <div class="item-shadow return-commission">
 
-          <div class="q-px-md q-pt-md row items-center">
+          <div class="q-px-md q-pt-md row no-wrap items-center">
             <div class="col return-commission-title">
               返佣
             </div>
@@ -75,14 +75,14 @@
           </div>
 
         </div>
-        <div class="item-shadow q-pa-md adviser" style="flex-shrink:1">
+        <div class="item-shadow q-pa-md adviser">
           <div class="adviser-title">学管/课程顾问</div>
           <div class="adviser-block flex justify-between items-center">
             <div class="left">
               <div class="num">
                 0 <span class="after">个</span>
               </div>
-              <div>
+              <div class="adviser-name">
                 待收款订单
               </div>
             </div>
@@ -97,7 +97,7 @@
               <div class="num">
                 0 <span class="after">个</span>
               </div>
-              <div>
+              <div class="adviser-name">
                 缺勤学员
               </div>
             </div>
@@ -112,7 +112,7 @@
               <div class="num">
                 0 <span class="after">个</span>
               </div>
-              <div>
+              <div class="adviser-name">
                 即将结业学员
               </div>
             </div>
@@ -384,36 +384,37 @@
     position: relative;
 
     .return-commission-title {
-      font-size: 18px;
+      font-size: 0.93vw;
       font-family: PingFang SC;
       font-weight: bold;
       color: #FFFFFF;
+      white-space:nowrap;
     }
 
     .btn_bg {
       background-color: rgba(255, 255, 255, 0.15);
       color: #fff;
-      border-radius: 6px;
+      border-radius: 0.31vw;
     }
 
     .return-commission-Statistics {
-      // width: 330px;
+      width: 100%;
       height: 210px;
       position: absolute;
       left: 0;
       bottom: 0;
       background-color: #fff;
-      border-radius: 12px 12px 0 0;
-      padding-top: 40px;
+      border-radius: 0.625vw 0.625vw 0 0;
+      padding-top: 2vw;
 
       .Statistics-block {
         width: 50%;
-        height: 50px;
-        padding-left: 25px;
-        margin-bottom: 20px;
+        height: 2.6vw;
+        padding-left: 1.3vw;
+        margin-bottom: 1vw;
 
         .Statistics-num {
-          font-size: 20px;
+          font-size: 1vw;
           font-weight: bolder;
           color: #404040;
           display: flex;
@@ -427,7 +428,7 @@
 
         .Statistics-label {
           font-family: PingFang SC;
-          font-size: 14px;
+          font-size: 0.72vw;
           color: #999999;
         }
       }
@@ -436,42 +437,48 @@
   }
 
   .adviser {
-    width: 330px;
+    // width: 17.18vw;
     height: 520px;
     background-color: #FFFFFF;
     border-radius: 8px;
     margin-top: 20px;
 
     .adviser-title {
-      font-size: 18px;
-      line-height: 17px;
+      font-size: 0.41vw;
+      line-height: 0.88vw;
       font-family: PingFang SC;
       font-weight: bold;
       color: #111111;
-      margin-bottom: 35px;
+      margin-bottom: 1.82vw;
     }
 
     .adviser-block {
-      width: 275px;
-      height: 110px;
+      width: 14.3vw;
+      height: 5.72vw;
       background-color: #F8F5FF;
-      border-radius: 6px;
-      margin: 0 auto 20px;
-      padding: 0 20px;
+      border-radius: 0.31vw;
+      margin: 0 auto 1vw;
+      padding: 0 1vw;
 
       .left {
         .num {
-          font-size: 36px;
+          font-size: 1.87vw;
           font-weight: 800;
-          line-height:15px;
+          line-height:0.78vw;
           color: #404040;
           .after{
-            font-size: 14px;
+            font-size: 0.72vw;
             font-family: PingFang SC;
             font-weight: 400;
             color: #404040;
           }
         }
+        .adviser-name{
+          font-size: 0.72vw;
+          font-family: PingFang SC;
+          font-weight: 400;
+          color: #404040;
+        }
       }
     }
   }

src/components/work/sell.vue

@@ -11,7 +11,7 @@
         </VueApexCharts>
       </div>
       <div class="bottom flex justify-between content-between">
-        <div class="sell-block">
+        <div class="sell-block" :class="{'active-sell':sellBlock==1}" @click="ckeckSell(1)">
           <div class="flex no-wrap justify-between items-center">
             <img src="../../assets/images/newindex/sell1.png" style="width:26px;height:26px">
             <q-btn size="sm" dense flat round icon="more_horiz">
@@ -39,7 +39,7 @@
             <img src="../../assets/images/newindex/sell8.png" alt="" style="width:10px;">
           </div>
         </div>
-        <div class="sell-block" style="background-color:#FFF5F8">
+        <div class="sell-block" :class="{'active-sell':sellBlock==2}" style="background-color:#FFF5F8"  @click="ckeckSell(2)">
           <div class="flex no-wrap justify-between items-center">
             <img src="../../assets/images/newindex/sell2.png" style="width:26px;height:26px">
             <q-btn size="sm" dense flat round icon="more_horiz">
@@ -67,7 +67,7 @@
             <img src="../../assets/images/newindex/sell8.png" alt="" style="width:10px;">
           </div>
         </div>
-        <div class="sell-block" style="background-color:#E8FFF3">
+        <div class="sell-block" :class="{'active-sell':sellBlock==3}" style="background-color:#E8FFF3"  @click="ckeckSell(3)">
           <div class="flex no-wrap justify-between items-center">
             <img src="../../assets/images/newindex/sell3.png" style="width:26px;height:26px">
             <q-btn size="sm" dense flat round icon="more_horiz">
@@ -95,7 +95,7 @@
             <img src="../../assets/images/newindex/sell8.png" alt="" style="width:10px;">
           </div>
         </div>
-        <div class="sell-block" style="background-color:#F2FAFF;box-shadow: 1px 3px 49px 0px rgba(0, 158, 247, 0.28);">
+        <div class="sell-block" :class="{'active-sell':sellBlock==4}" style="background-color:#F2FAFF;"  @click="ckeckSell(4)">
           <div class="flex no-wrap justify-between items-center">
             <img src="../../assets/images/newindex/sell4.png" style="width:26px;height:26px">
             <q-btn size="sm" dense flat round icon="more_horiz">
@@ -123,7 +123,7 @@
             <img src="../../assets/images/newindex/sell8.png" alt="" style="width:10px;">
           </div>
         </div>
-        <div class="sell-block" style="background-color:#FFFAF5">
+        <div class="sell-block" :class="{'active-sell':sellBlock==5}" style="background-color:#FFFAF5"  @click="ckeckSell(5)">
           <div class="flex no-wrap justify-between items-center">
             <img src="../../assets/images/newindex/sell5.png" style="width:26px;height:26px">
             <q-btn size="sm" dense flat round icon="more_horiz">
@@ -151,7 +151,7 @@
             <img src="../../assets/images/newindex/sell7.png" alt="" style="width:10px;">
           </div>
         </div>
-        <div class="sell-block" style="background-color:#FEF4FE">
+        <div class="sell-block" :class="{'active-sell':sellBlock==6}" style="background-color:#FEF4FE"  @click="ckeckSell(6)">
           <div class="flex no-wrap justify-between items-center">
             <img src="../../assets/images/newindex/sell6.png" style="width:26px;height:26px">
             <q-btn size="sm" dense flat round icon="more_horiz">
@@ -343,6 +343,7 @@
             }
           }
         },
+        sellBlock:1,
       };
     },
     methods: {
@@ -358,6 +359,9 @@
           this.elDatePlaceholder = "选择年"
           this.date = ""
         }
+      },
+      ckeckSell(n){
+        this.sellBlock=n
       }
     }
   };
@@ -428,5 +432,7 @@
       }
     }
   }
-
+  .active-sell{
+    box-shadow: 1px 3px 49px 0px rgba(0, 158, 247, 0.28);
+  }
 </style>