Skip to content

M
million
Commit 4e591cec authored by youjie's avatar youjie
Browse files
Options

no message

parent b8963eef
Show whitespace changes
Inline Side-by-side
Showing with 198 additions and 17 deletions
src/components/navs/subscriber.vue
View file @ 4e591cec
......@@ -28,12 +28,18 @@ height: 56px;
margin: 0 auto;
position: relative;
}
.email-box.mobile {
width: 100%;
}
.input {
width: 630px;
height: 56px;
background-color: #fff;
border-radius: 28px;
}
.input.mobile {
width: 100%;
}
.btn {
position: absolute;
right: 5px;
......@@ -46,15 +52,15 @@ border-radius: 23px;
</style>>
<template>
<div class="fill">
<div class="box">
<div class="box" :class="{'q-px-md': $q.platform.is.mobile}">
<div class="title">
輸入電子郵箱接收訂閱信息
</div>
<div class="desc">
最高可省60%，只有订阅用户才能享受到隐藏优惠，点击“订阅”，即表示你同意我们的《訂閱條款》
</div>
<div class="email-box">
<q-input class="input" rounded outlined placeholder="請輸入您在使用的電子郵件"></q-input><q-btn class="btn" label="提交"></q-btn>
<div class="email-box" :class="{'mobile':$q.platform.is.mobile}">
<q-input class="input" :class="{'mobile':$q.platform.is.mobile}" rounded outlined placeholder="請輸入您在使用的電子郵件"></q-input><q-btn class="btn" label="提交"></q-btn>
</div>
</div>
</div>
......
src/components/trip/block/allDay.vue 0 → 100644
View file @ 4e591cec
<template>
<div class="block-item">
<!-- transition-prev="scale"
transition-next="scale" -->
<q-carousel v-model="slide"
transition-prev="slide-right"
transition-next="slide-left"
swipeable animated
control-color="white" infinite arrows height="100%"
class="my-bg-grey text-black shadow-1 no-shadow"
control-type="regular"
:arrows="day.details.length>0?false:false"
control-text-color="primary"
thumbnails
infinite
>
<template v-for="(x, i) in day.details">
<q-carousel-slide :name="i" class="column no-wrap">
<div class="bg-white row">
<template
v-if="x.fileType && x.fileType == '.mp4'">
<video
ref="myVideo"
width="100%"
height="246px"
:src="x.videoPath"
controls="controls"
></video>
</template>
<template v-else>
<q-img
v-if="x.img"
:src="x.img"
:ratio="12 / 4"
style="width: 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="one-block q-px-md q-py-lg">
<div class="item big row">
<div class="row no-wrap">
<div class="right col">
<div class="details">
<div
v-if="x.title != ''"
class="text-h6 text-bold q-pb-sm"
v-html="x.title"
style="cursor: pointer"
></div>
<div
class="playInfo"
v-if="
x.playTimeHour || x.playTimeMinutes
"
>
<span
class="playInfo-item"
v-if="x.ticketName != ''"
>
</span>
<span
class="playInfo-item"
v-if="
x.playTimeHour ||
x.playTimeMinutes
"
>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="x.playTimeHour"
>{{ x.playTimeHour }}小时
</span>
<span v-if="x.playTimeMinutes"
>{{ x.playTimeMinutes }}分钟</span
>
</span>
</div>
<span v-html="x.content"></span>
</div>
</div>
</div>
</div>
</div>
</q-carousel-slide>
</template>
</q-carousel>
</div>
</template>
<script>
export default {
props: {
day: {},
isDirect: {},
},
data() {
return {
slide: 0,
lorem: ''
}
},
mounted() {},
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>
<style scoped>
.q-carousel__slide{
padding: 0 !important;
}
.q-img__image{
border-style: none !important;
}
</style>
\ No newline at end of file
src/components/trip/block/index.vue
View file @ 4e591cec
......@@ -3,7 +3,9 @@
</style>
<template>
<div class="trip-box">
<div class="trip-block" v-for="(item,i) in trips" :key="i">
<div :class="{'trip-block':$q.platform.is.desktop,'q-pb-lg':$q.platform.is.mobile,'q-pt-lg':$q.platform.is.mobile&&i==0}" v-for="(item,i) in trips" :key="i">
<template v-if="$q.platform.is.desktop">
<div class="trip-title" :id="`days_${i}`">
<div>
<p class="day">第<span v-if='item.dayNum<10'>0</span>{{item.dayNum}}天</p>
......@@ -16,7 +18,15 @@
<threeday v-if="item.details && item.details.length==3" :day='item' :isDirect="isDirect"></threeday>
<fourday v-if="item.details && item.details.length==4" :day='item' :isDirect="isDirect"></fourday>
<fiveday v-if="item.details && item.details.length>=5" :day='item' :isDirect="isDirect"></fiveday>
</template>
<template v-else>
<div :id="`days_${i}`">
<allDay :day='item' :isDirect="isDirect"></allDay>
</div>
</template>
</div>
</div>
</template>
<script>
......@@ -25,9 +35,11 @@
import threeday from './threeday'
import fourday from './fourday'
import fiveday from './fiveday'
import allDay from './allDay'
export default {
props: ['tripList', 'isDirect', 'clickDate','days','currentHeightDay'],
components: {
allDay,
oneday,
twoday,
threeday,
......@@ -45,7 +57,7 @@
this.daysClass.forEach((x,i)=>{
var object=document.getElementById(`days_${i}`);
x.top = object.getBoundingClientRect().top+300
x.top = object.getBoundingClientRect().top+100
})
} catch (error) {
console.log('----异常')
......
src/pages/detailsNew.vue
View file @ 4e591cec
......@@ -344,7 +344,7 @@
v-if="dataList"
style="max-width: 1200px; margin-left: auto; margin-right: auto"
class="q-mt-xl row"
:class="{ 'q-px-md': $q.screen.width < 1220 }"
:class="{ 'q-px-md': $q.screen.width < 1220&&$q.screen.width>760, }"
>
<div class="col q-ml-xl position-relative"
v-if="dayList.length>3&&currentHeight > days[0].top-60&&currentHeight < navs[2].top&&$q.platform.is.desktop">
......@@ -365,7 +365,7 @@
</div>
</div>
<div :class="{'col-8':$q.platform.is.desktop,'col':$q.platform.is.mobile}">
<div class="text-h5 text-weight-bold text-left" ref="feature">
<div class="text-h5 text-weight-bold text-left" ref="feature" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">
行程特色
</div>
<div
......@@ -380,11 +380,11 @@
v-html="dataList.feature.featureHtml"
v-if="dataList.feature.featureHtml != ''"
></div>
<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" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">
行程介紹
</div>
<div class="q-pb-xl" >
<smaple :trip="dataList"></smaple>
<smaple :trip="dataList" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}"></smaple>
<template v-if="dataList.dayList.length<=3">
<trip :trip="dataList" @change="changeTripShowHandler"></trip>
</template>
......@@ -392,42 +392,47 @@
<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" ref="price">
<div class="text-h5 text-weight-bold text-left q-mt-xl" ref="price" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">
費用說明
</div>
<div class="text-subtitle1 text-weight-bold q-my-md">費用包含</div>
<div class="text-subtitle1 text-weight-bold q-my-md" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">費用包含</div>
<div
class="q-mt-md trip-text"
v-html="dataList.feature.feeInclude"
:class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}"
></div>
<div class="text-subtitle1 text-weight-bold q-my-md">費用不含</div>
<div class="text-subtitle1 text-weight-bold q-my-md" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">費用不含</div>
<div
class="q-mt-md trip-text q-pb-xl"
v-html="dataList.feature.feeNonInclude"
:class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}"
></div>
<div class="text-h5 text-weight-bold text-left q-mt-xl" ref="warning">
<div class="text-h5 text-weight-bold text-left q-mt-xl" ref="warning" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">
購買須知
</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?dataList.feature.importantTip:'暂无购买须知'"
:class="{'q-mx-md': $q.screen.width < 1220&&$q.platform.is.mobile}"
></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" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">
溫馨提示
</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?dataList.feature.warmTip:'暂无溫馨提示'"
:class="{'q-mx-md': $q.screen.width < 1220&&$q.platform.is.mobile}"
></div>
<div
class="text-h5 text-weight-bold text-left q-mt-xl"
ref="cancelTips"
:class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}"
>
取消政策
</div>
<div class="q-mt-lg trip-text q-mb-xl">
<div class="q-mt-lg trip-text q-mb-xl" :class="{'q-mx-md': $q.screen.width < 1220&&$q.platform.is.mobile}">
<ul class="no-padding text-grey-9 q-ml-md">
<li>所选日期 15 天（含）之前取消，收取手续费 0%</li>
<li class="q-mt-sm">所选日期 8 ~ 14 天之间取消，收取手续费 30%</li>
......@@ -789,7 +794,7 @@ export default {
this.$refs.diyContext.getBoundingClientRect().width
) / 1123.0 :parseFloat(
this.$refs.diyContext.getBoundingClientRect().width
) / 1000.0;
) / 975.0;
this.zoomDiyContext = tw > 1 ? 1 : tw.toFixed(2);
}
......
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