存贷款背景色,金额,期限,利率箭头

src/views/DepositInterestTrial/DepositInterestTrial.vue

@@ -11,8 +11,8 @@
         </tatle-bar >
         <div class="bar" style="height: calc(5vh); " justify="center">
           <van-row >
-            <van-col span="11" style=" width:49%; text-align: center;line-height: calc(4vh);border-radius: 4px 0px 0px 4px;margin:calc(0.5vh) 0% calc(0.5vh) 0.5%;" :class="flagA?'white':'green'" @click="chooseA">存款利息试算</van-col>
-            <van-col span="11" style="width:49%; text-align: center;line-height: calc(4vh);border-radius: 0px 4px 4px 0px;margin: calc(0.5vh) 0.5% calc(0.5vh) 0%;" :class="flagB?'white':'green'" @click="chooseB">贷款利息试算</van-col>
+            <van-col span="11" style=" width:49%; text-align: center;line-height: calc(4vh);border-radius: 4px 0px 0px 4px;margin:calc(0.5vh) 0% calc(0.5vh) 0.5%;" :class="flagB?'white':'green'" @click="chooseA">存款利息试算</van-col>
+            <van-col span="11" style="width:49%; text-align: center;line-height: calc(4vh);border-radius: 0px 4px 4px 0px;margin: calc(0.5vh) 0.5% calc(0.5vh) 0%;" :class="flagA?'white':'green'" @click="chooseB">贷款利息试算</van-col>
           </van-row>
         </div>
       </div>

src/views/main/Main.vue

@@ -396,17 +396,17 @@ export default class Main extends Vue {
   tabsList: any=[
     {
        name: "金额",
-       status:0,
+       status:1,
 
     },
     {
        name: "期限",
-       status:0,
+       status:1,
 
     },
     {
        name: "利率",
-       status:0,
+       status:1,
 
     },
 
@@ -697,7 +697,14 @@ export default class Main extends Vue {
   }
 
    onClick(index:any) {
-     this.tabsList[index].status=this.tabsList[index].status === 1?0:1
+    for(let i in this.tabsList){
+      if(i===index.toString()){
+        this.tabsList[index].status=this.tabsList[index].status === 1?0:1
+      }else{
+        this.tabsList[i].status=1;
+      }
+    }
+
      // Toast(this.tabsList[index].status===1?"升序":"降序");
     }
 }