Commit 27d23c53 authored by 黄奎's avatar 黄奎

页面修改

parent 8f207d0d
<template>
<!--圖片 - 3x1-->
<div>
<section class="tour2 section-block">
<h2 class="block-title">圖片 - 3x1</h2>
<p class="title-teaser">看看大家都去哪些熱門景點</p>
<h2 class="block-title">{{plugData.Title}}</h2>
<p class="title-teaser">{{plugData.SubTitle}}</p>
<ul class="pd-list">
<li class="pd-box">
<a
href="/"
title="魅力歐洲~法比荷、最愛羅浮宮、五星鹿特丹、絕美羊角村、魅力風車城8日"
class="pd-link"
>
<div
class="pd-img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence1.jpg');"
>
<li class="pd-box" v-for="(item,index) in plugData.Details" :key="index">
<a href="javascript:void(0)" :title="item.TripTitle" class="pd-link">
<div class="pd-img" :style="{backgroundImage:`url('${item.ImageUrl}')`}">
<div class="pd-price">
<div class="price">
8
<small class="unit"></small> 67,000
{{item.DayNum}}
<small class="unit"></small> {{item.Price}}
<small class="unit">元起</small>
</div>
</div>
</div>
<div class="pd-content">
<h3 class="pd-title">
魅力歐洲~法比荷、最愛羅浮宮、五星鹿特丹、絕美羊角村、魅力風車城8日
</h3>
</div>
</a>
</li>
<li class="pd-box">
<a
href="/"
title="夢幻灣沙灘俱樂部、烏布皇宮傳統市集、小婆羅浮屠5日"
class="pd-link"
>
<div
class="pd-img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence2.jpg');"
>
<div class="pd-price">
<div class="price">
5
<small class="unit"></small> 25,900
<small class="unit">元起</small>
</div>
</div>
</div>
<div class="pd-content">
<h3 class="pd-title">
夢幻灣沙灘俱樂部、烏布皇宮傳統市集、小婆羅浮屠5日
</h3>
</div>
</a>
</li>
<li class="pd-box">
<a
href="/"
title="樂天世界塔水族館.景福宮韓服體驗.7017首爾路.東大門CHEF秀4日"
class="pd-link"
>
<div
class="pd-img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence3.jpg');"
>
<div class="pd-price">
<div class="price">
4
<small class="unit"></small> 20,900
<small class="unit">元起</small>
</div>
</div>
</div>
<div class="pd-content">
<h3 class="pd-title">
樂天世界塔水族館.景福宮韓服體驗.7017首爾路.東大門CHEF秀4日
{{item.TripTitle}}
</h3>
</div>
</a>
</li>
</ul>
</section>
</div>
</template>
<script>
//圖片 - 3x1
export default {};
export default {
props: ["plugData"]
};
</script>
<style>
.tour2 {
}
.tour2 .block-title {
font-size: 22px;
font-weight: 600;
padding:0;
margin:0;
line-height: unset;
}
.tour2 .title-teaser {
margin-bottom: 10px;
font-size: 16px;
color: #999;
}
.tour2 .pd-list {
display: flex;
flex-flow: row wrap;
padding: 0;
margin: 0;
}
.tour2 .pd-list .pd-box {
padding: 0;
margin: 0;
margin-right: 20px;
margin-bottom: 20px;
flex-basis: calc(33.333% - 15px);
border-radius: 3px;
background-clip: padding-box;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
transition: -webkit--webkit-transform 0.2s ease,
-webkit--moz-transform 0.2s ease, -webkit--o-transform 0.2s ease,
-webkit-transform 0.2s ease, -webkit-transform 0.2s ease,
-moz-transform 0.2s ease, -o-transform 0.2s ease, transform 0.2s ease,
box-shadow 0.2s ease;
background-color: #fff;
list-style: none;
border-radius: 4px;
overflow: hidden;
}
.tour2 .pd-list .pd-box:last-child {
margin-right: 0px;
}
a {
text-decoration: none;
color: var(--q-color-primary);
}
.tour2 .pd-box .pd-img {
position: relative;
width: 100%;
padding-bottom: 66.237%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
}
.tour2 .pd-box .pd-img .pd-price {
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
width: 100%;
border-bottom: 4px solid var(--q-color-primary);
text-align: right;
}
.tour2 .pd-box .pd-img .pd-price .price {
display: inline-block;
padding: 4px 12px 0;
color: #fff;
font-size: 22px;
font-weight: 700;
background-color: var(--q-color-primary);
-webkit-border-radius: 5px 0 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 5px 0 0;
-moz-background-clip: padding;
border-radius: 5px 0 0;
background-clip: padding-box;
}
.tour2 .pd-box .pd-img .pd-price .price small {
padding: 0 4px;
font-size: 14px;
}
.tour2 .pd-box .pd-content {
padding: 15px 15px 20px;
}
.tour2 .pd-box .pd-title {
font-size: 15px;
line-height: 1.5;
font-weight: 400;
color: #333;
}
@media only screen and (max-width: 1200px) {
.tour2 .pd-list .pd-box {
flex-basis: calc(50% - 10px) !important;
.tour2 {}
.tour2 .block-title {
font-size: 22px;
font-weight: 600;
padding: 0;
margin: 0;
line-height: unset;
}
.tour2 .pd-list .pd-box:nth-child(even) {
margin-right: 0 !important;
.tour2 .title-teaser {
margin-bottom: 10px;
font-size: 16px;
color: #999;
}
}
@media only screen and (min-width: 768px) {
.pd-box:hover {
transform: translate(0, -4px) !important;
box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.1) !important;
.tour2 .pd-list {
display: flex;
flex-flow: row wrap;
padding: 0;
margin: 0;
}
}
@media only screen and (max-width: 425px) {
.tour2 .pd-list .pd-box {
flex-basis: 100% !important;
margin-right: 0 !important;
padding: 0;
margin: 0;
margin-right: 20px;
margin-bottom: 20px;
flex-basis: calc(33.333% - 15px);
border-radius: 3px;
background-clip: padding-box;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
transition: -webkit--webkit-transform 0.2s ease,
-webkit--moz-transform 0.2s ease, -webkit--o-transform 0.2s ease,
-webkit-transform 0.2s ease, -webkit-transform 0.2s ease,
-moz-transform 0.2s ease, -o-transform 0.2s ease, transform 0.2s ease,
box-shadow 0.2s ease;
background-color: #fff;
list-style: none;
border-radius: 4px;
overflow: hidden;
}
.tour2 .pd-list .pd-box:last-child {
margin-right: 0px;
}
a {
text-decoration: none;
color: var(--q-color-primary);
}
}
.tour2 .pd-box .pd-img {
position: relative;
width: 100%;
padding-bottom: 66.237%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
}
.tour2 .pd-box .pd-img .pd-price {
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
width: 100%;
border-bottom: 4px solid var(--q-color-primary);
text-align: right;
}
.tour2 .pd-box .pd-img .pd-price .price {
display: inline-block;
padding: 4px 12px 0;
color: #fff;
font-size: 22px;
font-weight: 700;
background-color: var(--q-color-primary);
-webkit-border-radius: 5px 0 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 5px 0 0;
-moz-background-clip: padding;
border-radius: 5px 0 0;
background-clip: padding-box;
}
.tour2 .pd-box .pd-img .pd-price .price small {
padding: 0 4px;
font-size: 14px;
}
.tour2 .pd-box .pd-content {
padding: 15px 15px 20px;
}
.tour2 .pd-box .pd-title {
font-size: 15px;
line-height: 1.5;
font-weight: 400;
color: #333;
}
@media only screen and (max-width: 1200px) {
.tour2 .pd-list .pd-box {
flex-basis: calc(50% - 10px) !important;
}
.tour2 .pd-list .pd-box:nth-child(even) {
margin-right: 0 !important;
}
}
@media only screen and (min-width: 768px) {
.pd-box:hover {
transform: translate(0, -4px) !important;
box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.1) !important;
}
}
@media only screen and (max-width: 425px) {
.tour2 .pd-list .pd-box {
flex-basis: 100% !important;
margin-right: 0 !important;
}
}
</style>
<template>
<!--圖片 - 4x1-->
<div>
<section class="tour1 section-block">
<h2 class="block-title">圖片 - 4x1</h2>
<p class="title-teaser">看看大家都去哪些熱門景點</p>
<h2 class="block-title">{{plugData.Title}}</h2>
<p class="title-teaser">{{plugData.SubTitle}}</p>
<ul class="pd-list">
<li class="pd-box">
<a href="/" title="魅力歐洲~法比荷、最愛羅浮宮、五星鹿特丹、絕美羊角村、魅力風車城8日" class="pd-link">
<div
class="pd-img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence1.jpg');"
>
<li class="pd-box" v-for="(item,index) in plugData.Details" :key="index">
<a href="javascript:void(0)" :title="item.TripTitle" class="pd-link">
<div class="pd-img" :style="{backgroundImage:`url('${item.ImageUrl}')`}">
<div class="pd-price">
<div class="price">
8
<small class="unit"></small> 67,000
{{item.DayNum}}
<small class="unit"></small> {{item.Price}}
<small class="unit">元起</small>
</div>
</div>
</div>
<div class="pd-content">
<h3 class="pd-title">魅力歐洲~法比荷、最愛羅浮宮、五星鹿特丹、絕美羊角村、魅力風車城8日</h3>
</div>
</a>
</li>
<li class="pd-box">
<a href="/" title="夢幻灣沙灘俱樂部、烏布皇宮傳統市集、小婆羅浮屠5日" class="pd-link">
<div
class="pd-img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence2.jpg');"
>
<div class="pd-price">
<div class="price">
5
<small class="unit"></small> 25,900
<small class="unit">元起</small>
</div>
</div>
</div>
<div class="pd-content">
<h3 class="pd-title">夢幻灣沙灘俱樂部、烏布皇宮傳統市集、小婆羅浮屠5日</h3>
</div>
</a>
</li>
<li class="pd-box">
<a href="/" title="樂天世界塔水族館.景福宮韓服體驗.7017首爾路.東大門CHEF秀4日" class="pd-link">
<div
class="pd-img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence3.jpg');"
>
<div class="pd-price">
<div class="price">
4
<small class="unit"></small> 20,900
<small class="unit">元起</small>
</div>
</div>
</div>
<div class="pd-content">
<h3 class="pd-title">樂天世界塔水族館.景福宮韓服體驗.7017首爾路.東大門CHEF秀4日</h3>
</div>
</a>
</li>
<li class="pd-box">
<a href="/" class="pd-link">
<div
class="pd-img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence4.jpg');"
>
<div class="pd-price">
<div class="price">
10
<small class="unit"></small>
65,900
<small class="unit">元起</small>
</div>
</div>
</div>
<div class="pd-content">
<h3 class="pd-title">特選東北德~童話大道.柏林.小瑞士.羊角村.四世界遺產.雙遊船10日</h3>
<h3 class="pd-title">{{item.TripTitle}}</h3>
</div>
</a>
</li>
......@@ -85,123 +25,139 @@
</section>
</div>
</template>
<script>
//圖片 - 4x1
export default {};
export default {
props: ["plugData"]
};
</script>
<style>
.tour1 {
}
.tour1 .block-title {
font-size: 22px;
font-weight: 600;
padding:0;
margin:0;
}
.tour1 .title-teaser {
margin-bottom: 10px;
font-size: 16px;
color: #999;
}
.tour1 .pd-list {
display: flex;
flex-flow: row wrap;
padding: 0;
margin: 0;
}
.tour1 .pd-list .pd-box {
padding: 0;
margin: 0;
margin-right: 20px;
margin-bottom: 20px;
width: calc(25% - 15px);
border-radius: 3px;
background-clip: padding-box;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
transition: -webkit--webkit-transform 0.2s ease,
-webkit--moz-transform 0.2s ease, -webkit--o-transform 0.2s ease,
-webkit-transform 0.2s ease, -webkit-transform 0.2s ease,
-moz-transform 0.2s ease, -o-transform 0.2s ease, transform 0.2s ease,
box-shadow 0.2s ease;
background-color: #fff;
list-style: none;
border-radius: 4px;
overflow: hidden;
}
.tour1 .pd-list .pd-box:last-child {
margin-right: 0px;
}
a {
text-decoration: none;
color: var(--q-color-primary);
}
.tour1 .pd-box .pd-img {
position: relative;
width: 100%;
padding-bottom: 66.237%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
}
.tour1 .pd-box .pd-img .pd-price {
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
width: 100%;
border-bottom: 4px solid var(--q-color-primary);
text-align: right;
}
.tour1 .pd-box .pd-img .pd-price .price {
display: inline-block;
padding: 4px 12px 0;
color: #fff;
font-size: 22px;
font-weight: 700;
background-color: var(--q-color-primary);
-webkit-border-radius: 5px 0 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 5px 0 0;
-moz-background-clip: padding;
border-radius: 5px 0 0;
background-clip: padding-box;
}
.tour1 .pd-box .pd-img .pd-price .price small {
padding: 0 4px;
font-size: 14px;
}
.tour1 .pd-box .pd-content {
padding: 15px 15px 20px;
}
.tour1 .pd-box .pd-title {
font-size: 15px;
line-height: 1.5;
font-weight: 400;
color: #333;
}
@media only screen and (max-width: 1200px) {
.tour1 .pd-list .pd-box {
flex-basis: calc(50% - 10px) !important;
.tour1 {}
.tour1 .block-title {
font-size: 22px;
font-weight: 600;
padding: 0;
margin: 0;
}
.tour1 .pd-list .pd-box:nth-child(even) {
margin-right: 0 !important;
.tour1 .title-teaser {
margin-bottom: 10px;
font-size: 16px;
color: #999;
}
}
@media only screen and (min-width: 768px) {
.pd-box:hover {
transform: translate(0, -4px) !important;
box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.1) !important;
.tour1 .pd-list {
display: flex;
flex-flow: row wrap;
padding: 0;
margin: 0;
}
}
@media only screen and (max-width: 425px) {
.tour1 .pd-list .pd-box {
flex-basis: 100% !important;
margin-right: 0 !important;
padding: 0;
margin: 0;
margin-right: 20px;
margin-bottom: 20px;
width: calc(25% - 15px);
border-radius: 3px;
background-clip: padding-box;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
transition: -webkit--webkit-transform 0.2s ease,
-webkit--moz-transform 0.2s ease, -webkit--o-transform 0.2s ease,
-webkit-transform 0.2s ease, -webkit-transform 0.2s ease,
-moz-transform 0.2s ease, -o-transform 0.2s ease, transform 0.2s ease,
box-shadow 0.2s ease;
background-color: #fff;
list-style: none;
border-radius: 4px;
overflow: hidden;
}
.tour1 .pd-list .pd-box:last-child {
margin-right: 0px;
}
a {
text-decoration: none;
color: var(--q-color-primary);
}
.tour1 .pd-box .pd-img {
position: relative;
width: 100%;
padding-bottom: 66.237%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
}
.tour1 .pd-box .pd-img .pd-price {
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
width: 100%;
border-bottom: 4px solid var(--q-color-primary);
text-align: right;
}
.tour1 .pd-box .pd-img .pd-price .price {
display: inline-block;
padding: 4px 12px 0;
color: #fff;
font-size: 22px;
font-weight: 700;
background-color: var(--q-color-primary);
-webkit-border-radius: 5px 0 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 5px 0 0;
-moz-background-clip: padding;
border-radius: 5px 0 0;
background-clip: padding-box;
}
.tour1 .pd-box .pd-img .pd-price .price small {
padding: 0 4px;
font-size: 14px;
}
.tour1 .pd-box .pd-content {
padding: 15px 15px 20px;
}
.tour1 .pd-box .pd-title {
font-size: 15px;
line-height: 1.5;
font-weight: 400;
color: #333;
}
}
@media only screen and (max-width: 1200px) {
.tour1 .pd-list .pd-box {
flex-basis: calc(50% - 10px) !important;
}
.tour1 .pd-list .pd-box:nth-child(even) {
margin-right: 0 !important;
}
}
@media only screen and (min-width: 768px) {
.pd-box:hover {
transform: translate(0, -4px) !important;
box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.1) !important;
}
}
@media only screen and (max-width: 425px) {
.tour1 .pd-list .pd-box {
flex-basis: 100% !important;
margin-right: 0 !important;
}
}
</style>
<template>
<div class="q-mt-lg">
<section class="vedio1 section-block">
<div class="vedio-wrap">
<div class="vedio">
<q-video class="iframe" src="https://www.youtube.com/embed/k3_tw44QsZQ?rel=0" />
<div class="q-mt-lg">
<section class="vedio1 section-block">
<div class="vedio-wrap">
<div class="vedio">
<q-video class="iframe" :src="'https://www.youtube.com/embed/'+plugData.VideoId" />
</div>
</div>
</div>
<div class="content">
<h2 class="block-title">影片 - 1</h2>
<p
class="block-desc"
>創立於2018年。主要業務包括國內外旅遊、飯店、機票、商務旅遊等全方位服務。合作飯店覆蓋全球200個國家,並與超過一百萬間酒店緊密合作。我們擁有先進的交易服務平台,包括行動裝置瀏覽模式,目前有超過60%以上的訂單是從手機預訂,讓您隨時隨地輕鬆預定行程。我們致力於讓旅遊變得容易,專業行程企劃為您掌握最新景點、最佳行程!</p>
</div>
</section>
</div>
<div class="content">
<!--影片 - 1-->
<h2 class="block-title">{{plugData.Title}}</h2>
<p class="block-desc">
{{plugData.Describe}}
</p>
</div>
</section>
</div>
</template>
<script>
export default {};
export default {
props: ["plugData"]
};
</script>
<style>
@media only screen and (max-width: 1200px) {
.vedio1 > * {
width: 100% !important;
@media only screen and (max-width: 1200px) {
.vedio1>* {
width: 100% !important;
}
.vedio1 .content {
padding-top: 0px !important;
padding-left: 0 !important;
margin: 0 !important;
}
.vedio1 .content .block-title {
margin: 0 !important;
}
}
.vedio1 {
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 0 0;
}
.vedio1>* {
position: relative;
width: 50%;
}
.vedio1 .vedio {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.vedio1 .vedio .iframe {
position: absolute;
width: 100%;
left: 0;
top: 0;
bottom: 0;
}
.vedio1 .content {
padding-top: 0px !important;
padding-left: 0 !important;
margin: 0 !important;
padding-left: 40px;
}
.vedio1 .content .block-title {
margin: 0 !important;
font-size: 25px;
margin-bottom: 0px;
font-weight: 600;
}
.vedio1 .content .block-desc {
line-height: 1.8;
font-size: 16px;
color: #666;
}
}
.vedio1 {
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 0 0;
}
.vedio1 > * {
position: relative;
width: 50%;
}
.vedio1 .vedio {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.vedio1 .vedio .iframe {
position: absolute;
width: 100%;
left: 0;
top: 0;
bottom: 0;
}
.vedio1 .content {
padding-left: 40px;
}
.vedio1 .content .block-title {
font-size: 25px;
margin-bottom: 0px;
font-weight:600;
}
.vedio1 .content .block-desc {
line-height: 1.8;
font-size: 16px;
color: #666;
}
</style>
\ No newline at end of file
</style>
......@@ -3,7 +3,7 @@
<section class="vedio2 section-block">
<div class="vedio-wrap">
<div class="vedio">
<q-video class="iframe" src="https://www.youtube.com/embed/k3_tw44QsZQ?rel=0" />
<q-video class="iframe" :src="'https://www.youtube.com/embed/'+plugData.VideoId" />
</div>
</div>
</section>
......@@ -11,42 +11,38 @@
</template>
<script>
export default {};
export default {
props: ["plugData"]
};
</script>
<style>
@media only screen and (max-width: 1200px) {
/* .vedio1 > * {
width: 100% !important;
}
.vedio1 .content {
padding-top: 0px !important;
padding-left: 0 !important;
margin: 0 !important;
@media only screen and (max-width: 1200px) {}
.vedio2 {
padding: 0 0;
}
.vedio1 .content .block-title {
margin: 0 !important;
} */
}
.vedio2 {
padding: 0 0;
}
.vedio2 .vedio-wrap{
position: relative;
.vedio2 .vedio-wrap {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 800px;
}
.vedio2 .vedio {
}
.vedio2 .vedio {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.vedio2 .vedio .iframe {
position: absolute;
width: 100%;
left: 0;
top: 0;
bottom: 0;
}
</style>
\ No newline at end of file
}
.vedio2 .vedio .iframe {
position: absolute;
width: 100%;
left: 0;
top: 0;
bottom: 0;
}
</style>
......@@ -17,8 +17,12 @@
</paragraphright>
<paragraphafter v-if="item.Id=='white_label_paragraph_title'&&item.plugData.Type==6" :plugData="item.plugData">
</paragraphafter>
<!--自訂版型(影片)-->
<videoOne v-if="item.Id=='white_label_video'&&item.plugData.Type==1" :plugData="item.plugData"></videoOne>
<videoTwo v-if="item.Id=='white_label_video'&&item.plugData.Type==2" :plugData="item.plugData"></videoTwo>
<!--自訂版型(圖片)和挑選自有行程(圖片)-->
<diyImgOne v-if="item.Id=='white_label_picture'&&item.plugData.Type==1" :plugData="item.plugData"></diyImgOne>
<diyImgTwo v-if="item.Id=='white_label_picture'&&item.plugData.Type==2" :plugData="item.plugData"></diyImgTwo>
</template>
</q-page>
......
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