Skip to content

A
Athena
Commit 605f7734 authored by huangyuanyuan's avatar huangyuanyuan
Browse files
Options

update

parent 1f1c6ce6
Show whitespace changes
Inline Side-by-side
Showing with 556 additions and 16 deletions
src/App.vue
View file @ 605f7734
......@@ -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
View file @ 605f7734
......@@ -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/Visaitemsdetails.vue 0 → 100644
View file @ 605f7734
<template>
<div class="Visaitemsdetails">
<el-row :gutter="20">
<el-col :span="18" :offset="3">
<div>
<p style="font-size:12px;margin:20px 0">
<span style="color:#EE4454">签证办理<i class="iconfont icon-gengduo1"></i></span>
<span style="color:#EE4454">日本<i class="iconfont icon-gengduo1"></i></span>
日本旅游签证【成都送签】·拒签全退+顺丰回邮+可停留30天
</p>
</div>
<el-row class="details">
<el-col :span="6">
<img src="../../assets/img/visa/Qzlist.png" alt="">
</el-col>
<el-col style="font-size:12px" :span="18">
<p style="font-weight:400;font-size:18px">日本旅游签证【成都送签】·拒签全退+顺丰回邮+可停留30天</p>
<p><span class="visa_type">个签</span></p>
<p class="visa_des">
<span>签证类型：<span>个人旅游类</span></span>
<span>送签底：<span>成都</span></span>
<span>入境次数：<span>多次</span></span>
</p>
<p>有效时间：<span style="color:#7e7e7e">2019年3月22日</span></p>
<p style="text-align:right">
<span style="font-size:12px;margin:0 20px">价格：￥<span style="color:#FF680B;font-size:18px">489</span><span style="color:#FF680B;font-size:12px">起</span></span>
<el-button size="small" style="border:none;background:#EE4454;color:#fff;">立即购买</el-button>
</p>
</el-col>
</el-row>
<div ref="navs">
<el-row :class="changeNav?'tips_fixed':''" class="tips">
<el-col :span="4">
<div :class="crtnav=='ydxz'?'tips_active':''" class="tips_div" @click="goScroll('ydxz')">
<i class="iconfont icon-qianzhengshuoming"></i>
<p>预定须知</p>
</div>
</el-col>
<el-col :span="4">
<div :class="crtnav=='fysm'?'tips_active':''" class="tips_div" @click="goScroll('fysm')">
<i class="iconfont icon-feiyongshuoming"></i>
<p>费用说明</p>
</div>
</el-col>
<el-col :span="4">
<div :class="crtnav=='qzcl'?'tips_active':''" class="tips_div" @click="goScroll('qzcl')">
<i class="iconfont icon-qianzhengcailiaohedui"></i>
<p>签证材料</p>
</div>
</el-col>
<el-col :span="4">
<div :class="crtnav=='wxts'?'tips_active':''" class="tips_div" @click="goScroll('wxts')">
<i class="iconfont icon-wenxintishi1"></i>
<p>温馨提示</p>
</div>
</el-col>
<el-col :span="4">
<div :class="crtnav=='ydlc'?'tips_active':''" class="tips_div" @click="goScroll('ydlc')">
<i class="iconfont icon-liucheng"></i>
<p>预定流程</p>
</div>
</el-col>
<el-col :span="4" style="color:#FF680B">
TEL:028-8888888
</el-col>
</el-row>
</div>
<!-- 预订须知 -->
<div class="process" id='ydxz'>
<div class="process_title" style="text-align:center">
<p class="ch">预订须知</p>
<span></span>
<p class="en">Booking information</p>
</div>
</div>
<!-- 费用说明 -->
<div class="process" id="fysm">
<div class="process_title" style="text-align:center">
<p class="ch">费用说明</p>
<span></span>
<p class="en">Cost description</p>
</div>
</div>
<!-- 签证材料 -->
<div class="process" id="qzcl">
<div class="process_title" style="text-align:center">
<p class="ch">签证材料</p>
<span></span>
<p class="en">Visa materials</p>
</div>
</div>
<!-- 温馨提示 -->
<div class="process" id="wxts">
<div class="process_title" style="text-align:center">
<p class="ch">温馨提示</p>
<span></span>
<p class="en">kindly reminder</p>
</div>
</div>
<!-- 预定流程 -->
<div class="process" id="ydlc">
<div class="process_title" style="text-align:center">
<p class="ch">预定流程</p>
<span></span>
<p class="en">Booking process</p>
</div>
<div style="position:relative;background:#F5F5F5;width:98%;margin:10px auto;padding-bottom:15px">
<div class="base_content div1">
<span class="back_span">
<i class="iconfont icon-diannao"></i>
</span><br>
<span class="s_line"></span>
<br>
<div style="position:relative;">
<div class="baseline"></div>
<span class="number_circle">1</span>
</div>
<p style="margin-top:20px;font-size:14px;">网上预订及付款</p>
</div>
<div class="base_content div1">
<span class="back_span">
<i class="iconfont icon-cailiao"></i>
</span><br>
<span class="s_line"></span>
<br>
<div style="position:relative;">
<div class="baseline"></div>
<span class="number_circle">2</span>
</div>
<p style="margin-top:20px;font-size:14px;">递交材料</p>
</div>
<div class="base_content div1">
<span class="back_span">
<i class="iconfont icon-cailiaoshenhe"></i>
</span><br>
<span class="s_line"></span>
<br>
<div style="position:relative;">
<div class="baseline"></div>
<span class="number_circle">3</span>
</div>
<p style="margin-top:20px;font-size:14px;">材料审核</p>
</div>
<div class="base_content div1">
<span class="back_span">
<i class="iconfont icon-tijiaoshiguan"></i>
</span><br>
<span class="s_line"></span>
<br>
<div style="position:relative;">
<div class="baseline"></div>
<span class="number_circle">4</span>
</div>
<p style="margin-top:20px;font-size:14px;">使馆办理</p>
</div>
<div class="base_content div1">
<span class="back_span">
<i class="iconfont icon-chuqianbingpeisong"></i>
</span><br>
<span class="s_line"></span>
<br>
<div style="position:relative;">
<div class="baseline"></div>
<span class="number_circle">5</span>
</div>
<p style="margin-top:20px;font-size:14px;">出签送签</p>
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data () {
return {
scrollobj:null,
navs:[
'ydxz',
'fysm',
'qzcl',
'wxts',
'ydlc',
],
crtnav:"ydxz",
changeNav:false,
}
},
mounted() {
this.scrollobj=document.getElementsByClassName('el-scrollbar__wrap')[0];
this.scrollobj.addEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll(){
try {
if(this.scrollobj.scrollTop>this.$refs.navs.offsetTop){
this.changeNav=true
}else{
this.changeNav=false
}
let current=''
this.navs.forEach(x=>{
let t=document.getElementById(x).offsetTop
if(t<=this.scrollobj.scrollTop+18){
current=x
}
})
this.crtnav=current
} catch (error) {
}
},
goScroll(id){
this.scrollobj.scrollTop=document.getElementById(id).offsetTop+screen.availHeight-1200;
},
}
}
</script>
<style scoped>
.tips_fixed{
position: fixed;
top: 0;
width:100%;
box-shadow:0px 4px 8px 0px rgba(107,107,107,0.18);
left: 0;
margin-top: 0!important;
}
.tips_active{
background: #EE4454;
color: #fff!important;
}
.process_title .ch{
font-size:18px;color:#000000
}
.process_title span{
display:inline-block;width:32px;height:2px;background:rgba(231,62,109,1);
}
.process_title .en{
color:#CCCCCC;font-size:12px;
}
.process .baseline{
position: absolute;
top:8px;
height:1px;
background:#999999;
width: 100%;
z-index:0;
}
.process .number_circle{
position: absolute;
display: inline-block;
width:21px;
left: 46%;
top: -5px;
height:21px;
background:rgba(51,51,51,1);
border-radius:50%;
z-index:200;
color:#fff;
font-size: 12px;
line-height: 21px;
}
.process .s_line{
display: inline-block;
width:1px;
height:18px;
background:rgba(51,51,51,1);
}
.process .base_content{
padding-top:24px;
width: 20%;
text-align: center;
display: inline-block;
}
.process .div1 .back_span .iconfont{
font-size: 30px;
color: #fff;
}
.process .div1 .back_span{
width:81px;
height:81px;
background:rgba(102,102,102,1);
border-radius:50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.process{
padding:20px 0;
margin-top:20px;
background: #fff;
}
.process p{
margin:0;
padding: 0;
}
.Visaitemsdetails .tips .tips_div:hover{
background: #EE4454;
color: #fff;
cursor: pointer;
}
.Visaitemsdetails .tips{
margin-top: 20px;
background: #fff;
padding:15px;
box-sizing: border-box;
display: flex;
align-items: center;
}
.Visaitemsdetails .tips .tips_div p{
margin-top: 4px;
}
.Visaitemsdetails .tips .tips_div{
text-align: center;
width:150px;
border:1px solid rgba(229,229,229,1);
border-radius:4px;
padding:10px 0;
color: #7E7E7E;
}
.Visaitemsdetails .tips p{
margin:0;
font-size: 14px;
}
.visa_des span span{
color: #7e7e7e;
}
.visa_des span{
margin-right:35px;
}
.Visaitemsdetails .details .visa_type{
padding:2px 4px;
background: #6EA3F1;
font-size: 12px;
color:#fff;
}
.Visaitemsdetails .details img{
width: 310px;
}
.Visaitemsdetails .details{
padding: 20px;
box-sizing: border-box;
background: #fff;
}
.Visaitemsdetails{
background: #f5f5f5;
padding-bottom:20px;
}
.Visaitemsdetails .icon-gengduo1{
font-size: 12px;
color: #7e7e7e;
margin:0 4px;
}
</style>
src/components/visa/Visalist.vue
View file @ 605f7734
......@@ -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
View file @ 605f7734
......@@ -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",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment