Skip to content

M
million
Commit 7ade2e91 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 27d23c53
Hide whitespace changes
Inline Side-by-side
Showing with 535 additions and 721 deletions
src/boot/utils.js
View file @ 7ade2e91
......@@ -6,7 +6,7 @@ import md5 from 'js-md5'
Vue.prototype.domainManager = function () {
let domainUrl = '';
domainUrl = "http://192.168.2.214:8082";
//domainUrl="http://192.168.0.110";
domainUrl="http://192.168.0.110";
let locationName = window.location.hostname;
if (locationName.indexOf('testerp.oytour') !== -1) {
domainUrl = "http://testapi.oytour.com";
......
src/components/label_picture/diy-img-five.vue
View file @ 7ade2e91
<template>
<!--圖片 - 6x1-->
<div class="q-mt-lg">
<section class="scence2 section-block">
<div class="content">
<h2 class="block-title"></h2>
<p class="title-teaser">需要下次旅程的靈感嗎？看看其他人都去哪些景點</p>
<h2 class="block-title">{{plugData.Title}}</h2>
<p class="title-teaser">{{plugData.SubTitle}}</p>
</div>
<div class="scence-wrap">
<ul class="scence-list">
<li>
<a
href="/"
target="_blank"
class="img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence1.jpg');"
>
<h4 class="scence-title">西班牙</h4>
<li v-for="(item,index) in plugData.Details" :key="index">
<a @click="OpenNewUrl(item.LinkUrl)" target="_blank" class="img"
:style="{backgroundImage:`url('${item.ImageUrl}')`}">
<h4 class="scence-title">{{(item.TripTitle &&item.TripTitle.length>14)? item.TripTitle.substring(0,14):item.TripTitle}}</h4>
</a>
</li>
<li>
<a
href="/"
target="_blank"
class="img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence3.jpg');"
>
<h4 class="scence-title">韓國</h4>
</a>
</li>
<li>
<a
href="/"
target="_blank"
class="img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence4.jpg');"
>
<h4 class="scence-title">荷蘭</h4>
</a>
</li>
<li>
<a
href="/"
target="_blank"
class="img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence5.jpg');"
>
<h4 class="scence-title">日本</h4>
</a>
</li>
<li>
<a
href="/"
target="_blank"
class="img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence6.jpg');"
>
<h4 class="scence-title">菲律賓</h4>
</a>
</li>
<!-- <li>
<a
href="/"
target="_blank"
class="img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence6.jpg');"
>
<h4 class="scence-title">菲律賓</h4>
</a>
</li>-->
</ul>
</div>
</section>
......@@ -74,129 +21,146 @@
</template>
<script>
//圖片 - 4x1
export default {};
//圖片 - 6x1
export default {
props: ["plugData"]
};
</script>
<style>
.scence2 {
}
.scence2 .block-title {
font-size: 22px;
font-weight: 600;
padding: 0;
margin: 0;
line-height: unset;
}
.scence2 .title-teaser {
margin-bottom: 10px;
font-size: 16px;
color: #999;
}
.scence2 .scence-wrap {
margin-top: 15px;
}
.scence2 .scence-list {
margin-left: -8px;
margin-right: -8px;
display: flex;
flex-wrap: wrap;
padding: 0;
}
.scence2 .scence-list > * {
padding: 0;
margin: 0;
display: block;
flex: 1;
margin: 8px;
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;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
}
.scence2 .scence-list > *:last-child {
margin-right: 0px;
}
.scence2 .scence-list > * a {
position: relative;
display: block;
width: 100%;
height: 300px;
background-size: cover;
background-position: center;
}
.scence2 .scence-list > * a::before {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
height: 80px;
content: "";
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.02) 0,
rgba(0, 0, 0, 0.8) 100%
);
}
.scence2 .scence-list > * a .scence-title {
position: absolute;
display: block;
padding: 0 16px 16px;
white-space: pre-wrap;
right: 0;
bottom: 0;
left: 0;
font-size: 18px;
font-weight: 600;
line-height: 20px;
color: #fff;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
word-break: break-all;
z-index: 2;
}
.scence2 .scence-list > * {
display: block;
width: calc(25% - 16px);
margin: 8px;
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;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
}
@media only screen and (min-width: 1200px) {
.scence2 .scence-list > * {
display: inline-block !important;
vertical-align: middle !important;
width: 180px !important;
}
}
@media only screen and (max-width: 800px) {
.scence2 {
margin-top: 40px;
.scence2 {}
.scence2 .block-title {
font-size: 22px;
font-weight: 600;
padding: 0;
margin: 0;
line-height: unset;
}
.scence2 .scence-wrap {
margin-top: -12px;
.scence2 .title-teaser {
margin-bottom: 10px;
font-size: 16px;
color: #999;
}
.scence2 .scence-wrap {
height: 310px !important;
overflow: hidden !important;
margin-top: 15px;
}
.scence2 .scence-list {
padding-bottom: 30px !important;
width: 100% !important;
display: block !important;
white-space: nowrap !important;
overflow-y: scroll !important;
margin-left: -8px;
margin-right: -8px;
display: flex;
flex-wrap: wrap;
padding: 0;
}
.scence2 .scence-list>* {
padding: 0;
margin: 0;
display: block;
flex: 1;
margin: 8px;
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;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
}
.scence2 .scence-list > * {
display: inline-block !important;
vertical-align: middle !important;
width: 180px !important;
.scence2 .scence-list>*:last-child {
margin-right: 0px;
}
.scence2 .scence-list>* a {
position: relative;
display: block;
width: 100%;
height: 300px;
background-size: cover;
background-position: center;
}
.scence2 .scence-list>* a::before {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
height: 80px;
content: "";
background-image: linear-gradient(to bottom,
rgba(0, 0, 0, 0.02) 0,
rgba(0, 0, 0, 0.8) 100%);
}
.scence2 .scence-list>* a .scence-title {
position: absolute;
display: block;
padding: 0 16px 16px;
white-space: pre-wrap;
right: 0;
bottom: 0;
left: 0;
font-size: 18px;
font-weight: 600;
line-height: 20px;
color: #fff;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
word-break: break-all;
z-index: 2;
}
.scence2 .scence-list>* {
display: block;
width: calc(25% - 16px);
margin: 8px;
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;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
}
}
@media only screen and (min-width: 1200px) {
.scence2 .scence-list>* {
display: inline-block !important;
vertical-align: middle !important;
width: 180px !important;
}
}
@media only screen and (max-width: 800px) {
.scence2 {
margin-top: 40px;
}
.scence2 .scence-wrap {
margin-top: -12px;
}
.scence2 .scence-wrap {
height: 310px !important;
overflow: hidden !important;
}
.scence2 .scence-list {
padding-bottom: 30px !important;
width: 100% !important;
display: block !important;
white-space: nowrap !important;
overflow-y: scroll !important;
}
.scence2 .scence-list>* {
display: inline-block !important;
vertical-align: middle !important;
width: 180px !important;
}
}
</style>
src/components/label_picture/diy-img-four.vue
View file @ 7ade2e91
<template>
<!--圖片 - 4x4-->
<div class="q-mt-md">
<section class="pr1 section-block">
<div class="pr-banner-block">
<ul class="pr-banner-list">
<li>
<a
href="/"
title="冰島極光"
style="background-image: url('https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9829/pr1/9829pr11571996536_x68.png');"
></a>
</li>
<li>
<a
href="/"
title="大阪美食"
style="background-image: url('https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9829/pr1/9829pr11571996579_x68.jpg');"
></a>
</li>
<li>
<a
href="/"
title="繡球花特輯"
style="background-image: url('https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9829/pr1/9829pr11571996620_x68.jpg');"
></a>
</li>
<li>
<a
href="/"
title="浪漫法國"
style="background-image: url('https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9829/pr1/9829pr11571996710_x68.jpg');"
></a>
<li v-for="(item,index) in plugData.Details" :key="index">
<a @click="OpenNewUrl(item.LinkUrl)" :title="item.TripTitle"
:style="{backgroundImage:`url('${item.ImageUrl}')`}"></a>
</li>
</ul>
</div>
<div class="pr-text-block">
<h2 class="block-title">熱門排行榜</h2>
<p class="title-teaser">看看大家都去哪些熱門景點</p>
<h2 class="block-title">{{plugData.Title}}</h2>
<p class="title-teaser">{{plugData.SubTitle}}</p>
<ul class="pr-text-list">
<li>
<a href="/">
<h3 class="pd-title">愛在北海道花火燦爛時~海洋公園、函館夜景、三大蟹、溫泉5日</h3>
<div class="price">
<small class="unit">NT$</small>36,800
<small class="unit">元起</small>
</div>
</a>
</li>
<li>
<a href="/">
<h3 class="pd-title">特選酷戀泰國～帝王蟹吃到飽、夢幻世界、羅馬劇場、河畔夜市5＋1日</h3>
<li v-for="(item,index) in plugData.Details" :key="index">
<a @click="OpenNewUrl(item.LinkUrl)">
<h3 class="pd-title">{{item.TripTitle}}</h3>
<div class="price">
<small class="unit">NT$</small>16,999
<small class="unit">元起</small>
</div>
</a>
</li>
<li>
<a href="/">
<h3 class="pd-title">遇見內蒙古那達慕５日、敕勒川草原住星空蒙古包、銀肯響沙灣、成吉思汗陵</h3>
<div class="price">
<small class="unit">NT$</small>30,900
<small class="unit">元起</small>
</div>
</a>
</li>
<li>
<a href="/">
<h3 class="pd-title">秒購經典荷比法～羊角村、阿丹塔登頂、四大遊船、六特色餐9日</h3>
<div class="price">
<small class="unit">NT$</small>67,900
<small class="unit">NT$</small>{{item.Price}}
<small class="unit">元起</small>
</div>
</a>
......@@ -80,154 +30,181 @@
</template>
<script>
//圖片 - 4x1
export default {};
//圖片 - 4x4
export default {
props: ["plugData"]
};
</script>
<style>
.pr1 {
padding: 20px 0;
display: flex;
flex-flow: row wrap;
}
.pr1 .pr-banner-block {
flex: 1;
flex-basis: 70%;
margin-right: 30px;
}
.pr1 .pr-banner-block .pr-banner-list {
font-size: 0;
list-style: none;
padding: 0;
margin: 0;
}
.pr1 .pr-banner-block .pr-banner-list li:nth-child(odd) {
margin-right: 20px;
}
.pr1 .pr-banner-block .pr-banner-list li:nth-child(-n + 2) {
margin-bottom: 20px;
}
.pr1 .pr-banner-block .pr-banner-list li {
display: inline-block;
vertical-align: top;
width: calc(50% - 10px);
}
.pr1 .pr-banner-block .pr-banner-list li a {
border: 0;
margin: 0;
padding: 0;
display: block;
width: 100%;
padding-bottom: 66.237%;
background-size: cover;
background-position: center;
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;
}
.pr1 .pr-text-block {
padding: 25px 30px;
flex: 1;
flex-basis: calc(30% - 30px);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
background-color: #fff;
width: 100%;
}
.pr1 .block-title {
font-size: 24px;
font-weight: 600;
line-height: unset;
padding: 0;
margin: 0;
}
.pr1 .title-teaser {
margin: 0;
margin-bottom: 10px;
font-size: 16px;
color: #999;
line-height: unset;
padding: 0;
}
.pr1 .pr-text-list {
border: 0;
vertical-align: baseline;
margin: 0;
padding: 0;
list-style: none;
}
.pr1 .pr-text-block .pr-text-list li {
display: block;
border-bottom: 1px solid #eee;
margin: 0;
padding: 0;
}
.pr1 .pr-text-block .pr-text-list li:last-child {
border: none;
}
.pr1 .pr-text-block .pr-text-list a {
padding: 10px 0;
display: block;
color: #333;
font-size: 16px;
}
.pr1 .pr-text-block .pr-text-list a .pd-title {
padding: 0;
margin: 0;
margin-bottom: 4px;
font-weight: 400;
line-height: unset;
font-size: 1.17em;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.pr1 .pr-text-block .pr-text-list .price {
text-align: right;
color: #00afff;
font-size: 20px;
font-weight: 700;
font-family: "oswald";
}
.pr1 .pr-text-block .pr-text-list .price .unit {
font-size: 14px;
}
@media only screen and (max-width: 1200px) {
.pr1 {
padding: 20px 0;
display: flex;
flex-flow: row wrap;
}
.pr1 .pr-banner-block {
flex-basis: 100% !important;
margin-right: 0 !important;
margin-bottom: 20px !important;
flex: 1;
flex-basis: 70%;
margin-right: 30px;
}
.pr1 .pr-banner-block .pr-banner-list {
font-size: 0;
list-style: none;
padding: 0;
margin: 0;
}
.pr1 .pr-banner-block .pr-banner-list li:nth-child(odd) {
margin-right: 20px;
}
.pr1 .pr-banner-block .pr-banner-list li:nth-child(-n + 2) {
margin-bottom: 20px;
}
.pr1 .pr-banner-block .pr-banner-list li {
display: inline-block;
vertical-align: top;
width: calc(50% - 10px);
}
.pr1 .pr-banner-block .pr-banner-list li a {
border: 0;
margin: 0;
padding: 0;
display: block;
width: 100%;
padding-bottom: 66.237%;
background-size: cover;
background-position: center;
cursor: pointer;
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;
}
.pr1 .pr-text-block {
padding: 25px 30px;
flex: 1;
flex-basis: calc(30% - 30px);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
background-color: #fff;
width: 100%;
}
.pr1 .block-title {
font-size: 24px;
font-weight: 600;
line-height: unset;
padding: 0;
margin: 0;
}
.pr1 .title-teaser {
margin: 0;
margin-bottom: 10px;
font-size: 16px;
color: #999;
line-height: unset;
padding: 0;
}
.pr1 .pr-text-list {
border: 0;
vertical-align: baseline;
margin: 0;
padding: 0;
list-style: none;
}
.pr1 .pr-text-block .pr-text-list li {
display: block;
border-bottom: 1px solid #eee;
margin: 0;
padding: 0;
}
.pr1 .pr-text-block .pr-text-list li:last-child {
border: none;
}
.pr1 .pr-text-block .pr-text-list a {
display: flex !important;
padding: 12px 0 !important;
padding: 10px 0;
display: block;
color: #333;
font-size: 16px;
cursor: pointer;
}
.pr1 .pr-text-block .pr-text-list a .pd-title {
width: calc(100% - 150px) !important;
margin-bottom: 0 !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
word-break: break-all !important;
padding: 0;
margin: 0;
margin-bottom: 4px;
font-weight: 400;
line-height: unset;
font-size: 1.17em;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.pr1 .pr-text-block .pr-text-list .price {
width: 150px !important;
text-align: right;
color: #00afff;
font-size: 20px;
font-weight: 700;
font-family: "oswald";
}
}
@media only screen and (max-width: 768px) {
.pr1 .pr-banner-block {
margin-bottom: 10px !important;
.pr1 .pr-text-block .pr-text-list .price .unit {
font-size: 14px;
}
.pr1 .pr-banner-block .pr-banner-list li {
width: 100% !important;
margin-right: 0 !important;
margin-bottom: 20px !important;
@media only screen and (max-width: 1200px) {
.pr1 .pr-banner-block {
flex-basis: 100% !important;
margin-right: 0 !important;
margin-bottom: 20px !important;
}
.pr1 .pr-text-block .pr-text-list a {
display: flex !important;
padding: 12px 0 !important;
}
.pr1 .pr-text-block .pr-text-list a .pd-title {
width: calc(100% - 150px) !important;
margin-bottom: 0 !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
word-break: break-all !important;
}
.pr1 .pr-text-block .pr-text-list .price {
width: 150px !important;
}
}
}
@media only screen and (max-width: 768px) {
.pr1 .pr-banner-block {
margin-bottom: 10px !important;
}
.pr1 .pr-banner-block .pr-banner-list li {
width: 100% !important;
margin-right: 0 !important;
margin-bottom: 20px !important;
}
}
</style>
src/components/label_picture/diy-img-one.vue
View file @ 7ade2e91
......@@ -6,7 +6,7 @@
<p class="title-teaser">{{plugData.SubTitle}}</p>
<ul class="pd-list">
<li class="pd-box" v-for="(item,index) in plugData.Details" :key="index">
<a href="javascript:void(0)" :title="item.TripTitle" class="pd-link">
<a @click="OpenNewUrl(item.LinkUrl)" :title="item.TripTitle" class="pd-link">
<div class="pd-img" :style="{backgroundImage:`url('${item.ImageUrl}')`}">
<div class="pd-price">
<div class="price">
......@@ -23,7 +23,6 @@
</div>
</a>
</li>
</ul>
</section>
</div>
......@@ -85,6 +84,7 @@
}
a {
cursor: pointer;
text-decoration: none;
color: var(--q-color-primary);
}
......
src/components/label_picture/diy-img-six.vue
View file @ 7ade2e91
<template>
<!--圖片 - 6x1圓-->
<div class="q-mt-md section-block my-bg-grey">
<q-resize-observer @resize="onResize" />
<h2 class="block-title">圖片 - 6x1圓</h2>
<q-carousel
v-model="slide"
transition-prev="slide-right"
transition-next="slide-left"
swipeable
animated
control-color="primary"
navigation
padding
arrows
height="100%"
class="my-bg-grey text-black shadow-1 rounded-borders no-shadow"
>
<h2 class="block-title">{{plugData.Title}}</h2>
<q-carousel v-model="slide" transition-prev="slide-right" transition-next="slide-left" swipeable animated
control-color="primary" navigation padding arrows height="100%"
class="my-bg-grey text-black shadow-1 rounded-borders no-shadow">
<template v-for="(x, i) in showImages">
<q-carousel-slide :name="i" :key="i" class="column no-wrap">
<div class="row fit justify-start q-col-gutter no-wrap" :class="{'q-gutter-lg':x.length>1}">
<div style="flex:1" v-for="(y, yi) in x" :key="yi">
<q-img :img-style="{borderRadius:'50%'}" :ratio="1/1" :src="y.pic_url" />
<q-img :img-style="{borderRadius:'50%'}" :ratio="1/1" :src="y.ImageUrl" />
<div class="q-mt-md" style="color: #666;text-align: center;font-weight: 400;">
{{y.text}}
{{y.TripTitle}}
</div>
</div>
</div>
......@@ -30,92 +21,62 @@
</q-carousel>
</div>
</template>
<script>
export default {
data() {
return {
slide: 0,
imgs: [
{
pic_url: "https://cdn.quasar.dev/img/mountains.jpg",
text:
"魅力歐洲～法比荷、最愛羅浮宮、五星鹿特丹、絕美羊角村、魅力風車城8日"
},
{
pic_url: "https://cdn.quasar.dev/img/parallax1.jpg",
text: "夢幻灣沙灘俱樂部、烏布皇宮傳統市集、小婆羅浮屠5日"
},
{
pic_url: "https://cdn.quasar.dev/img/parallax1.jpg",
text: "樂天世界塔水族館．景福宮韓服體驗．7017首爾路．東大門CHEF秀4日"
},
{
pic_url: "https://cdn.quasar.dev/img/mountains.jpg",
text:
"魅力歐洲～法比荷、最愛羅浮宮、五星鹿特丹、絕美羊角村、魅力風車城8日"
},
{
pic_url: "https://cdn.quasar.dev/img/parallax1.jpg",
text: "夢幻灣沙灘俱樂部、烏布皇宮傳統市集、小婆羅浮屠5日"
},
{
pic_url: "https://cdn.quasar.dev/img/parallax1.jpg",
text: "樂天世界塔水族館．景福宮韓服體驗．7017首爾路．東大門CHEF秀4日"
}
],
showImages: []
};
},
methods: {
onResize(size) {
this.showImages = [];
if (size.width >= 800) {
let temp = [];
this.imgs.forEach((x, i) => {
temp.push(x);
if ((i > 0 && (i + 1) % 3 == 0) || i == this.imgs.length - 1) {
this.showImages.push(temp);
temp = [];
}
});
console.log(this.showImages);
} else if (size.width >= 560) {
let temp = [];
this.imgs.forEach((x, i) => {
temp.push(x);
if ((i > 0 && (i + 1) % 2 == 0) || i == this.imgs.length - 1) {
this.showImages.push(temp);
temp = [];
}
});
} else {
this.imgs.forEach((x, i) => {
//圖片 - 6x1圓
export default {
props: ["plugData"],
data() {
return {
slide: 0,
showImages: []
};
},
methods: {
onResize(size) {
this.showImages = [];
if (size.width >= 800) {
let temp = [];
temp.push(x);
this.showImages.push(temp);
});
this.plugData.Details.forEach((x, i) => {
temp.push(x);
if ((i > 0 && (i + 1) % 3 == 0) || i == this.plugData.Details.length - 1) {
this.showImages.push(temp);
temp = [];
}
});
} else if (size.width >= 560) {
let temp = [];
this.plugData.Details.forEach((x, i) => {
temp.push(x);
if ((i > 0 && (i + 1) % 2 == 0) || i == this.plugData.Details.length - 1) {
this.showImages.push(temp);
temp = [];
}
});
} else {
this.plugData.Details.forEach((x, i) => {
let temp = [];
temp.push(x);
this.showImages.push(temp);
});
}
}
// {
// width: 20 // width of container (in px)
// height: 50 // height of container (in px)
// }
}
}
};
};
</script>
<style>
.my-bg-grey {
background: #f6f6f6;
}
.my-bg-grey .block-title {
font-size: 22px;
font-weight: 600;
padding:0;
margin:0;
line-height: unset;
text-align: center;
margin-top: 25px;
}
</style>
\ No newline at end of file
.my-bg-grey {
background: #f6f6f6;
}
.my-bg-grey .block-title {
font-size: 22px;
font-weight: 600;
padding: 0;
margin: 0;
line-height: unset;
text-align: center;
margin-top: 25px;
}
</style>
src/components/label_picture/diy-img-three.vue
View file @ 7ade2e91
<template>
<!--圖片 - 4x3-->
<div>
<section class="scence1 section-block">
<div class="content">
<h2 class="block-title">圖片 - 4x3</h2>
<p class="title-teaser">需要下次旅程的靈感嗎？看看其他人都去哪些景點</p>
<h2 class="block-title">{{plugData.Title}}</h2>
<p class="title-teaser">{{plugData.SubTitle}}</p>
</div>
<div class="scence-wrap">
<ul class="scence-list">
<li>
<a
href="/"
target="_blank"
class="img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence1.jpg');"
>
<h4 class="scence-title">西班牙</h4>
</a>
</li>
<li>
<a
href="/"
target="_blank"
class="img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence2.jpg');"
>
<h4 class="scence-title">峇里島</h4>
</a>
</li>
<li>
<a
href="/"
target="_blank"
class="img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence3.jpg');"
>
<h4 class="scence-title">韓國</h4>
</a>
</li>
<li>
<a
href="/"
target="_blank"
class="img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence4.jpg');"
>
<h4 class="scence-title">荷蘭</h4>
</a>
</li>
<li>
<a
href="/"
target="_blank"
class="img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence5.jpg');"
>
<h4 class="scence-title">日本</h4>
</a>
</li>
<li>
<a
href="/"
target="_blank"
class="img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence6.jpg');"
>
<h4 class="scence-title">菲律賓</h4>
</a>
</li>
<li>
<a
href="/"
target="_blank"
class="img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence7.jpg');"
>
<h4 class="scence-title">巴黎</h4>
</a>
</li>
<li>
<a
href="/"
target="_blank"
class="img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence8.jpg');"
>
<h4 class="scence-title">德國</h4>
</a>
</li>
<li>
<a
href="/"
target="_blank"
class="img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence9.jpg');"
>
<h4 class="scence-title">紐西蘭</h4>
</a>
</li>
<li>
<a
href="/"
target="_blank"
class="img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence10.jpg');"
>
<h4 class="scence-title">荷蘭</h4>
</a>
</li>
<li>
<a
href="/"
target="_blank"
class="img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence11.jpg');"
>
<h4 class="scence-title">澳洲</h4>
</a>
</li>
<li>
<a
href="/"
target="_blank"
class="img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence12.jpg');"
>
<h4 class="scence-title">冰島</h4>
<li v-for="(item,index) in plugData.Details" :key="index">
<a @click="OpenNewUrl(item.LinkUrl)" target="_blank" class="img"
:style="{backgroundImage:`url('${item.ImageUrl}')`}">
<h4 class="scence-title" :title="item.TripTitle">{{
(item.TripTitle &&item.TripTitle.length>14)? item.TripTitle.substring(0,14):item.TripTitle}}</h4>
</a>
</li>
</ul>
......@@ -134,120 +22,136 @@
</template>
<script>
//圖片 - 4x1
export default {};
//圖片 - 4x3
export default {
props: ["plugData"]
};
</script>
<style>
.scence1 {
}
.scence1 .block-title {
font-size: 22px;
font-weight: 600;
padding: 0;
margin: 0;
line-height: unset;
}
.scence1 .title-teaser {
margin-bottom: 10px;
font-size: 16px;
color: #999;
}
.scence1 .scence-wrap {
margin-top: 15px;
}
.scence1 .scence-list {
margin-left: -8px;
margin-right: -8px;
display: flex;
flex-wrap: wrap;
padding:0;
}
.scence1 .scence-list > * {
padding: 0;
margin: 0;
display: block;
width: calc(25% - 16px);
margin: 8px;
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;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
}
.scence1 .scence-list > *:last-child {
margin-right: 0px;
}
.scence1 .scence-list > * a {
position: relative;
display: block;
width: 100%;
padding-bottom: 44%;
background-size: cover;
border: 0;
}
.scence1 .scence-list > * a::before {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 50%;
content: "";
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.02) 0,
rgba(0, 0, 0, 0.8) 100%
);
}
.scence1 .scence-list > * a .scence-title {
position: absolute;
display: block;
padding: 0 16px 16px;
white-space: pre-wrap;
right: 0;
bottom: 0;
left: 0;
font-size: 18px;
font-weight: 600;
line-height: 20px;
color: #fff;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
word-break: break-all;
}
.scence1 .scence-list > * {
display: block;
width: calc(25% - 16px);
margin: 8px;
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;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
}
@media only screen and (min-width: 1200px) {
.scence1 .scence-list > :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;
.scence1 {}
.scence1 .block-title {
font-size: 22px;
font-weight: 600;
padding: 0;
margin: 0;
line-height: unset;
}
.scence1 .title-teaser {
margin-bottom: 10px;
font-size: 16px;
color: #999;
}
}
@media only screen and (max-width: 800px) {
.scence1 .scence-wrap {
height: 135px !important;
overflow: hidden !important;
margin-top: 15px;
}
.scence1 .scence-list {
padding-bottom: 30px !important;
width: 100% !important;
display: block !important;
white-space: nowrap !important;
overflow-y: scroll !important;
margin-left: -8px;
margin-right: -8px;
display: flex;
flex-wrap: wrap;
padding: 0;
}
.scence1 .scence-list>* {
padding: 0;
margin: 0;
display: block;
width: calc(25% - 16px);
margin: 8px;
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;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
}
.scence1 .scence-list>*:last-child {
margin-right: 0px;
}
.scence1 .scence-list > * {
display: inline-block !important;
vertical-align: middle !important;
width: 280px !important;
.scence1 .scence-list>* a {
position: relative;
display: block;
width: 100%;
padding-bottom: 44%;
background-size: cover;
border: 0;
cursor: pointer;
}
.scence1 .scence-list>* a::before {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 50%;
content: "";
background-image: linear-gradient(to bottom,
rgba(0, 0, 0, 0.02) 0,
rgba(0, 0, 0, 0.8) 100%);
}
}
.scence1 .scence-list>* a .scence-title {
position: absolute;
display: block;
padding: 0 16px 16px;
white-space: pre-wrap;
right: 0;
bottom: 0;
left: 0;
font-size: 18px;
font-weight: 600;
line-height: 20px;
color: #fff;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
word-break: break-all;
}
.scence1 .scence-list>* {
display: block;
width: calc(25% - 16px);
margin: 8px;
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;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
}
@media only screen and (min-width: 1200px) {
.scence1 .scence-list> :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: 800px) {
.scence1 .scence-wrap {
height: 135px !important;
overflow: hidden !important;
}
.scence1 .scence-list {
padding-bottom: 30px !important;
width: 100% !important;
display: block !important;
white-space: nowrap !important;
overflow-y: scroll !important;
}
.scence1 .scence-list>* {
display: inline-block !important;
vertical-align: middle !important;
width: 280px !important;
}
}
</style>
src/components/label_picture/diy-img-two.vue
View file @ 7ade2e91
......@@ -6,7 +6,7 @@
<p class="title-teaser">{{plugData.SubTitle}}</p>
<ul class="pd-list">
<li class="pd-box" v-for="(item,index) in plugData.Details" :key="index">
<a href="javascript:void(0)" :title="item.TripTitle" class="pd-link">
<a @click="OpenNewUrl(item.LinkUrl)" :title="item.TripTitle" class="pd-link">
<div class="pd-img" :style="{backgroundImage:`url('${item.ImageUrl}')`}">
<div class="pd-price">
<div class="price">
......@@ -73,6 +73,7 @@
list-style: none;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
}
.tour1 .pd-list .pd-box:last-child {
......
src/pages/About.vue
View file @ 7ade2e91
......@@ -4,25 +4,32 @@
{{AboutData[AboutData.length-1]}}
</div>
<template v-for="(item,index) in AboutData">
<!--自訂版型(段落標題)-->
<paragraph1 v-if="item.Id=='white_label_paragraph_title'&&item.plugData.Type==1" :plugData="item.plugData">
</paragraph1>
<paragraph2 v-if="item.Id=='white_label_paragraph_title'&&item.plugData.Type==2" :plugData="item.plugData">
</paragraph2>
<paragraph3 v-if="item.Id=='white_label_paragraph_title'&&item.plugData.Type==3" :plugData="item.plugData">
</paragraph3>
<paragraphleft v-if="item.Id=='white_label_paragraph_title'&&item.plugData.Type==4" :plugData="item.plugData">
</paragraphleft>
<paragraphright v-if="item.Id=='white_label_paragraph_title'&&item.plugData.Type==5" :plugData="item.plugData">
</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>
<div :key="index">
<!--自訂版型(段落標題)-->
<paragraph1 v-if="item.Id=='white_label_paragraph_title'&&item.plugData.Type==1" :plugData="item.plugData">
</paragraph1>
<paragraph2 v-if="item.Id=='white_label_paragraph_title'&&item.plugData.Type==2" :plugData="item.plugData">
</paragraph2>
<paragraph3 v-if="item.Id=='white_label_paragraph_title'&&item.plugData.Type==3" :plugData="item.plugData">
</paragraph3>
<paragraphleft v-if="item.Id=='white_label_paragraph_title'&&item.plugData.Type==4" :plugData="item.plugData">
</paragraphleft>
<paragraphright v-if="item.Id=='white_label_paragraph_title'&&item.plugData.Type==5" :plugData="item.plugData">
</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>
</div>
</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