确权首页

src/views/contracted/index.vue

@@ -21,11 +21,11 @@
     </div>
 
     <div class="tab">
-      <div @click="changeTaskOption('FINISHED')">
+      <div :class="{active:taskOption=='FINISHED'}" @click="changeTaskOption('FINISHED')">
         <p><img src="../../../static/images/contracted/contracted_index_icon_4.png" alt="">已完成任务</p>
         <p><span>{{ surveyTask['FINISHED'].length }}</span>个</p>
       </div>
-      <div @click="changeTaskOption('UNFINISHED')">
+      <div :class="{active:taskOption=='UNFINISHED'}" @click="changeTaskOption('UNFINISHED')">
         <p><img src="../../../static/images/contracted/contracted_index_icon_5.png" alt="">进行中任务</p>
         <p><span>{{ surveyTask['UNFINISHED'].length }}</span>个</p>
       </div>
@@ -189,6 +189,9 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    .active{
+      box-shadow: 0 5PX 10PX #c9c9c9;
+    }
     div{
       width: 44vw;
       height: 22vw;
@@ -196,9 +199,9 @@
       flex-direction: column;
       justify-content: center;
       padding: 0 5vw;
-      box-shadow: 0 5PX 10PX #c9c9c9;
       border-radius: 4vw;
       margin-top: 3vh;
+      position: relative;
       &:nth-child(1){
         background: url("../../../static/images/contracted/contracted_index_icon_2.png") no-repeat center;
         background-size: 100% 100%;
@@ -207,7 +210,7 @@
         background: url("../../../static/images/contracted/contracted_index_icon_3.png") no-repeat center;
         background-size: 100% 100%;
       }
-      img{
+      p img{
         width: 5vw;
         display: block;
         margin-right: 2vw;