Skip to content

M
million
Commit 597cccad authored by 沈良进's avatar 沈良进
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/viitto/million

parents 23ad73a4 f0416393
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1717 additions and 9 deletions
src/assets/trip/block/index.css 0 → 100644
View file @ 597cccad
.trip-box{
/* width: 1000px; */
margin: 0 auto;
cursor: default;
}
.trip-block{
max-width: 100%;
padding-bottom: 40px;
padding-top: 40px;
border-bottom: #CCC 1px dotted;
}
.trip-block .trip-title {
min-height: 48px;
font-size: 20px;
/* background: #f3f3f3; */
padding:0 10px;
box-sizing: border-box;
color: #333;
font-family: 'PingFangR';
display: flex;
align-items: center;
}
.trip-block .trip-title .day{
width: 136px;
color: #4d4d4d;
font-size: 33px;
font-weight: normal;
letter-spacing: 3px;
}
.trip-block .trip-title p{
margin: 0;
}
.trip-block .trip-title p:nth-child(2){
color: #525252;
}
.trip-block .trip-title .desc{
color: #4d4d4d;
border-left: 1px solid #333;
padding-left: 25px;
height: 100%;
flex:1;
padding: 10px 10px 10px 20px;
}
.trip-block .trip-title .desc i{
font-size: 22px;
margin: 0 10px;
}
.trip-block .block-item{
margin-top: 20px;
}
.trip-block .block-item .item{
transition: box-shadow 250ms ease-out 0s;
font-size: 15px;
line-height: 1.5em;
color: #444;
background: rgba(23,23,23,.05);
box-sizing: border-box;
/* box-shadow: 0 0 12px rgba(0,0,0,0.1) inset; */
-webkit-transition: box-shadow 250ms ease-out 0s;
-moz-transition: box-shadow 250ms ease-out 0s;
-ms-transition: box-shadow 250ms ease-out 0s;
-o-transition: box-shadow 250ms ease-out 0s;
}
.trip-block .block-item .item:hover{
/* box-shadow: 0 0 12px rgba(0,0,0,0.1) inset; */
}
.trip-block .block-item .item h3{
/* margin: 18px 0; */
font-size: 18px;
font-family: 'PingFangR';
font-weight: 400;
color: #222;
position: relative;
z-index: 2;
}
.trip-block .block-item .item .playInfo{
margin-top: 5px;
margin-left: -5px;
height: 25px;
}
.playInfo .playInfo-item{
color: gray;
font-size: 12px;
margin-right: 20px;
}
.trip-block .block-item .item .playInfo .playInfo-item span{
display: inline;
}
.trip-block .block-item .item .playInfo .playInfo-item .iconfont{
font-size: 16px;
margin-right: 5px;
}
.trip-block .block-item .item h3 .iconfont{
font-size: 20px;
margin: 0 5px;
vertical-align: middle;
}
.trip-block .block-item .item h4{
position: relative;
width: 86px;
color: #EF4455;
font-size: 18px;
line-height: 20px;
margin: 0;
font-weight: 500;
}
.trip-block .block-item .item.big{
/* display: flex;
flex-direction: column; */
padding: 0px !important;
background: transparent;
}
.trip-block .block-item .item.big .left{
flex: 1;
}
.trip-block .block-item .item.big .left img{
width:100%;
height: 100%;
display: block;
}
.trip-block .block-item .item.big .right{
/* border: 1px solid #ccc; */
padding: 22px;
/* box-sizing: border-box; */
}
.trip-block .block-item .item.big .right .details{
display: block;
margin-top: 15px;
font-size: 16px;
line-height: 1.5em;
text-align: justify;
color: #444;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
}
.details span{
}
.trip-block .block-item .item .remark{
padding-left:15px;
font-size: 15px;
flex: 1;
color: #444;
list-style-position: outside;
list-style-type: decimal;
}
.trip-block .block-item .item .up{
padding: 22px;
margin: -22px;
}
.trip-block .block-item .item .up img{
width: 100%;
height: 100%;
}
.trip-block .block-item .item .down{
/* height: 150px; */
overflow: hidden;
}
.trip-block .block-item .item.hor-box{
display: flex;
padding: 0px;
height: 246px;
overflow: hidden;
}
.trip-block .block-item .item.hor-box .remark{
transition: .4s;
padding: 22px;
overflow: hidden;
height: 173px;
}
.trip-block .block-item .item.hor-box .image{
flex: 1;
height: 100%;
}
.trip-block .block-item .item.hor-box .image img{
width: 100%;
/* height: 100%; */
flex: 1;
}
.trip-block .block-item .item .three-item{
height: 197px;
position: relative;
}
.trip-block .block-item .item .three-item:hover .image{
opacity: 1;
filter: alpha(opacity=100);
-moz-opacity: 1;
-webkit-transition: .3s;
transition: .3s;
}
.trip-block .block-item .item .three-item .image{
position: absolute;
-webkit-transition: .3s;
top: -40px;
left: -22px;
bottom: -22px;
right: -22px;
opacity: 0;
filter: alpha(opacity=0);
-moz-opacity: 0;
transition: .3s;
z-index: 0;
}
.trip-block .block-item .item .three-item .image img{
width: 100%;
height: 100%;
}
.trip-block .block-item .item .three-item:hover span {
opacity: 0;
filter: alpha(opacity=0);
-moz-opacity: 0;
transition: 200ms ease-out;
}
.trip-block .block-item .item .three-item span {
max-height: 151px;
display: inline-block;
overflow: hidden;
}
.trip-block .block-item .item .three-item:hover h3{
color:#f1f1f1;
}
.trip-block .block-item .restaurant{
margin:20px 0;
}
.trip-block .block-item .restaurant .restaurant-item{
display: flex;
}
.trip-block .block-item .restaurant .restaurant-item .key{
width:95px;
}
.trip-block .block-item .restaurant .restaurant-item .key img{
width:80px;
height: 28px;
}
.trip-block .block-item .restaurant .restaurant-item .val{
flex: 1;
font-size: 15px;
min-height: 28px;
color: #666;
line-height: 28px;
cursor: default;
vertical-align: top;
font-family: Roboto, Arial,微軟正黑體修正, 微軟正黑體, "Microsoft JhengHei", sans-serif;
}
.trip-block .flex{
display: flex;
}
.trip-block .block-item .five-box{
display: flex;
margin-bottom: 4px;
}
.trip-block .block-item .five-box .left{
position: relative;
width: 311px;
height: 497px;
overflow: hidden;
margin-right: 4px;
}
.trip-block .block-item .five-box .left .item{
height: 497px;
overflow: hidden;
}
.trip-block .block-item .five-box .left .image img{
width: 100%;
height: 100%;
}
.trip-block .block-item .five-box .left .item{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: transparent;
color: #f1f1f1;
}
.trip-block .block-item .five-box .left .item span{
opacity: 0;
transition: 0.3s;
}
.trip-block .block-item .five-box .left:hover .item{
transition: 0.3s;
background: rgba(0,0,0,0.2);
}
.trip-block .block-item .five-box .left:hover .item span{
opacity: 1;
transition: 0.3s;
color: #f1f1f1;
}
.trip-block .block-item .five-box .left .item h3{
color: #f1f1f1;
background: rgba(0,0,0,0.1)
}
.trip-block .block-item .five-box .right{
flex: 1;
height: 498px;
overflow: hidden;
}
.trip-block .block-item .five-box .right .item{
height: 247px;
overflow: hidden;
}
.trip-block .block-item .five-box .right .item .three-item{
height: 100%;
}
.trip-block .block-item .five-box .right .item .three-item span{
/* height: 137px;
overflow: hidden;
display: inline-block; */
}
.trip-block .block-item .item p{
margin: 0px !important;
padding: 0px !important;
}
.text-bold{
margin: 0;
font-size: 21px;
font-weight: bold;
letter-spacing: 1px;
line-height: 25px;
word-break: break-all;
word-wrap: break-word;
}
\ No newline at end of file
src/components/trip/block/fiveday.vue 0 → 100644
View file @ 597cccad
This diff is collapsed.
src/components/trip/block/fourday.vue 0 → 100644
View file @ 597cccad
This diff is collapsed.
src/components/trip/block/index.vue 0 → 100644
View file @ 597cccad
This diff is collapsed.
src/components/trip/block/oneday.vue 0 → 100644
View file @ 597cccad
<template>
<div class="block-item">
<div class="one-block">
<div class="item big row">
<div class="row no-wrap" :class="{'col-8':day.details.length>1,'col':day.details.length==1}">
<div class="col-7">
<template v-if="day.details[0].fileType&&day.details[0].fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="day.details[0].videoPath" controls="controls">
</video>
</template>
<template v-else>
<q-img v-if="day.details[0].img" :src='day.details[0].img' :ratio="12/4" fit="cover" height="100%">
<template v-slot:error>
<div class="absolute-full flex flex-center bg-blue-1 text-dark">
图片加载失败
</div>
</template>
</q-img>
<q-img v-else src='../../../assets/img/nll.jpg' :ratio="12/4" fit="cover" height="100%"></q-img>
</template>
</div>
<div class="right col" style="border: 1px solid #ccc;border-left: 0;">
<div class="details">
<div v-if="day.details[0].title!=''" class="text-h6 text-bold" v-html="day.details[0].title" @click.stop="goUrl(day.details[0].url)"
style="cursor: pointer;"></div>
<div class="playInfo">
<span class="playInfo-item" v-if='day.details[0].ticketName!=""'>
</span>
<span class="playInfo-item" v-if='day.details[0].playTimeHour || day.details[0].playTimeMinutes'>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="day.details[0].playTimeHour">{{day.details[0].playTimeHour}}小时 </span>
<span v-if="day.details[0].playTimeMinutes">{{day.details[0].playTimeMinutes}}分钟</span>
</span>
</div>
<span v-html="day.details[0].content"></span>
</div>
</div>
</div>
</div>
<div class="item flex q-mt-sm q-pa-lg" v-if='day.tips.length>0'>
<h4>温馨提示</h4>
<div class="remark">
<span v-for="(t,k) in day.tips" :key="k" v-html="t.content"></span>
</div>
</div>
<div class="restaurant row justify-between wrap">
<div class="restaurant-item">
<div class="key">
<img src='../../../assets/img/daily_breakfast.png' />
</div>
<div class="val">{{day.can.breakfirst}}</div>
</div>
<div class="restaurant-item q-pl-sm">
<div class="key">
<img src='../../../assets/img/daily_lunch.png' />
</div>
<div class="val">{{day.can.lanuch}}</div>
</div>
<div class="restaurant-item q-pl-sm">
<div class="key">
<img src='../../../assets/img/daily_dinner.png' />
</div>
<div class="val">{{day.can.dinner}}</div>
</div>
</div>
<div class="restaurant">
<div class="restaurant-item col-24">
<div class="key">
<img src='../../../assets/img/daily_hotel-1.png' />
</div>
<div class="val" v-if='day.jiu2.length>0'>
<span v-for="(t,k) in day.jiu2" @click.stop="goUrl(t.url)" style="cursor: pointer" :key="k">
{{k==day.jiu2.length-1?t.name:t.name+' / '}}
</span>
{{getHotelSuffix()}}
</div>
<div class="val" v-else>本日无酒店安排</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:{
day:{},
isDirect:{}
},
mounted() {
console.log(this.day,'----')
},
methods:{
getHotelSuffix(){
let suffix = "";
if (this.day.jiu2.length > 1) {
if (this.isDirect === 1) {
suffix = "或同級"
}
} else {
if (this.day.jiu2.length == 1 && this.day.jiu2[0].name != '温馨的家' && this.day.jiu2[0].name !=
'机场附近酒店') {
if (this.day.jiu2[0].status == 1) {
suffix = "【保证入住】"
} else {
if (this.isDirect === 1) {
suffix = "或同級"
}
}
}
}
return suffix;
},
goUrl(url) {
if(url!=null&&url.length>0){
window.open(url, "_blank");
}
}
}
}
</script>
src/components/trip/block/threeday.vue 0 → 100644
View file @ 597cccad
This diff is collapsed.
src/components/trip/block/twoday.vue 0 → 100644
View file @ 597cccad
<template>
<div class="block-item">
<div class="two-block">
<div class="column">
<template v-for="(item,index) in day.details">
<div v-if="index<1" class="item" :key="item.dayNum"
:class="{'col':index==0,
'row no-wrap':index==0,'q-ml-sm':index==1}" style="background: #F6F6F6;">
<div class="up"
:class="{'col-8':day.details.length>1&&index==0,}" :style="{'height':index==1?'265px':''}">
<template v-if="item.fileType&&item.fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="item.videoPath"
controls="controls">
</video>
</template>
<template v-else>
<q-img v-if="item.img" :src='item.img' :ratio="1" fit="cover" height="100%">
<template v-slot:error>
<div class="absolute-full flex flex-center bg-blue-1 text-dark">
图片加载失败
</div>
</template>
</q-img>
<q-img v-else src='../../../assets/img/nll.jpg' :ratio="12/4" fit="cover" height="100%"></q-img>
</template>
</div>
<div class="row items-end" style="border:1px solid #ccc;left: 0;">
<div class="q-pb-lg">
<div class="down q-pa-lg" :class="{'col':index==0}">
<div v-if="item.title!=''" class="text-h6 text-bold" v-html="item.title" @click.stop="goUrl(item.url)"
style="cursor: pointer;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"></div>
<div class="playInfo">
<span class="playInfo-item" v-if='item.ticketName!=""'>
</span>
<span class="playInfo-item" v-if='item.playTimeHour || item.playTimeMinutes'>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="item.playTimeHour">{{item.playTimeHour}}小时 </span>
<span v-if="item.playTimeMinutes">{{item.playTimeMinutes}}分钟 </span>
</span>
</div>
<span v-html="item.content"></span>
</div>
</div>
</div>
</div>
</template>
<template v-for="(item,index) in day.details">
<div v-if="index==1" class="item up q-mt-sm row no-wrap col" :key="item.dayNum" style="background: #F6F6F6;">
<div class="col" style="border:1px solid #ccc;right: 0;">
<div class="down q-pa-lg" :class="{'col':index==0}">
<div v-if="item.title!=''" class="text-h6 text-bold" v-html="item.title" @click.stop="goUrl(item.url)"
style="cursor: pointer;"></div>
<div class="playInfo">
<span class="playInfo-item" v-if='item.ticketName!=""'>
</span>
<span class="playInfo-item" v-if='item.playTimeHour || item.playTimeMinutes'>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="item.playTimeHour">{{item.playTimeHour}}小时 </span>
<span v-if="item.playTimeMinutes">{{item.playTimeMinutes}}分钟 </span>
</span>
</div>
<span v-html="item.content"></span>
</div>
</div>
<div class="col-8">
<template v-if="item.fileType&&item.fileType=='.mp4'">
<video ref="myVideo" width="100%" height="100%" :src="item.videoPath"
controls="controls">
</video>
</template>
<template v-else>
<q-img v-if="item.img" :src='item.img' :ratio="12/4" fit="cover" height="100%">
<template v-slot:error>
<div class="absolute-full flex flex-center bg-blue-1 text-dark">
图片加载失败
</div>
</template>
</q-img>
<q-img v-else src='../../../assets/img/nll.jpg' :ratio="12/4" fit="cover" height="100%"></q-img>
</template>
</div>
</div>
</template>
</div>
<div class="item flex q-mt-sm q-pa-lg" v-if='day.tips.length>0'>
<h4>温馨提示</h4>
<div class="remark">
<span v-for="(t,k) in day.tips" :key="k" v-html="t.content"></span>
</div>
</div>
<div class="restaurant row justify-between wrap">
<div class="restaurant-item">
<div class="key">
<img src='../../../assets/img/daily_breakfast.png' />
</div>
<div class="val">{{day.can.breakfirst}}</div>
</div>
<div class="restaurant-item q-pl-sm">
<div class="key">
<img src='../../../assets/img/daily_lunch.png' />
</div>
<div class="val">{{day.can.lanuch}}</div>
</div>
<div class="restaurant-item q-pl-sm">
<div class="key">
<img src='../../../assets/img/daily_dinner.png' />
</div>
<div class="val">{{day.can.dinner}}</div>
</div>
</div>
<div class="restaurant">
<div class="restaurant-item col-24">
<div class="key">
<img src='../../../assets/img/daily_hotel-1.png' />
</div>
<div class="val" v-if='day.jiu2.length>0'>
<span v-for="(t,k) in day.jiu2" @click.stop="goUrl(t.url)" style="cursor: pointer" :key="k">
{{k==day.jiu2.length-1?t.name:t.name+' / '}}
</span>
{{getHotelSuffix()}}
</div>
<div class="val" v-else>本日无酒店安排</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
day: {},
isDirect: {}
},
mounted() {
console.log(this.day,'--------')
},
methods: {
getHotelSuffix() {
let suffix = "";
if (this.day.jiu2.length > 1) {
if (this.isDirect === 1) {
suffix = "或同級"
}
} else {
if (this.day.jiu2.length == 1 && this.day.jiu2[0].name != '温馨的家' && this.day.jiu2[0].name !=
'机场附近酒店') {
if (this.day.jiu2[0].status == 1) {
suffix = "【保证入住】"
} else {
if (this.isDirect === 1) {
suffix = "或同級"
}
}
}
}
return suffix;
},
goUrl(url) {
if (url != null && url.length > 0) {
window.open(url, "_blank");
}
}
}
}
</script>
\ No newline at end of file
src/components/trip/smaple.vue
View file @ 597cccad
...@@ -90,11 +90,11 @@ export default { ...@@ -90,11 +90,11 @@ export default {
}, },
formatTraffic() { formatTraffic() {
let z = this.trip.trafficList[0].subTraffic[0] let z = this.trip.trafficList[0].subTraffic[0]
if (z.arrivalType == 1) { if (z&&z.arrivalType&&z.arrivalType == 1) {
this.traffic = '飛機往返'; this.traffic = '飛機往返';
} else if (z.arrivalType == 2) { } else if (z&&z.arrivalType&&z.arrivalType == 2) {
this.traffic = '巴士往返'; this.traffic = '巴士往返';
} else if (z.arrivalType == 3) { } else if (z&&z.arrivalType&&z.arrivalType == 3) {
this.traffic = '郵輪往返'; this.traffic = '郵輪往返';
} else { } else {
this.traffic = '高鐵往返'; this.traffic = '高鐵往返';
......
src/pages/detailsNew.vue
View file @ 597cccad
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
</q-breadcrumbs> </q-breadcrumbs>
<div class="text-grey-6 f12">Product No. # {{ dataList.id }}</div> <div class="text-grey-6 f12">Product No. # {{ dataList.id }}</div>
</div> </div>
<div style="padding-bottom:calc((100% - 0px)/3;position:relative;"> <div style="padding-bottom:calc((100% - 0px)/3);position:relative;">
<div <div
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0"
class="overflow-hidden rounded-borders" class="overflow-hidden rounded-borders"
...@@ -291,12 +291,31 @@ ...@@ -291,12 +291,31 @@
</div> </div>
</div> </div>
</div> </div>
<div <div
v-if="dataList" v-if="dataList"
style="max-width: 1200px; margin-left: auto; margin-right: auto" style="max-width: 1200px; margin-left: auto; margin-right: auto"
class="q-mt-xl row" class="q-mt-xl row"
:class="{ 'q-px-md': $q.screen.width < 1220 }" :class="{ 'q-px-md': $q.screen.width < 1220 }"
> >
<div class="col q-ml-xl position-relative" v-if="dayList.length>3&&currentHeight > days[0].top-60&&currentHeight < navs[2].top">
<div style="position: sticky; top: 100px">
<div
class="trip-module text-subtitle2 cursor-pointer q-mb-lg"
v-for="(x, i) in days"
:key="i"
@click="goScrollHandler(x.top + 20)"
:class="{
'active-trip-moduleDay text-red active':
currentHeight >= x.top &&
(i == days.length - 1 || currentHeight < days[i + 1].top),
}"
>
{{ x.display }}
</div>
</div>
</div>
<div class="col-8"> <div class="col-8">
<div class="text-h5 text-weight-bold text-left" ref="feature"> <div class="text-h5 text-weight-bold text-left" ref="feature">
行程特色 行程特色
...@@ -316,9 +335,14 @@ ...@@ -316,9 +335,14 @@
<div class="text-h5 text-weight-bold text-left q-mt-xl" ref="product"> <div class="text-h5 text-weight-bold text-left q-mt-xl" ref="product">
行程介紹 行程介紹
</div> </div>
<div class="q-pb-xl"> <div class="q-pb-xl" >
<smaple :trip="dataList"></smaple> <smaple :trip="dataList"></smaple>
<trip :trip="dataList" @change="changeTripShowHandler"></trip> <template v-if="dataList.dayList.length<=3">
<trip :trip="dataList" @change="changeTripShowHandler"></trip>
</template>
<template v-else>
<block :currentHeightDay="currentHeight" :days="days" :tripList="dayList" :isDirect="isDirect" :clickDate="clickDate"></block>
</template>
</div> </div>
<div class="text-h5 text-weight-bold text-left q-mt-xl" ref="price"> <div class="text-h5 text-weight-bold text-left q-mt-xl" ref="price">
費用說明 費用說明
...@@ -339,7 +363,7 @@ ...@@ -339,7 +363,7 @@
<div <div
class="q-mt-lg trip-text bg-orange-1 q-pa-md rounded-borders q-mb-xl" class="q-mt-lg trip-text bg-orange-1 q-pa-md rounded-borders q-mb-xl"
style="border: 1px dashed var(--q-color-warning)" style="border: 1px dashed var(--q-color-warning)"
v-html="dataList.feature.importantTip" v-html="dataList.feature.importantTip?dataList.feature.importantTip:'暂无购买须知'"
></div> ></div>
<div class="text-h5 text-weight-bold text-left q-mt-xl" ref="tips"> <div class="text-h5 text-weight-bold text-left q-mt-xl" ref="tips">
溫馨提示 溫馨提示
...@@ -347,7 +371,7 @@ ...@@ -347,7 +371,7 @@
<div <div
class="q-mt-lg trip-text bg-white q-pa-md rounded-borders q-mb-xl" class="q-mt-lg trip-text bg-white q-pa-md rounded-borders q-mb-xl"
style="border: 1px dashed var(--q-color-info)" style="border: 1px dashed var(--q-color-info)"
v-html="dataList.feature.warmTip" v-html="dataList.feature.warmTip?dataList.feature.warmTip:'暂无溫馨提示'"
></div> ></div>
<div <div
class="text-h5 text-weight-bold text-left q-mt-xl" class="text-h5 text-weight-bold text-left q-mt-xl"
...@@ -374,10 +398,10 @@ ...@@ -374,10 +398,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-1"></div> <div class="col-1"></div>
<div class="col q-ml-xl position-relative"> <div class="col q-ml-xl position-relative">
<div style="position: sticky; top: 100px"> <div style="position: sticky; top: 100px">
<!-- -->
<div <div
class="text-subtitle2 text-grey-6 cursor-pointer q-mb-md" class="text-subtitle2 text-grey-6 cursor-pointer q-mb-md"
v-for="(x, i) in navs" v-for="(x, i) in navs"
...@@ -403,10 +427,14 @@ import calendar from "../components/trip/calendar.vue"; ...@@ -403,10 +427,14 @@ import calendar from "../components/trip/calendar.vue";
import OrderPreview from "src/components/trip/orderPreview.vue"; import OrderPreview from "src/components/trip/orderPreview.vue";
import smaple from "src/components/trip/smaple.vue"; import smaple from "src/components/trip/smaple.vue";
import Trip from "src/components/trip/trip.vue"; import Trip from "src/components/trip/trip.vue";
import headStyle4 from "../components/trip/style4";
import headStyle5 from "../components/trip/style5";
import block from 'src/components/trip/block/index'
export default { export default {
props: [], props: [],
data() { data() {
return { return {
clickDate: '',
slide: 1, slide: 1,
msg: { msg: {
configId: "", configId: "",
...@@ -449,6 +477,14 @@ export default { ...@@ -449,6 +477,14 @@ export default {
videoPosition: 0, videoPosition: 0,
currentHeight: 0, currentHeight: 0,
isPictureInPicture: false, isPictureInPicture: false,
days: [
{
val: '',
top: 0,
isActive: false,
display: '',
},
],
navs: [ navs: [
{ {
val: "feature", val: "feature",
...@@ -490,6 +526,8 @@ export default { ...@@ -490,6 +526,8 @@ export default {
priceListHeight: 0, priceListHeight: 0,
stickyHeight: 0, stickyHeight: 0,
zoomDiyContext: 1, zoomDiyContext: 1,
currentHeightDay: 0,
stickyHeightDay: 0
}; };
}, },
components: { components: {
...@@ -499,6 +537,23 @@ export default { ...@@ -499,6 +537,23 @@ export default {
OrderPreview, OrderPreview,
smaple, smaple,
Trip, Trip,
block
},
watch: {
currentHeightDay:{
handler: function (val, oldval) {
this.currentHeightDay = val
},
deep: true
},
days: {
handler: function (val, oldval) {
this.days = val
},
immediate: true,
deep: true
},
}, },
created() { created() {
try { try {
...@@ -519,6 +574,9 @@ export default { ...@@ -519,6 +574,9 @@ export default {
window.addEventListener("scroll", this.menu); window.addEventListener("scroll", this.menu);
}, },
methods: { methods: {
getTopNum(x){
this.days = JSON.parse(x)
},
changeTripShowHandler() { changeTripShowHandler() {
this.$nextTick(() => { this.$nextTick(() => {
this.navs.forEach((x) => { this.navs.forEach((x) => {
...@@ -580,6 +638,10 @@ export default { ...@@ -580,6 +638,10 @@ export default {
0, 0,
}; };
}, },
goScrollHandlerDay(top) {
window.scrollTo(0, top);
},
goScrollHandler(top) { goScrollHandler(top) {
window.scrollTo(0, top); window.scrollTo(0, top);
}, },
...@@ -634,6 +696,8 @@ export default { ...@@ -634,6 +696,8 @@ export default {
} }
this.dataList.imgCover = JSON.parse(this.dataList.imgCover); this.dataList.imgCover = JSON.parse(this.dataList.imgCover);
this.dayList = this.dataList.dayList; this.dayList = this.dataList.dayList;
this.isShow = true; this.isShow = true;
this.isDirect = this.dataList.isDirect; this.isDirect = this.dataList.isDirect;
if (this.dataList.videoStr && this.dataList.videoStr != "") { if (this.dataList.videoStr && this.dataList.videoStr != "") {
...@@ -664,12 +728,32 @@ export default { ...@@ -664,12 +728,32 @@ export default {
this.$refs[x.val].getBoundingClientRect().top + this.$refs[x.val].getBoundingClientRect().top +
this.currentHeight - this.currentHeight -
60; 60;
}); });
this.priceListHeight = this.priceListHeight =
this.$refs.pricelist.getBoundingClientRect().top + this.$refs.pricelist.getBoundingClientRect().top +
this.currentHeight - this.currentHeight -
60; 60;
this.days = []
this.dayList.forEach(x=>{
let dayListObj = {
val: 'day'+x.dayNum,
top: 0,
isActive: false,
display: x.dayNum>9?x.dayNum:'0'+x.dayNum,
}
this.days.push(dayListObj)
})
}, 1000); }, 1000);
try {
document.querySelector('#scrollId .q-page-container').addEventListener('scroll', this.handleScrollDay)
} catch (error) {
// console.log(document.querySelector('#scrollId .q-page-container'))
// console.log('异常信息', error)
}
}); });
} else { } else {
this.$message.error(r.data.message); this.$message.error(r.data.message);
...@@ -733,4 +817,40 @@ export default { ...@@ -733,4 +817,40 @@ export default {
border-radius: 5px; border-radius: 5px;
background: var(--q-color-primary); background: var(--q-color-primary);
} }
.trip-module{
font-weight: 100;
text-align: center;
line-height: 38px;
font-size: 18px;
width: 38px;
height: 38px;
border: 1px solid #ccc;
border-radius: 50%;
font-family: lettergothicstd;
}
.trip-module{
color: #9E9E9E;
transition: all .3s;
}
.active-trip-moduleDay {
position: relative;
border: 0;
left: -15px;
font-size: 51px;
}
.active-trip-moduleDay.active::before {
opacity: 1;
}
.active-trip-moduleDay::before {
display: inline-block;
position: absolute;
top: 0px;
left: -50px;
content: 'DAY';
font-size: 13px;
font-family: fangsong;
line-height: 58px;
opacity: 0;
}
</style> </style>
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