Merge branch 'igirl-web' of gitlab.gongsibao.com:jiangyong/zhichan into igirl-web

igirl-web/app/front/vues/pages/moreservice/policy/moreservice.html

@@ -10,11 +10,14 @@
       <div class="meihua-inquire-input">
             <div class="lists">
                     <div 
-                    v-for="(item,key) in checkBoxArr"
-                    :key="key">
+                    :class="activeClass == index ? \'active\' : \'acitves\'" 
+                    @click="getItme(index)"
+                    v-for="(item,index) in checkBoxArr"
+                    :key="index">
                       {{item}}
                     </div>
                    </div>
+                  <div style="margin-top: 10px;"></div>
           <div class="policy-input-value">
               <el-input style="width:100%" v-model="state2" placeholder="输入您要查询的关键字"></el-input>
               <transition name="el-zoom-in-top">

igirl-web/app/front/vues/pages/moreservice/policy/moreservice.js

@@ -26,7 +26,7 @@
             "搜企业"
            
           ],
-          checkBoxSeleArr: [],
+          activeClass: 0, 
         }
     },
     mounted:function(){
@@ -194,6 +194,9 @@
           return ;
         }*/
       },
+      getItme(index) {
+        this.activeClass = index; 
+      },
     },
     computed:{
     },

igirl-web/app/front/vues/pages/moreservice/policy/policy.css

@@ -3,4 +3,54 @@
 }
 .policy-input-buttom{
         height: 61px !important;
-}
\ No newline at end of file
+}
+.active {
+        background: #1e82d2;
+        width: 77px;
+        height: 27px;
+        font-size:14px;
+        letter-spacing:1px;
+        text-align: center;
+        line-height: 27px;
+        color:#fff;
+        cursor: pointer;
+      }
+      .active:before,.active:after{
+        width: 0;
+        height: 0;
+        border: solid transparent;
+        position: absolute;
+        left: 100%;
+        content:''; 
+      }
+      .active:before{
+        border-width: 10px;
+        border-left-color: #0cc;
+        top:20px;
+      }
+      .active:after{
+          border-width: 8px;
+          border-left-color: #fff;
+          top:22px;
+    
+      }
+      .acitves{
+        width: 77px;
+        height: 27px;
+        font-size:14px;
+        letter-spacing:1px;
+        text-align: center;
+        line-height: 27px;
+        color:#fff;  
+        cursor: pointer; 
+      }
+
+      .lists{
+        display: flex;
+        height: 27px;
+        font-size:14px;
+        letter-spacing:1px;
+        text-align: center;
+        line-height: 27px;
+        color: #fff;
+      }