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'
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-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-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