Skip to content

A
Athena
Commit 325dd79e authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

新增自由行首页

parent 046050c8
Show whitespace changes
Inline Side-by-side
Showing with 975 additions and 62 deletions
src/App.vue
View file @ 325dd79e
...@@ -101,7 +101,7 @@ export default { ...@@ -101,7 +101,7 @@ export default {
<style> <style>
@import './assets/global/font.css'; @import './assets/global/font.css';
@import '//at.alicdn.com/t/font_863923_j05ygogmy0l.css'; @import '//at.alicdn.com/t/font_863923_vy92y4agl2.css';
@import './assets/global/global.css'; @import './assets/global/global.css';
@import './assets/css/common.css'; @import './assets/css/common.css';
body,html{ body,html{
......
src/components/FreeTravel/FreeHome.vue 0 → 100644
View file @ 325dd79e
<style>
.FreeHome{
background-color: antiquewhite;
background: url(../../assets/img/freeHome/bg-banner2.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
min-height: 1200px;
}
.FreeHome>div{
width: 1200px;
margin: 0 auto;
}
.FreeHome .fh-tit{
padding: 100px 0 60px 0;
text-align: center;
font-size:36px;
}
.FreeHome .fh-tit span:nth-child(1) {
font-weight:400;
}
.fh-search-box{
width:725px;
height: 100px;
background:rgba(7,109,155,.2);
/* box-shadow:0px 2px 0px 0px rgba(0,76,119,1), 0px 2px 0px 0px rgba(95,181,221,1); */
border-radius:4px;
box-sizing: border-box;
padding: 26px 25px;
display: flex;
margin: 0 auto;
}
.fh-search-box div{
height: 46px;
display: flex;
align-items: center;
background:rgba(2,111,159,.3);
box-sizing: border-box;
padding: 0 20px;
}
.fh-search-box div:nth-child(1){
flex: 2;
}
.fh-search-box div:nth-child(1) input{
width: 100%;
border: none;
outline:none;
color: white;
background-color: transparent;
}
.fh-search-box div:nth-child(1) input::-webkit-input-placeholder {
color: white;
}
.fh-search-box div:nth-child(2){
width: 77px;
justify-content: center;
background:rgba(238,68,84,1);
color: white;
cursor: pointer;
}
.FreeHome .fh-city{
padding-top: 100px;
display: flex;
height: 280px;
}
.FreeHome .fh-city .city-s{
width: 200px;
background: url(../../assets/img/freeHome/bg.png);
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
margin-right: 6px;
}
.FreeHome .fh-city .city-s>img{
width: 185px;
height: 100%;
}
.FreeHome .fh-city .city-s>span,.FreeHome .fh-city .city-m>span{
font-size:24px;
font-family:Microsoft YaHei;
font-weight:bold;
color:rgba(255,255,255,1);
text-shadow:1px 2px 3px rgba(0, 0, 0, 0.45);
position: absolute;
right: 34px;
top: 15px;
}
.FreeHome .fh-city .city-m{
position: relative;
width: 372px;
height: 280px;
background:linear-gradient(180deg,rgba(0,0,0,0.57),rgba(0,0,0,-0.38));
border-radius:6px;
margin-right: 20px;
overflow: hidden;
}
.FreeHome .fh-city .city-m>img{
width: 100%;
height: 100%;
}
.FreeHome .fh-city .city-m .city-m-b{
display: flex;
align-items: center;
position: absolute;
bottom: 14px;
width: 100%;
padding-left: 14px;
box-sizing: border-box;
justify-content: space-around;
cursor: pointer;
}
.FreeHome .fh-city .city-m .city-m-b span{
padding: 8px 12px;
color: white;
background:rgba(255,255,255, .3);
margin-right: 16px;
cursor: pointer;
transition: all linear .5s;
}
.FreeHome .fh-city .city-m .city-m-b span:hover{
background:rgba(255,255,255, .6);
}
.FreeHome .fh-city .city-m .city-m-b span.active{
background:rgba(255,255,255, .6);
}
.FreeHome .more-city{
text-align: center;
padding-top: 40px;
}
.FreeHome .more-city div{
width:170px;
height:41px;
background:rgba(255,255,255,0.1);
box-shadow:0px 2px 27px 0px rgba(0,66,96,0.45);
color: white;
line-height:41px;
cursor: pointer;
transition: all linear .5s;
margin: 0 auto;
}
.FreeHome .more-city div:hover{
background:rgba(247,101,109,1);
}
.fh-tejia p{
padding: 100px 0 66px 0;
text-align: center;
font-weight:400;
color:rgba(51,51,51,1);
font-size:30px;
}
.fh-tejia .icon-item{
width: 400px;
margin: 0 auto;
display: flex;
justify-content: space-around;
align-items: center;
}
.fh-tejia .icon-item>div{
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.fh-tejia .icon-item>div>div{
width:48px;
height:48px;
background:rgba(255,255,255, .3);
border-radius:50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
/* transition: all linear .5s; */
}
.fh-tejia .icon-item>div>div.active,.fh-tejia .icon-item>div>div:hover{
width:68px;
height:68px;
background:radial-gradient(circle,rgba(255,133,133,1),rgba(238,68,84,1));
}
.fh-tejia .icon-item>div>div.active .iconfont,.fh-tejia .icon-item>div>div:hover .iconfont{
color: white;
}
.fh-tejia .icon-item .iconfont{
color: #F86970;
font-size: 24px;
}
.content-item{
height: 380px;
position: relative;
}
.content-item-tit{
padding: 40px 0 20px 0;
font-size:20px;
font-weight:400;
}
.content-item-box .content-item-box-hover{
position: relative;
width: 100%;
display: flex;
padding-top: 16px;
justify-content: space-between;
}
.content-item-box-hover{
width: 100%;
}
.content-item-box-item{
width: 280px;
box-sizing: border-box;
padding: 8px;
background:rgba(255,255,255,1);
box-shadow:0px 2px 5px 0px rgba(0, 96, 66, 0.35);
border-radius:6px;
position: relative;
cursor: pointer;
transition: top .5s;
top: 0px;
}
.content-item-box-item:hover{
top: -16px;
}
.content-item-box-item .img-box{
position: relative;
}
.content-item-box-item .img-box img{
width: 100%;
height: 183px;
}
.content-item-box-item .img-box .price{
position: absolute;
right: 10px;
top: 10px;
padding: 8px;
background:rgba(254,241,44,1);
border-radius:4px;
}
.content-item-box-item .img-box .price .now-p{
font-size:12px;
}
.content-item-box-item .img-box .price .now-p strong{
font-size:14px;
}
.content-item-box-item .img-box .price .now-o{
font-size:12px;
text-decoration:line-through;
color:rgba(102,102,102,1);
}
.content-item-box-item .img-box .tag{
position: absolute;
left: 10px;
bottom: 20px;
}
.content-item-box-item .img-box .tag span{
padding: 8px;
background:rgba(0,0,0, .4);
border-radius:4px;
color: #FFFFFF;
margin-right: 10px;
}
.content-item-box-item .name {
padding-top: 5px;
font-size:14px;
color:rgba(51,51,51,1);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.content-item-box2{
position: relative;
background:rgba(255,255,255,1);
box-shadow:0px 2px 5px 0px rgba(0, 96, 66, 0.35);
border-radius:6px;
padding: 10px;
cursor: pointer;
}
.content-item-box2 .img-box{
position: relative;
}
.content-item-box2 .img-box img:nth-child(1){
height: 190px;
width: 270px;
margin-right: 10px;
}
.content-item-box2 .img-box img:nth-child(2){
height: 190px;
width: 188px;
}
.content-item-box2 .img-box span{
position: absolute;
left: 10px;
top: 10px;
background: rgba(248,104,112,1);
border-radius: 4px;
color: white;
padding: 3px 7px;
font-size: 12px;
}
.content-item-box2 .img-box span strong{
font-size: 14px;
}
.content-item-box2 .content-tit{
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 5px;
}
.content-item-box2 .content-tit div:nth-child(1){
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.content-item-box2 .content-tit div:nth-child(2){
background:rgba(217,217,217,.5);
border-radius:4px;
padding: 4px 6px;
min-width: 90px;
font-size:14px;
}
.content-item-box2 .img-box2 img:nth-child(1){
height: 190px;
width: 270px;
margin-right: 10px;
}
.content-item-box2 .img-box2 img:nth-child(2){
height: 190px;
width: 188px;
margin-right: 10px;
}
.content-item-box2 .img-box2 img:nth-child(3){
height: 190px;
width: 188px;
}
.price3{
background:#F86870 !important;
}
.price3{
background:rgba(0,215,133,1) !important;
}
.price4{
background-color: #0DB9F2 !important;
}
.content-item:hover ._btn{
opacity: 1;
}
.content-item .left-btn,.content-item .right-btn{
position: absolute;
left: -56px;
top: 190px;
width: 36px;
height: 36px;
background: url(../../assets/img/freeHome/left_n.png);
background-size: 100% 100%;
background-repeat: no-repeat;
cursor: pointer;
opacity: 0;
transition: all linear .5s;
}
.content-item .left-btn:hover{
background: url(../../assets/img/freeHome/left_a.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.content-item .right-btn{
right: -56px;
left: initial;
background: url(../../assets/img/freeHome/right_n.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.content-item .right-btn:hover{
background: url(../../assets/img/freeHome/right_a.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.jingxuan{
padding-top: 170px;
padding-bottom: 155px;
}
.jingxuan>div{
position: relative;
width: 100%;
height: 700px;
background-color: white;
padding-top: 140px;
box-sizing: border-box;
box-shadow:0px 1px 5px 0px rgba(0,66,96,0.22);
border-radius:20px;
}
.jingxuan>div .tit{
width:307px;
height:128px;
background:rgba(255,255,255,0.1);
border:2px solid rgba(221, 204, 182, 1);
box-shadow:0px 2px 5px 0px rgba(28,121,133,0.66);
border-radius:6px;
position: absolute;
left: 445px;
top: -40px;
text-align: center;
}
.jingxuan>div .tit i{
position: absolute;
top: -30px;
left: 124px;
width:60px;
height:60px;
background:rgba(255,255,255,1);
border-radius:50%;
font-size:28px;
color:#CAB394;
line-height: 60px;
}
.jingxuan>div .tit p{
margin-top: 50px;
font-size:28px;
color:rgba(68,68,68,1);
}
.el-carousel__indicator{
padding: 0;
margin: 12px 4px 0 0;
}
.el-carousel__indicator.is-active{
width: 25px;
background:rgba(255,147,157,1);
border-radius:6px;
}
.el-carousel__indicator.is-active .el-carousel__button{
background:#EE4454;
float: right;
}
.el-carousel__indicators--outside button{
opacity: 1;
}
.el-carousel__button{
width:12px;
height:12px;
background:#B8B8B8;
border-radius:50%;
}
.jingxuan-item{
position: relative;
background-color: white;
}
.jingxuan-item>div{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.jingxuan-item .img-item{
margin-bottom: 5px;
position: relative;
}
.jingxuan-item .img-item:nth-child(2n){
margin-left: 5px;
}
.jingxuan-item .img-item img{
width: 253px;
height: 198px;
display: block;
}
.jingxuan-item .img-item .info{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 50px 30px 0 30px;
font-size:14px;
color:rgba(51,51,51,1);
background:rgba(254,241,44,.8);
opacity: 0;
transition: all linear .5s;
}
.jingxuan-item .img-item:hover .info{
opacity: 1;
}
.jingxuan-item .jingxuanbg{
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.top-zhezhao{
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 100%;
height: 100%;
}
.top-zhezhao .img-item{
width: 253px;
height: 198px;
}
.top-zhezhao .img-item:nth-child(1) .info{
border-top-left-radius: 182px;
padding-top: 85px;
width: 255px;
}
.top-zhezhao .img-item:nth-child(2) .info{
border-top-right-radius: 233px;
padding-top: 85px;
width: 249px;
}
.top-zhezhao .img-item:nth-child(3) .info{
border-bottom-left-radius: 170px;
width: 253px;
border-bottom-right-radius: 31px;
}
.top-zhezhao .img-item:nth-child(4) .info{
border-bottom-right-radius: 181px;
width: 249px;
border-bottom-left-radius: 31px;
}
.el-carousel__item--card.is-in-stage{
opacity: .5;
}
.el-carousel__item--card.is-active{
opacity: 1;
}
</style>
<template>
<div class="FreeHome">
<div>
<p class="fh-tit"><span>自由</span><span>行遍世界</span></p>
<div class="fh-search-box">
<div>
<input type="text" placeholder="输入目的地/景点/关键字，搜索您需要的信息..">
</div>
<div>
搜索
</div>
</div>
<div class="fh-city">
<div class="city-s">
<span>日本</span>
<img src="../../assets/img/img-01.png" alt="">
</div>
<div class="city-s">
<span>日本</span>
<img src="../../assets/img/img-01.png" alt="">
</div>
<div class="city-m">
<span>东京</span>
<img src="../../assets/img/activy.jpg" alt="">
<div class="city-m-b">
<span class="active">门票</span>
<span>餐食</span>
<span>一日游</span>
<img src="../../assets/img/freeHome/more_s.png" alt="">
</div>
</div>
<div class="city-s">
<span>日本</span>
<img src="../../assets/img/img-01.png" alt="">
</div>
<div class="city-s">
<span>日本</span>
<img src="../../assets/img/img-01.png" alt="">
</div>
</div>
<div class="more-city">
<div>
更多城市选择
</div>
</div>
<div class="fh-tejia">
<p>当季特价</p>
<div class="icon-item">
<div>
<div :class="{'active': activeId == 'menpiao'}" @click="goScroll('menpiao')">
<i class="iconfont icon-menpiao1"></i>
</div>
</div>
<div>
<div :class="{'active': activeId == 'meals'}" @click="goScroll('meals')">
<i class="iconfont icon-b-meals"></i>
</div>
</div>
<div>
<div :class="{'active': activeId == 'cheliang'}" @click="goScroll('cheliang')">
<i class="iconfont icon-cheliang"></i>
</div>
</div>
<div>
<div :class="{'active': activeId == 'yiriyou'}" @click="goScroll('yiriyou')">
<i class="iconfont icon-yiriyou"></i>
</div>
</div>
</div>
</div>
<div id="meals" class="content-item">
<div class="left-btn _btn">
</div>
<div class="right-btn _btn">
</div>
<p class="content-item-tit">餐食就在这里解决吧~</p>
<div class="content-item-box">
<div class="content-item-box-hover">
<div class="content-item-box-item">
<div class="img-box">
<div class="price">
<p class="now-p">￥<strong>299</strong>/人</p>
<p class="now-o">￥999/人</p>
</div>
<img src="../../assets/img/country1.png" alt="">
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> 日本-京东</span>
<span>早/午</span>
</div>
</div>
<div class="name">
【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐
</div>
</div>
<div class="content-item-box-item">
<div class="img-box">
<div class="price">
<p class="now-p">￥<strong>299</strong>/人</p>
<p class="now-o">￥999/人</p>
</div>
<img src="../../assets/img/country1.png" alt="">
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> 日本-京东</span>
<span>早/午</span>
</div>
</div>
<div class="name">
【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐
</div>
</div>
<div class="content-item-box-item">
<div class="img-box">
<div class="price">
<p class="now-p">￥<strong>299</strong>/人</p>
<p class="now-o">￥999/人</p>
</div>
<img src="../../assets/img/country1.png" alt="">
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> 日本-京东</span>
<span>早/午</span>
</div>
</div>
<div class="name">
【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐
</div>
</div>
<div class="content-item-box-item">
<div class="img-box">
<div class="price">
<p class="now-p">￥<strong>299</strong>/人</p>
<p class="now-o">￥999/人</p>
</div>
<img src="../../assets/img/country1.png" alt="">
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> 日本-京东</span>
<span>早/午</span>
</div>
</div>
<div class="name">
【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐
</div>
</div>
</div>
</div>
</div>
<div id="yiriyou" class="content-item">
<div class="left-btn _btn">
</div>
<div class="right-btn _btn">
</div>
<p class="content-item-tit">放轻松，甩手一日游~</p>
<el-row :gutter="20">
<el-col :span="10">
<div class="content-item-box2">
<div class="img-box">
<img src="../../assets/img/activy.jpg" alt="">
<img src="../../assets/img/activy.jpg" alt="">
<span class="tag price2">￥ <strong>299</strong> 起</span>
</div>
<div class="content-tit">
<div>
【导游带领免排队】太平山缆车快速通关套票
</div>
<div>
<i class="iconfont icon-mudedi"></i> 日本-京东
</div>
</div>
</div>
</el-col>
<el-col :span="14">
<div class="content-item-box2">
<div class="img-box img-box2">
<img src="../../assets/img/activy.jpg" alt="">
<img src="../../assets/img/activy.jpg" alt="">
<img src="../../assets/img/activy.jpg" alt="">
<span class="tag price2">￥ <strong>299</strong> 起</span>
</div>
<div class="content-tit">
<div>
【导游带领免排队】太平山缆车快速通关套票
</div>
<div>
<i class="iconfont icon-mudedi"></i> 日本-京东
</div>
</div>
</div>
</el-col>
</el-row>
</div>
<div id="cheliang" class="content-item">
<div class="left-btn _btn">
</div>
<div class="right-btn _btn">
</div>
<p class="content-item-tit">车程快慢，你来定~</p>
<div class="content-item-box">
<div class="content-item-box-hover">
<div class="content-item-box-item">
<div class="img-box">
<div class="price price3">
<p class="now-p">￥<strong>299</strong>/人</p>
<p class="now-o">￥999/人</p>
</div>
<img src="../../assets/img/country1.png" alt="">
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> 日本-京东</span>
<span>早/午</span>
</div>
</div>
<div class="name">
【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐
</div>
</div>
<div class="content-item-box-item">
<div class="img-box">
<div class="price price3">
<p class="now-p">￥<strong>299</strong>/人</p>
<p class="now-o">￥999/人</p>
</div>
<img src="../../assets/img/country1.png" alt="">
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> 日本-京东</span>
<span>早/午</span>
</div>
</div>
<div class="name">
【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐
</div>
</div>
<div class="content-item-box-item">
<div class="img-box">
<div class="price price3">
<p class="now-p">￥<strong>299</strong>/人</p>
<p class="now-o">￥999/人</p>
</div>
<img src="../../assets/img/country1.png" alt="">
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> 日本-京东</span>
<span>早/午</span>
</div>
</div>
<div class="name">
【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐
</div>
</div>
<div class="content-item-box-item">
<div class="img-box">
<div class="price price3">
<p class="now-p">￥<strong>299</strong>/人</p>
<p class="now-o">￥999/人</p>
</div>
<img src="../../assets/img/country1.png" alt="">
<div class="tag">
<span><i class="iconfont icon-mudedi"></i> 日本-京东</span>
<span>早/午</span>
</div>
</div>
<div class="name">
【三亚网红海底餐厅】亚龙湾迎宾馆海蓝海底餐厅海鲜BBQ自助晚餐
</div>
</div>
</div>
</div>
</div>
<div id="menpiao" class="content-item">
<div class="left-btn _btn">
</div>
<div class="right-btn _btn">
</div>
<p class="content-item-tit">游玩门票，看过来~</p>
<el-row :gutter="20">
<el-col :span="14">
<div class="content-item-box2">
<div class="img-box img-box2">
<img src="../../assets/img/activy.jpg" alt="">
<img src="../../assets/img/activy.jpg" alt="">
<img src="../../assets/img/activy.jpg" alt="">
<span class="tag price4">￥ <strong>299</strong> 起</span>
</div>
<div class="content-tit">
<div>
【导游带领免排队】太平山缆车快速通关套票
</div>
<div>
<i class="iconfont icon-mudedi"></i> 日本-京东
</div>
</div>
</div>
</el-col>
<el-col :span="10">
<div class="content-item-box2">
<div class="img-box">
<img src="../../assets/img/activy.jpg" alt="">
<img src="../../assets/img/activy.jpg" alt="">
<span class="tag price4">￥ <strong>299</strong> 起</span>
</div>
<div class="content-tit">
<div>
【导游带领免排队】太平山缆车快速通关套票
</div>
<div>
<i class="iconfont icon-mudedi"></i> 日本-京东
</div>
</div>
</div>
</el-col>
</el-row>
</div>
<div class="jingxuan">
<div>
<div class="tit">
<i class="iconfont icon-jingxuan"></i>
<p>精选搭配</p>
</div>
<el-carousel :interval="999000" type="card" height="450px">
<el-carousel-item v-for="item in 6" :key="item">
<div class="jingxuan-item">
<div>
<div class="img-item">
<img src="../../assets/img/country1.png" alt="">
</div>
<div class="img-item">
<img src="../../assets/img/country1.png" alt="">
</div>
<div class="img-item">
<img src="../../assets/img/country1.png" alt="">
</div>
<div class="img-item">
<img src="../../assets/img/country1.png" alt="">
</div>
</div>
<div class="jingxuanbg">
<img src="../../assets/img/freeHome/jingxuanbg.png" alt="">
</div>
<div class="top-zhezhao">
<div class="img-item">
<div class="info">
【三亚网红海底餐厅】亚龙湾迎宾馆v海蓝海底餐厅海鲜BBQ自助晚餐¥125
</div>
</div>
<div class="img-item">
<div class="info">
【三亚网红海底餐厅】亚龙湾迎宾馆v海蓝海底餐厅海鲜BBQ自助晚餐¥125
</div>
</div>
<div class="img-item">
<div class="info">
【三亚网红海底餐厅】亚龙湾迎宾馆v海蓝海底餐厅海鲜BBQ自助晚餐¥125
</div>
</div>
<div class="img-item">
<div class="info">
【三亚网红海底餐厅】亚龙湾迎宾馆v海蓝海底餐厅海鲜BBQ自助晚餐¥125
</div>
</div>
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
scrollobj: null,
navs:[
'meals',
'yiriyou',
'cheliang',
'menpiao',
],
activeId: 'meals'
}
},
mounted() {
this.scrollobj=document.getElementsByClassName('el-scrollbar__wrap')[0];
this.scrollobj.addEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll(){
try {
let current=''
this.navs.forEach(x=>{
let t=document.getElementById(x).offsetTop
if(t<=this.scrollobj.scrollTop-200){
current=x
}
})
this.crtnav=current
} catch (error) {}
},
goScroll(id){
this.activeId = id;
this.scrollobj.scrollTop=document.getElementById(id).offsetTop;
},
}
}
</script>
\ No newline at end of file
src/components/global/newHead.vue
View file @ 325dd79e
...@@ -220,71 +220,19 @@ ...@@ -220,71 +220,19 @@
<span class="__splice">|</span> <span class="__splice">|</span>
</div> </div>
</li> </li>
<!-- <li :class="{_active: navActive === 1}" class="__tour">
<el-menu class="el-menu-demo" mode="horizontal">
<el-submenu index="2" popper-class="new_header_nav_three_select">
<template slot="title" ><span @click="handleSelect('/heel', 1), navActive = 1">跟团游</span></template>
<el-submenu index="2-1">
<template slot="title">
<div>
<p>日本线</p>
<p>东京 高雄 花莲 北海道 </p>
</div>
</template>
<el-menu-item index="2-1-1">
<div>
<p>日本线</p>
</div>
</el-menu-item>
</el-submenu>
<el-submenu index="2-2">
<template slot="title">
<div>
<p>欧洲线</p>
<p>东京 高雄 花莲 北海道 </p>
</div>
</template>
<el-menu-item index="2-2-1">
<div>
<p>欧洲线</p>
</div>
</el-menu-item>
</el-submenu>
<el-submenu index="2-3">
<template slot="title">
<div>
<p>东南亚线</p>
<p>东京 高雄 花莲 北海道 </p>
</div>
</template>
<el-menu-item index="2-3-1">
<div>
<p>东南亚线</p>
</div>
</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
<span class="__splice">|</span>
</li>-->
<!-- 自由行 --> <!-- 自由行 -->
<li :class="{_active: navActive === 11}">
<div @click="handleSelect('/FreeHome', 11), navActive = 11">
<span>自由行</span>
<span class="__splice">|</span>
</div>
</li>
<li :class="{_active: navActive === 2}"> <li :class="{_active: navActive === 2}">
<div @click="handleSelect('/IndependentTravel', 2), navActive = 2"> <div @click="handleSelect('/IndependentTravel', 2), navActive = 2">
<span>定制游</span> <span>定制游</span>
<span class="__splice">|</span> <span class="__splice">|</span>
</div> </div>
<!-- <div>
<el-dropdown trigger="click" placement="bottom-start">
<span class="el-dropdown-link">
<span class="__cp">自由行<i class="iconfont icon-xia"></i></span>
</span>
<el-dropdown-menu class="changelanguage" slot="dropdown">
<el-dropdown-item @click.native="handleSelect('/IndependentTravel', 2)">自由行</el-dropdown-item>
<el-dropdown-item @click.native="">自由行2</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span class="__splice">|</span>
</div>-->
</li> </li>
<!-- 当地游 --> <!-- 当地游 -->
......
src/components/newPersonalCenter/block/model/Authentication.vue
View file @ 325dd79e
...@@ -189,11 +189,14 @@ export default { ...@@ -189,11 +189,14 @@ export default {
againUpLoad: false againUpLoad: false
}; };
}, },
mounted() {}, mounted() {
this.GetCertificationModel();
},
methods: { methods: {
subImg() { subImg() {
// 提交审核 // 提交审核
this.VerificationMsg.CustomerID = StorageInfo.customerId; let userInfo = this.getLocalStorage();
this.VerificationMsg.CustomerID = userInfo.customerId;
this.VerificationMsg.ApplyType = this.subTit; this.VerificationMsg.ApplyType = this.subTit;
this.VerificationMsg.ID = this.Verification[0] this.VerificationMsg.ID = this.Verification[0]
? this.Verification[0].ID ? this.Verification[0].ID
...@@ -212,6 +215,22 @@ export default { ...@@ -212,6 +215,22 @@ export default {
err => {} err => {}
); );
}, },
GetCertificationModel(){
let userInfo = this.getLocalStorage();
this.apipost("app_customer_GetCertificationModel", { CustomerID: userInfo.customerId }, res => {
if (res.data.resultCode == 1) {
this.Verification = res.data.data
if (!this.Verification || this.Verification.length === 0) {
this.againUpLoad = false
} else {
this.againUpLoad = true
}
console.log(res.data.data)
} else {
this.$message.error(res.data.message);
}
},err => {});
},
SelectionType(type) { SelectionType(type) {
this.subTit = type; this.subTit = type;
this.VerificationMsg.ApplyType = type; this.VerificationMsg.ApplyType = type;
......
src/router.js
View file @ 325dd79e
...@@ -533,6 +533,15 @@ export default new Router({ ...@@ -533,6 +533,15 @@ export default new Router({
name: "IndependentTravel", name: "IndependentTravel",
component: resolve => component: resolve =>
require(["@/components/DependentTravel/IndependentTravel"], resolve), require(["@/components/DependentTravel/IndependentTravel"], resolve),
meta: {
title: "定制游"
}
},
{
path: "/FreeHome",
name: "FreeHome",
component: resolve =>
require(["@/components/FreeTravel/FreeHome"], resolve),
meta: { meta: {
title: "自由行" title: "自由行"
} }
......
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