Skip to content

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

页面修改

parent a9461cc4
Hide whitespace changes
Inline Side-by-side
Showing with 262 additions and 640 deletions
src/components/search_el/search_el1.vue
View file @ cb10135f
<template> <template>
<div> <div>
<div class="q-pa-md bg-grey-1"> <div class="q-pa-md bg-grey-1">
<div <div class="desktop-only" style="max-width:1200px; margin:0 auto;width:100%;position: relative;">
class="desktop-only"
style="max-width:1200px; margin:0 auto;width:100%;position: relative;"
>
<div class="row"> <div class="row">
<div class="col-5" style="width:calc(41.6667% - 22px)"> <div class="col-5" style="width:calc(41.6667% - 22px)">
<q-input <q-input filled id="search_key" v-model="searchKey" class="bg-grey-1" :label="$t('search')"
filled @focus="searchFocusHandler" @blur="searchBlurHandler" @keyup="searchChangeHandler" />
id="search_key"
v-model="searchKey"
class="bg-grey-1"
:label="$t('search')"
@focus="searchFocusHandler"
@blur="searchBlurHandler"
@keyup="searchChangeHandler"
/>
</div> </div>
<div class="col-3"> <div class="col-3">
<q-input <q-input filled v-model="searchDate" :label="$t('search_date_begin')" mask="date" class="bg-grey-1">
filled
v-model="searchDate"
:label="$t('search_date_begin')"
mask="date"
class="bg-grey-1"
>
<template v-slot:append> <template v-slot:append>
<q-icon name="event" class="cursor-pointer"> <q-icon name="event" class="cursor-pointer">
<q-popup-proxy ref="qDateProxy"> <q-popup-proxy ref="qDateProxy">
<q-date <q-date mask="YYYY-MM-DD" :title="$t('search_date_begin')" subtitle="選擇" v-model="searchDate"
mask="YYYY-MM-DD" @input="() => $refs.qDateProxy.hide()" />
:title="$t('search_date_begin')"
subtitle="選擇"
v-model="searchDate"
@input="() => $refs.qDateProxy.hide()"
/>
</q-popup-proxy> </q-popup-proxy>
</q-icon> </q-icon>
</template> </template>
...@@ -43,61 +21,31 @@ ...@@ -43,61 +21,31 @@
</div> </div>
<div class="bg-grey-3 q-pl-xs q-pr-xs" style="text-align:center;line-height:56px;">至</div> <div class="bg-grey-3 q-pl-xs q-pr-xs" style="text-align:center;line-height:56px;">至</div>
<div class="col-3"> <div class="col-3">
<q-input <q-input filled v-model="searchEndDate" :label="$t('search_date_end')" mask="date" class="bg-grey-1">
filled
v-model="searchEndDate"
:label="$t('search_date_end')"
mask="date"
class="bg-grey-1"
>
<template v-slot:append> <template v-slot:append>
<q-icon name="event" class="cursor-pointer"> <q-icon name="event" class="cursor-pointer">
<q-popup-proxy ref="qDateProxy"> <q-popup-proxy ref="qDateProxy">
<q-date <q-date mask="YYYY-MM-DD" :title="$t('search_date_end')" subtitle="選擇" v-model="searchEndDate"
mask="YYYY-MM-DD" @input="() => $refs.qDateProxy.hide()" />
:title="$t('search_date_end')"
subtitle="選擇"
v-model="searchEndDate"
@input="() => $refs.qDateProxy.hide()"
/>
</q-popup-proxy> </q-popup-proxy>
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</div> </div>
<div class="col-1"> <div class="col-1">
<q-btn <q-btn dark-percentage color="primary" unelevated icon="search" style="width: 100%;height:56px"
dark-percentage @click="goSearchHandler" />
color="primary"
unelevated
icon="search"
style="width: 100%;height:56px"
@click="goSearchHandler"
/>
</div> </div>
</div> </div>
<div <div v-show="showSplitPannel" id="sb" transition-show="fade" elevated transition-hide="scale"
v-show="showSplitPannel" class="showbox row">
id="sb"
transition-show="fade"
elevated
transition-hide="scale"
class="showbox row"
>
<div style="width:180px;"> <div style="width:180px;">
<q-scroll-area :thumb-style="thumbStyle" :bar-style="barStyle" style="height: 100%;"> <q-scroll-area :thumb-style="thumbStyle" :bar-style="barStyle" style="height: 100%;">
<q-list> <q-list>
<q-item <q-item v-for="(x, i) in areas" :key="i" clickable v-ripple :active="crtAreaIndex==i"
v-for="(x, i) in areas" @click="clkAreaHandler(i)" active-class="my-menu-link">
:key="i"
clickable
v-ripple
:active="crtAreaIndex==i"
@click="clkAreaHandler(i)"
active-class="my-menu-link"
>
<q-item-section> <q-item-section>
<q-item-label>{{ x.name }}</q-item-label> <q-item-label>{{ x.Name }}</q-item-label>
</q-item-section> </q-item-section>
</q-item> </q-item>
</q-list> </q-list>
...@@ -106,37 +54,30 @@ ...@@ -106,37 +54,30 @@
<q-separator vertical /> <q-separator vertical />
<div class="col q-pa-md"> <div class="col q-pa-md">
<q-scroll-area :thumb-style="thumbStyle" :bar-style="barStyle" style="height: 100%;"> <q-scroll-area :thumb-style="thumbStyle" :bar-style="barStyle" style="height: 100%;">
<div class="area-box" v-for="(x, i) in areas[crtAreaIndex].children" :key="i"> <template v-if="areas[crtAreaIndex]&&areas[crtAreaIndex].SubList&&areas[crtAreaIndex].SubList.length>0">
<div class="q-mb-md"> <div class="area-box" v-for="(x, i) in areas[crtAreaIndex].SubList" :key="i">
<div class="h3" @click="chosenAreaHandler(x.name)">{{x.name}}</div> <div class="q-mb-md">
</div> <div class="h3" @click="chosenAreaHandler(x.Name)">{{x.Name}}</div>
<div class="q-mb-sm row to-end" v-for="(y, yi) in x.children" :key="yi"> </div>
<div class="h4" @click="chosenAreaHandler(y.name)">{{y.name}}</div> <template v-if="x&&x.SubList && x.SubList.length>0">
<div <div class="q-mb-sm row to-end" v-for="(y, yi) in x.SubList" :key="yi">
class="h5" <div class="h4" @click="chosenAreaHandler(y.Name)">{{y.Name}}</div>
@click="chosenAreaHandler(z.name)" <template v-if="y&&y.SubList&&y.SubList.length>0">
v-for="(z, zi) in y.children" <div class="h5" @click="chosenAreaHandler(z.Name)" v-for="(z, zi) in y.SubList" :key="zi">
:key="zi" {{z.Name}}
>{{z.name}}</div> </div>
</template>
</div>
</template>
<q-separator class="q-mt-md q-mb-md" color="grey-2" inset />
</div> </div>
<q-separator class="q-mt-md q-mb-md" color="grey-2" inset /> </template>
</div>
</q-scroll-area> </q-scroll-area>
</div> </div>
</div> </div>
<div <div v-show="showCompPannel" id="sp" transition-show="fade" elevated transition-hide="scale"
v-show="showCompPannel" class="showspbox row">
id="sp" <q-scroll-area :thumb-style="thumbStyle" :bar-style="barStyle" style="height: 100%;width:100%">
transition-show="fade"
elevated
transition-hide="scale"
class="showspbox row"
>
<q-scroll-area
:thumb-style="thumbStyle"
:bar-style="barStyle"
style="height: 100%;width:100%"
>
<q-list class="area-box"> <q-list class="area-box">
<q-item clickable v-ripple @click="chosenAreaHandler('日本')"> <q-item clickable v-ripple @click="chosenAreaHandler('日本')">
<q-item-section> <q-item-section>
...@@ -209,15 +150,8 @@ ...@@ -209,15 +150,8 @@
</div> </div>
</div> </div>
<div class="mobile-only"> <div class="mobile-only">
<q-input <q-input filled id="search_key" v-model="searchKey" class="bg-grey-1" :label="$t('search')" readonly="readonly"
filled @click="showPopupHandler">
id="search_key"
v-model="searchKey"
class="bg-grey-1"
:label="$t('search')"
readonly="readonly"
@click="showPopupHandler"
>
<template v-slot:append> <template v-slot:append>
<q-icon name="search" /> <q-icon name="search" />
</template> </template>
...@@ -232,46 +166,33 @@ ...@@ -232,46 +166,33 @@
</q-tabs> </q-tabs>
<div v-show="tab=='dest'"> <div v-show="tab=='dest'">
<div class="q-mb-md"> <div class="q-mb-md">
<q-select filled v-model="chosenResult.fl" :options="areas" option-label="name" option-value="name" label="請選擇地區" /> <q-select filled v-model="chosenResult.fl" :options="areas" option-label="Name" option-value="Name"
label="請選擇地區" />
</div> </div>
<div class="q-mb-md" v-if="chosenResult.fl.children"> <div class="q-mb-md" v-if="chosenResult.fl.SubList">
<q-select filled v-model="chosenResult.sl" :options="chosenResult.fl.children" option-label="name" option-value="name" label="請選擇地區" /> <q-select filled v-model="chosenResult.sl" :options="chosenResult.fl.SubList" option-label="Name"
option-value="Name" label="請選擇地區" />
</div> </div>
<div class="q-mb-md" v-if="chosenResult.sl.children"> <div class="q-mb-md" v-if="chosenResult.sl.SubList">
<q-select filled v-model="chosenResult.tl" :options="chosenResult.sl.children" option-label="name" option-value="name" label="請選擇地區" /> <q-select filled v-model="chosenResult.tl" :options="chosenResult.sl.SubList" option-label="Name"
option-value="Name" label="請選擇地區" />
</div> </div>
<div class="q-mb-md" v-if="chosenResult.tl.children"> <div class="q-mb-md" v-if="chosenResult.tl.SubList">
<q-select filled v-model="chosenResult.ful" :options="chosenResult.tl.children" option-label="name" option-value="name" label="請選擇地區" /> <q-select filled v-model="chosenResult.ful" :options="chosenResult.tl.SubList" option-label="Name"
option-value="Name" label="請選擇地區" />
</div> </div>
</div> </div>
<div v-show="tab=='kw'" class="q-mb-md"> <div v-show="tab=='kw'" class="q-mb-md">
<q-input <q-input filled id="search_key" v-model="searchKey" class="bg-grey-1" :label="$t('search')" />
filled
id="search_key"
v-model="searchKey"
class="bg-grey-1"
:label="$t('search')"
/>
</div> </div>
<div class="q-mb-md row"> <div class="q-mb-md row">
<div class="col"> <div class="col">
<q-input <q-input filled v-model="searchDate" :label="$t('search_date_begin')" mask="date" class="bg-grey-1">
filled
v-model="searchDate"
:label="$t('search_date_begin')"
mask="date"
class="bg-grey-1"
>
<template v-slot:append> <template v-slot:append>
<q-icon name="event" class="cursor-pointer"> <q-icon name="event" class="cursor-pointer">
<q-popup-proxy ref="qDateProxy"> <q-popup-proxy ref="qDateProxy">
<q-date <q-date mask="YYYY-MM-DD" :title="$t('search_date_begin')" subtitle="選擇" v-model="searchDate"
mask="YYYY-MM-DD" @input="() => $refs.qDateProxy.hide()" />
:title="$t('search_date_begin')"
subtitle="選擇"
v-model="searchDate"
@input="() => $refs.qDateProxy.hide()"
/>
</q-popup-proxy> </q-popup-proxy>
</q-icon> </q-icon>
</template> </template>
...@@ -279,23 +200,12 @@ ...@@ -279,23 +200,12 @@
</div> </div>
<div class="split-word bg-grey-3 q-pl-xs q-pr-xs">至</div> <div class="split-word bg-grey-3 q-pl-xs q-pr-xs">至</div>
<div class="col"> <div class="col">
<q-input <q-input filled v-model="searchEndDate" :label="$t('search_date_end')" mask="date" class="bg-grey-1">
filled
v-model="searchEndDate"
:label="$t('search_date_end')"
mask="date"
class="bg-grey-1"
>
<template v-slot:append> <template v-slot:append>
<q-icon name="event" class="cursor-pointer"> <q-icon name="event" class="cursor-pointer">
<q-popup-proxy ref="qDateProxy"> <q-popup-proxy ref="qDateProxy">
<q-date <q-date mask="YYYY-MM-DD" :title="$t('search_date_begin')" subtitle="選擇"
mask="YYYY-MM-DD" v-model="searchEndDate" @input="() => $refs.qDateProxy.hide()" />
:title="$t('search_date_begin')"
subtitle="選擇"
v-model="searchEndDate"
@input="() => $refs.qDateProxy.hide()"
/>
</q-popup-proxy> </q-popup-proxy>
</q-icon> </q-icon>
</template> </template>
...@@ -314,510 +224,219 @@ ...@@ -314,510 +224,219 @@
</template> </template>
<script> <script>
import popup from "../props/index";
export default {
//其他-搜索列 //其他-搜索列
components: { import popup from "../props/index";
popup export default {
}, props: ["plugData"],
data() { components: {
return { popup
slide: 0, },
swipers: [ data() {
{ return {
pic_url: slide: 0,
"https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500796_rsz.jpg",
path: searchKey: "",
"https://yvonne.tripsaas.com/tour/detail/LIFE-TSN0514BRT01?type=c&group_code=TSN05BR9D01A" searchDate: "",
}, searchEndDate: "",
{ showSplitPannel: false,
pic_url: showCompPannel: false,
"https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500802_rsz.jpg", thumbStyle: {
path: "/" right: "4px",
}, borderRadius: "5px",
{ backgroundColor: "#027be3",
pic_url: width: "5px",
"https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500810_rsz.jpg", opacity: 0.75
path: "/"
},
{
pic_url:
"https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500763_rsz.jpg",
path: "/"
},
{
pic_url:
"https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500815_rsz.jpg",
path: "/"
},
{
pic_url:
"https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500828_rsz.jpg",
path: "/"
}
],
searchKey: "",
searchDate: "",
searchEndDate: "",
showSplitPannel: false,
showCompPannel: false,
thumbStyle: {
right: "4px",
borderRadius: "5px",
backgroundColor: "#027be3",
width: "5px",
opacity: 0.75
},
barStyle: {
right: "2px",
borderRadius: "9px",
backgroundColor: "#027be3",
width: "9px",
opacity: 0.2
},
areas: [
{
name: "東北亞",
children: [
{
name: "日本",
children: [
{
name: "關東",
children: [{ name: "東京" }, { name: "箱根" }]
},
{
name: "關西",
children: [
{ name: "大阪" },
{ name: "京都" },
{ name: "神戶" },
{ name: "奈良" }
]
},
{
name: "東北",
children: [
{ name: "青深" },
{ name: "秋田" },
{ name: "仙台" }
]
},
{
name: "中部、北陸",
children: [
{ name: "輕井澤" },
{ name: "新鴻" },
{ name: "立山黑部" },
{ name: "富山" },
{ name: "名古屋" }
]
},
{
name: "九州",
children: [
{ name: "福岡" },
{ name: "宮崎" },
{ name: "鹿兒島" }
]
},
{
name: "四國、中國",
children: [
{ name: "廣島" },
{ name: "鳥取" },
{ name: "岡山" }
]
},
{
name: "中部、北陸",
children: [
{ name: "輕井澤" },
{ name: "新鴻" },
{ name: "立山黑部" },
{ name: "富山" },
{ name: "名古屋" }
]
},
{
name: "北海道"
},
{
name: "琉球沖繩、石埂島"
}
]
},
{
name: "南韓",
children: [
{
name: "首爾"
},
{
name: "釜山"
},
{
name: "濟州島"
},
{
name: "江源道"
}
]
},
{
name: "蒙古"
},
{
name: "北韓"
}
]
}, },
{ barStyle: {
name: "東南亞", right: "2px",
children: [ borderRadius: "9px",
{ backgroundColor: "#027be3",
name: "泰國", width: "9px",
children: [ opacity: 0.2
{
name: "曼谷"
},
{
name: "大城"
},
{
name: "華欣"
},
{
name: "清邁"
},
{
name: "巴達雅"
},
{
name: "蘇梅島"
},
{
name: "普吉島"
}
]
},
{
name: "馬來西亞",
children: [
{
name: "吉隆坡"
},
{
name: "檳城"
},
{
name: "蘭卡威"
},
{
name: "柔佛"
},
{
name: "馬六甲"
},
{
name: "沙巴"
}
]
},
{
name: "菲律賓"
},
{
name: "印尼"
},
{
name: "中南半島",
children: [
{
name: "越南"
},
{
name: "柬埔寨"
}
]
}
]
}, },
{ areas: [],
name: "東北亞", crtAreaIndex: 0,
children: [ showPopup: false,
{ tab: "dest",
name: "日本", chosenResult: {
children: [ fl: "",
{ sl: "",
name: "關東", tl: "",
children: [{ name: "東京" }, { name: "箱根" }] ful: ""
},
{
name: "關西",
children: [
{ name: "大阪" },
{ name: "京都" },
{ name: "神戶" },
{ name: "奈良" }
]
},
{
name: "東北",
children: [
{ name: "青深" },
{ name: "秋田" },
{ name: "仙台" }
]
},
{
name: "中部、北陸",
children: [
{ name: "輕井澤" },
{ name: "新鴻" },
{ name: "立山黑部" },
{ name: "富山" },
{ name: "名古屋" }
]
},
{
name: "九州",
children: [
{ name: "福岡" },
{ name: "宮崎" },
{ name: "鹿兒島" }
]
},
{
name: "四國、中國",
children: [
{ name: "廣島" },
{ name: "鳥取" },
{ name: "岡山" }
]
},
{
name: "中部、北陸",
children: [
{ name: "輕井澤" },
{ name: "新鴻" },
{ name: "立山黑部" },
{ name: "富山" },
{ name: "名古屋" }
]
},
{
name: "北海道"
},
{
name: "琉球沖繩、石埂島"
}
]
},
{
name: "南韓",
children: [
{
name: "首爾"
},
{
name: "釜山"
},
{
name: "濟州島"
},
{
name: "江源道"
}
]
},
{
name: "蒙古"
},
{
name: "北韓"
}
]
} }
], };
crtAreaIndex: 0,
showPopup: false,
tab:"dest",
chosenResult:{
fl:"",
sl:"",
tl:"",
ful:""
}
};
},
mounted() {
this.$root.$emit("change-head-style", 1);
document.addEventListener("click", this.clickHandler);
},
beforeDestroy() {
document.removeEventListener("click", this.clickHandler);
},
computed: {
// getSecondRange(){
// let arr=[]
// console.log('計算：',this.chosenResult.fl);
// if(this.chosenResult.fl && this.chosenResult.fl.name){
// this.areas.forEach(x=>{
// if(x.name==this.chosenResult.fl.name && x.children){
// arr=x.children
// }
// })
// }
// return arr;
// },
},
methods: {
showPopupHandler(){
this.showPopup=true
}, },
clickHandler(e) { mounted() {
if (!document.querySelector("#sb").contains(e.target)) { var jObj = JSON.parse(window.localStorage.getItem('baseifo'));
this.showSplitPannel = false; this.areas = jObj.AreaList;
} else if (!document.querySelector("#sp").contains(e.target)) { this.$root.$emit("change-head-style", 1);
this.showCompPannel = false; document.addEventListener("click", this.clickHandler);
}
}, },
clickSlideHandler(url) { beforeDestroy() {
if (url && url.length > 1) { document.removeEventListener("click", this.clickHandler);
location.href = url;
}
},
searchFocusHandler() {
if (this.searchKey == "") {
setTimeout(() => {
this.showSplitPannel = true;
}, 200);
}
},
searchBlurHandler() {
//this.showSplitPannel = false;
}, },
clkAreaHandler(i) { computed: {
this.crtAreaIndex = i;
}, },
searchChangeHandler() { methods: {
if (this.searchKey == "") { showPopupHandler() {
this.showSplitPannel = true; this.showPopup = true
this.showCompPannel = false; },
} else { clickHandler(e) {
if (!document.querySelector("#sb").contains(e.target)) {
this.showSplitPannel = false;
} else if (!document.querySelector("#sp").contains(e.target)) {
this.showCompPannel = false;
}
},
clickSlideHandler(url) {
if (url && url.length > 1) {
location.href = url;
}
},
searchFocusHandler() {
if (this.searchKey == "") {
setTimeout(() => {
this.showSplitPannel = true;
}, 200);
}
},
searchBlurHandler() {
//this.showSplitPannel = false;
},
clkAreaHandler(i) {
this.crtAreaIndex = i;
},
searchChangeHandler() {
if (this.searchKey == "") {
this.showSplitPannel = true;
this.showCompPannel = false;
} else {
this.showSplitPannel = false;
this.showCompPannel = true;
}
},
chosenAreaHandler(name) {
this.searchKey = name;
this.showSplitPannel = false; this.showSplitPannel = false;
this.showCompPannel = true; this.showCompPannel = false;
} },
}, goSearchHandler() {
chosenAreaHandler(name) { if (this.searchKey == "") {
this.searchKey = name; this.$q.notify({
this.showSplitPannel = false; color: "negative",
this.showCompPannel = false; textColor: "#FFF",
}, icon: "report_problem",
goSearchHandler() { message: "尊敬的客人，請選擇一個目的地吧",
if (this.searchKey == "") { position: "top",
this.$q.notify({ timeout: 3000
color: "negative", });
textColor: "#FFF", }
icon: "report_problem",
message: "尊敬的客人，請選擇一個目的地吧",
position: "top",
timeout: 3000
});
} }
} }
} };
};
</script> </script>
<style> <style>
.showbox { .showbox {
position: absolute; position: absolute;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
height: 345px; height: 345px;
background: #fff; background: #fff;
left: 0; left: 0;
top: 56px; top: 56px;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
} }
.showspbox {
position: absolute; .showspbox {
box-sizing: border-box; position: absolute;
width: calc(41.6667% - 22px); box-sizing: border-box;
height: 345px; width: calc(41.6667% - 22px);
background: #fff; height: 345px;
left: 0; background: #fff;
top: 56px; left: 0;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1); top: 56px;
} box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
.my-menu-link { }
background-color: rgb(237, 237, 237) !important;
} .my-menu-link {
.area-box .h3 { background-color: rgb(237, 237, 237) !important;
font-size: 22px; }
color: #333;
font-weight: 600; .area-box .h3 {
padding: 0; font-size: 22px;
height: unset; color: #333;
list-style: unset; font-weight: 600;
margin: 0; padding: 0;
cursor: pointer; height: unset;
} list-style: unset;
.area-box .h4 { margin: 0;
font-size: 18px; cursor: pointer;
color: #424242; }
padding: 0;
height: unset; .area-box .h4 {
list-style: unset; font-size: 18px;
margin: 0; color: #424242;
margin-right: 20px; padding: 0;
font-weight: 600; height: unset;
cursor: pointer; list-style: unset;
} margin: 0;
.area-box .h5 { margin-right: 20px;
font-size: 16px; font-weight: 600;
color: #636363; cursor: pointer;
padding: 0; }
height: unset;
list-style: unset; .area-box .h5 {
margin: 0; font-size: 16px;
margin-right: 12px; color: #636363;
cursor: pointer; padding: 0;
} height: unset;
.area-box .h6 { list-style: unset;
font-size: 14px; margin: 0;
color: gray; margin-right: 12px;
padding: 0; cursor: pointer;
height: unset; }
list-style: unset;
margin: 0; .area-box .h6 {
text-align: right; font-size: 14px;
cursor: pointer; color: gray;
} padding: 0;
.area-box .h6:hover, height: unset;
.area-box .h5:hover, list-style: unset;
.area-box .h4:hover, margin: 0;
.area-box .h3:hover { text-align: right;
color: var(--q-color-primary); cursor: pointer;
} }
.area-box .to-end {
align-items: flex-end; .area-box .h6:hover,
} .area-box .h5:hover,
.chosen-box { .area-box .h4:hover,
padding: 15px; .area-box .h3:hover {
min-height: 30vh; color: var(--q-color-primary);
} }
.chosen-box .title {
font-size: 20px; .area-box .to-end {
font-weight: 600; align-items: flex-end;
color: #111; }
margin-bottom: 5px;
} .chosen-box {
.chosen-box .split-word{ padding: 15px;
font-size:15px; min-height: 30vh;
color:#333; }
line-height:56px;
} .chosen-box .title {
</style> font-size: 20px;
\ No newline at end of file font-weight: 600;
color: #111;
margin-bottom: 5px;
}
.chosen-box .split-word {
font-size: 15px;
color: #333;
line-height: 56px;
}
</style>
src/pages/About.vue
View file @ cb10135f
...@@ -85,11 +85,14 @@ ...@@ -85,11 +85,14 @@
<searchsf1 v-if="item.Id=='search_sf'&&item.plugData.Type==1" :plugData="item.plugData"></searchsf1> <searchsf1 v-if="item.Id=='search_sf'&&item.plugData.Type==1" :plugData="item.plugData"></searchsf1>
<searchsf2 v-if="item.Id=='search_sf'&&item.plugData.Type==2" :plugData="item.plugData"></searchsf2> <searchsf2 v-if="item.Id=='search_sf'&&item.plugData.Type==2" :plugData="item.plugData"></searchsf2>
<searchsf3 v-if="item.Id=='search_sf'&&item.plugData.Type==3" :plugData="item.plugData"></searchsf3> <searchsf3 v-if="item.Id=='search_sf'&&item.plugData.Type==3" :plugData="item.plugData"></searchsf3>
<!--搜尋區塊(輪播橫)search_s --> <!--搜尋區塊(輪播橫)search_s -->
<searchsf1 v-if="item.Id=='search_s'&&item.plugData.Type==1" :plugData="item.plugData"></searchsf1> <searchsf1 v-if="item.Id=='search_s'&&item.plugData.Type==1" :plugData="item.plugData"></searchsf1>
<searchsf2 v-if="item.Id=='search_s'&&item.plugData.Type==2" :plugData="item.plugData"></searchsf2> <searchsf2 v-if="item.Id=='search_s'&&item.plugData.Type==2" :plugData="item.plugData"></searchsf2>
<searchsf3 v-if="item.Id=='search_s'&&item.plugData.Type==3" :plugData="item.plugData"></searchsf3> <searchsf3 v-if="item.Id=='search_s'&&item.plugData.Type==3" :plugData="item.plugData"></searchsf3>
<!--搜尋區塊(其他)search_el -->
<searchel1 v-if="item.Id=='search_el'&&item.plugData.Type==1" :plugData="item.plugData"></searchel1>
</div> </div>
</template> </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