添加签证列表

src/assets/css/reset.css

@@ -7,4 +7,7 @@
 }
 .orange{
     color:#FF6633;
+}
+.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{
+    color: #EE4454;
 }
\ No newline at end of file

src/components/visa/VisaHomePage.vue

@@ -7,7 +7,7 @@
             </div>
                 
         <div class="search-box" :style="{'width':searchBoxWidth,'left':searchBoxLeft}">
-            <div class="chosen-item">旅游</div>
+            <div class="chosen-item">签证</div>
             <div class="search-content">
                 <el-row>
                     <el-col :span="2" style="text-align:center">
@@ -99,6 +99,7 @@
                     <p style="text-align:center;font-family:PingFang;font-size:14px;">Special Offers</p>
 
                     <div class="Qzlist">   
+                        
                         <div>
                             <div>
                                 <img src="../../assets/img/visa/rd.png" alt="">
@@ -109,8 +110,7 @@
                                 <p>
                                     <span class="gq">个签</span>
                                 </p>
-                            </div>
-
+                            </div>  
                         </div>
                         <div>
                             <div>
@@ -229,7 +229,7 @@
                         </div>
                     </div>
                     <div style="text-align:center;padding-top:15px;">
-                        <el-button class="country_btn" style="color: ##999999;" size="mini">查看更多 <i class="iconfont icon-gengduo"></i><i class="iconfont icon-gengduo"></i></el-button>
+                        <el-button @click="goUrlVisaList" class="country_btn" style="color: ##999999;" size="mini">查看更多 <i class="iconfont icon-gengduo"></i><i class="iconfont icon-gengduo"></i></el-button>
                     </div>
                 </div>
             </el-col>
@@ -329,6 +329,9 @@ export default {
         this.loadSwiper()
     },
     methods: {
+        goUrlVisaList(){
+            this.$router.push({path: `/Visalist`});
+        },
         leave(){
             this.CountryHover=false;
         },
@@ -365,6 +368,10 @@ export default {
 </script>
 <style scoped>
     @import url('../../assets/mall/swiper.css');
+    a{
+        text-decoration: none;
+        color:#606266;
+    }
     .visa_process .visa_xz{
         position: absolute;
         width: 0;

src/components/visa/Visalist.vue

+<template>
+  <div class="visaList">
+      <div style="box-shadow:0px 4px 8px 0px rgba(107,107,107,0.18);padding:10px 0">
+        <el-row :gutter="20">
+            <el-col :span="18" :offset="3">
+                <ul class="top_ul">
+                    <li>
+                        <img src="../../assets/img/visa/rb.png" alt="">
+                        <p>日本签证</p>
+                    </li>
+                    <li>
+                        <img src="../../assets/img/visa/rb.png" alt="">
+                        <p>日本签证</p>
+                    </li>
+                    <li>
+                        <img src="../../assets/img/visa/rb.png" alt="">
+                        <p>日本签证</p>
+                    </li>
+                    <li>
+                        <div class="top_ul_li_last"><i class="iconfont icon-diandian"></i></div>
+                        
+                        <p>陆续开通中</p>
+                    </li>
+                </ul>
+            </el-col>
+        </el-row>
+      </div>
+        <el-row :gutter="20" style="background:#F5F5F5;padding-bottom:40px">
+            <el-col :span="18" :offset="3">
+                <!-- 选择条件 -->
+                <div class="Selectconditions">
+                    <div>
+                        <div class="select_title">常住地</div>
+                        <ul class="select_ul">
+                            <li>成都(15)</li>
+                        </ul>
+                        <span>收起</span>
+                    </div>
+                    <div>
+                        <div class="select_title">签证类型</div>
+                        <ul class="select_ul">
+                            <li>个人旅游（15）</li>
+                        </ul>
+                    </div>
+                    <div>
+                        <div class="select_title" style="top:15px">产品标签</div>
+                        <div class="select_ul">
+                             <el-select multiple size="mini" style="width:400px" v-model="value4" clearable placeholder="请选择">
+                                <el-option
+                                v-for="item in options"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </div>
+                    </div>
+                    <div style="border:none">
+                        <div class="select_title" style="top:15px">特色服务</div>
+                        <div class="select_ul">
+                             <el-select multiple size="mini" style="width:400px" v-model="value4" clearable placeholder="请选择">
+                                <el-option
+                                v-for="item in options"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value">
+                                </el-option>
+                            </el-select>
+                        </div>
+                    </div>
+                </div>
+            </el-col>
+        </el-row>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      options: [{
+          value: '选项1',
+          label: '黄金糕'
+        }, {
+          value: '选项2',
+          label: '双皮奶'
+        }, {
+          value: '选项3',
+          label: '蚵仔煎'
+        }, {
+          value: '选项4',
+          label: '龙须面'
+        }, {
+          value: '选项5',
+          label: '北京烤鸭'
+        }],
+        value4: ''
+    }
+  },
+  mounted() {
+    
+    
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<style scoped>
+@import "../../assets/css/reset.css";
+.Selectconditions .select_ul{
+    padding-left:70px;
+    box-sizing: border-box;
+    width: 100%;
+}
+.Selectconditions .select_title{
+    position: absolute;
+    /* font-size:14px; */
+    font-weight:bold;
+    color:#333333;
+    /* top: 8px; */
+
+}
+.Selectconditions>div{
+    position: relative;
+    border-bottom: 1px solid #E6E6E6;
+    /* margin:10px 0; */
+    padding:10px 0;
+}
+.Selectconditions{
+    background: #fff;
+    padding:0 15px;
+    box-sizing: border-box;
+    border:1px solid rgba(236,236,236,1);
+    margin-top: 10px;
+    font-size: 12px;
+}
+.visaList .top_ul .top_ul_li_last .icon-diandian{
+    font-size: 26px;
+    color:#B3B3B3;
+}
+.visaList .top_ul .top_ul_li_last{
+    width:61px;
+    height:41px;
+    background:rgba(236,236,236,1);
+    border:1px solid rgba(236,236,236,1);
+    border-radius:2px;
+    line-height: 41px;
+}
+ul{
+    margin:0;
+    padding:0;
+}
+.visaList .top_ul li:hover{
+    color:#EE4454;
+    font-weight:bold;
+}
+.visaList .top_ul li{
+    font-size:12px;
+    font-weight:400;
+    color:#666666;
+    display: inline-block;
+    text-align: center;
+    cursor: pointer;
+    margin-right:20px;
+}
+.visaList .top_ul li img{
+    width: 62px;
+    height: 41px;
+}
+li{
+    list-style: none;
+}
+p{
+    margin:0;
+}
+.visaList{
+    font-family: "PingFang"
+}
+
+</style>

src/router.js

@@ -229,6 +229,15 @@ export default new Router({
             title: "签证"
           }
         },
+        {
+          path: "/Visalist",
+          name: "Visalist",
+          component: resolve =>
+            require(["@/components/visa/Visalist"], resolve),
+          meta: {
+            title: "签证列表"
+          }
+        },
         {
           path: "/IndependentTravel",
           name: "IndependentTravel",