Skip to content

M
million
Commit 27d23c53 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 8f207d0d
Show whitespace changes
Inline Side-by-side
Showing with 377 additions and 445 deletions
src/components/label_picture/diy-img-one.vue
View file @ 27d23c53
<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 {
.tour2 {}
.tour2 .block-title {
font-size: 22px;
font-weight: 600;
padding:0;
margin:0;
padding: 0;
margin: 0;
line-height: unset;
}
.tour2 .title-teaser {
}
.tour2 .title-teaser {
margin-bottom: 10px;
font-size: 16px;
color: #999;
}
.tour2 .pd-list {
}
.tour2 .pd-list {
display: flex;
flex-flow: row wrap;
padding: 0;
margin: 0;
}
.tour2 .pd-list .pd-box {
}
.tour2 .pd-list .pd-box {
padding: 0;
margin: 0;
margin-right: 20px;
......@@ -128,15 +78,18 @@ export default {};
list-style: none;
border-radius: 4px;
overflow: hidden;
}
.tour2 .pd-list .pd-box:last-child {
}
.tour2 .pd-list .pd-box:last-child {
margin-right: 0px;
}
a {
}
a {
text-decoration: none;
color: var(--q-color-primary);
}
.tour2 .pd-box .pd-img {
}
.tour2 .pd-box .pd-img {
position: relative;
width: 100%;
padding-bottom: 66.237%;
......@@ -145,8 +98,9 @@ a {
-o-background-size: cover;
background-size: cover;
background-position: center;
}
.tour2 .pd-box .pd-img .pd-price {
}
.tour2 .pd-box .pd-img .pd-price {
position: absolute;
right: 0;
bottom: 0;
......@@ -154,8 +108,9 @@ a {
width: 100%;
border-bottom: 4px solid var(--q-color-primary);
text-align: right;
}
.tour2 .pd-box .pd-img .pd-price .price {
}
.tour2 .pd-box .pd-img .pd-price .price {
display: inline-block;
padding: 4px 12px 0;
color: #fff;
......@@ -168,39 +123,46 @@ a {
-moz-background-clip: padding;
border-radius: 5px 0 0;
background-clip: padding-box;
}
.tour2 .pd-box .pd-img .pd-price .price small {
}
.tour2 .pd-box .pd-img .pd-price .price small {
padding: 0 4px;
font-size: 14px;
}
.tour2 .pd-box .pd-content {
}
.tour2 .pd-box .pd-content {
padding: 15px 15px 20px;
}
.tour2 .pd-box .pd-title {
}
.tour2 .pd-box .pd-title {
font-size: 15px;
line-height: 1.5;
font-weight: 400;
color: #333;
}
}
@media only screen and (max-width: 1200px) {
@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) {
}
@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) {
}
@media only screen and (max-width: 425px) {
.tour2 .pd-list .pd-box {
flex-basis: 100% !important;
margin-right: 0 !important;
}
}
}
</style>
src/components/label_picture/diy-img-two.vue
View file @ 27d23c53
<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,33 +25,37 @@
</section>
</div>
</template>
<script>
//圖片 - 4x1
export default {};
export default {
props: ["plugData"]
};
</script>
<style>
.tour1 {
}
.tour1 .block-title {
.tour1 {}
.tour1 .block-title {
font-size: 22px;
font-weight: 600;
padding:0;
margin:0;
}
.tour1 .title-teaser {
padding: 0;
margin: 0;
}
.tour1 .title-teaser {
margin-bottom: 10px;
font-size: 16px;
color: #999;
}
.tour1 .pd-list {
}
.tour1 .pd-list {
display: flex;
flex-flow: row wrap;
padding: 0;
margin: 0;
}
.tour1 .pd-list .pd-box {
}
.tour1 .pd-list .pd-box {
padding: 0;
margin: 0;
margin-right: 20px;
......@@ -129,15 +73,18 @@ export default {};
list-style: none;
border-radius: 4px;
overflow: hidden;
}
.tour1 .pd-list .pd-box:last-child {
}
.tour1 .pd-list .pd-box:last-child {
margin-right: 0px;
}
a {
}
a {
text-decoration: none;
color: var(--q-color-primary);
}
.tour1 .pd-box .pd-img {
}
.tour1 .pd-box .pd-img {
position: relative;
width: 100%;
padding-bottom: 66.237%;
......@@ -146,8 +93,9 @@ a {
-o-background-size: cover;
background-size: cover;
background-position: center;
}
.tour1 .pd-box .pd-img .pd-price {
}
.tour1 .pd-box .pd-img .pd-price {
position: absolute;
right: 0;
bottom: 0;
......@@ -155,8 +103,9 @@ a {
width: 100%;
border-bottom: 4px solid var(--q-color-primary);
text-align: right;
}
.tour1 .pd-box .pd-img .pd-price .price {
}
.tour1 .pd-box .pd-img .pd-price .price {
display: inline-block;
padding: 4px 12px 0;
color: #fff;
......@@ -169,39 +118,46 @@ a {
-moz-background-clip: padding;
border-radius: 5px 0 0;
background-clip: padding-box;
}
.tour1 .pd-box .pd-img .pd-price .price small {
}
.tour1 .pd-box .pd-img .pd-price .price small {
padding: 0 4px;
font-size: 14px;
}
.tour1 .pd-box .pd-content {
}
.tour1 .pd-box .pd-content {
padding: 15px 15px 20px;
}
.tour1 .pd-box .pd-title {
}
.tour1 .pd-box .pd-title {
font-size: 15px;
line-height: 1.5;
font-weight: 400;
color: #333;
}
}
@media only screen and (max-width: 1200px) {
@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) {
}
@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) {
}
@media only screen and (max-width: 425px) {
.tour1 .pd-list .pd-box {
flex-basis: 100% !important;
margin-right: 0 !important;
}
}
}
</style>
src/components/label_video/video-one.vue
View file @ 27d23c53
<template>
<div class="q-mt-lg">
<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" />
<q-video class="iframe" :src="'https://www.youtube.com/embed/'+plugData.VideoId" />
</div>
</div>
<div class="content">
<h2 class="block-title">影片 - 1</h2>
<p
class="block-desc"
>創立於2018年。主要業務包括國內外旅遊、飯店、機票、商務旅遊等全方位服務。合作飯店覆蓋全球200個國家，並與超過一百萬間酒店緊密合作。我們擁有先進的交易服務平台，包括行動裝置瀏覽模式，目前有超過60%以上的訂單是從手機預訂，讓您隨時隨地輕鬆預定行程。我們致力於讓旅遊變得容易，專業行程企劃為您掌握最新景點、最佳行程！</p>
<!--影片 - 1-->
<h2 class="block-title">{{plugData.Title}}</h2>
<p class="block-desc">
{{plugData.Describe}}
</p>
</div>
</section>
</div>
</div>
</template>
<script>
export default {};
export default {
props: ["plugData"]
};
</script>
<style>
@media only screen and (max-width: 1200px) {
.vedio1 > * {
@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 {
}
.vedio1 {
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 0 0;
}
.vedio1 > * {
}
.vedio1>* {
position: relative;
width: 50%;
}
.vedio1 .vedio {
}
.vedio1 .vedio {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.vedio1 .vedio .iframe {
}
.vedio1 .vedio .iframe {
position: absolute;
width: 100%;
left: 0;
top: 0;
bottom: 0;
}
.vedio1 .content {
}
.vedio1 .content {
padding-left: 40px;
}
.vedio1 .content .block-title {
}
.vedio1 .content .block-title {
font-size: 25px;
margin-bottom: 0px;
font-weight:600;
}
.vedio1 .content .block-desc {
font-weight: 600;
}
.vedio1 .content .block-desc {
line-height: 1.8;
font-size: 16px;
color: #666;
}
}
</style>
src/components/label_video/video-two.vue
View file @ 27d23c53
......@@ -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;
}
.vedio1 .content .block-title {
margin: 0 !important;
} */
}
.vedio2 {
@media only screen and (max-width: 1200px) {}
.vedio2 {
padding: 0 0;
}
.vedio2 .vedio-wrap{
}
.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 {
}
.vedio2 .vedio .iframe {
position: absolute;
width: 100%;
left: 0;
top: 0;
bottom: 0;
}
}
</style>
src/pages/About.vue
View file @ 27d23c53
......@@ -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