From 87f8365ae922bd7450c4912f5ede994bb3a47d2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cgrape=E2=80=9D?= <18746553572@163.com>
Date: Thu, 18 Aug 2022 17:30:18 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E9=A1=B5=E5=8D=95=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/main/Main.vue | 543 +++++++++++++++++++++++++++++++---------
 1 file changed, 431 insertions(+), 112 deletions(-)

diff --git a/src/views/main/Main.vue b/src/views/main/Main.vue
index ef131a9..cc4881e 100644
--- a/src/views/main/Main.vue
+++ b/src/views/main/Main.vue
@@ -2,36 +2,61 @@
  * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
  * @Date: 2022-07-05 14:05:30
  * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
- * @LastEditTime: 2022-08-18 13:52:56
+ * @LastEditTime: 2022-07-28 15:44:01
  * @FilePath: \mcep-h5\src\views\main\MainView.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
-  <div class="d-page d-flex flex-column" style=" background-color: #ebedf0">
+  <div class="d-page d-flex flex-column" style="background-color: #ebedf0">
     <div class="rarle">
-      <tools-bar :title="tatleName" style="width:100%;height: calc(25vh);">
+      <tools-bar :title="tatleName" style="width: 100%; height: calc(25vh)">
       </tools-bar>
     </div>
     <div class="roolsolt">
-      <van-row class="roll" background="#ecf9ff" style="background: #ecf9ff;width: 90%;height: 34px;margin: 2% auto; border-radius: 10px;position: absolute; top: 21%;
-    left: 5%;">
-        <van-col span="5" class="titleName"
-          style="height: 34px;margin: 7px auto 0px 8px; border-radius: 12px; color: #a2d2f4;">
+      <van-row
+        class="roll"
+        background="#ecf9ff"
+        style="
+          background: #ecf9ff;
+          width: 90%;
+          height: 34px;
+          margin: 2% auto;
+          border-radius: 10px;
+          position: absolute;
+          top: 21%;
+          left: 5%;
+        "
+      >
+        <van-col
+          span="5"
+          class="titleName"
+          style="
+            height: 34px;
+            margin: 7px auto 0px 8px;
+            border-radius: 12px;
+            color: #a2d2f4;
+          "
+        >
           审批进度
         </van-col>
         <van-col span="18" class="notice">
-          <van-notice-bar left-icon="volume-o" color="#1989fa" background="#ecf9ff"
-            style="height: 34px; border-radius: 12px;">
+          <van-notice-bar
+            left-icon="volume-o"
+            color="#1989fa"
+            background="#ecf9ff"
+            style="height: 34px; border-radius: 12px"
+          >
             {{ notice }}
           </van-notice-bar>
         </van-col>
       </van-row>
     </div>
 
-
-    <div style="background-color: #ffff;height: 18%;">
+    <div style="background-color: #ffff; height: 18%">
       <div class="prudect">
-        <span style="font-size: 18px;font-weight: 600;margin-left: 4%;">推荐产品</span>
+        <span style="font-size: 18px; font-weight: 600; margin-left: 4%"
+          >推荐产品</span
+        >
       </div>
       <div>
         <!-- <van-tabs v-model="activeName">
@@ -40,39 +65,156 @@
           <van-tab title="期限" name="c"></van-tab>
           <van-tab title="利率" name="d"></van-tab>
         </van-tabs> -->
-        <van-dropdown-menu style="height:100%;">
-          <van-dropdown-item title="综合排序" ref="item" style="height:100%">
-            <div class="application" v-for="(item, index) in applicaList" :key="index">
+        <van-dropdown-menu style="height: 100%">
+          <van-dropdown-item title="综合排序" ref="item" style="height: 100%">
+             <div
+              class="application"
+              v-for="(item, index) in applicaList.slice(0, 1)"
+              :key="index"
+            >
               <van-row type="flex" class="applicationName">
                 <van-col span="24">{{ item.name }}</van-col>
               </van-row>
               <van-row type="flex" class="applicationfale">
+                <van-col span="10">
+                  <div class="vandiv">{{ item.min }}</div>
+                </van-col>
+                <van-col span="2">-</van-col>
                 <van-col span="10">
                   <div class="vandiv">{{ item.max }}</div>
                 </van-col>
+              </van-row>
+
+              <van-row type="flex" gutter="10" class="applicationfole">
+                <!-- div-->
+                 <van-col span="6">
+                  <div  :class="vanvcol11" @click="clickButton1(index,1)">
+                    {{ item.fristsize }}
+                  </div>
+                </van-col>
+                <van-col span="6">
+                  <div :class="vanvcol12" @click="clickButton1(index,2)">{{ item.secondsize }}</div>
+                </van-col>
+                <van-col span="6">
+                  <div :class="vanvcol13" @click="clickButton1(index,3)">{{ item.thirdsize }}</div>
+                </van-col>
+                <van-col span="6">
+                  <div :class="vanvcol14" @click="clickButton1(index,4)">{{ item.foursize }}</div>
+                </van-col>
+              </van-row>
+               <div
+              class="application"
+              v-for="(item, index) in applicaList.slice(1, 2)"
+              :key="index"
+            >
+              <van-row type="flex" class="applicationName">
+                <van-col span="24">{{ item.name }}</van-col>
+              </van-row>
+              <van-row type="flex" class="applicationfale">
+                <van-col span="10">
+                  <div class="vandiv">{{ item.min }}</div>
+                </van-col>
                 <van-col span="2">-</van-col>
+                <van-col span="10">
+                  <div class="vandiv">{{ item.max }}</div>
+                </van-col>
+              </van-row>
+
+              <van-row type="flex" gutter="10" class="applicationfole">
+                <!-- div-->
+               <van-col span="6">
+                  <div  :class="vanvcol21" @click="clickButton2(index,1)"> {{ item.fristsize }}
+                  </div>
+                </van-col>
+                <van-col span="6">
+                  <div :class="vanvcol22" @click="clickButton2(index,2)">{{ item.secondsize }}</div>
+                </van-col>
+                <van-col span="6">
+                  <div :class="vanvcol23" @click="clickButton2(index,3)">{{ item.thirdsize }}</div>
+                </van-col>
+                <van-col span="6">
+                  <div :class="vanvcol24" @click="clickButton2(index,4)">{{ item.foursize }}</div>
+                </van-col>
+              </van-row>
+            </div>
+
+
+             <div
+              class="application"
+              v-for="(item, index) in applicaList.slice(3, 4)"
+              :key="index"
+            >
+              <van-row type="flex" class="applicationName">
+                <van-col span="24">{{ item.name }}</van-col>
+              </van-row>
+              <van-row type="flex" class="applicationfale">
                 <van-col span="10">
                   <div class="vandiv">{{ item.min }}</div>
                 </van-col>
+                <van-col span="2">-</van-col>
+                <van-col span="10">
+                  <div class="vandiv">{{ item.max }}</div>
+                </van-col>
               </van-row>
 
               <van-row type="flex" gutter="10" class="applicationfole">
                 <!-- div-->
+              <van-col span="6">
+                  <div  :class="vanvcol41" @click="clickButton4(index,1)"> {{ item.fristsize }}
+                  </div>
+                </van-col>
+                <van-col span="6">
+                  <div :class="vanvcol42" @click="clickButton4(index,2)">{{ item.secondsize }}</div>
+                </van-col>
+                <van-col span="6">
+                  <div :class="vanvcol43" @click="clickButton4(index,3)">{{ item.thirdsize }}</div>
+                </van-col>
                 <van-col span="6">
-                  <div class="vandilote">{{ item.fristsize }}</div>
+                  <div :class="vanvcol44" @click="clickButton4(index,4)">{{ item.foursize }}</div>
+                </van-col>
+              </van-row>
+            </div>
+
+
+             <div
+              class="application"
+              v-for="(item, index) in applicaList.slice(2, 3)"
+              :key="index"
+            >
+              <van-row type="flex" class="applicationName">
+                <van-col span="24">{{ item.name }}</van-col>
+              </van-row>
+              <van-row type="flex" class="applicationfale">
+                <van-col span="10">
+                  <div class="vandiv">{{ item.min }}</div>
+                </van-col>
+                <van-col span="2">-</van-col>
+                <van-col span="10">
+                  <div class="vandiv">{{ item.max }}</div>
+                </van-col>
+              </van-row>
+
+              <van-row type="flex" gutter="10" class="applicationfole">
+                <!-- div-->
+              <van-col span="6">
+                  <div  :class="vanvcol31" @click="clickButton3(index,1)"> {{ item.fristsize }}
+                  </div>
                 </van-col>
                 <van-col span="6">
-                  <div class="vandilote">{{ item.secondsize }}</div>
+                  <div :class="vanvcol32" @click="clickButton3(index,2)">{{ item.secondsize }}</div>
                 </van-col>
                 <van-col span="6">
-                  <div class="vandilote">{{ item.thirdsize }}</div>
+                  <div :class="vanvcol33" @click="clickButton3(index,3)">{{ item.thirdsize }}</div>
                 </van-col>
                 <van-col span="6">
-                  <div class="vandilote">{{ item.foursize }}</div>
+                  <div :class="vanvcol34" @click="clickButton3(index,4)">{{ item.foursize }}</div>
                 </van-col>
               </van-row>
             </div>
-            <div style="margin-top: 4%;">
+
+            
+            </div>
+            <div style="margin-top: 4%">
               <van-row type="flex">
                 <van-col span="12">
                   <van-button square block type="default">重置</van-button>
@@ -84,37 +226,43 @@
             </div>
           </van-dropdown-item>
           <van-dropdown-item title="金额" ref="item">
-            <div class="application" v-for="(item, index) in applicaform" :key="index">
+            <div
+              class="application"
+              v-for="(item, index) in applicaList.slice(0, 1)"
+              :key="index"
+            >
               <van-row type="flex" class="applicationName">
                 <van-col span="24">{{ item.name }}</van-col>
               </van-row>
               <van-row type="flex" class="applicationfale">
                 <van-col span="10">
-                  <div class="vandiv">{{ item.max }}</div>
+                  <div class="vandiv">{{ item.min }}</div>
                 </van-col>
                 <van-col span="2">-</van-col>
                 <van-col span="10">
-                  <div class="vandiv">{{ item.min }}</div>
+                  <div class="vandiv">{{ item.max }}</div>
                 </van-col>
               </van-row>
 
               <van-row type="flex" gutter="10" class="applicationfole">
                 <!-- div-->
                 <van-col span="6">
-                  <div class="vandilote">{{ item.fristsize }}</div>
+                  <div  :class="vanvcol11" @click="clickButton1(index,1)">
+                    {{ item.fristsize }}
+                  </div>
                 </van-col>
                 <van-col span="6">
-                  <div class="vandilote">{{ item.secondsize }}</div>
+                  <div :class="vanvcol12" @click="clickButton1(index,2)">{{ item.secondsize }}</div>
                 </van-col>
                 <van-col span="6">
-                  <div class="vandilote">{{ item.thirdsize }}</div>
+                  <div :class="vanvcol13" @click="clickButton1(index,3)">{{ item.thirdsize }}</div>
                 </van-col>
                 <van-col span="6">
-                  <div class="vandilote">{{ item.foursize }}</div>
+                  <div :class="vanvcol14" @click="clickButton1(index,4)">{{ item.foursize }}</div>
                 </van-col>
               </van-row>
             </div>
-            <div style="margin-top: 4%;">
+            <div style="margin-top: 4%">
               <van-row type="flex">
                 <van-col span="12">
                   <van-button square block type="default">重置</van-button>
@@ -126,37 +274,42 @@
             </div>
           </van-dropdown-item>
           <van-dropdown-item title="期限" ref="item">
-            <div class="application" v-for="(item, index) in applicaform" :key="index">
+            <div
+              class="application"
+              v-for="(item, index) in applicaList.slice(1, 2)"
+              :key="index"
+            >
               <van-row type="flex" class="applicationName">
                 <van-col span="24">{{ item.name }}</van-col>
               </van-row>
               <van-row type="flex" class="applicationfale">
                 <van-col span="10">
-                  <div class="vandiv">{{ item.max }}</div>
+                  <div class="vandiv">{{ item.min }}</div>
                 </van-col>
                 <van-col span="2">-</van-col>
                 <van-col span="10">
-                  <div class="vandiv">{{ item.min }}</div>
+                  <div class="vandiv">{{ item.max }}</div>
                 </van-col>
               </van-row>
 
               <van-row type="flex" gutter="10" class="applicationfole">
                 <!-- div-->
-                <van-col span="6">
-                  <div class="vandilote">{{ item.fristsize }}</div>
+               <van-col span="6">
+                  <div  :class="vanvcol21" @click="clickButton2(index,1)"> {{ item.fristsize }}
+                  </div>
                 </van-col>
                 <van-col span="6">
-                  <div class="vandilote">{{ item.secondsize }}</div>
+                  <div :class="vanvcol22" @click="clickButton2(index,2)">{{ item.secondsize }}</div>
                 </van-col>
                 <van-col span="6">
-                  <div class="vandilote">{{ item.thirdsize }}</div>
+                  <div :class="vanvcol23" @click="clickButton2(index,3)">{{ item.thirdsize }}</div>
                 </van-col>
                 <van-col span="6">
-                  <div class="vandilote">{{ item.foursize }}</div>
+                  <div :class="vanvcol24" @click="clickButton2(index,4)">{{ item.foursize }}</div>
                 </van-col>
               </van-row>
             </div>
-            <div style="margin-top: 4%;">
+            <div style="margin-top: 4%">
               <van-row type="flex">
                 <van-col span="12">
                   <van-button square block type="default">重置</van-button>
@@ -168,37 +321,42 @@
             </div>
           </van-dropdown-item>
           <van-dropdown-item title="利率" ref="item">
-            <div class="application" v-for="(item, index) in applicaform" :key="index">
+            <div
+              class="application"
+              v-for="(item, index) in applicaList.slice(2, 3)"
+              :key="index"
+            >
               <van-row type="flex" class="applicationName">
                 <van-col span="24">{{ item.name }}</van-col>
               </van-row>
               <van-row type="flex" class="applicationfale">
                 <van-col span="10">
-                  <div class="vandiv">{{ item.max }}</div>
+                  <div class="vandiv">{{ item.min }}</div>
                 </van-col>
                 <van-col span="2">-</van-col>
                 <van-col span="10">
-                  <div class="vandiv">{{ item.min }}</div>
+                  <div class="vandiv">{{ item.max }}</div>
                 </van-col>
               </van-row>
 
               <van-row type="flex" gutter="10" class="applicationfole">
                 <!-- div-->
-                <van-col span="6">
-                  <div class="vandilote">{{ item.fristsize }}</div>
+              <van-col span="6">
+                  <div  :class="vanvcol31" @click="clickButton3(index,1)"> {{ item.fristsize }}
+                  </div>
                 </van-col>
                 <van-col span="6">
-                  <div class="vandilote">{{ item.secondsize }}</div>
+                  <div :class="vanvcol32" @click="clickButton3(index,2)">{{ item.secondsize }}</div>
                 </van-col>
                 <van-col span="6">
-                  <div class="vandilote">{{ item.thirdsize }}</div>
+                  <div :class="vanvcol33" @click="clickButton3(index,3)">{{ item.thirdsize }}</div>
                 </van-col>
                 <van-col span="6">
-                  <div class="vandilote">{{ item.foursize }}</div>
+                  <div :class="vanvcol34" @click="clickButton3(index,4)">{{ item.foursize }}</div>
                 </van-col>
               </van-row>
             </div>
-            <div style="margin-top: 4%;">
+            <div style="margin-top: 4%">
               <van-row type="flex">
                 <van-col span="12">
                   <van-button square block type="default">重置</van-button>
@@ -211,64 +369,97 @@
           </van-dropdown-item>
         </van-dropdown-menu>
       </div>
-       <scroller-view v-calculate-height  :height="10000" > 
-      <div v-for="(item, index) in productList" :key="index" style="margin: 4% auto;">
-        <picket-bar :productname="item.productname" :describe="item.describe" :limitrange="item.limitrange"
-          :interestrate="item.interestrate" :loanterm="item.loanterm" @onClickPicket="onClickPicket"></picket-bar>
-      </div>
-    </scroller-view> 
-
-
-
+      <scroller-view v-calculate-height>
+        <div
+          v-for="(item, index) in productList"
+          :key="index"
+          style="margin: 4% auto"
+        >
+          <picket-bar
+            :productname="item.productname"
+            :describe="item.describe"
+            :limitrange="item.limitrange"
+            :interestrate="item.interestrate"
+            :loanterm="item.loanterm"
+            @onClickPicket="onClickPicket"
+          ></picket-bar>
+        </div>
+      </scroller-view>
     </div>
   </div>
-
 </template>
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import { ProductData } from '@/model/entity/ProductData'
+import { ProductData } from "@/model/entity/ProductData";
+import { i } from "mathjs";
 
 @Component({
   name: "Main",
 })
 export default class Main extends Vue {
-  tatleName = "线上金融服务平台"
-  notice = "在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
+  tatleName = "线上金融服务平台";
+  notice = "在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。";
+  vanvcol11 = "vandilote";
+  vanvcol12 ="vandilote";
+  vanvcol13 ="vandilote";
+  vanvcol14 ="vandilote";
+
+  vanvcol21 = "vandilote";
+  vanvcol22 ="vandilote";
+  vanvcol23 ="vandilote";
+  vanvcol24 ="vandilote";
+  
+
+  vanvcol31 = "vandilote";
+  vanvcol32 ="vandilote";
+  vanvcol33 ="vandilote";
+  vanvcol34 ="vandilote";
+
+  vanvcol41 = "vandilote";
+  vanvcol42 ="vandilote";
+  vanvcol43 ="vandilote";
+  vanvcol44 ="vandilote";
+
   //测试
   demo() {
     this.$router.push({
-      path: "/CustomerMgtView"
-    }
-    )
+      path: "/CustomerMgtView",
+    });
   }
+
+
   //div列表
+
   applicaList: any = [
     {
       name: "产品金额（万元）",
       max: "最高",
       min: "最低",
-      fristsize: "1-100",
-      secondsize: "100-500",
-      thirdsize: "500-1000",
-      foursize: "1000-2000"
+      fristsize: "1~100",
+      secondsize: "100~500",
+      thirdsize: "500~1000",
+      foursize: "1000~2000",
+      select: null,
     },
     {
       name: "产品期限(月)",
       max: "最高",
       min: "最低",
-      fristsize: "1-100",
-      secondsize: "100-500",
-      thirdsize: "500-1000",
-      foursize: "1000-2000"
+      fristsize: "1~12",
+      secondsize: "1~24",
+      thirdsize: "12~24",
+      foursize: "12~36",
+      select: null,
     },
     {
       name: "产品利率(%)",
       max: "最高",
       min: "最低",
-      fristsize: "1-100",
-      secondsize: "100-500",
-      thirdsize: "500-1000",
-      foursize: "1000-2000"
+      fristsize: "1~3%",
+      secondsize: "2~4%",
+      thirdsize: "3~5%",
+      foursize: "4~6%",
+      select: null,
     },
     {
       name: "担保方式",
@@ -277,8 +468,10 @@ export default class Main extends Vue {
       fristsize: "抵押",
       secondsize: "质押",
       thirdsize: "信用",
-      foursize: "保证"
+      foursize: "保证",
+      select: null,
     },
+
     // {
     //   name: "产品金额（万元）",
     //   max: "最高",
@@ -306,7 +499,7 @@ export default class Main extends Vue {
     //   thirdsize: "500-1000",
     //   foursize: "1000-2000"
     // }
-  ]
+  ];
   //金额
   applicaform: any = [
     {
@@ -316,44 +509,31 @@ export default class Main extends Vue {
       fristsize: "1-100",
       secondsize: "100-500",
       thirdsize: "500-1000",
-      foursize: "1000-2000"
-    }
-  ]
+      foursize: "1000-2000",
+    },
+  ];
 
   //按钮
   tabbarlist: any = {
     name: "首页",
-    flag: true
-  }
-
+    flag: true,
+  };
 
-  productList: ProductData[] = [{
-    productname: "金融消费贷", //产品名称
-    describe: "一次核查 三年有效 随用随贷 循环使用",//描述
-    limitrange: "1000~2000",//额度范围
-    interestrate: "19%~20%",//利率
-    loanterm: "89个月",//贷款期限
-  },
-  {
-    productname: "白领贷", //产品名称
-    describe: "额度较大 使用人群 工薪阶级",//描述
-    limitrange: "1000~2000",//额度范围
-    interestrate: "19%~20%",//利率
-    loanterm: "89个月",//贷款期限
-  }, {
-    productname: "金融消费贷", //产品名称
-    describe: "1年100万",//描述
-    limitrange: "1000~2000",//额度范围
-    interestrate: "19%~20%",//利率
-    loanterm: "89个月",//贷款期限
-  },
-  {
-    productname: "金融消费贷", //产品名称
-    describe: "1年100万",//描述
-    limitrange: "1000~2000",//额度范围
-    interestrate: "19%~20%",//利率
-    loanterm: "89个月",//贷款期限
-  }
+  productList: ProductData[] = [
+    {
+      productname: "金融消费贷", //产品名称
+      describe: "1年100万", //描述
+      limitrange: "1000~2000", //额度范围
+      interestrate: "19%~20%", //利率
+      loanterm: "89个月", //贷款期限
+    },
+    {
+      productname: "金融消费贷", //产品名称
+      describe: "1年100万三年内还清了", //描述
+      limitrange: "1000~2000", //额度范围
+      interestrate: "19%~20%", //利率
+      loanterm: "89个月", //贷款期限
+    },
   ];
   //点击picket跳转界面
   onClickPicket() {
@@ -363,9 +543,138 @@ export default class Main extends Vue {
       // params:{
       //   data:""
       // }
-    })
+    });
   }
-}
+    //切换
+  clickButton1(index: number,item:number) {
+    var select =this.applicaList[index].sellet=item;
+  
+    console.log( this.applicaList[index].sellet);
+      if (item=== 1) {
+        this.vanvcol11 = "vancoll";
+        
+        this.vanvcol12 = "vandilote";
+        this.vanvcol13 = "vandilote";
+        this.vanvcol14 = "vandilote";
+         console.log( this.applicaList[index].sellet);
+      } else if(item=== 2){
+        this.vanvcol11 = "vandilote";
+        
+        this.vanvcol12 = "vancoll";
+        this.vanvcol13 = "vandilote";
+        this.vanvcol14 = "vandilote";
+      }else if(item=== 3){
+        this.vanvcol11 = "vandilote";
+        
+        this.vanvcol12 = "vandilote";
+        this.vanvcol13 = "vancoll";
+        this.vanvcol14 = "vandilote";
+      }
+      else if(item=== 4){
+        this.vanvcol11 = "vandilote";
+        
+        this.vanvcol12 = "vandilote";
+        this.vanvcol13 = "vandilote";
+        this.vanvcol14 = "vancoll";
+      }
+    
+    }
+
+    clickButton2(index: number,item:number) {
+    var select =this.applicaList[index].sellet=item;
+  
+    console.log( this.applicaList[index].sellet);
+      if (item=== 1) {
+        this.vanvcol21 = "vancoll";
+        this.vanvcol22 = "vandilote";
+        this.vanvcol23 = "vandilote";
+        this.vanvcol24 = "vandilote";
+         console.log( this.applicaList[index].sellet);
+      } else if(item=== 2){
+        this.vanvcol21 = "vandilote";
+        this.vanvcol22 = "vancoll";
+        this.vanvcol23 = "vandilote";
+        this.vanvcol24 = "vandilote";
+      }else if(item=== 3){
+        this.vanvcol21 = "vandilote";
+        this.vanvcol22 = "vandilote";
+        this.vanvcol23 = "vancoll";
+        this.vanvcol24 = "vandilote";
+      }
+      else if(item=== 4){
+        this.vanvcol21 = "vandilote";
+        this.vanvcol22 = "vandilote";
+        this.vanvcol23 = "vandilote";
+        this.vanvcol24 = "vancoll";
+      }
+    
+    }
+
+    clickButton3(index: number,item:number) {
+    var select =this.applicaList[index].sellet=item;
+  
+    console.log( this.applicaList[index].sellet);
+      if (item=== 1) {
+        this.vanvcol31 = "vancoll";
+        this.vanvcol32 = "vandilote";
+        this.vanvcol33 = "vandilote";
+        this.vanvcol34 = "vandilote";
+         console.log( this.applicaList[index].sellet);
+      } else if(item=== 2){
+        this.vanvcol31 = "vandilote";
+        this.vanvcol32 = "vancoll";
+        this.vanvcol33 = "vandilote";
+        this.vanvcol34 = "vandilote";
+      }else if(item=== 3){
+        this.vanvcol31 = "vandilote";
+        this.vanvcol32 = "vandilote";
+        this.vanvcol33 = "vancoll";
+        this.vanvcol34 = "vandilote";
+      }
+      else if(item=== 4){
+        this.vanvcol31 = "vandilote";
+        this.vanvcol32 = "vandilote";
+        this.vanvcol33 = "vandilote";
+        this.vanvcol34 = "vancoll";
+      }
+    
+    }
+
+       clickButton4(index: number,item:number) {
+    var select =this.applicaList[index].sellet=item;
+  
+    console.log( this.applicaList[index].sellet);
+      if (item=== 1) {
+        this.vanvcol41 = "vancoll";
+        this.vanvcol42 = "vandilote";
+        this.vanvcol43 = "vandilote";
+        this.vanvcol44 = "vandilote";
+         console.log( this.applicaList[index].sellet);
+      } else if(item=== 2){
+        this.vanvcol41 = "vandilote";
+        this.vanvcol42 = "vancoll";
+        this.vanvcol43 = "vandilote";
+        this.vanvcol44 = "vandilote";
+      }else if(item=== 3){
+        this.vanvcol41 = "vandilote";
+        this.vanvcol42 = "vandilote";
+        this.vanvcol43 = "vancoll";
+        this.vanvcol44 = "vandilote";
+      }
+      else if(item=== 4){
+        this.vanvcol41 = "vandilote";
+        this.vanvcol42 = "vandilote";
+        this.vanvcol43 = "vandilote";
+        this.vanvcol44 = "vancoll";
+      }
+    
+    }
+   
+  }
+  
+
+  
+
 </script>
 <style scoped lang="scss">
 .roll {
@@ -379,7 +688,14 @@ export default class Main extends Vue {
   border-radius: 12px;
   color: #a2d2f4;
 }
-
+.vancoll {
+  text-align: center;
+  background-color: rgba(242, 242, 242, 1);
+  font-size: 12px;
+  line-height: 40px;
+  border-radius: 4px;
+  background: #1890ff;
+}
 .prudect {
   line-height: 100%;
   margin-top: 40px;
@@ -453,4 +769,7 @@ export default class Main extends Vue {
   overflow: hidden;
   height: 100%;
 }
+#fristsize {
+  background-color: #1890ff;
+}
 </style>
-- 
2.22.0