Skip to content

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

页面修改

parent 27d23c53
Expand all 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' ...@@ -6,7 +6,7 @@ import md5 from 'js-md5'
Vue.prototype.domainManager = function () { Vue.prototype.domainManager = function () {
let domainUrl = ''; let domainUrl = '';
domainUrl = "http://192.168.2.214:8082"; domainUrl = "http://192.168.2.214:8082";
//domainUrl="http://192.168.0.110"; domainUrl="http://192.168.0.110";
let locationName = window.location.hostname; let locationName = window.location.hostname;
if (locationName.indexOf('testerp.oytour') !== -1) { if (locationName.indexOf('testerp.oytour') !== -1) {
domainUrl = "http://testapi.oytour.com"; domainUrl = "http://testapi.oytour.com";
......
src/components/label_picture/diy-img-five.vue
View file @ 7ade2e91
<template> <template>
<!--圖片 - 6x1-->
<div class="q-mt-lg"> <div class="q-mt-lg">
<section class="scence2 section-block"> <section class="scence2 section-block">
<div class="content"> <div class="content">
<h2 class="block-title"></h2> <h2 class="block-title">{{plugData.Title}}</h2>
<p class="title-teaser">需要下次旅程的靈感嗎？看看其他人都去哪些景點</p> <p class="title-teaser">{{plugData.SubTitle}}</p>
</div> </div>
<div class="scence-wrap"> <div class="scence-wrap">
<ul class="scence-list"> <ul class="scence-list">
<li> <li v-for="(item,index) in plugData.Details" :key="index">
<a <a @click="OpenNewUrl(item.LinkUrl)" target="_blank" class="img"
href="/" :style="{backgroundImage:`url('${item.ImageUrl}')`}">
target="_blank" <h4 class="scence-title">{{(item.TripTitle &&item.TripTitle.length>14)? item.TripTitle.substring(0,14):item.TripTitle}}</h4>
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> </a>
</li> </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> </ul>
</div> </div>
</section> </section>
...@@ -74,129 +21,146 @@ ...@@ -74,129 +21,146 @@
</template> </template>
<script> <script>
//圖片 - 4x1 //圖片 - 6x1
export default {}; export default {
props: ["plugData"]
};
</script> </script>
<style> <style>
.scence2 { .scence2 {}
}
.scence2 .block-title { .scence2 .block-title {
font-size: 22px; font-size: 22px;
font-weight: 600; font-weight: 600;
padding: 0; padding: 0;
margin: 0; margin: 0;
line-height: unset; 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 .scence-wrap {
margin-top: -12px; .scence2 .title-teaser {
margin-bottom: 10px;
font-size: 16px;
color: #999;
} }
.scence2 .scence-wrap { .scence2 .scence-wrap {
height: 310px !important; margin-top: 15px;
overflow: hidden !important;
} }
.scence2 .scence-list { .scence2 .scence-list {
padding-bottom: 30px !important; margin-left: -8px;
width: 100% !important; margin-right: -8px;
display: block !important; display: flex;
white-space: nowrap !important; flex-wrap: wrap;
overflow-y: scroll !important; 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; .scence2 .scence-list>*:last-child {
vertical-align: middle !important; margin-right: 0px;
width: 180px !important; }
.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> </style>
src/components/label_picture/diy-img-one.vue
View file @ 7ade2e91
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<p class="title-teaser">{{plugData.SubTitle}}</p> <p class="title-teaser">{{plugData.SubTitle}}</p>
<ul class="pd-list"> <ul class="pd-list">
<li class="pd-box" v-for="(item,index) in plugData.Details" :key="index"> <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-img" :style="{backgroundImage:`url('${item.ImageUrl}')`}">
<div class="pd-price"> <div class="pd-price">
<div class="price"> <div class="price">
...@@ -23,7 +23,6 @@ ...@@ -23,7 +23,6 @@
</div> </div>
</a> </a>
</li> </li>
</ul> </ul>
</section> </section>
</div> </div>
...@@ -85,6 +84,7 @@ ...@@ -85,6 +84,7 @@
} }
a { a {
cursor: pointer;
text-decoration: none; text-decoration: none;
color: var(--q-color-primary); color: var(--q-color-primary);
} }
......
src/components/label_picture/diy-img-six.vue
View file @ 7ade2e91
<template> <template>
<!--圖片 - 6x1圓-->
<div class="q-mt-md section-block my-bg-grey"> <div class="q-mt-md section-block my-bg-grey">
<q-resize-observer @resize="onResize" /> <q-resize-observer @resize="onResize" />
<h2 class="block-title">圖片 - 6x1圓</h2> <h2 class="block-title">{{plugData.Title}}</h2>
<q-carousel <q-carousel v-model="slide" transition-prev="slide-right" transition-next="slide-left" swipeable animated
v-model="slide" control-color="primary" navigation padding arrows height="100%"
transition-prev="slide-right" class="my-bg-grey text-black shadow-1 rounded-borders no-shadow">
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"> <template v-for="(x, i) in showImages">
<q-carousel-slide :name="i" :key="i" class="column no-wrap"> <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 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"> <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;"> <div class="q-mt-md" style="color: #666;text-align: center;font-weight: 400;">
{{y.text}} {{y.TripTitle}}
</div> </div>
</div> </div>
</div> </div>
...@@ -30,92 +21,62 @@ ...@@ -30,92 +21,62 @@
</q-carousel> </q-carousel>
</div> </div>
</template> </template>
<script> <script>
export default { //圖片 - 6x1圓
data() { export default {
return { props: ["plugData"],
slide: 0, data() {
imgs: [ return {
{ slide: 0,
pic_url: "https://cdn.quasar.dev/img/mountains.jpg", showImages: []
text: };
"魅力歐洲～法比荷、最愛羅浮宮、五星鹿特丹、絕美羊角村、魅力風車城8日" },
}, methods: {
{ onResize(size) {
pic_url: "https://cdn.quasar.dev/img/parallax1.jpg", this.showImages = [];
text: "夢幻灣沙灘俱樂部、烏布皇宮傳統市集、小婆羅浮屠5日" if (size.width >= 800) {
},
{
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) => {
let temp = []; let temp = [];
temp.push(x); this.plugData.Details.forEach((x, i) => {
this.showImages.push(temp); 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> </script>
<style> <style>
.my-bg-grey { .my-bg-grey {
background: #f6f6f6; background: #f6f6f6;
} }
.my-bg-grey .block-title {
font-size: 22px; .my-bg-grey .block-title {
font-weight: 600; font-size: 22px;
padding:0; font-weight: 600;
margin:0; padding: 0;
line-height: unset; margin: 0;
text-align: center; line-height: unset;
margin-top: 25px; text-align: center;
} margin-top: 25px;
</style> }
\ No newline at end of file
</style>
src/components/label_picture/diy-img-two.vue
View file @ 7ade2e91
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<p class="title-teaser">{{plugData.SubTitle}}</p> <p class="title-teaser">{{plugData.SubTitle}}</p>
<ul class="pd-list"> <ul class="pd-list">
<li class="pd-box" v-for="(item,index) in plugData.Details" :key="index"> <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-img" :style="{backgroundImage:`url('${item.ImageUrl}')`}">
<div class="pd-price"> <div class="pd-price">
<div class="price"> <div class="price">
...@@ -73,6 +73,7 @@ ...@@ -73,6 +73,7 @@
list-style: none; list-style: none;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
cursor: pointer;
} }
.tour1 .pd-list .pd-box:last-child { .tour1 .pd-list .pd-box:last-child {
......
src/pages/About.vue
View file @ 7ade2e91
...@@ -4,25 +4,32 @@ ...@@ -4,25 +4,32 @@
{{AboutData[AboutData.length-1]}} {{AboutData[AboutData.length-1]}}
</div> </div>
<template v-for="(item,index) in AboutData"> <template v-for="(item,index) in AboutData">
<!--自訂版型(段落標題)--> <div :key="index">
<paragraph1 v-if="item.Id=='white_label_paragraph_title'&&item.plugData.Type==1" :plugData="item.plugData"> <!--自訂版型(段落標題)-->
</paragraph1> <paragraph1 v-if="item.Id=='white_label_paragraph_title'&&item.plugData.Type==1" :plugData="item.plugData">
<paragraph2 v-if="item.Id=='white_label_paragraph_title'&&item.plugData.Type==2" :plugData="item.plugData"> </paragraph1>
</paragraph2> <paragraph2 v-if="item.Id=='white_label_paragraph_title'&&item.plugData.Type==2" :plugData="item.plugData">
<paragraph3 v-if="item.Id=='white_label_paragraph_title'&&item.plugData.Type==3" :plugData="item.plugData"> </paragraph2>
</paragraph3> <paragraph3 v-if="item.Id=='white_label_paragraph_title'&&item.plugData.Type==3" :plugData="item.plugData">
<paragraphleft v-if="item.Id=='white_label_paragraph_title'&&item.plugData.Type==4" :plugData="item.plugData"> </paragraph3>
</paragraphleft> <paragraphleft v-if="item.Id=='white_label_paragraph_title'&&item.plugData.Type==4" :plugData="item.plugData">
<paragraphright v-if="item.Id=='white_label_paragraph_title'&&item.plugData.Type==5" :plugData="item.plugData"> </paragraphleft>
</paragraphright> <paragraphright v-if="item.Id=='white_label_paragraph_title'&&item.plugData.Type==5" :plugData="item.plugData">
<paragraphafter v-if="item.Id=='white_label_paragraph_title'&&item.plugData.Type==6" :plugData="item.plugData"> </paragraphright>
</paragraphafter> <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> <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> <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> </template>
</q-page> </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