Skip to content

M
million
Commit 0766d4ec authored by 黄奎's avatar 黄奎
Browse files
Options

插件数据绑定

parent 7ade2e91
Hide whitespace changes
Inline Side-by-side
Showing with 823 additions and 797 deletions
src/components/label_background_article/center.vue
View file @ 0766d4ec
<template>
<!--背景圖 - 文中-->
<div class="q-mt-lg">
<section
class="about3"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_bg1.jpg');"
>
<section class="about3" :style="{backgroundImage:`url('${plugData.ImageUrl}')`}">
<div class="section-block">
<div class="about-main">
<h2 class="about-title">背景圖 - 文中</h2>
<div
class="about-content"
>創立於2018年。主要業務包括國內外旅遊、飯店、機票、商務旅遊等全方位服務。合作飯店覆蓋全球200個國家，並與超過一百萬間酒店緊密合作。我們擁有先進的交易服務平台，包括行動裝置瀏覽模式，目前有超過60%以上的訂單是從手機預訂，讓您隨時隨地輕鬆預定行程。我們致力於讓旅遊變得容易，專業行程企劃為您掌握最新景點、最佳行程！</div>
<h2 class="about-title">{{plugData.Title}}</h2>
<div class="about-content">
{{plugData.Describe}}
</div>
</div>
</div>
</section>
</div>
</template>
<script>
export default {};
export default {
props: ["plugData"],
};
</script>
<style>
.about3 {
background-size: cover;
background-position: center;
position: relative;
margin: 0;
padding: 0;
border: 0;
}
.about3 .section-block {
display: flex;
justify-content: center;
}
.about3::after {
top: 0;
left: 0;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
content: "";
right: 0;
position: absolute;
bottom: 0;
}
.about3 .about-main {
position: relative;
padding: 100px 0;
z-index: 2;
width: 50%;
color: #fff;
font-weight: 700;
letter-spacing: 1px;
}
.about3 .about-main .about-title {
margin-bottom: 35px;
font-size: 38px;
margin: 0;
padding: 0;
line-height: unset;
font-weight: 600;
}
.about3 .about-main .about-content {
font-size: 16px;
line-height: 2.1;
margin: 0;
padding: 0;
}
@media only screen and (max-width: 1200px) {
.about3 {
background-size: cover;
background-position: center;
position: relative;
margin: 0;
padding: 0;
border: 0;
}
.about3 .section-block {
display: flex;
justify-content: center;
}
.about3::after {
top: 0;
left: 0;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
content: "";
right: 0;
position: absolute;
bottom: 0;
}
.about3 .about-main {
padding-right: 30px !important;
padding-left: 30px !important;
width: 100% !important;
position: relative;
padding: 100px 0;
z-index: 2;
width: 50%;
color: #fff;
font-weight: 700;
letter-spacing: 1px;
}
}
</style>
\ No newline at end of file
.about3 .about-main .about-title {
margin-bottom: 35px;
font-size: 38px;
margin: 0;
padding: 0;
line-height: unset;
font-weight: 600;
}
.about3 .about-main .about-content {
font-size: 16px;
line-height: 2.1;
margin: 0;
padding: 0;
}
@media only screen and (max-width: 1200px) {
.about3 .about-main {
padding-right: 30px !important;
padding-left: 30px !important;
width: 100% !important;
}
}
</style>
src/components/label_background_article/left.vue
View file @ 0766d4ec
<template>
<div class="q-mt-lg">
<section
class="about1"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_bg1.jpg');"
>
<div class="section-block">
<div class="about-main">
<h2 class="about-title">背景圖 - 文左</h2>
<div
class="about-content"
>創立於2018年。主要業務包括國內外旅遊、飯店、機票、商務旅遊等全方位服務。合作飯店覆蓋全球200個國家，並與超過一百萬間酒店緊密合作。我們擁有先進的交易服務平台，包括行動裝置瀏覽模式，目前有超過60%以上的訂單是從手機預訂，讓您隨時隨地輕鬆預定行程。我們致力於讓旅遊變得容易，專業行程企劃為您掌握最新景點、最佳行程！</div>
<!--背景圖 - 文左-->
<div class="q-mt-lg">
<section class="about1" :style="{backgroundImage:`url('${plugData.ImageUrl}')`}">
<div class="section-block">
<div class="about-main">
<h2 class="about-title">{{plugData.Title}}</h2>
<div class="about-content">
{{plugData.Describe}}
</div>
</div>
</div>
</div>
</section>
</div>
</section>
</div>
</template>
<script>
export default {};
</script>
export default {
props: ["plugData"],
};
</script>
<style>
.about1 {
background-size: cover;
background-position: center;
position: relative;
margin: 0;
padding: 0;
border: 0;
}
.about1::after {
top: 0;
left: 0;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
content: "";
right: 0;
position: absolute;
bottom: 0;
}
.about1 .about-main {
position: relative;
padding: 100px 0;
z-index: 2;
width: 50%;
color: #fff;
font-weight: 700;
letter-spacing: 1px;
}
.about1 .about-main .about-title {
margin-bottom: 35px;
font-size: 38px;
margin: 0;
padding: 0;
line-height: unset;
font-weight: 600;
}
.about1 .about-main .about-content {
font-size: 16px;
line-height: 2.1;
margin: 0;
padding: 0;
}
@media only screen and (max-width: 1200px) {
.about1 {
background-size: cover;
background-position: center;
position: relative;
margin: 0;
padding: 0;
border: 0;
}
.about1::after {
top: 0;
left: 0;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
content: "";
right: 0;
position: absolute;
bottom: 0;
}
.about1 .about-main {
padding-right: 30px !important;
padding-left: 30px !important;
width: 100% !important;
position: relative;
padding: 100px 0;
z-index: 2;
width: 50%;
color: #fff;
font-weight: 700;
letter-spacing: 1px;
}
}
</style>
\ No newline at end of file
.about1 .about-main .about-title {
margin-bottom: 35px;
font-size: 38px;
margin: 0;
padding: 0;
line-height: unset;
font-weight: 600;
}
.about1 .about-main .about-content {
font-size: 16px;
line-height: 2.1;
margin: 0;
padding: 0;
}
@media only screen and (max-width: 1200px) {
.about1 .about-main {
padding-right: 30px !important;
padding-left: 30px !important;
width: 100% !important;
}
}
</style>
src/components/label_background_article/right.vue
View file @ 0766d4ec
<template>
<div class="q-mt-lg">
<section
class="about2"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_bg1.jpg');"
>
<div class="section-block">
<div class="about-main">
<h2 class="about-title">背景圖 - 文右</h2>
<div
class="about-content"
>創立於2018年。主要業務包括國內外旅遊、飯店、機票、商務旅遊等全方位服務。合作飯店覆蓋全球200個國家，並與超過一百萬間酒店緊密合作。我們擁有先進的交易服務平台，包括行動裝置瀏覽模式，目前有超過60%以上的訂單是從手機預訂，讓您隨時隨地輕鬆預定行程。我們致力於讓旅遊變得容易，專業行程企劃為您掌握最新景點、最佳行程！</div>
<!--背景圖 - 文右-->
<div class="q-mt-lg">
<section class="about2" :style="{backgroundImage:`url('${plugData.ImageUrl}')`}">
<div class="section-block">
<div class="about-main">
<h2 class="about-title"> {{plugData.Title}}</h2>
<div class="about-content"> {{plugData.Describe}}</div>
</div>
</div>
</div>
</section>
</div>
</section>
</div>
</template>
<script>
export default {};
export default {
props: ["plugData"],
};
</script>
<style>
.about2 {
background-size: cover;
background-position: center;
position: relative;
margin: 0;
padding: 0;
border: 0;
}
.about2 .section-block {
.about2 {
background-size: cover;
background-position: center;
position: relative;
margin: 0;
padding: 0;
border: 0;
}
.about2 .section-block {
display: flex;
justify-content: flex-end;
}
.about2::after {
top: 0;
left: 0;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
content: "";
right: 0;
position: absolute;
bottom: 0;
}
.about2 .about-main {
position: relative;
padding: 100px 0;
z-index: 2;
width: 50%;
color: #fff;
font-weight: 700;
letter-spacing: 1px;
}
.about2 .about-main .about-title {
margin-bottom: 35px;
font-size: 38px;
margin: 0;
padding: 0;
line-height: unset;
font-weight: 600;
}
.about2 .about-main .about-content {
font-size: 16px;
line-height: 2.1;
margin: 0;
padding: 0;
}
@media only screen and (max-width: 1200px) {
}
.about2::after {
top: 0;
left: 0;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
content: "";
right: 0;
position: absolute;
bottom: 0;
}
.about2 .about-main {
padding-right: 30px !important;
padding-left: 30px !important;
width: 100% !important;
position: relative;
padding: 100px 0;
z-index: 2;
width: 50%;
color: #fff;
font-weight: 700;
letter-spacing: 1px;
}
}
</style>
\ No newline at end of file
.about2 .about-main .about-title {
margin-bottom: 35px;
font-size: 38px;
margin: 0;
padding: 0;
line-height: unset;
font-weight: 600;
}
.about2 .about-main .about-content {
font-size: 16px;
line-height: 2.1;
margin: 0;
padding: 0;
}
@media only screen and (max-width: 1200px) {
.about2 .about-main {
padding-right: 30px !important;
padding-left: 30px !important;
width: 100% !important;
}
}
</style>
src/components/label_link_paragraph/left.vue
View file @ 0766d4ec
<template>
<!--段落連結 - 圖左-->
<div class="q-mt-lg">
<section class="tour3 section-block">
<div class="pd-img">
<a
href="/"
title="大笨鐘"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence7.jpg');"
></a>
<a @click="OpenNewUrl(plugData.LinkUrl)" :title="plugData.TripTitle" :style="{backgroundImage:`url('${plugData.ImageUrl}')`}"></a>
</div>
<div class="pd-content">
<h2 class="block-title">段落連結 - 圖左</h2>
<p
class="title-teaser"
>鐘樓坐落在泰晤士河畔，是倫敦的標誌之一。於1859年5月31日建成，高320英尺（約合97.5公尺），是世界第三高鐘樓。外牆上有四面巨大的鐘表朝向東南西北四個方向，分針有14英尺長（約合4.27公尺），國會開會期間，鐘面會發出光芒。大本鐘直徑7公尺，重13.5公噸，為英國最大的鐘。 大笨鐘的命名來源眾說紛紜，有一種說法稱大笨鐘的名字來自於班傑明·豪爾爵士，他負責修建了西敏宮。 2009年6月1日，歡慶啟用150週年。2012年6月26日，英國政府宣布為慶祝伊麗莎白二世登基60周年，將大笨鐘所在的鐘樓正式改名為伊麗莎白塔</p>
<a href="/" class="wl-btn wl-btn-radius pd-link">了解更多資訊</a>
<h2 class="block-title">{{plugData.Title}}</h2>
<p class="title-teaser">{{plugData.Describe}}</p>
<a @click="OpenNewUrl(plugData.LinkUrl)" class="wl-btn wl-btn-radius pd-link">了解更多資訊</a>
</div>
</section>
</div>
</template>
<script>
export default {};
export default {
props: ["plugData"]
};
</script>
<style>
.tour3 {
display: flex;
padding: 20px 0;
}
.tour3 .pd-img {
flex-basis: 66%;
}
.tour3 .pd-img a {
padding-bottom: 66.237%;
background-size: cover;
background-position: center;
display: block;
width: 100%;
text-decoration: none;
color: var(--q-color-primary);
}
.tour3 .pd-content {
flex-basis: 34%;
padding: 10px 0 30px 30px;
}
.tour3 .pd-content .block-title {
margin-bottom: 20px;
font-size: 32px;
padding: 0;
margin: 0;
line-height: unset;
font-weight: 600;
}
.tour3 .pd-content .title-teaser {
margin-bottom: 20px;
color: #666;
line-height: 1.8;
font-size: 16px;
}
.tour3 .pd-content .pd-link {
background-color: var(--q-color-primary);
color: #fff;
padding: 12px 30px;
border-radius: 50px;
background-clip: padding-box;
font-size: 15px;
}
@media only screen and (max-width: 1200px) {
.tour3 {
display: block !important;
display: flex;
padding: 20px 0;
}
.tour3 .pd-img {
flex-basis: 100% !important;
flex-basis: 66%;
}
.tour3 .pd-img a {
padding-bottom: 66.237%;
background-size: cover;
background-position: center;
display: block;
width: 100%;
text-decoration: none;
color: var(--q-color-primary);
}
.tour3 .pd-content {
padding: 20px 10px 30px !important;
flex-basis: 100% !important;
flex-basis: 34%;
padding: 10px 0 30px 30px;
}
.tour3 .pd-content .block-title {
margin-bottom: 5px !important;
margin-bottom: 20px;
font-size: 32px;
padding: 0;
margin: 0;
line-height: unset;
font-weight: 600;
}
}
@media only screen and (max-width: 800px) {
.tour3 {
padding: 20px !important;
.tour3 .pd-content .title-teaser {
margin-bottom: 20px;
color: #666;
line-height: 1.8;
font-size: 16px;
}
.tour3 .pd-content .pd-link {
background-color: var(--q-color-primary);
color: #fff;
padding: 12px 30px;
border-radius: 50px;
background-clip: padding-box;
font-size: 15px;
}
}
</style>
\ No newline at end of file
@media only screen and (max-width: 1200px) {
.tour3 {
display: block !important;
}
.tour3 .pd-img {
flex-basis: 100% !important;
}
.tour3 .pd-content {
padding: 20px 10px 30px !important;
flex-basis: 100% !important;
}
.tour3 .pd-content .block-title {
margin-bottom: 5px !important;
}
}
@media only screen and (max-width: 800px) {
.tour3 {
padding: 20px !important;
}
}
</style>
src/components/label_link_paragraph/right.vue
View file @ 0766d4ec
<template>
<!--段落連結 - 圖右-->
<div class="q-mt-lg">
<section class="tour4 section-block">
<div class="pd-content">
<h2 class="block-title">段落連結 - 圖左</h2>
<p
class="title-teaser"
>鐘樓坐落在泰晤士河畔，是倫敦的標誌之一。於1859年5月31日建成，高320英尺（約合97.5公尺），是世界第三高鐘樓。外牆上有四面巨大的鐘表朝向東南西北四個方向，分針有14英尺長（約合4.27公尺），國會開會期間，鐘面會發出光芒。大本鐘直徑7公尺，重13.5公噸，為英國最大的鐘。 大笨鐘的命名來源眾說紛紜，有一種說法稱大笨鐘的名字來自於班傑明·豪爾爵士，他負責修建了西敏宮。 2009年6月1日，歡慶啟用150週年。2012年6月26日，英國政府宣布為慶祝伊麗莎白二世登基60周年，將大笨鐘所在的鐘樓正式改名為伊麗莎白塔</p>
<a href="/" class="wl-btn wl-btn-radius pd-link">了解更多資訊</a>
<h2 class="block-title">{{plugData.Title}}</h2>
<p class="title-teaser">
{{plugData.Describe}}</p>
<a @click="OpenNewUrl(plugData.LinkUrl)" class="wl-btn wl-btn-radius pd-link">了解更多資訊</a>
</div>
<div class="pd-img">
<a
href="/"
title="大笨鐘"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence7.jpg');"
></a>
<a @click="OpenNewUrl(plugData.LinkUrl)" :title="plugData.TripTitle" :style="{backgroundImage:`url('${plugData.ImageUrl}')`}"></a>
</div>
</section>
</div>
</template>
<script>
export default {};
export default {
props: ["plugData"]
};
</script>
<style>
.tour4 {
display: flex;
padding: 20px 0;
}
.tour4 .pd-img {
flex-basis: 66%;
}
.tour4 .pd-img a {
padding-bottom: 66.237%;
background-size: cover;
background-position: center;
display: block;
width: 100%;
text-decoration: none;
color: var(--q-color-primary);
}
.tour4 .pd-content {
flex-basis: 34%;
padding: 10px 30px 30px 0;
}
.tour4 .pd-content .block-title {
margin-bottom: 20px;
font-size: 32px;
padding: 0;
margin: 0;
line-height: unset;
font-weight: 600;
}
.tour4 .pd-content .title-teaser {
margin-bottom: 20px;
color: #666;
line-height: 1.8;
font-size: 16px;
}
.tour4 .pd-content .pd-link {
background-color: var(--q-color-primary);
color: #fff;
padding: 12px 30px;
border-radius: 50px;
background-clip: padding-box;
font-size: 15px;
}
@media only screen and (max-width: 1200px) {
.tour4 {
display: block !important;
display: flex;
padding: 20px 0;
}
.tour4 .pd-img {
flex-basis: 100% !important;
flex-basis: 66%;
}
.tour4 .pd-img a {
padding-bottom: 66.237%;
background-size: cover;
background-position: center;
display: block;
width: 100%;
text-decoration: none;
color: var(--q-color-primary);
}
.tour4 .pd-content {
padding: 20px 10px 30px !important;
flex-basis: 100% !important;
flex-basis: 34%;
padding: 10px 30px 30px 0;
}
.tour4 .pd-content .block-title {
margin-bottom: 5px !important;
margin-bottom: 20px;
font-size: 32px;
padding: 0;
margin: 0;
line-height: unset;
font-weight: 600;
}
}
@media only screen and (max-width: 800px) {
.tour4 {
padding: 20px !important;
.tour4 .pd-content .title-teaser {
margin-bottom: 20px;
color: #666;
line-height: 1.8;
font-size: 16px;
}
}
</style>
\ No newline at end of file
.tour4 .pd-content .pd-link {
background-color: var(--q-color-primary);
color: #fff;
padding: 12px 30px;
border-radius: 50px;
background-clip: padding-box;
font-size: 15px;
}
@media only screen and (max-width: 1200px) {
.tour4 {
display: block !important;
}
.tour4 .pd-img {
flex-basis: 100% !important;
}
.tour4 .pd-content {
padding: 20px 10px 30px !important;
flex-basis: 100% !important;
}
.tour4 .pd-content .block-title {
margin-bottom: 5px !important;
}
}
@media only screen and (max-width: 800px) {
.tour4 {
padding: 20px !important;
}
}
</style>
src/components/label_link_picture/left.vue
View file @ 0766d4ec
<template>
<!--圖片連結 - 圖左-->
<div class="q-mt-lg">
<section class="tour5 section-block">
<a
href="/"
title="波蘭"
class="pd-img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence9.jpg');"
></a>
<a
href="/"
title="波蘭"
class="pd-img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence10.jpg');"
></a>
<a @click="OpenNewUrl(plugData.LinkUrl1)" :title="plugData.TripTitle1" class="pd-img"
:style="{backgroundImage:`url('${plugData.ImageUrl1}')`}"></a>
<a @click="OpenNewUrl(plugData.LinkUrl2)" :title="plugData.TripTitle2" class="pd-img"
:style="{backgroundImage:`url('${plugData.ImageUrl2}')`}"></a>
<div class="pd-content">
<h2 class="block-title">圖片連結 - 圖左</h2>
<p
class="title-teaser"
>波蘭共和國（波蘭語：Rzeczpospolita Polska），簡稱波蘭，是位於中歐的共和制國家，北面瀕臨波羅的海，西面與德國接壤，南部與捷克和斯洛伐克為鄰，烏克蘭和白俄羅斯在東，東北部和立陶宛及俄羅斯加里寧格勒州接壤。面積312,679平方公里，位居歐洲第十；人口約3863萬人，位居歐洲第九。目前為歐盟、北約、聯合國、經濟合作與發展組織、世貿組織等國際組織的成員。</p>
<h2 class="block-title">{{plugData.Title}}</h2>
<p class="title-teaser">
{{plugData.Describe}}
</p>
</div>
</section>
</div>
</template>
<script>
export default {};
export default {
props: ["plugData"]
};
</script>
<style>
.tour5 {
display: flex;
padding: 20px 0;
flex-wrap: wrap;
}
.tour5 > * {
display: block;
margin-right: 20px;
flex-basis: calc(33.333% - 15px);
}
.tour5 .pd-img::before {
content: "";
float: left;
padding-top: 100%;
box-sizing: border-box;
}
.tour5 .pd-img {
background-size: cover;
background-position: center;
text-decoration: none;
color: var(--q-color-primary);
}
.tour5 > :nth-child(3n) {
margin-right: 0;
}
.tour5 .pd-content .block-title {
font-size: 32px;
font-weight: 600;
padding: 0;
margin: 0;
line-height: unset;
}
.tour5 .pd-content .title-teaser {
font-size: 16px;
color: #666;
line-height: 1.8;
padding: 0;
margin: 0;
}
@media only screen and (max-width: 800px) {
.tour5 {
padding: 20px;
display: flex;
padding: 20px 0;
flex-wrap: wrap;
}
}
@media only screen and (max-width: 1200px) {
.tour5 > * {
flex-basis: calc(50% - 10px);
margin-bottom: 20px;
.tour5>* {
display: block;
margin-right: 20px;
flex-basis: calc(33.333% - 15px);
}
.tour5 > :nth-child(even) {
margin-right: 0;
.tour5 .pd-img::before {
content: "";
float: left;
padding-top: 100%;
box-sizing: border-box;
}
.tour5 .pd-content {
padding: 0 10px;
margin-bottom: 0;
.tour5 .pd-img {
background-size: cover;
background-position: center;
text-decoration: none;
color: var(--q-color-primary);
}
.tour5> :nth-child(3n) {
margin-right: 0;
flex-basis: 100%;
}
}
</style>
\ No newline at end of file
.tour5 .pd-content .block-title {
font-size: 32px;
font-weight: 600;
padding: 0;
margin: 0;
line-height: unset;
}
.tour5 .pd-content .title-teaser {
font-size: 16px;
color: #666;
line-height: 1.8;
padding: 0;
margin: 0;
}
@media only screen and (max-width: 800px) {
.tour5 {
padding: 20px;
}
}
@media only screen and (max-width: 1200px) {
.tour5>* {
flex-basis: calc(50% - 10px);
margin-bottom: 20px;
}
.tour5> :nth-child(even) {
margin-right: 0;
}
.tour5 .pd-content {
padding: 0 10px;
margin-bottom: 0;
margin-right: 0;
flex-basis: 100%;
}
}
</style>
src/components/label_link_picture/right.vue
View file @ 0766d4ec
<template>
<!--圖片連結 - 圖右-->
<div class="q-mt-lg">
<section class="tour6 section-block">
<div class="pd-content">
<h2 class="block-title">圖片連結 - 圖右</h2>
<p
class="title-teaser"
>波蘭共和國（波蘭語：Rzeczpospolita Polska），簡稱波蘭，是位於中歐的共和制國家，北面瀕臨波羅的海，西面與德國接壤，南部與捷克和斯洛伐克為鄰，烏克蘭和白俄羅斯在東，東北部和立陶宛及俄羅斯加里寧格勒州接壤。面積312,679平方公里，位居歐洲第十；人口約3863萬人，位居歐洲第九。目前為歐盟、北約、聯合國、經濟合作與發展組織、世貿組織等國際組織的成員。</p>
<h2 class="block-title">{{plugData.Title}}</h2>
<p class="title-teaser">
{{plugData.Describe}}
</p>
</div>
<a
href="/"
title="波蘭"
class="pd-img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence9.jpg');"
></a>
<a
href="/"
title="波蘭"
class="pd-img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence10.jpg');"
></a>
<a @click="OpenNewUrl(plugData.LinkUrl1)" :title="plugData.TripTitle1" class="pd-img"
:style="{backgroundImage:`url('${plugData.ImageUrl1}')`}"></a>
<a @click="OpenNewUrl(plugData.LinkUrl2)" :title="plugData.TripTitle2" class="pd-img"
:style="{backgroundImage:`url('${plugData.ImageUrl2}')`}"></a>
</section>
</div>
</template>
<script>
export default {};
export default {
props: ["plugData"]
};
</script>
<style>
.tour6 {
display: flex;
padding: 20px 0;
flex-wrap: wrap;
}
.tour6 > * {
display: block;
margin-right: 20px;
flex-basis: calc(33.333% - 15px);
}
.tour6 .pd-img::before {
content: "";
float: left;
padding-top: 100%;
box-sizing: border-box;
}
.tour6 .pd-img {
background-size: cover;
background-position: center;
text-decoration: none;
color: var(--q-color-primary);
}
.tour6 > :nth-child(3n) {
margin-right: 0;
}
.tour6 .pd-content .block-title {
font-size: 32px;
font-weight: 600;
padding: 0;
margin: 0;
line-height: unset;
}
.tour6 .pd-content .title-teaser {
font-size: 16px;
color: #666;
line-height: 1.8;
padding: 0;
margin: 0;
}
@media only screen and (max-width: 800px) {
.tour6 {
padding: 20px;
display: flex;
padding: 20px 0;
flex-wrap: wrap;
}
}
@media only screen and (max-width: 1200px) {
.tour6 > * {
flex-basis: calc(50% - 10px) !important;
margin-bottom: 20px;
.tour6>* {
display: block;
margin-right: 20px;
flex-basis: calc(33.333% - 15px);
}
.tour6 > :nth-child(3n) {
margin-right: 0 !important;
.tour6 .pd-img::before {
content: "";
float: left;
padding-top: 100%;
box-sizing: border-box;
}
.tour6 .pd-content {
padding: 0 10px !important;
margin-bottom: 20px !important;
margin-right: 0 !important;
flex-basis: 100% !important;
.tour6 .pd-img {
background-size: cover;
background-position: center;
text-decoration: none;
color: var(--q-color-primary);
}
}
</style>
\ No newline at end of file
.tour6> :nth-child(3n) {
margin-right: 0;
}
.tour6 .pd-content .block-title {
font-size: 32px;
font-weight: 600;
padding: 0;
margin: 0;
line-height: unset;
}
.tour6 .pd-content .title-teaser {
font-size: 16px;
color: #666;
line-height: 1.8;
padding: 0;
margin: 0;
}
@media only screen and (max-width: 800px) {
.tour6 {
padding: 20px;
}
}
@media only screen and (max-width: 1200px) {
.tour6>* {
flex-basis: calc(50% - 10px) !important;
margin-bottom: 20px;
}
.tour6> :nth-child(3n) {
margin-right: 0 !important;
}
.tour6 .pd-content {
padding: 0 10px !important;
margin-bottom: 20px !important;
margin-right: 0 !important;
flex-basis: 100% !important;
}
}
</style>
src/components/label_other/diy-form.vue
View file @ 0766d4ec
......@@ -4,53 +4,22 @@
<h2 class="block-title q-mb-lg">專人服務</h2>
<q-form @submit="onSubmit" class="q-gutter-md">
<div class="row q-gutter-xl desktop-only q-mb-lg q-pl-md">
<q-input
filled
v-model="params.name"
label="如何稱呼您"
class="col"
lazy-rules
:rules="[ val => val && val.length > 0 || '請填寫您的稱呼']"
/>
<q-input
filled
v-model="params.phone"
label="聯絡電話"
class="col"
lazy-rules
:rules="[ val => val && val.length > 0 || '請填寫您的聯絡電話哦']"
/>
<q-input filled v-model="params.name" label="如何稱呼您" class="col" lazy-rules
:rules="[ val => val && val.length > 0 || '請填寫您的稱呼']" />
<q-input filled v-model="params.phone" label="聯絡電話" class="col" lazy-rules
:rules="[ val => val && val.length > 0 || '請填寫您的聯絡電話哦']" />
</div>
<div class="row mobile-only q-mb-lg">
<q-input
filled
v-model="params.name"
label="如何稱呼您"
class="col"
lazy-rules
:rules="[ val => val && val.length > 0 || '請填寫您的稱呼']"
/>
<q-input filled v-model="params.name" label="如何稱呼您" class="col" lazy-rules
:rules="[ val => val && val.length > 0 || '請填寫您的稱呼']" />
</div>
<div class="row mobile-only q-mb-lg">
<q-input
filled
v-model="params.phone"
label="聯絡電話"
class="col"
lazy-rules
:rules="[ val => val && val.length > 0 || '請填寫您的聯絡電話哦']"
/>
<q-input filled v-model="params.phone" label="聯絡電話" class="col" lazy-rules
:rules="[ val => val && val.length > 0 || '請填寫您的聯絡電話哦']" />
</div>
<div class="row q-mb-lg">
<q-input
filled
v-model="params.eMail"
label="聯絡E-Mail"
type="email"
class="col"
lazy-rules
:rules="[ val => val && val.length > 0 || '請填寫您的聯絡E-Mail哦']"
/>
<q-input filled v-model="params.eMail" label="聯絡E-Mail" type="email" class="col" lazy-rules
:rules="[ val => val && val.length > 0 || '請填寫您的聯絡E-Mail哦']" />
</div>
<div class="row q-mb-lg">
<q-input filled v-model="params.remark" label="備註" class="col" type="textarea" />
......@@ -64,37 +33,39 @@
</template>
<script>
export default {
data() {
return {
params: {
name: "",
phone: "",
eMail: "",
remark: ""
export default {
data() {
return {
params: {
name: "",
phone: "",
eMail: "",
remark: ""
}
};
},
methods: {
onSubmit() {
this.$q.notify({
color: "green-4",
textColor: "white",
icon: "cloud_done",
message: "提交成功"
});
}
};
},
methods: {
onSubmit() {
this.$q.notify({
color: "green-4",
textColor: "white",
icon: "cloud_done",
message: "提交成功"
});
}
}
};
};
</script>
<style>
.form1 .block-title {
font-size: 24px;
font-weight: 600;
padding: 0;
margin: 0;
margin-bottom: 30px;
line-height: unset;
}
</style>
\ No newline at end of file
.form1 .block-title {
font-size: 24px;
font-weight: 600;
padding: 0;
margin: 0;
margin-bottom: 30px;
line-height: unset;
}
</style>
src/components/label_other/diy-title.vue
View file @ 0766d4ec
<template>
<div class="q-mt-lg">
<div class="title1">
<h2 class="title">標題</h2>
<div class="subtitle">Schloss Neuschwanstein</div>
<h2 class="title">{{plugData.Title}}</h2>
<div class="subtitle">{{plugData.SubTitle}}</div>
</div>
</div>
</template>
<script>
export default {};
</script>
export default {
props: ["plugData"],
};
</script>
<style>
.title1 {
text-align: center;
padding: 20px 0 0;
}
.title1 .title {
font-size: 33px;
color: #333;
margin: 0;
padding: 0;
line-height: unset;
font-weight: 600;
}
.title1 .subtitle {
font-size: 16px;
color: #999;
}
</style>
\ No newline at end of file
.title1 {
text-align: center;
padding: 20px 0 0;
}
.title1 .title {
font-size: 33px;
color: #333;
margin: 0;
padding: 0;
line-height: unset;
font-weight: 600;
}
.title1 .subtitle {
font-size: 16px;
color: #999;
}
</style>
src/components/label_other/downloadTable.vue
View file @ 0766d4ec
<template>
<div class="q-mt-lg section-block download1">
<div class="group-title">國內旅遊自由行</div>
<div class="group-title">{{plugData.Title}}</div>
<q-markup-table class="" flat separator="vertical">
<thead>
<tr>
......@@ -9,55 +9,12 @@
</tr>
</thead>
<tbody>
<tr>
<td>
<q-btn
type="a"
href="https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9859/download1/9859download11572317742_rsz.jpg"
target="_blank"
label="下載"
color="primary"
/>
</td>
<td>
<a
href="https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9859/download1/9859download11572317742_rsz.jpg"
target="_blank"
>✨澎湖自由行三日✨ 超優惠的澎湖又來囉！ 每個人團費只要$2020元喔</a>
</td>
</tr>
<tr>
<td>
<q-btn
type="a"
href="https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9859/download1/9859download11572317742_rsz.jpg"
target="_blank"
label="下載"
color="primary"
/>
</td>
<td>
<a
href="https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9859/download1/9859download11572317783_rsz.jpg"
target="_blank"
>✨北京五日✨ 還記得一路過關斬將，打怪上位 最後升職成「魏貴人」的魏瓔珞嗎！</a>
</td>
</tr>
<tr>
<tr v-for="(item,index) in plugData.DownLoadList" :key="index" v-if="item.LinkUrl&&item.LinkUrl!=''">
<td>
<q-btn
type="a"
href="https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9859/download1/9859download11572317742_rsz.jpg"
target="_blank"
label="下載"
color="primary"
/>
<q-btn type="a" :href="item.LinkUrl" target="_blank" label="下載" color="primary" />
</td>
<td>
<a
href="https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9859/download1/9859download11572318022_rsz.jpg"
target="_blank"
>2018澎湖花火節的時間出來了</a>
<a :href="item.LinkUrl" target="_blank">{{item.LinkTitle}}</a>
</td>
</tr>
</tbody>
......@@ -66,15 +23,18 @@
</template>
<script>
export default {};
</script>
export default {
props: ["plugData"],
};
</script>
<style>
.my-th-head {
font-size: 18px !important;
font-weight: 600 !important;
}
.download1 .group-title {
.my-th-head {
font-size: 18px !important;
font-weight: 600 !important;
}
.download1 .group-title {
margin: 0;
padding: 0;
line-height: unset;
......@@ -83,5 +43,5 @@ export default {};
text-align: center;
font-weight: 600;
text-align: center;
}
}
</style>
\ No newline at end of file
src/components/label_other/paragraph.vue
View file @ 0766d4ec
<template>
<div class="q-mt-lg">
<div
class="section-block paragraph1"
>今天新天鵝堡（Schloss Neuschwanstein）和舊天鵝堡（Schloss Hohenschwangau）的所在地區，在中世紀建有四座古堡。到了19世紀，這些古堡已經是一片殘垣斷壁。其中一座稱為「前天鵝石城堡（舊天鵝堡）」，在1830年代由馬克西米利安二世（路德維希二世的父親）所下令建造的「高天鵝堡」取代。其西南方的另一座「女人石城堡」，也早已不復存在。剩下的兩座稱為「前高天鵝堡」和「後高天鵝堡」，就在現今新天鵝堡所在的位置上。新天鵝堡，位在德國巴伐利亞省福森市，在德國東南與奧地利的邊界上，城堡就蓋在隸屬阿爾卑斯山山脈一個近一千公尺高的山頂上。 路德維希二世決定在此地興建他的「夢幻城堡」，因此下令將前後高天鵝堡的廢墟炸掉，清除前後天鵝堡廢墟後在原址興建新天鵝堡。 在1868年5月15日在給作曲家華格納的信中，國王路德維希二世提到希望在前高地城堡的古堡廢墟上建造一座城堡，風格取自中世紀德國騎士城堡。路德維希建堡的啟發有幾個：一個是他父親馬克西米利安二世的早期建堡計劃；另一個更重要的啟發則是他在1867年前往埃森納赫旅行中和弟弟奧托一世共同遊覽的瓦爾特堡。天鵝堡中的歌劇廳（Saengersaal）和騎士浴室（Ritterbad）的設計就採用了瓦爾特堡的設計圖為藍本。此外路德維希還受到西班牙摩爾人建築風格的影響。他想把天鵝堡建成作曲家華格納作品中的幻想的日耳曼傳說世界。城堡的設計主要交付給劇場布景設計師克里斯蒂安·揚克（Christian Jank）設計。城堡中隨處可見典型的哥德式建築細節，而所有門窗、列柱迴廊則呈現巴洛克風格，主要廳堂的裝飾則是拜占庭式的瀝金濕壁畫。也許因為新天鵝堡的名字，整個城堡中所有的水龍頭以及家具和房間配飾都是形態各異、栩栩如生的天鵝造型。城堡內裝飾極其奢華，從天花板、燈飾、牆壁到日常用具，無一不是工匠精雕細琢之作。 國王路德維希最後在他自己建築的新天鵝堡中的逗留是他在1886年6月9日被軟禁時。他在1886年6月13日於施坦貝爾格湖逝死時，新天鵝堡還沒有完工。在17年的建築時間裡，他只逗留過172天，那時候只有三分之一的房間是完工的。國王路德維希從未想讓新天鵝堡公諸於眾，在他看來寧願將此堡毀壞，也不能讓它失去其神秘魅力。但是在他死後六個星期，城堡對外開放，並在旺季（六月到八月）接待每天達5000人。為了保證通順的參觀路線，一些房間在此後完工。其中包括王位廳（Thronsaal）的帶有巴伐利亞動物世界圖案的馬賽克地板。此地板有2百萬塊的小馬賽克石組成，工程歷時兩年之久。</div>
<div class="section-block paragraph1">
{{plugData.ParagraphContent}}
</div>
</div>
</template>
<script>
export default {};
</script>
export default {
props: ["plugData"],
};
</script>
<style>
.paragraph1 {
line-height: 2;
font-size: 17px;
padding: 20px 0;
color: #666;
}
.paragraph1 {
line-height: 2;
font-size: 17px;
padding: 20px 0;
color: #666;
}
</style>
\ No newline at end of file
src/components/label_other/photo.vue
View file @ 0766d4ec
<template>
<section class="photo1 section-block">
<div class="photo">
<img src="https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_banner7.jpg" alt />
<img :src="plugData.ImageUrl" :alt="plugData.Title" />
</div>
</section>
</template>
<script>
export default {};
</script>
export default {
props: ["plugData"],
};
</script>
<style>
.photo1 .photo {
.photo1 .photo {
margin: 20px 0;
text-align: center;
}
.photo1 .photo img {
}
.photo1 .photo img {
width: 100%;
}
}
</style>
\ No newline at end of file
src/components/label_qrcode/left.vue
View file @ 0766d4ec
<template>
<div class="q-mt-md">
<div class="q-mt-md">
<section class="qrcode1 section-block">
<a href="/" target="_blank" class="img">
<img
src="https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_qrcode.jpg"
alt="TripSaaS 官網"
/>
<a target="_blank" class="img">
<img :src="plugData.LinkImg1" :alt="plugData.TripTitle1" />
</a>
<a href="/" target="_blank" class="img">
<img
src="https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_qrcode.jpg"
alt="TripSaaS 官網"
/>
<a target="_blank" class="img">
<img :src="plugData.LinkImg2" :alt="plugData.TripTitle2" />
</a>
<div class="content">
<h2 class="block-title">QRcode - 左</h2>
<h2 class="block-title">{{plugData.Title}}</h2>
<p class="title-teaser">
掃描 QR code 加入重游旅遊官方帳號，有任何需要我們都會在這邊為您一對一服務唷！
<br />加入重游開始一段美好旅行吧！
{{plugData.Describe}}
</p>
</div>
</section>
</div>
</template>
<script>
import QrcodeVue from "qrcode.vue";
export default {
components: {
QrcodeVue
},
mounted() {},
methods: {}
};
export default {
props: ["plugData"],
mounted() {},
methods: {}
};
</script>
<style>
.qrcode1 {
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.qrcode1 .img {
display: block;
margin-right: 20px;
width: 180px;
}
a {
text-decoration: none;
color: var(--q-color-primary);
}
.qrcode1 .img img {
display: block;
width: 100%;
border: 0;
margin: 0;
}
.qrcode1 .content {
padding-left: 40px;
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
.qrcode1 .block-title {
font-size: 22px;
font-weight: 600;
padding: 0;
margin: 0;
line-height: unset;
}
.qrcode1 .title-teaser {
margin-bottom: 10px;
font-size: 16px;
color: #999;
}
@media only screen and (max-width: 800px) {
.qrcode1 {
padding: 20px !important;
flex-wrap: wrap !important;
justify-content: center !important;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
}
@media only screen and (max-width: 768px) {
.qrcode1 .img {
display: block;
margin-right: 20px;
width: 180px;
}
a {
cursor: pointer;
text-decoration: none;
color: var(--q-color-primary);
}
.qrcode1 .img img {
display: block;
width: 100%;
border: 0;
margin: 0;
}
.qrcode1 .content {
padding-left: 0 !important;
width: 100% !important;
padding-top: 20px !important;
text-align: center !important;
padding-left: 40px;
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
}
@media only screen and (max-width: 480px) {
.qrcode1 .img {
width: calc(50% - 20px) !important;
.qrcode1 .block-title {
font-size: 22px;
font-weight: 600;
padding: 0;
margin: 0;
line-height: unset;
}
.qrcode1 .title-teaser {
margin-bottom: 10px;
font-size: 16px;
color: #999;
}
@media only screen and (max-width: 800px) {
.qrcode1 {
padding: 20px !important;
flex-wrap: wrap !important;
justify-content: center !important;
}
}
@media only screen and (max-width: 768px) {
.qrcode1 .content {
padding-left: 0 !important;
width: 100% !important;
padding-top: 20px !important;
text-align: center !important;
}
}
@media only screen and (max-width: 480px) {
.qrcode1 .img {
width: calc(50% - 20px) !important;
}
}
}
</style>
\ No newline at end of file
</style>
src/components/label_qrcode/right.vue
View file @ 0766d4ec
......@@ -2,99 +2,99 @@
<div class="q-mt-md">
<section class="qrcode2 section-block">
<div class="content">
<h2 class="block-title">QRcode - 右</h2>
<h2 class="block-title">{{plugData.Title}}</h2>
<p class="title-teaser">
掃描 QR code 加入重游旅遊官方帳號，有任何需要我們都會在這邊為您一對一服務唷！
<br />加入重游開始一段美好旅行吧！
{{plugData.Describe}}
</p>
</div>
<a href="/" target="_blank" class="img">
<img
src="https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_qrcode.jpg"
alt="TripSaaS 官網"
/>
<a target="_blank" class="img">
<img :src="plugData.LinkImg1" :alt="plugData.TripTitle1" />
</a>
<a href="/" target="_blank" class="img">
<img
src="https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_qrcode.jpg"
alt="TripSaaS 官網"
/>
<a target="_blank" class="img">
<img :src="plugData.LinkImg2" :alt="plugData.TripTitle2" />
</a>
</section>
</div>
</template>
<script>
import QrcodeVue from "qrcode.vue";
export default {
components: {
QrcodeVue
},
mounted() {},
methods: {}
};
export default {
props: ["plugData"],
mounted() {},
methods: {}
};
</script>
<style>
.qrcode2 {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
}
.qrcode2 .img {
display: block;
margin-right: 20px;
width: 180px;
}
a {
text-decoration: none;
color: var(--q-color-primary);
}
.qrcode2 .img img {
display: block;
width: 100%;
border: 0;
margin: 0;
}
.qrcode2 .content {
width: calc(100% - 400px);
padding-right: 40px;
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
.qrcode2 .block-title {
font-size: 22px;
font-weight: 600;
padding: 0;
margin: 0;
line-height: unset;
}
.qrcode2 .title-teaser {
margin-bottom: 10px;
font-size: 16px;
color: #999;
}
@media only screen and (max-width: 800px) {
.qrcode2 {
padding: 20px !important;
flex-wrap: wrap !important;
justify-content: center !important;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
}
.qrcode2 .img {
display: block;
margin-right: 20px;
width: 180px;
}
}
@media only screen and (max-width: 768px) {
a {
text-decoration: none;
color: var(--q-color-primary);
}
.qrcode2 .img img {
display: block;
width: 100%;
border: 0;
margin: 0;
}
.qrcode2 .content {
padding-right: 0 !important;
width: 100% !important;
padding-bottom: 20px !important;
text-align: center !important;
width: calc(100% - 400px);
padding-right: 40px;
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
}
@media only screen and (max-width: 480px) {
.qrcode2 .img {
width: calc(50% - 20px) !important;
.qrcode2 .block-title {
font-size: 22px;
font-weight: 600;
padding: 0;
margin: 0;
line-height: unset;
}
.qrcode2 .title-teaser {
margin-bottom: 10px;
font-size: 16px;
color: #999;
}
@media only screen and (max-width: 800px) {
.qrcode2 {
padding: 20px !important;
flex-wrap: wrap !important;
justify-content: center !important;
}
}
}
</style>
\ No newline at end of file
@media only screen and (max-width: 768px) {
.qrcode2 .content {
padding-right: 0 !important;
width: 100% !important;
padding-bottom: 20px !important;
text-align: center !important;
}
}
@media only screen and (max-width: 480px) {
.qrcode2 .img {
width: calc(50% - 20px) !important;
}
}
</style>
src/pages/About.vue
View file @ 0766d4ec
......@@ -5,6 +5,38 @@
</div>
<template v-for="(item,index) in AboutData">
<div :key="index">
<!--自訂版型(影片)-->
<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>
<diyImgThree v-if="item.Id=='white_label_picture'&&item.plugData.Type==3" :plugData="item.plugData">
</diyImgThree>
<diyImgFour v-if="item.Id=='white_label_picture'&&item.plugData.Type==4" :plugData="item.plugData"></diyImgFour>
<diyImgFive v-if="item.Id=='white_label_picture'&&item.plugData.Type==5" :plugData="item.plugData"></diyImgFive>
<diyImgSix v-if="item.Id=='white_label_picture'&&item.plugData.Type==6" :plugData="item.plugData"></diyImgSix>
<!--自訂版型(QRcode)white_label_qrcode-->
<qrLeft v-if="item.Id=='white_label_qrcode'&&item.plugData.Type==1" :plugData="item.plugData"></qrLeft>
<qrRight v-if="item.Id=='white_label_qrcode'&&item.plugData.Type==2" :plugData="item.plugData"></qrRight>
<!--自訂版型(其他)white_label_other -Start-->
<empty v-if="item.Id=='white_label_other'&&item.plugData.Type==1" :plugData="item.plugData"></empty>
<downloadTable v-if="item.Id=='white_label_other'&&item.plugData.Type==2" :plugData="item.plugData">
</downloadTable>
<diyTitle v-if="item.Id=='white_label_other'&&item.plugData.Type==3" :plugData="item.plugData"></diyTitle>
<paragraph v-if="item.Id=='white_label_other'&&item.plugData.Type==4" :plugData="item.plugData"></paragraph>
<photo v-if="item.Id=='white_label_other'&&item.plugData.Type==5" :plugData="item.plugData"></photo>
<!--待完善-->
<diyForm v-if="item.Id=='white_label_other'&&item.plugData.Type==6" :plugData="item.plugData"> </diyForm>
<!--自訂版型(背景圖)white_label_background_article-->
<bgArticleLeft v-if="item.Id=='white_label_background_article'&&item.plugData.Type==1"
:plugData="item.plugData"></bgArticleLeft>
<bgArticleRight v-if="item.Id=='white_label_background_article'&&item.plugData.Type==2"
:plugData="item.plugData"></bgArticleRight>
<bgArticleCenter v-if="item.Id=='white_label_background_article'&&item.plugData.Type==3"
:plugData="item.plugData"></bgArticleCenter>
<!--自訂版型(段落標題)-->
<paragraph1 v-if="item.Id=='white_label_paragraph_title'&&item.plugData.Type==1" :plugData="item.plugData">
</paragraph1>
......@@ -18,16 +50,17 @@
</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>
<diyImgThree v-if="item.Id=='white_label_picture'&&item.plugData.Type==3" :plugData="item.plugData"></diyImgThree>
<diyImgFour v-if="item.Id=='white_label_picture'&&item.plugData.Type==4" :plugData="item.plugData"></diyImgFour>
<diyImgFive v-if="item.Id=='white_label_picture'&&item.plugData.Type==5" :plugData="item.plugData"></diyImgFive>
<diyImgSix v-if="item.Id=='white_label_picture'&&item.plugData.Type==6" :plugData="item.plugData"></diyImgSix>
<!--自訂版型(段落連結)和挑選自有行程(段落連結) white_label_link_paragraph和b2b_LinkP -->
<plinkLeft v-if="(item.Id=='white_label_link_paragraph'||item.Id=='b2b_LinkP')&&item.plugData.Type==1"
:plugData="item.plugData"></plinkLeft>
<plinkRight v-if="(item.Id=='white_label_link_paragraph'||item.Id=='b2b_LinkP')&&item.plugData.Type==2"
:plugData="item.plugData"></plinkRight>
<!--自訂版型(圖片連結)和挑選自有行程(圖片連結)white_label_link_picture和b2b_LinkPicture-->
<ilinkLeft v-if="(item.Id=='white_label_link_picture'||item.Id=='b2b_LinkPicture')&&item.plugData.Type==1"
:plugData="item.plugData"></ilinkLeft>
<ilinkRight v-if="(item.Id=='white_label_link_picture'||item.Id=='b2b_LinkPicture')&&item.plugData.Type==2"
:plugData="item.plugData"></ilinkRight>
</div>
</template>
......
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