Skip to content

B
bigwood
Commit 4c8d0a17 authored by youjie's avatar youjie
Browse files
Options

行程绝对定位

parent 768841c9
Hide whitespace changes
Inline Side-by-side
Showing with 268 additions and 265 deletions
src/pages/scheduledTrip/detailsNew.vue
View file @ 4c8d0a17
<template> <template>
<div style="min-height: 80vh"> <div style="min-height: 80vh">
<div style="position: fixed; left: 0; right: 0; top: 0; border-top: 1px solid #eee; box-shadow: 0 2px 8px rgb(0 0 0 / 20%); z-index: 9999999" class="bg-white" <div class=""
v-if="(currentHeight > navs[0].top + 100&&$q.platform.is.desktop)|| style="max-width: 1200px; margin: auto;position: relative;">
(currentHeight>priceListHeight&&currentHeight < navs[0].top&&$q.platform.is.mobile)" <div style="position: fixed; left: 0; right: 0; top: 0; border-top: 1px solid #eee; box-shadow: 0 2px 8px rgb(0 0 0 / 20%); z-index: 9999999" class="bg-white"
:style="{ transform: stickyHeight }"> v-if="(currentHeight > navs[0].top + 100&&$q.platform.is.desktop)||
<div style="max-width: 1200px; margin-left: auto; margin-right: auto" :class="{ 'q-px-md': $q.screen.width < 1220 }" class="q-py-sm row items-center"> (currentHeight>priceListHeight&&currentHeight < navs[0].top&&$q.platform.is.mobile)"
<span class="col product-price text-subtitle1 text-weight-bold" style="text-align: left">
<span>CNY {{ dataList.priceList[0].originalB2BPrice }}</span>
<span class="q-ml-sm f12 text-grey-7">{{$t('v103.scheduledTripDetails.since')}}</span>
</span>
<q-btn color="primary" unelevated class="q-px-xl" :label="$t('v103.scheduledTripDetails.selectionscheme')" @click="goScrollHandler(priceListHeight)" />
</div>
</div>
<div
class="bg-white"
style="
position: fixed;
left: 0;
right: 0;
top: -1px;
border-top: 1px solid #eee;
box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
z-index: 999;"
v-if="currentHeight > priceListHeight+800&&$q.platform.is.mobile"
:style="{ transform: stickyHeight }"> :style="{ transform: stickyHeight }">
<q-tabs <div style="max-width: 1200px; margin-left: auto; margin-right: auto" :class="{ 'q-px-md': $q.screen.width < 1220 }" class="q-py-sm row items-center">
v-model="tab" <span class="col product-price text-subtitle1 text-weight-bold" style="text-align: left">
dense <span>CNY {{ dataList.priceList[0].originalB2BPrice }}</span>
class="text-grey" <span class="q-ml-sm f12 text-grey-7">{{$t('v103.scheduledTripDetails.since')}}</span>
active-color="primary" </span>
indicator-color="primary" <q-btn color="primary" unelevated class="q-px-xl" :label="$t('v103.scheduledTripDetails.selectionscheme')" @click="goScrollHandler(priceListHeight)" />
align="left"
narrow-indicator>
<q-tab v-for="(x, i) in navs"
:key="i"
@click="goScrollHandler(x.top + 20)" :name="x.display" :label="x.display"></q-tab>
</q-tabs>
</div>
<div v-if="dataList" style="width: 1200px; margin-left: auto; margin-right: auto" class="q-mt-md q-mb-lg" :class="{ 'q-px-md': $q.screen.width < 1220 }">
<div style="padding-bottom:calc((100% - 0px)/3);position:relative;">
<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0" class="overflow-hidden rounded-borders">
<q-carousel
swipeable
animated
v-model="slide"
navigation
height="400px"
infinite
autoplay
transition-prev="slide-right"
transition-next="slide-left">
<q-carousel-slide v-for="(item, i) in dataList.imgCover" :name="i" :key="i" :img-src="item.Url?item.Url:'http://imgfile.oytour.com/Upload/DMC/yEiRE8pRWE5ZF8cPNRnAiQST8WbyaGQc.jpg'" />
</q-carousel>
</div> </div>
</div> </div>
<div class="q-py-lg" :class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}" style="border-bottom: 1px solid #eee"> <div
<div class="col q-mr-lg"> class="bg-white"
<div class="text-h6 ellipsis-2-lines">{{ dataList.title }}</div> style="
<div class="q-mt-md f12 text-grey-6"> position: fixed;
<q-icon left: 0;
name="iconfont icondingweixiao" right: 0;
size="16px" top: -1px;
class="q-mr-sm" border-top: 1px solid #eee;
/> box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
<span z-index: 999;"
>{{dataList.aimPlaceName}} - v-if="currentHeight > priceListHeight+800&&$q.platform.is.mobile"
:style="{ transform: stickyHeight }">
<q-tabs
v-model="tab"
dense
class="text-grey"
active-color="primary"
indicator-color="primary"
align="left"
narrow-indicator>
<q-tab v-for="(x, i) in navs"
:key="i"
@click="goScrollHandler(x.top + 20)" :name="x.display" :label="x.display"></q-tab>
</q-tabs>
</div>
<div v-if="dataList" style="width: 1200px; margin-left: auto; margin-right: auto" class="q-mt-md q-mb-lg" :class="{ 'q-px-md': $q.screen.width < 1220 }">
<div style="padding-bottom:calc((100% - 0px)/3);position:relative;">
<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0" class="overflow-hidden rounded-borders">
<q-carousel
swipeable
animated
v-model="slide"
navigation
height="400px"
infinite
autoplay
transition-prev="slide-right"
transition-next="slide-left">
<q-carousel-slide v-for="(item, i) in dataList.imgCover" :name="i" :key="i" :img-src="item.Url?item.Url:'http://imgfile.oytour.com/Upload/DMC/yEiRE8pRWE5ZF8cPNRnAiQST8WbyaGQc.jpg'" />
</q-carousel>
</div>
</div>
<div class="q-py-lg" :class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}" style="border-bottom: 1px solid #eee">
<div class="col q-mr-lg">
<div class="text-h6 ellipsis-2-lines">{{ dataList.title }}</div>
<div class="q-mt-md f12 text-grey-6">
<q-icon
name="iconfont icondingweixiao"
size="16px"
class="q-mr-sm"
/>
<span
>{{dataList.aimPlaceName}} -
<span v-for="(x, i) in citys" :key="i"> <span v-for="(x, i) in citys" :key="i">
<span class="cursor-pointer">{{ x }} </span> <span class="cursor-pointer">{{ x }} </span>
<span v-if="i + 1 != citys.length" class="q-mr-sm">,</span> <span v-if="i + 1 != citys.length" class="q-mr-sm">,</span>
</span>
</span> </span>
</span> </div>
</div> <div class="q-mt-md row">
<div class="q-mt-md row"> <q-chip
<q-chip class="transparent q-mr-xl no-padding"
class="transparent q-mr-xl no-padding" square
square icon="iconfont iconOwner-1"
icon="iconfont iconOwner-1" :label=" $t('v103.scheduledTripDetails.headerlabel.d1')"
:label=" $t('v103.scheduledTripDetails.headerlabel.d1')" />
/> <q-chip
<q-chip class="transparent q-mr-xl no-padding"
class="transparent q-mr-xl no-padding" square
square icon="iconfont icontime"
icon="iconfont icontime" :label="` ${$t('v103.scheduledTripDetails.headerlabel.d2')} ${dataList.dayNum} ${$t('v103.scheduledTripDetails.headerlabel.d21')}`"
:label="` ${$t('v103.scheduledTripDetails.headerlabel.d2')} ${dataList.dayNum} ${$t('v103.scheduledTripDetails.headerlabel.d21')}`" />
/> <!-- <q-chip
<!-- <q-chip class="transparent q-mr-xl no-padding"
class="transparent q-mr-xl no-padding" square
square icon="iconfont iconnetwork-fill"
icon="iconfont iconnetwork-fill" :label="$t('v103.scheduledTripDetails.headerlabel.d3')"
:label="$t('v103.scheduledTripDetails.headerlabel.d3')" /> -->
/> --> <q-chip
<q-chip class="transparent q-mr-xl no-padding"
class="transparent q-mr-xl no-padding" square
square icon="iconfont iconcancel"
icon="iconfont iconcancel" :label="$t('v103.scheduledTripDetails.headerlabel.d4')"
:label="$t('v103.scheduledTripDetails.headerlabel.d4')" />
/> </div>
</div> </div>
</div>
<div
:style="{'width': $q.platform.is.mobile?'100%':'293px'}"
class="bg-grey-3 rounded-borders q-px-md"
:class="{'q-py-lg':$q.platform.is.desktop,
'row justify-between items-center q-mt-sm q-py-sm':$q.platform.is.mobile}"
>
<div <div
class="product-price text-h6" :style="{'width': $q.platform.is.mobile?'100%':'293px'}"
v-if="dataList.priceList.length > 0" class="bg-grey-3 rounded-borders q-px-md"
:class="{'q-py-lg':$q.platform.is.desktop,
'row justify-between items-center q-mt-sm q-py-sm':$q.platform.is.mobile}"
> >
CNY：{{ dataList.priceList[0].originalB2BPrice }} <div
<span class="f12 text-grey-6">{{$t('v103.scheduledTripDetails.since')}}</span> class="product-price text-h6"
v-if="dataList.priceList.length > 0"
>
CNY：{{ dataList.priceList[0].originalB2BPrice }}
<span class="f12 text-grey-6">{{$t('v103.scheduledTripDetails.since')}}</span>
</div>
<div v-else class="text-subtitle1 text-grey-6">{{$t('v103.scheduledTripDetails.nooffer')}}</div>
<q-btn
color="primary"
:label="$t('v103.scheduledTripDetails.selectionscheme')"
unelevated
@click="goScrollHandler(priceListHeight)"
:class="{'q-mt-md full-width':$q.platform.is.desktop}"
/>
</div> </div>
<div v-else class="text-subtitle1 text-grey-6">{{$t('v103.scheduledTripDetails.nooffer')}}</div>
<q-btn
color="primary"
:label="$t('v103.scheduledTripDetails.selectionscheme')"
unelevated
@click="goScrollHandler(priceListHeight)"
:class="{'q-mt-md full-width':$q.platform.is.desktop}"
/>
</div> </div>
</div> <div class="q-mt-lg" v-if="dataList.productRecommend">
<div class="q-mt-lg" v-if="dataList.productRecommend"> <div class="q-mt-sm" v-for="(x, i) in dataList.productRecommend.split('\n')" :key="i">
<div class="q-mt-sm" v-for="(x, i) in dataList.productRecommend.split('\n')" :key="i"> <q-icon name="iconfont iconhongqi" color="primary" size="16px" class="q-mr-md" />
<q-icon name="iconfont iconhongqi" color="primary" size="16px" class="q-mr-md" /> {{ x }}
{{ x }} </div>
</div> </div>
</div> </div>
</div> <div v-if="dataList" class="q-pa-lg q-mt-lg text-grey-9" ref="pricelistref">
<div v-if="dataList" class="q-pa-lg q-mt-lg text-grey-9" ref="pricelistref"> <div style="max-width: 1200px; margin-left: auto; margin-right: auto">
<div style="max-width: 1200px; margin-left: auto; margin-right: auto"> <div class="text-h6">{{$t('v103.scheduledTripDetails.selectionscheme')}}</div>
<div class="text-h6">{{$t('v103.scheduledTripDetails.selectionscheme')}}</div> <div class="rounded-borders bg-white q-pa-md q-mt-md" v-if="$q.platform.is.mobile">
<div class="rounded-borders bg-white q-pa-md q-mt-md" v-if="$q.platform.is.mobile"> <q-field class="q-my-md" stack-label :label="$t('v103.scheduledTripDetails.selectdate')" standout dense>
<q-field class="q-my-md" stack-label :label="$t('v103.scheduledTripDetails.selectdate')" standout dense> <div class="self-center full-width no-outline" tabindex="0">{{currentPrice.startDate}}</div>
<div class="self-center full-width no-outline" tabindex="0">{{currentPrice.startDate}}</div> <q-popup-proxy ref="qDateProxy">
<q-popup-proxy ref="qDateProxy"> <calendar class="bg-white q-pa-md"
<calendar class="bg-white q-pa-md" :priceList="dataList.priceList"
:priceList="dataList.priceList" @change="changeChosenDateHandler"
@change="changeChosenDateHandler" ref="calendarRef"
ref="calendarRef" ></calendar>
></calendar> </q-popup-proxy>
</q-popup-proxy> </q-field>
</q-field> <template v-if="currentPrice&&currentPrice.startDate">
<template v-if="currentPrice&&currentPrice.startDate"> <order-preview class="q-pa-md"
<order-preview class="q-pa-md" :msg="msg"
:msg="msg" :price="currentPrice"
:price="currentPrice" @reset="resetHandler"
@reset="resetHandler" ></order-preview>
></order-preview> </template>
</template>
</div>
<div class="bg-white rounded-borders q-mt-md" v-if="dataList.priceList.length > 0">
<div class="q-pa-md row">
<div class="col">
<div class="text-subtitle1 text-weight-bold row items-center" v-if="$q.platform.is.desktop">
<span class="q-mr-md">{{$t('v103.scheduledTripDetails.travelplan')}}</span>
<q-chip square color="orange" size="sm" text-color="grey-2" class="text-light" :label="$t('v103.scheduledTripDetails.headerlabel.d4')" />
</div>
<div class="text-grey f12">
<ul class="q-pl-md no-margin">
<li v-for="(x, i) in warnBuy" class="q-mt-md" :key="i">
{{ x }}
</li>
</ul>
</div>
</div>
<div class="" v-if="$q.platform.is.desktop">
<div class="row items-center">
<span class="product-price text-h6 q-mr-md">CNY {{ dataList.priceList[0].originalB2BPrice }}</span>
<q-btn color="primary" outline :label="showOrderPreview ? $t('v103.scheduledTripDetails.deselect') : $t('v103.scheduledTripDetails.choose')" @click="changeShowOrderPreviewHandler" class="q-px-lg" />
</div>
<div class="text-info q-mt-md text-right">{{$t('v103.scheduledTripDetails.earliest')}}：{{ dataList.priceList[0].startDate }}</div>
</div>
</div> </div>
<div class="q-pa-md" style="border-top: 1px solid #eee" v-if="showOrderPreview"> <div class="bg-white rounded-borders q-mt-md" v-if="dataList.priceList.length > 0">
<div class="q-pa-md bg-grey-2 row items-center rounded-borders"> <div class="q-pa-md row">
<div class="text-subtitle2 text-weight-bold q-mr-xl">{{$t('v103.scheduledTripDetails.thisscheme')}}</div>
<q-chip class="transparent q-mr-xl no-padding" square icon="iconfont iconcancel" :label="$t('v103.scheduledTripDetails.headerlabel.d4')" />
<q-chip class="transparent q-mr-xl no-padding" square icon="iconfont iconroundcheck" :label="$t('v103.scheduledTripDetails.confirmationtime')" />
</div>
<div class="q-mt-lg row" v-if="$q.platform.is.desktop">
<div class="col"> <div class="col">
<calendar :priceList="dataList.priceList" @change="changeChosenDateHandler" ref="calendarRef"></calendar> <div class="text-subtitle1 text-weight-bold row items-center" v-if="$q.platform.is.desktop">
<span class="q-mr-md">{{$t('v103.scheduledTripDetails.travelplan')}}</span>
<q-chip square color="orange" size="sm" text-color="grey-2" class="text-light" :label="$t('v103.scheduledTripDetails.headerlabel.d4')" />
</div>
<div class="text-grey f12">
<ul class="q-pl-md no-margin">
<li v-for="(x, i) in warnBuy" class="q-mt-md" :key="i">
{{ x }}
</li>
</ul>
</div>
</div> </div>
<div class="col q-ml-xl"> <div class="" v-if="$q.platform.is.desktop">
<order-preview <div class="row items-center">
:msg="msg" <span class="product-price text-h6 q-mr-md">CNY {{ dataList.priceList[0].originalB2BPrice }}</span>
:price="currentPrice" <q-btn color="primary" outline :label="showOrderPreview ? $t('v103.scheduledTripDetails.deselect') : $t('v103.scheduledTripDetails.choose')" @click="changeShowOrderPreviewHandler" class="q-px-lg" />
@reset="resetHandler"></order-preview> </div>
<div class="text-info q-mt-md text-right">{{$t('v103.scheduledTripDetails.earliest')}}：{{ dataList.priceList[0].startDate }}</div>
</div> </div>
</div> </div>
</div> <div class="q-pa-md" style="border-top: 1px solid #eee" v-if="showOrderPreview">
</div> <div class="q-pa-md bg-grey-2 row items-center rounded-borders">
</div> <div class="text-subtitle2 text-weight-bold q-mr-xl">{{$t('v103.scheduledTripDetails.thisscheme')}}</div>
</div> <q-chip class="transparent q-mr-xl no-padding" square icon="iconfont iconcancel" :label="$t('v103.scheduledTripDetails.headerlabel.d4')" />
<div <q-chip class="transparent q-mr-xl no-padding" square icon="iconfont iconroundcheck" :label="$t('v103.scheduledTripDetails.confirmationtime')" />
v-if="dataList" </div>
style="max-width: 1200px; margin-left: auto; margin-right: auto" <div class="q-mt-lg row" v-if="$q.platform.is.desktop">
class="q-mt-xl row" <div class="col">
:class="{ 'q-px-md': $q.screen.width < 1220&&$q.screen.width>760, }" <calendar :priceList="dataList.priceList" @change="changeChosenDateHandler" ref="calendarRef"></calendar>
> </div>
<!-- col q-ml-xl position-relative --> <div class="col q-ml-xl">
<!-- days.length>0&&dayList.length>3&&currentHeight > days[0].top-60&&currentHeight < navs[2].top&&$q.platform.is.desktop --> <order-preview
<div :class="{'fixed':$q.platform.is.desktop}" :msg="msg"
:style="{'top':currentHeight>navs[1].top?'200px':'200px', :price="currentPrice"
'left':currentHeight>navs[1].top?'120px':'130px',}" @reset="resetHandler"></order-preview>
v-if=" </div>
dataList.priceList.length > 0&&$q.platform.is.desktop&&currentHeight>navs[1].top-400 </div>
&&currentHeight<navs[2].top
">
<!-- position: sticky; top: 100px -->
<div style="">
<div
class="trip-module text-subtitle2 cursor-pointer q-mb-lg"
v-for="(x, i) in days"
:key="i"
@click="goScrollHandler(x.top + 400)"
: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 style="width: 100%;" :class="{'col':$q.platform.is.desktop,'col':$q.platform.is.mobile}">
<div class="text-h5 text-weight-bold text-left q-pb-sm" id="feature" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.scheduledTripDetails.righttitle.d1')}}</div>
<div class="q-pb-xl" v-if="tripImages&&tripImages.length>0"
ref="diyContext">
<div v-for="(x,i) in tripImages">
<!-- <img class="block" :src="x.header" width="100%"> -->
<img class="block" :src="x.page" style="width: 100%;">
<div class="tripImages-footer">
<img class="block" :src="x.footer" style="width: 100%;">
</div> </div>
</div> </div>
</div> </div>
<div class="q-mt-md trip-text q-pb-xl" v-html="dataList.feature.featureContent" v-else-if="dataList.feature.featureContent != ''" :class="{'q-px-md':$q.platform.is.mobile}"></div>
<div class="q-mt-md q-pb-xl" id="setZoom" ref="diyContext" :style="{ zoom: zoomDiyContext }" v-html="dataList.feature.featureHtml" v-else-if="dataList.feature.featureHtml != ''"></div>
<div class="text-h5 text-weight-bold text-left q-mt-xl" id="product" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.scheduledTripDetails.righttitle.d2')}}</div>
<div class="q-pb-xl">
<smaple :trip="dataList" :class="{'q-px-md':$q.platform.is.mobile}"></smaple>
<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 class="text-h5 text-weight-bold text-left q-mt-xl" id="price" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.scheduledTripDetails.righttitle.d3')}}</div>
<div class="text-subtitle1 text-weight-bold q-my-md" :class="{'q-px-md':$q.platform.is.mobile}">{{$t('v103.scheduledTripDetails.righttitle.d31')}}</div>
<div class="q-mt-md trip-text" v-html="dataList.feature.feeInclude" :class="{'q-px-md':$q.platform.is.mobile}"></div>
<div class="text-subtitle1 text-weight-bold q-my-md" :class="{'q-px-md':$q.platform.is.mobile}">{{$t('v103.scheduledTripDetails.righttitle.d32')}}</div>
<div class="q-mt-md trip-text q-pb-xl" v-html="dataList.feature.feeNonInclude" :class="{'q-px-md':$q.platform.is.mobile}"></div>
<div class="text-h5 text-weight-bold text-left q-mt-xl" id="warning" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.scheduledTripDetails.righttitle.d4')}}</div>
<div 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)" v-html="dataList.feature.importantTip" :class="{'q-mx-md':$q.platform.is.mobile}"></div>
<div class="text-h5 text-weight-bold text-left q-mt-xl" id="tips" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.scheduledTripDetails.righttitle.d5')}}</div>
<div class="q-mt-lg trip-text bg-white q-pa-md rounded-borders q-mb-xl" style="border: 1px dashed var(--q-color-info)" v-html="dataList.feature.warmTip" :class="{'q-px-md':$q.platform.is.mobile}"></div>
<div class="text-h5 text-weight-bold text-left q-mt-xl" id="cancelTips" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.scheduledTripDetails.righttitle.d6')}}</div>
<div class="q-mt-lg trip-text q-mb-xl" :class="{'q-px-md':$q.platform.is.mobile}">
<ul class="no-padding text-grey-9 q-ml-md">
<li v-for="(x,index) in 5"
:class="{'q-mt-sm':index!=0}">{{$t(`v103.scheduledTripDetails.righttitle.d${index+7}`)}}</li>
</ul>
<div class="q-mt-lg f12 text-grey-6">
<q-icon name="iconfont icontishi" class="q-mr-sm" />
<span>{{$t('v103.scheduledTripDetails.righttitle.d12')}}</span>
</div>
</div>
</div> </div>
<template v-if="$q.platform.is.desktop&&currentHeight>130"> <div
<!-- <div class="col-1"></div> --> v-if="dataList"
<!-- col q-ml-xl position-relative --> style="max-width: 1200px; margin-left: auto; margin-right: auto"
class="q-mt-xl row"
:class="{ 'q-px-md': $q.screen.width < 1220&&$q.screen.width>760, }"
>
<!-- col q-ml-xl position-relative -->
<!-- days.length>0&&dayList.length>3&&currentHeight > days[0].top-60&&currentHeight < navs[2].top&&$q.platform.is.desktop -->
<div <div
:class="{'absolute':currentHeight<1000, class="absolute" style="z-index: 999;left:-116px;"
'fixed':currentHeight>1000}" :style="{'top':currentHeight>navs[1].top?(currentHeight+100)+'px':(currentHeight+200)+'px'}"
:style="{'top':currentHeight<1000?'0':'100px', v-if="
'right':currentHeight<1000?'-150px':'70px',}"> dataList.priceList.length > 0&&$q.platform.is.desktop&&currentHeight>navs[1].top-400
<div style="position: sticky; top: 100px"> &&currentHeight<navs[2].top
">
<!-- position: sticky; top: 100px -->
<div style="">
<div <div
class="text-subtitle2 text-grey-6 cursor-pointer q-mb-md" class="trip-module text-subtitle2 cursor-pointer q-mb-lg"
v-for="(x, i) in navs" v-for="(x, i) in days"
:key="i" :key="i"
@click="goScrollHandler(x.top + 20)" @click="goScrollHandler(x.top + 400)"
:class="{ :class="{
'active-trip-module': currentHeight >= x.top && (i == navs.length - 1 || currentHeight < navs[i + 1].top) 'active-trip-moduleDay text-red active':
currentHeight >= x.top &&
(i == days.length - 1 || currentHeight < days[i + 1].top),
}" }"
> >
{{ x.display }} {{ x.display }}
</div> </div>
</div> </div>
</div> </div>
</template> <div style="width: 100%;" :class="{'col':$q.platform.is.desktop,'col':$q.platform.is.mobile}">
<div class="text-h5 text-weight-bold text-left q-pb-sm" id="feature" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.scheduledTripDetails.righttitle.d1')}}</div>
<div class="q-pb-xl" v-if="tripImages&&tripImages.length>0"
ref="diyContext">
<div v-for="(x,i) in tripImages">
<!-- <img class="block" :src="x.header" width="100%"> -->
<img class="block" :src="x.page" style="width: 100%;">
<div class="tripImages-footer">
<img class="block" :src="x.footer" style="width: 100%;">
</div>
</div>
</div>
<div class="q-mt-md trip-text q-pb-xl" v-html="dataList.feature.featureContent" v-else-if="dataList.feature.featureContent != ''" :class="{'q-px-md':$q.platform.is.mobile}"></div>
<div class="q-mt-md q-pb-xl" id="setZoom" ref="diyContext" :style="{ zoom: zoomDiyContext }" v-html="dataList.feature.featureHtml" v-else-if="dataList.feature.featureHtml != ''"></div>
<div class="text-h5 text-weight-bold text-left q-mt-xl" id="product" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.scheduledTripDetails.righttitle.d2')}}</div>
<div class="q-pb-xl">
<smaple :trip="dataList" :class="{'q-px-md':$q.platform.is.mobile}"></smaple>
<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 class="text-h5 text-weight-bold text-left q-mt-xl" id="price" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.scheduledTripDetails.righttitle.d3')}}</div>
<div class="text-subtitle1 text-weight-bold q-my-md" :class="{'q-px-md':$q.platform.is.mobile}">{{$t('v103.scheduledTripDetails.righttitle.d31')}}</div>
<div class="q-mt-md trip-text" v-html="dataList.feature.feeInclude" :class="{'q-px-md':$q.platform.is.mobile}"></div>
<div class="text-subtitle1 text-weight-bold q-my-md" :class="{'q-px-md':$q.platform.is.mobile}">{{$t('v103.scheduledTripDetails.righttitle.d32')}}</div>
<div class="q-mt-md trip-text q-pb-xl" v-html="dataList.feature.feeNonInclude" :class="{'q-px-md':$q.platform.is.mobile}"></div>
<div class="text-h5 text-weight-bold text-left q-mt-xl" id="warning" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.scheduledTripDetails.righttitle.d4')}}</div>
<div 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)" v-html="dataList.feature.importantTip" :class="{'q-mx-md':$q.platform.is.mobile}"></div>
<div class="text-h5 text-weight-bold text-left q-mt-xl" id="tips" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.scheduledTripDetails.righttitle.d5')}}</div>
<div class="q-mt-lg trip-text bg-white q-pa-md rounded-borders q-mb-xl" style="border: 1px dashed var(--q-color-info)" v-html="dataList.feature.warmTip" :class="{'q-px-md':$q.platform.is.mobile}"></div>
<div class="text-h5 text-weight-bold text-left q-mt-xl" id="cancelTips" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.scheduledTripDetails.righttitle.d6')}}</div>
<div class="q-mt-lg trip-text q-mb-xl" :class="{'q-px-md':$q.platform.is.mobile}">
<ul class="no-padding text-grey-9 q-ml-md">
<li v-for="(x,index) in 5"
:class="{'q-mt-sm':index!=0}">{{$t(`v103.scheduledTripDetails.righttitle.d${index+7}`)}}</li>
</ul>
<div class="q-mt-lg f12 text-grey-6">
<q-icon name="iconfont icontishi" class="q-mr-sm" />
<span>{{$t('v103.scheduledTripDetails.righttitle.d12')}}</span>
</div>
</div>
</div>
<template v-if="$q.platform.is.desktop&&currentHeight>130">
<!-- <div class="col-1"></div> -->
<!-- col q-ml-xl position-relative -->
<div
class="absolute" style="z-index: 999;right: -150px;"
:style="{'top':currentHeight<1000?'1000px':(currentHeight+100)+'px'}">
<!-- position: sticky; top: 100px -->
<div style="">
<div
class="text-subtitle2 text-grey-6 cursor-pointer q-mb-md"
v-for="(x, i) in navs"
:key="i"
@click="goScrollHandler(x.top + 20)"
:class="{
'active-trip-module': currentHeight >= x.top && (i == navs.length - 1 || currentHeight < navs[i + 1].top)
}"
>
{{ x.display }}
</div>
</div>
</div>
</template>
</div>
</div> </div>
<div class="goBackTop bg-primary" :class="{ showGoback: isShowTop }" @click="hangleGoUp"> <div class="goBackTop bg-primary" :class="{ showGoback: isShowTop }" @click="hangleGoUp">
<i class="iconfont iconarrow-top"></i> <i class="iconfont iconarrow-top"></i>
</div> </div>
......
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