update

src/App.vue

@@ -59,7 +59,7 @@ export default {
 
 <style>
 @import './assets/global/font.css';
-@import '//at.alicdn.com/t/font_863923_2ymixipq7o3.css';
+@import '//at.alicdn.com/t/font_863923_lhegred4hm.css';
 @import './assets/global/global.css';
 body,html{
   padding: 0px;

src/components/visa/VisaHomePage.vue

@@ -229,7 +229,7 @@
                         </div>
                     </div>
                     <div style="text-align:center;padding-top:15px;">
-                        <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>
+                        <el-button @click="goUrlVisaList" class="country_btn" style="color: ##999999;" size="mini">查看更多 <i class="iconfont icon-gengduo1"></i></el-button>
                     </div>
                 </div>
             </el-col>
@@ -300,12 +300,36 @@
                         </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 class="country_btn" style="color: ##999999;" size="mini">查看更多 <i class="iconfont icon-gengduo1"></i></el-button>
                     </div>
                 </div>
             </el-col>
         </el-row> 
         </div> 
+        <!-- 签证办理常见问题 -->
+        <!-- 热门签证 -->
+        <div style="padding:20px 0;background:#f5f5f5">
+            <el-row class="Common_problem" :gutter="20">
+            <el-col :span="18" :offset="3">
+                <p style="font-size:18px;color:#333333;padding:15px 0">签证办理常见问题</p>
+                <el-row type="flex" justify="space-between">
+                    <el-col :span="11">
+                    <span class="circle"></span>
+                    <span style="font-size:14px;margin-left:4px">个别材料无法提供是否影响出签率？</span>
+                    <div style="color:#999999;padding:4px 0;font-size:12px">
+                        亲，我司批露所需材料均是领馆要求提供哦，如个别材料无法提供将会影响您的出签率，请尽可能准备齐全所有材料。
+                    </div>
+                </el-col>
+                <el-col :span="11">
+                    <span class="circle"></span>
+                    销签/面试销签其实很重要?
+                </el-col>
+                </el-row>
+                
+                
+            </el-col>
+        </el-row> 
+        </div> 
     </div>
 </template>
 <script>
@@ -368,6 +392,17 @@ export default {
 </script>
 <style scoped>
     @import url('../../assets/mall/swiper.css');
+    .Common_problem{
+        font-size: 14px;
+        color:#000000;
+    }
+    .Common_problem .circle{
+        display: inline-block;
+        width:6px;
+        height:6px;
+        background:rgba(86,145,233,1);
+        border-radius:50%;
+    }
     a{
         text-decoration: none;
         color:#606266;
@@ -409,8 +444,8 @@ export default {
     .popular_coun_hover{
         position: absolute;
         bottom:0;
-        width:224px;
-        height: 214px;
+        width:90%;
+        height:90%;
         left: -5px;
         background: #6BA0EE;
         border-radius: 4px;
@@ -446,10 +481,19 @@ export default {
         justify-content: space-between;
         flex-wrap: wrap;
     }
+    .visa_flex .el-col:hover{
+        background:rgba(242,242,242,1);
+        cursor: pointer;
+        transition: all linear 0.5s;
+        box-shadow:0px 4px 8px 0px rgba(51,51,51,0.5);
+    }
     .visa_flex .el-col{
         position: relative;
-        width: 20%;
+        width: 19%;
+        margin-right:0.8%;
         margin-bottom: 15px;
+        padding: 6px;
+        box-sizing: border-box;
     }
 
     .country_btn:hover{
@@ -457,9 +501,8 @@ export default {
         color: #fff!important;
         border: 1px solid #EE4454;
     }
-    .visahome .icon-gengduo{
+    .visahome .icon-gengduo1{
         font-size: 12px;
-        
     }
     .row_flex .country_side .country_img{
         height: 32px;
@@ -486,9 +529,10 @@ export default {
     }
     .row_flex>div{
         position: relative;
-        width: 224px;
-        height: 224px;
-        display: inline-block;
+        width:18%;
+        /* width: 224px;
+        height: 224px; */
+        /* display: inline-block; */
         cursor: pointer;
     }
     .row_flex>div img{
@@ -511,7 +555,6 @@ export default {
         font-size: 14px;
     }
     .visahome .Qzlist>div>div{
-        padding-top:50px;
         vertical-align: middle;
         display: inline-block;
         margin:0 10px;
@@ -530,9 +573,10 @@ export default {
         font-family: "PingFang"
     }
     .visahome .Qzlist>div{
-         display: inline-block;
+         display: inline-flex;
          width: 299px;
          height: 190px;
+         align-items: center;
     }
     .dashed{
         display: block;

src/components/visa/Visalist.vue

@@ -33,13 +33,18 @@
                         <div class="select_title">常住地</div>
                         <ul class="select_ul">
                             <li>成都(15)</li>
+                            <li>巴啦啦大(15)</li>
+                            <ul v-show="selectcon">
+                               <li>成都(15)</li> 
+                            </ul>
                         </ul>
-                        <span>收起</span>
+                        <span class="czd" @click="ChangeSelect">{{selectcontext}}<i :class="selectcon?'rolate':''" class="iconfont icon-moban"></i></span>
                     </div>
                     <div>
                         <div class="select_title">签证类型</div>
                         <ul class="select_ul">
-                            <li>个人旅游（15）</li>
+                            <li>个人旅游(15)</li>
+                            <li>赠送照片打印(15)</li>
                         </ul>
                     </div>
                     <div>
@@ -69,6 +74,34 @@
                         </div>
                     </div>
                 </div>
+                <!-- 列表 -->
+                <div class="datalist">
+                    <p style="padding:8px;background:#DDDDDD;font-size:12px">
+                        <span style="display:inline-block;">时间最近
+                            <span class="noben_span"><i class="iconfont icon-moban"></i></span>
+                        </span>
+                        <span style="margin-left:15px">价格</span>
+                    </p>
+                    <div class="content_list">
+                        <el-row class="row_content">
+                            <el-col :span="3">
+                                <img src="../../assets/img/visa/country1.png" alt="">
+                            </el-col>
+                            <el-col class="div_2" :span="16" style="font-size:12px">
+                                <p @click="GourlItem" class="visa_title" style="font-size:16px;color:#000000">日本旅游签证[成都送签]·拒签全退+顺丰回邮+可停留30天</p>
+                                <p><span class=tag>单次</span><span class=tag>简化材料</span></p>
+                                <p>出发日期：最早04-06出发</p>
+                                <p>提前预定：5个工作日</p>
+                            </el-col>
+                            <el-col :span="2" style="color:#FF680B;font-size:16px;text-align:right">
+                                <span>￥489</span><span style="font-size:12px">起</span>       
+                            </el-col>
+                            <el-col :span="3" style="text-align:right">
+                                <el-button @click="GourlItem" size="small" style="border:1px solid #FF6633;color:#FF6633;">立即预定</el-button>
+                            </el-col>
+                        </el-row>
+                    </div>
+                </div>
             </el-col>
         </el-row>
   </div>
@@ -77,6 +110,8 @@
 export default {
   data () {
     return {
+        selectcon:false,
+        selectcontext:"展开",
       options: [{
           value: '选项1',
           label: '黄金糕'
@@ -101,13 +136,93 @@ export default {
     
   },
   methods: {
-    
+      GourlItem(){
+          this.$router.push({path: `/Visaitemsdetails`});
+      },
+      
+    ChangeSelect(){
+        this.selectcon=!this.selectcon;
+        this.selectcon?this.selectcontext='收起':this.selectcontext='展开'
+    },
   }
 }
 </script>
 
 <style scoped>
 @import "../../assets/css/reset.css";
+ .content_list .row_content .visa_title:hover{
+    color: #EE4454!important;
+    text-decoration: underline;
+    cursor: pointer;
+}
+ .content_list .row_content .div_2 p{
+     padding:4px 0;
+     font-weight:400;
+     color:#333333;
+ }
+ .visaList .datalist .content_list .row_content:nth-last-child(1){
+     border: none;
+ }
+.visaList .datalist .content_list  .row_content{
+    border-bottom: 1px solid #E6E6E6;
+    padding: 10px 0;
+    display: flex;
+    align-items: center;
+    
+}
+.visaList .datalist .content_list{
+    padding: 15px;
+    box-sizing: border-box;
+}
+.visaList .datalist .content_list .tag{
+    border-radius: 4px;
+    border:1px solid #DFDFDF;
+    color:#666666;
+    font-weight: 400;
+    font-size: 12px;
+}
+.visaList .datalist .content_list img{
+    width: 120px;
+}
+.visaList .datalist  .icon-moban{
+    font-size: 10px;
+}
+.visaList .datalist .noben_span{
+    display: inline-flex;
+    align-items: center;
+    vertical-align: bottom;
+    
+}
+.visaList .datalist{
+    background: #fff;
+}
+.visaList .rolate{
+    transform:rotateX(180deg);
+    margin-top: -5px!important;
+     transition: all 0.2s;
+}
+.select_ul li{
+    display: inline-block;
+    padding-bottom:6px; 
+    width: 100px;
+    cursor: pointer;
+    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
+}
+.visaList .czd{
+    position: absolute;
+    right: 6px;
+    top: 8px;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: #333333;
+    cursor: pointer;
+}
+.czd .icon-moban{
+    font-size: 12px;
+    margin-top: 5px;
+    margin-left: 6px;
+}
 .Selectconditions .select_ul{
     padding-left:70px;
     box-sizing: border-box;

src/router.js

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