Skip to content

M
million
Commit e2347889 authored by zhengke's avatar zhengke
Browse files
Options

修改

parent 2595939c
Hide whitespace changes
Inline Side-by-side
Showing with 276 additions and 25 deletions
src/components/trip/style6.vue
View file @ e2347889
<style>
.section-tour{
margin-bottom: 30px;
padding: 30px 30px 0;
border: 1px solid #e5e5e5;
background-color: #fff;
}
.wl-section-block{
width:100%;
}
.todayTitle{
font-size: 23px;
color: #666;
font-weight: bold;
.section-tour {
margin-bottom: 30px;
padding: 30px 30px 0;
border: 1px solid #e5e5e5;
background-color: #fff;
}
.wl-section-block {
width: 100%;
}
.todayTitle {
font-size: 23px;
color: #666;
font-weight: bold;
}
.tour-detail-timeline {
padding: 15px 0;
}
.tour-detail-timeline .detail-card {
position: relative;
min-height: 100px;
padding: 16px 0 16px 90px;
line-height: 1.8;
}
.tour-detail-timeline .detail-card::before {
position: absolute;
top: 0;
left: 35px;
content: "";
width: 2px;
height: 100%;
background-color: #eee;
z-index: 1;
}
.tour-detail-timeline .detail-card .day-num {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 70px;
height: 70px;
padding-top: 16px;
text-align: center;
color: #fff;
font-size: 18px;
line-height: 1.2;
background-color: #00afff;
-webkit-border-radius: 50%;
-webkit-background-clip: padding-box;
-moz-border-radius: 50%;
-moz-background-clip: padding;
border-radius: 50%;
background-clip: padding-box;
}
.tour-detail-timeline .detail-inner {
display: flex;
}
.detail-inner .detail-left {
width: calc(100% - 320px);
}
.detail-inner .detail-right {
width: 320px;
padding-left: 20px;
}
@media only screen and (max-width: 900px) {
.detail-inner .detail-left {
width: 100%;
order: 2;
}
.tour-detail-timeline{
padding:15px 0;
}
@media only screen and (max-width: 900px) {
.detail-inner .detail-right {
margin-bottom: 15px;
width: 100%;
order: 1;
padding: 0;
}
.tour-detail-timeline .detail-card {
position: relative;
min-height: 100px;
padding: 16px 0 16px 90px;
line-height: 1.8;
}
.detail_title {
line-height: 1.6;
margin-bottom: 15px;
font-weight: 700;
font-size: 18px;
}
.detail_content6 {
padding: 20px;
background-color: #f8f8f8;
border-radius: 8px;
background-clip: padding-box;
overflow: hidden;
font-size: 16px;
color: #666;
}
.collapse-toggle6 {
position: relative;
width: 100%;
cursor: pointer;
text-align: center;
}
.collapse-toggle6 i{
font-weight: bold;
color:black;
}
.toggle_down:before {
content: "";
width: 100%;
position: absolute;
top: -100px;
left: 0;
z-index: 2;
height: 100px;
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0), #fff);
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0), #fff);
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0), #fff);
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
}
.intro-list {
position: relative;
padding-bottom: 10px;
font-size: 16px;
}
.intro-list ul li {
list-style-type: none;
}
.intro-list i {
position: absolute;
left: 0;
color: #666;
font-size: 24px;
top: -10px;
}
.Style6_meal {
font-size: 13px;
padding-left: 0;
display: inline-block;
vertical-align: top;
margin-right: 5px;
width: 24px;
height: 24px;
border-radius: 50%;
background-clip: padding-box;
border: 1px solid #d2d2d2;
text-align: center;
line-height: 23px;
color: #9e9e9e;
font-weight: 400;
}
.same-class {
display: inline-block;
vertical-align: middle;
color: #999;
}
.custom-caption {
text-align: center;
padding: 12px;
color: #fff;
background: rgba(0, 0, 0, 0.5);
}
.style6_val{
margin-left:30px;
}
@media only screen and (max-width: 900px){
.detail-card .detail-inner {
flex-direction: column;
}
}
.isHiden6{
height:180px;
overflow: hidden;
}
</style>
<template>
<div class="Style6_main">
<section class="section-tour wl-section-block">
<div class="todayTitle">每日行程</div>
<div class="tour-detail-timeline">
<div class="detail-card">
<div class="detail-card" v-for="(item,index) in trips" :key="index">
<div class="day-num">
Day<br>{{item.dayNum}}
</div>
<div class="detail-inner">
<div class="detail-left">
<div class="detail_title">
{{item.title}}
</div>
<div class="detail_content6" :class="{'isHiden6':item.isShow}">
<div v-for="(childItem,chiIndex) in item.details" :key="chiIndex">
【{{childItem.title}}】{{childItem.content}}
</div>
</div>
<div class="collapse-toggle6" v-if="!item.isShow">
<i class="iconfont iconarrow-top" @click="getSideShow(item)"></i>
</div>
<div class="collapse-toggle6 toggle_down" v-else>
<i class="iconfont iconarrowdown" @click="getBtmShow(item)"></i>
</div>
<div class="intro-list">
<i class="iconfont iconcanju"></i>
<ul>
<li>
<span class="Style6_meal">早</span>{{item.can.breakfirst}}
</li>
<li>
<span class="Style6_meal">中</span>{{item.can.lanuch}}
</li>
<li>
<span class="Style6_meal">晚</span>{{item.can.dinner}}
</li>
</ul>
</div>
<div class="intro-list">
<i class="iconfont iconfangzi"></i>
<div class="style6_val" v-if='item.jiu2.length>0'>
<label class="detail_meal" v-for="(t,k) in item.jiu2" :key="k">
{{k==item.jiu2.length-1?t.name:t.name+' / '}}
</label>
{{getHotelSuffix(item)}}
</div>
<div class="style6_val" v-else>本日无酒店安排</div>
</div>
</div>
<div class="detail-right">
<template>
{{item.slide}}
<q-carousel v-model="item.slide" color="white" arrows height="300px">
<q-carousel-slide :img-src="x.img" v-for="(x, i) in item.details" :name="i" :key="i">
<div class="absolute-bottom custom-caption">
<div class="q-headline">{{x.title}}</div>
</div>
</q-carousel-slide>
</q-carousel>
</template>
</div>
</div>
</div>
</div>
</section>
......@@ -50,6 +274,15 @@
this.init();
},
methods: {
getSideShow(item){
item.isShow=true;
this.$forceUpdate();
},
getBtmShow(item){
item.isShow=false;
this.$forceUpdate();
},
init() {
this.tripList.forEach((x, j) => {
let useDinnerTypeBy = ''
......@@ -254,7 +487,9 @@
x.islast = (j + 1) == this.tripList.length
this.$set(this.tripList, j, x)
x.dateTime = this.setDate(j);
x.myIndex=1;
x.myIndex = 1;
x.isShow=false;
x.slide = 0;
})
this.trips = this.tripList
......@@ -274,6 +509,22 @@
return Y + M + D;
}
},
getHotelSuffix(item) {
let suffix = "";
if (item.jiu2.length > 1) {
if (this.isDirect === 1) {
suffix = "或同級"
}
} else {
if (item.jiu2.length == 1 && item.jiu2[0].name != '温馨的家') {
if (this.isDirect === 1) {
suffix = "【保证入住】"
}
}
}
return suffix;
},
},
};
......
src/pages/details.vue
View file @ e2347889
......@@ -72,11 +72,11 @@
<template v-for="(item,index) in TripConfig.TripConfig.SortList">
<!-- 行程資訊 -->
<!-- TripListStyle 1月历 2列表 -->
<travelList v-if="item.Id=='TripList'" :key="index+10"></travelList>
<!-- <travelList v-if="item.Id=='TripList'" :key="index+10"></travelList> -->
<!-- 每日行程 -->
<!-- TripDayStyle 1竖起排 2横起 -->
<headStyle3 v-if="item.Id=='TripDay'" id="tour_detail" ref="tour_detail" :tripList="dayList" :isDirect="isDirect" :key="index+3"></headStyle3>
<!-- <headStyle6 v-if="item.Id=='TripDay'" :tripList="dayList" :key="index+3"></headStyle6> -->
<!-- <headStyle3 v-if="item.Id=='TripDay'" id="tour_detail" ref="tour_detail" :tripList="dayList" :isDirect="isDirect" :key="index+3"></headStyle3> -->
<headStyle6 v-if="item.Id=='TripDay'" :tripList="dayList" :key="index+3"></headStyle6>
<!-- 行程特色 -->
<headStyle4 v-if="item.Id=='TripFeature'" ref="feature" id="feature" :dataList="dataList" :key="index+4"></headStyle4>
<!-- 注意事项 -->
......
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