Skip to content

M
million
Commit f0a818d2 authored by 罗超's avatar 罗超
Browse files
Options

新增组件

parent 424f1f9e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 7687 additions and 58 deletions
quasar.conf.js
View file @ f0a818d2
...@@ -117,15 +117,35 @@ module.exports = function( /* ctx */ ) { ...@@ -117,15 +117,35 @@ module.exports = function( /* ctx */ ) {
'QItemLabel', 'QItemLabel',
'QTabs', 'QTabs',
'QRouteTab', 'QRouteTab',
'QAvatar' 'QAvatar',
'QBtnDropdown',
'QFooter',
'QMenu',
'QCarousel',
'QCarouselControl',
'QCarouselSlide',
'QInput',
'QDate',
'QPopupProxy',
'QBanner',
'QScrollArea',
'QSeparator',
'QChip',
'QTab',
'QSelect',
'QVideo'
], ],
directives: [ directives: [
'Ripple' 'Ripple',
'ClosePopup'
], ],
// Quasar plugins // Quasar plugins
plugins: [] plugins: [
"Meta",
"Notify"
]
}, },
// animations: 'all', // --- includes all animations // animations: 'all', // --- includes all animations
......
src/App.vue
View file @ f0a818d2
...@@ -6,6 +6,22 @@ ...@@ -6,6 +6,22 @@
<script> <script>
export default { export default {
name: 'App' name: "App"
} };
</script> </script>
<style>
@import url("//at.alicdn.com/t/font_1890699_yf7nftejbw.css");
body {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
Noto Color Emoji, MicrosoftJhengHeiBoldFix, "\5FAE\8EDF\6B63\9ED1\9AD4",
Microsoft JhengHei;
background-color: #f6f6f6;
}
.section-block {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
</style>
\ No newline at end of file
src/boot/i18n.js
View file @ f0a818d2
...@@ -5,14 +5,14 @@ import messages from 'src/i18n' ...@@ -5,14 +5,14 @@ import messages from 'src/i18n'
Vue.use(VueI18n) Vue.use(VueI18n)
const i18n = new VueI18n({ const i18n = new VueI18n({
locale: 'en-us', locale: 'zh-tw',
fallbackLocale: 'en-us', fallbackLocale: 'zh-tw',
messages messages
}) })
export default ({ app }) => { export default ({ app }) => {
// Set i18n instance on app // Set i18n instance on app
app.i18n = i18n app.i18n = i18n
} }
export { i18n } export { i18n }
\ No newline at end of file
src/components/diy-module-img/diy-img-one.vue 0 → 100644
View file @ f0a818d2
<template>
<div class="q-mt-lg">
<section class="tour2 section-block">
<h2 class="block-title">圖片 - 3x1</h2>
<p class="title-teaser">看看大家都去哪些熱門景點</p>
<ul class="pd-list">
<li class="pd-box">
<a
href="/"
title="魅力歐洲～法比荷、最愛羅浮宮、五星鹿特丹、絕美羊角村、魅力風車城8日"
class="pd-link"
>
<div
class="pd-img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence1.jpg');"
>
<div class="pd-price">
<div class="price">
8
<small class="unit">天</small> 67,000
<small class="unit">元起</small>
</div>
</div>
</div>
<div class="pd-content">
<h3 class="pd-title">
魅力歐洲～法比荷、最愛羅浮宮、五星鹿特丹、絕美羊角村、魅力風車城8日
</h3>
</div>
</a>
</li>
<li class="pd-box">
<a
href="/"
title="夢幻灣沙灘俱樂部、烏布皇宮傳統市集、小婆羅浮屠5日"
class="pd-link"
>
<div
class="pd-img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence2.jpg');"
>
<div class="pd-price">
<div class="price">
5
<small class="unit">天</small> 25,900
<small class="unit">元起</small>
</div>
</div>
</div>
<div class="pd-content">
<h3 class="pd-title">
夢幻灣沙灘俱樂部、烏布皇宮傳統市集、小婆羅浮屠5日
</h3>
</div>
</a>
</li>
<li class="pd-box">
<a
href="/"
title="樂天世界塔水族館．景福宮韓服體驗．7017首爾路．東大門CHEF秀4日"
class="pd-link"
>
<div
class="pd-img"
style="background-image: url('https://yvonne.tripsaas.com/protected/img/white_label_front/default_img/default_scence3.jpg');"
>
<div class="pd-price">
<div class="price">
4
<small class="unit">天</small> 20,900
<small class="unit">元起</small>
</div>
</div>
</div>
<div class="pd-content">
<h3 class="pd-title">
樂天世界塔水族館．景福宮韓服體驗．7017首爾路．東大門CHEF秀4日
</h3>
</div>
</a>
</li>
</ul>
</section>
</div>
</template>
<script>
export default {};
</script>
<style>
.tour2 {
}
.tour2 .block-title {
font-size: 22px;
font-weight: 600;
}
.tour2 .title-teaser {
margin-bottom: 10px;
font-size: 16px;
color: #999;
}
.tour2 .pd-list {
display: flex;
flex-flow: row wrap;
padding: 0;
margin: 0;
}
.tour2 .pd-list .pd-box {
padding: 0;
margin: 0;
margin-right: 20px;
margin-bottom: 20px;
flex-basis: calc(33.333% - 15px);
border-radius: 3px;
background-clip: padding-box;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.09);
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;
background-color: #fff;
list-style: none;
border-radius: 4px;
overflow: hidden;
}
.tour2 .pd-list .pd-box:last-child {
margin-right: 0px;
}
a {
text-decoration: none;
color: var(--q-color-primary);
}
.tour2 .pd-box .pd-img {
position: relative;
width: 100%;
padding-bottom: 66.237%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
}
.tour2 .pd-box .pd-img .pd-price {
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
width: 100%;
border-bottom: 4px solid var(--q-color-primary);
text-align: right;
}
.tour2 .pd-box .pd-img .pd-price .price {
display: inline-block;
padding: 4px 12px 0;
color: #fff;
font-size: 22px;
font-weight: 700;
background-color: var(--q-color-primary);
-webkit-border-radius: 5px 0 0;
-webkit-background-clip: padding-box;
-moz-border-radius: 5px 0 0;
-moz-background-clip: padding;
border-radius: 5px 0 0;
background-clip: padding-box;
}
.tour2 .pd-box .pd-img .pd-price .price small {
padding: 0 4px;
font-size: 14px;
}
.tour2 .pd-box .pd-content {
padding: 15px 15px 20px;
}
.tour2 .pd-box .pd-title {
font-size: 15px;
line-height: 1.5;
font-weight: 400;
color: #333;
}
@media only screen and (max-width: 1200px) {
.tour2 .pd-list .pd-box {
flex-basis: calc(50% - 10px) !important;
}
.tour2 .pd-list .pd-box:nth-child(even) {
margin-right: 0 !important;
}
}
@media only screen and (min-width: 768px) {
.pd-box: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: 425px) {
.tour2 .pd-list .pd-box {
flex-basis: 100% !important;
margin-right: 0 !important;
}
}
</style>
src/components/mask/index.vue 0 → 100644
View file @ f0a818d2
<template>
<div
class="u-mask"
:style="[maskStyle]"
:class="[show ? 'u-mask-show' : '']"
@click="click"
@touchmove.stop.prevent
>
<slot />
</div>
</template>
<script>
/**
* mask 遮罩
* @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
* @tutorial https://www.uviewui.com/components/mask.html
* @property {Boolean} show 是否显示遮罩（默认false）
* @property {String Number} z-index z-index 层级（默认1070）
* @property {Object} custom-style 自定义样式对象，见上方说明
* @property {String Number} duration 动画时长，单位毫秒（默认300）
* @property {Boolean} zoom 是否使用scale对这招进行缩放（默认true）
* @property {Boolean} mask-click-able 遮罩是否可点击，为false时点击不会发送click事件（默认true）
* @event {Function} click mask-click-able为true时，点击遮罩发送此事件
* @example <u-mask :show="show" @click="show = false"></u-mask>
*/
export default {
name: "u-mask",
props: {
// 是否显示遮罩
show: {
type: Boolean,
default: false
},
// 层级z-index
zIndex: {
type: [Number, String],
default: 98
},
// 用户自定义样式
customStyle: {
type: Object,
default() {
return {};
}
},
// 遮罩的动画样式， 是否使用使用zoom进行scale进行缩放
zoom: {
type: Boolean,
default: true
},
// 遮罩的过渡时间，单位为ms
duration: {
type: [Number, String],
default: 300
},
// 是否可以通过点击遮罩进行关闭
maskClickAble: {
type: Boolean,
default: true
}
},
computed: {
maskStyle() {
let style = {};
style.backgroundColor = "rgba(0, 0, 0, 0.6)";
style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.mask;
style.transition = `all ${this.duration / 1000}s ease-in-out`;
// 缩放
if (this.zoom == true) style.transform = "scale(1.2, 1.2)";
// 判断用户传递的对象是否为空
if (Object.keys(this.customStyle).length)
style = { ...style, ...this.customStyle };
// 合并自定义的样式
//Object.assign(style, customStyle);
return style;
}
},
methods: {
click() {
if (!this.maskClickAble) return;
this.$emit("click");
}
}
};
</script>
<style lang="scss" scoped>
.u-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
visibility: hidden;
}
.u-mask-show {
opacity: 1;
visibility: visible;
transform: scale(1);
}
</style>
src/components/navs/hor-big-one.vue 0 → 100644
View file @ f0a818d2
<template>
<q-header
reveal
elevated
:style="{background:baseData.nav.bg,color:baseData.nav.color}"
height-hint="98"
>
<q-toolbar style="height:60px;" class="q-pr-lg q-pl-lg">
<img :src="baseData.logo" style="height:45px;" class="q-mr-lg" />
<q-tabs align="left" style="margin:0 auto;" class="desktop-only" shrink>
<template v-for="(x, i) in baseData.nav.navs">
<q-route-tab :key="i" :to="x.url" :label="x.title" :icon="x.icon" v-if="x.icon!=''" />
<q-route-tab :key="i" :to="x.url" :label="x.title" v-else />
</template>
</q-tabs>
<q-btn
flat
dense
round
icon="menu"
aria-label="Menu"
class="mobile-only"
style="margin-left:auto;"
>
<q-menu>
<q-tabs align="left" vertical shrink>
<template v-for="(x, i) in baseData.nav.navs">
<q-route-tab :key="i" :to="x.url" :label="x.title" :icon="x.icon" v-if="x.icon!=''" />
<q-route-tab :key="i" :to="x.url" :label="x.title" v-else />
</template>
</q-tabs>
</q-menu>
</q-btn>
<q-btn
flat
style="color: #444;font-weight:bold;"
class="q-ml-lg desktop-only"
:label="$t('login')"
icon="iconfont iconicon-unlogin"
to="/login/index"
/>
<q-btn
flat
style="color: #444;font-weight:bold;"
class="mobile-only"
icon="iconfont iconicon-unlogin"
to="/login/index"
/>
</q-toolbar>
</q-header>
</template>
<script>
export default {
props: {
baseData: {
type: Object,
default: {}
},
title: {
type: String,
default: ""
}
},
data() {
return {
subTitle: ""
};
},
watch: {
title: function(val, oldval) {
this.subTitle = val;
}
},
meta() {
return {
title:
this.subTitle != ""
? `${this.subTitle} - ${this.baseData.name}`
: this.baseData.name
};
},
mounted() {
}
};
</script>
<style>
</style>
\ No newline at end of file
src/components/navs/hor-big-tow.vue 0 → 100644
View file @ f0a818d2
<template>
<q-header
reveal
elevated
:style="{background:'transparent',color:'#FFF'}"
height-hint="98"
>
<q-toolbar style="height:60px;" class="q-pr-lg q-pl-lg">
<img :src="baseData.logo" style="height:45px;" class="q-mr-lg" />
<q-tabs align="left" style="margin:0 auto;" class="desktop-only" shrink>
<template v-for="(x, i) in baseData.nav.navs">
<q-route-tab :key="i" :to="x.url" :label="x.title" :icon="x.icon" v-if="x.icon!=''" />
<q-route-tab :key="i" :to="x.url" :label="x.title" v-else />
</template>
</q-tabs>
<q-btn
flat
dense
round
icon="menu"
aria-label="Menu"
class="mobile-only"
style="margin-left:auto;"
>
<q-menu>
<q-tabs align="left" vertical shrink>
<template v-for="(x, i) in baseData.nav.navs">
<q-route-tab :key="i" :to="x.url" :label="x.title" :icon="x.icon" v-if="x.icon!=''" />
<q-route-tab :key="i" :to="x.url" :label="x.title" v-else />
</template>
</q-tabs>
</q-menu>
</q-btn>
<q-btn
flat
style="color: #fff;font-weight:bold;"
class="q-ml-lg desktop-only"
:label="$t('login')"
icon="iconfont iconicon-unlogin"
to="/login/index"
/>
<q-btn
flat
style="color: #fff;font-weight:bold;"
class="mobile-only"
icon="iconfont iconicon-unlogin"
to="/login/index"
/>
</q-toolbar>
</q-header>
</template>
<script>
export default {
props: {
baseData: {
type: Object,
default: {}
},
title: {
type: String,
default: ""
}
},
data() {
return {
subTitle: ""
};
},
watch: {
title: function(val, oldval) {
this.subTitle = val;
}
},
meta() {
return {
title:
this.subTitle != ""
? `${this.subTitle} - ${this.baseData.name}`
: this.baseData.name
};
},
mounted() {
}
};
</script>
<style>
</style>
\ No newline at end of file
src/components/props/index.vue 0 → 100644
View file @ f0a818d2
<template>
<div
v-if="visibleSync"
:style="[customStyle]"
:class="{ 'u-drawer-visible': showDrawer }"
class="u-drawer"
>
<u-mask :maskClickAble="maskCloseAble" :show="showDrawer && mask" @click="maskClick"></u-mask>
<div
class="u-drawer-content"
@click="modeCenterClose(mode)"
:class="[
safeAreaInsetBottom ? 'safe-area-inset-bottom' : '',
'u-drawer-' + mode,
showDrawer ? 'u-drawer-content-visible' : '',
zoom && mode == 'center' ? 'u-animation-zoom' : ''
]"
@touchmove.stop.prevent
@click.stop
:style="[style]"
>
<div
class="u-mode-center-box"
@click.stop
@touchmove.stop.prevent
v-if="mode == 'center'"
:style="[centerStyle]"
>
<slot />
</div>
<div v-else>
<slot />
</div>
</div>
</div>
</template>
<script>
import uMask from '../mask/index'
/**
* popup 弹窗
* @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
* @tutorial https://www.uviewui.com/components/popup.html
* @property {String} mode 弹出方向（默认left）
* @property {Boolean} mask 是否显示遮罩（默认true）
* @property {String Number} length mode=left | 见官网说明（默认auto）
* @property {Boolean} zoom 是否开启缩放动画，只在mode为center时有效（默认true）
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
* @property {Boolean} mask-close-able 点击遮罩是否可以关闭弹出层（默认true）
* @property {Object} custom-style 用户自定义样式
* @property {Number String} border-radius 弹窗圆角值（默认0）
* @property {Number String} z-index 弹出内容的z-index值（默认1075）
* @event {Function} open 弹出层打开
* @event {Function} close 弹出层收起
* @example <u-popup v-model="show"><div>出淤泥而不染，濯清涟而不妖</div></u-popup>
*/
export default {
name: "u-popup",
components:{
uMask
},
props: {
/**
* 显示状态
*/
show: {
type: Boolean,
default: false
},
/**
* 弹出方向，left|right|top|bottom|center
*/
mode: {
type: String,
default: "left"
},
/**
* 是否显示遮罩
*/
mask: {
type: Boolean,
default: true
},
// 抽屉的宽度(mode=left|right)，或者高度(mode=top|bottom)，单位rpx，或者"auto"
// 或者百分比"50%"，表示由内容撑开高度或者宽度
length: {
type: [Number, String],
default: "auto"
},
// 是否开启缩放动画，只在mode=center时有效
zoom: {
type: Boolean,
default: true
},
// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
safeAreaInsetBottom: {
type: Boolean,
default: false
},
// 是否可以通过点击遮罩进行关闭
maskCloseAble: {
type: Boolean,
default: true
},
// 用户自定义样式
customStyle: {
type: Object,
default() {
return {};
}
},
value: {
type: Boolean,
default: false
},
// 此为内部参数，不在文档对外使用，为了解决Picker和keyboard等融合了弹窗的组件
// 对v-model双向绑定多层调用造成报错不能修改props值的问题
popup: {
type: Boolean,
default: true
},
// 显示显示弹窗的圆角，单位rpx
borderRadius: {
type: [Number, String],
default: 0
},
zIndex: {
type: [Number, String],
default: 99
}
},
data() {
return {
visibleSync: false,
showDrawer: false,
timer: null,
style1: {}
};
},
computed: {
// 根据mode的位置，设定其弹窗的宽度(mode = left|right)，或者高度(mode = top|bottom)
style() {
let style = {};
let translate = "100%";
// 判断是否是否百分比或者auto值，是的话，直接使用该值，否则默认为rpx单位的数值
let length =
/%$/.test(this.length) || this.length == "auto"
? this.length
: uni.upx2px(this.length) + "px";
// 如果是左边或者上边弹出时，需要给translate设置为负值，用于隐藏
if (this.mode == "left" || this.mode == "top")
translate = length == "auto" ? "-100%" : "-" + length;
if (this.mode == "left" || this.mode == "right") {
style = {
width: length,
height: "100%",
transform: `translate3D(${translate},0px,0px)`
};
} else if (this.mode == "top" || this.mode == "bottom") {
style = {
width: "100%",
height: length,
transform: `translate3D(0px,${translate},0px)`
};
}
style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.popup;
// 如果用户设置了borderRadius值，添加弹窗的圆角
if (this.borderRadius) {
switch (this.mode) {
case "left":
style.borderRadius = `0 ${this.borderRadius}px ${this.borderRadius}px 0`;
break;
case "top":
style.borderRadius = `0 0 ${this.borderRadius}px ${this.borderRadius}px`;
break;
case "right":
style.borderRadius = `${this.borderRadius}px 0 0 ${this.borderRadius}px`;
break;
case "bottom":
style.borderRadius = `${this.borderRadius}px ${this.borderRadius}px 0 0`;
break;
default:
}
// 不加可能圆角无效
//style.overflow = 'hidden';
}
return style;
},
// 中部弹窗的特有样式
centerStyle() {
let style = {};
let length =
/%$/.test(this.length) || this.length == "auto"
? this.length
: uni.upx2px(this.length) + "px";
style.width = length;
style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.popup;
if (this.borderRadius) {
style.borderRadius = `${this.borderRadius}px`;
// 不加可能圆角无效
//style.overflow = 'hidden';
}
return style;
}
},
watch: {
value(val) {
if (val) {
this.open();
} else {
this.close();
}
}
},
created() {
// 先让弹窗组件渲染，再改变遮罩和抽屉元素的样式，让其动画其起作用(必须要有延时，才会有效果)
this.visibleSync = this.value;
setTimeout(() => {
this.showDrawer = this.value;
}, 30);
},
methods: {
// 遮罩被点击
maskClick() {
this.close();
},
close() {
this.change("showDrawer", "visibleSync", false);
},
// 中部弹出时，需要.u-drawer-content将居中内容，此元素会铺满屏幕，点击需要关闭弹窗
// 让其只在mode=center时起作用
modeCenterClose(mode) {
if (mode != "center" || !this.maskCloseAble) return;
this.close();
},
open() {
this.change("visibleSync", "showDrawer", true);
},
// 此处的原理是，关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件
// 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用
change(param1, param2, status) {
console.log('close....')
// 如果this.popup为false，以为着为picker，actionsheet等组件调用了popup组件
if (this.popup == true) this.$emit("input", status);
this[param1] = status;
if (this.timer) {
clearTimeout(this.timer);
}
this.timer = setTimeout(
() => {
this[param2] = status;
this.$emit(status ? "open" : "close");
},
status ? 30 : 300
);
}
}
};
</script>
<style scoped lang="scss">
.u-drawer {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 5999;
}
.u-drawer-content {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: absolute;
z-index: 1003;
transition: all 0.25s linear;
}
.u-drawer-left {
top: 0;
bottom: 0;
left: 0;
background-color: #ffffff;
}
.u-drawer-right {
right: 0;
top: 0;
bottom: 0;
background-color: #ffffff;
}
.u-drawer-top {
top: 0;
left: 0;
right: 0;
background-color: #ffffff;
}
.u-drawer-bottom {
bottom: 0;
left: 0;
right: 0;
background-color: #ffffff;
}
.u-drawer-center {
/* #ifndef APP-NVUE */
display: flex;
flex-direction: column;
/* #endif */
bottom: 0;
left: 0;
right: 0;
top: 0;
justify-content: center;
align-items: center;
opacity: 0;
z-index: 99999;
}
.u-mode-center-box {
min-width: 100rpx;
min-height: 100rpx;
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: relative;
}
.u-drawer-content-visible.u-drawer-center {
transform: scale(1);
opacity: 1;
}
.u-animation-zoom {
transform: scale(1.15);
}
.u-drawer-content-visible {
transform: translate3D(0px, 0px, 0px) !important;
}
.u-drawer-mask {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
opacity: 0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.4);
transition: opacity 0.25s;
}
.u-drawer-mask-visible {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
opacity: 1;
}
</style>
src/components/swiper/style1.vue 0 → 100644
View file @ f0a818d2
This diff is collapsed.
src/components/swiper/style10.vue 0 → 100644
View file @ f0a818d2
This diff is collapsed.
src/components/swiper/style11.vue 0 → 100644
View file @ f0a818d2
This diff is collapsed.
src/components/swiper/style2.vue 0 → 100644
View file @ f0a818d2
This diff is collapsed.
src/components/swiper/style3.vue 0 → 100644
View file @ f0a818d2
This diff is collapsed.
src/components/swiper/style4.vue 0 → 100644
View file @ f0a818d2
<template>
<div style="margin-top:-60px">
<q-carousel
v-model="slide"
:autoplay="5000"
swipeable
animated
control-color="white"
padding
infinite
height="550px"
class="bg-primary text-white shadow-1"
>
<q-carousel-slide
v-for="(x, i) in swipers"
:key="i"
@click="clickSlideHandler(x.path)"
:name="i"
:img-src="x.pic_url"
/>
</q-carousel>
</div>
</template>
<script>
import popup from "../props/index";
export default {
//搜索区块（Banner）-轮播淡出
components: {
popup
},
data() {
return {
slide: 0,
swipers: [
{
pic_url:
"https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500796_rsz.jpg",
path:
"https://yvonne.tripsaas.com/tour/detail/LIFE-TSN0514BRT01?type=c&group_code=TSN05BR9D01A"
},
{
pic_url:
"https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500802_rsz.jpg",
path: "/"
},
{
pic_url:
"https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500810_rsz.jpg",
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: "/"
}
]
};
},
mounted() {
this.$root.$emit("change-head-style", 2);
},
methods: {
clickSlideHandler(url) {
if (url && url.length > 1) {
location.href = url;
}
}
}
};
</script>
<style>
.showbox {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 345px;
background: #fff;
left: 0;
top: 56px;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
}
.showspbox {
position: absolute;
box-sizing: border-box;
width: calc(41.6667% - 22px);
height: 345px;
background: #fff;
left: 0;
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;
}
.area-box .h3 {
font-size: 22px;
color: #333;
font-weight: 600;
padding: 0;
height: unset;
list-style: unset;
margin: 0;
cursor: pointer;
}
.area-box .h4 {
font-size: 18px;
color: #424242;
padding: 0;
height: unset;
list-style: unset;
margin: 0;
margin-right: 20px;
font-weight: 600;
cursor: pointer;
}
.area-box .h5 {
font-size: 16px;
color: #636363;
padding: 0;
height: unset;
list-style: unset;
margin: 0;
margin-right: 12px;
cursor: pointer;
}
.area-box .h6 {
font-size: 14px;
color: gray;
padding: 0;
height: unset;
list-style: unset;
margin: 0;
text-align: right;
cursor: pointer;
}
.area-box .h6:hover,
.area-box .h5:hover,
.area-box .h4:hover,
.area-box .h3:hover {
color: var(--q-color-primary);
}
.area-box .to-end {
align-items: flex-end;
}
.chosen-box {
padding: 15px;
min-height: 30vh;
}
.chosen-box .title {
font-size: 20px;
font-weight: 600;
color: #111;
margin-bottom: 5px;
}
.chosen-box .split-word{
font-size:15px;
color:#333;
line-height:56px;
}
</style>
\ No newline at end of file
src/components/swiper/style5.vue 0 → 100644
View file @ f0a818d2
<template>
<div style="margin-top:-60px">
<q-carousel
v-model="slide"
:autoplay="5000"
swipeable
animated
control-color="white"
padding
arrows
navigation
transition-prev="slide-right"
transition-next="slide-left"
infinite
height="666px"
class="bg-primary text-white shadow-1"
>
<q-carousel-slide
v-for="(x, i) in swipers"
:key="i"
@click="clickSlideHandler(x.path)"
:name="i"
:img-src="x.pic_url"
/>
</q-carousel>
</div>
</template>
<script>
import popup from "../props/index";
export default {
//搜索区块（Banner）-轮播横
components: {
popup
},
data() {
return {
slide: 0,
swipers: [
{
pic_url:
"https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500796_rsz.jpg",
path:
"https://yvonne.tripsaas.com/tour/detail/LIFE-TSN0514BRT01?type=c&group_code=TSN05BR9D01A"
},
{
pic_url:
"https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500802_rsz.jpg",
path: "/"
},
{
pic_url:
"https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500810_rsz.jpg",
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: "/"
}
]
};
},
mounted() {
this.$root.$emit("change-head-style", 2);
},
methods: {
clickSlideHandler(url) {
if (url && url.length > 1) {
location.href = url;
}
}
}
};
</script>
<style>
.showbox {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 345px;
background: #fff;
left: 0;
top: 56px;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1);
}
.showspbox {
position: absolute;
box-sizing: border-box;
width: calc(41.6667% - 22px);
height: 345px;
background: #fff;
left: 0;
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;
}
.area-box .h3 {
font-size: 22px;
color: #333;
font-weight: 600;
padding: 0;
height: unset;
list-style: unset;
margin: 0;
cursor: pointer;
}
.area-box .h4 {
font-size: 18px;
color: #424242;
padding: 0;
height: unset;
list-style: unset;
margin: 0;
margin-right: 20px;
font-weight: 600;
cursor: pointer;
}
.area-box .h5 {
font-size: 16px;
color: #636363;
padding: 0;
height: unset;
list-style: unset;
margin: 0;
margin-right: 12px;
cursor: pointer;
}
.area-box .h6 {
font-size: 14px;
color: gray;
padding: 0;
height: unset;
list-style: unset;
margin: 0;
text-align: right;
cursor: pointer;
}
.area-box .h6:hover,
.area-box .h5:hover,
.area-box .h4:hover,
.area-box .h3:hover {
color: var(--q-color-primary);
}
.area-box .to-end {
align-items: flex-end;
}
.chosen-box {
padding: 15px;
min-height: 30vh;
}
.chosen-box .title {
font-size: 20px;
font-weight: 600;
color: #111;
margin-bottom: 5px;
}
.chosen-box .split-word{
font-size:15px;
color:#333;
line-height:56px;
}
</style>
\ No newline at end of file
src/components/swiper/style6.vue 0 → 100644
View file @ f0a818d2
<template>
<div>
<div
class="banner-style6 desktop-only"
:style="{backgroundImage:`url('${swipers[0].pic_url}')`}"
@click="clickSlideHandler(swipers[0].path)"
></div>
<div
class="banner-style6 mobile-only"
:style="{paddingBottom:'80%',backgroundImage:`url('${swipers[0].pic_url}')`}"
@click="clickSlideHandler(swipers[0].path)"
></div>
</div>
</template>
<script>
import popup from "../props/index";
export default {
//搜索区块（Banner）-无轮播（大）
components: {
popup
},
data() {
return {
slide: 0,
swipers: [
{
pic_url:
"https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500796_rsz.jpg",
path:
"https://yvonne.tripsaas.com/tour/detail/LIFE-TSN0514BRT01?type=c&group_code=TSN05BR9D01A"
}
]
};
},
mounted() {
this.$root.$emit("change-head-style", 2);
},
methods: {
clickSlideHandler(url) {
if (url && url.length > 1) {
location.href = url;
}
}
}
};
</script>
<style>
.banner-style6 {
margin-top: -60px;
width: 100%;
background-color: #f1f1f1;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-bottom:30%;
}
</style>
\ No newline at end of file
src/components/swiper/style7.vue 0 → 100644
View file @ f0a818d2
<template>
<div>
<div
class="banner-style6 desktop-only"
:style="{backgroundImage:`url('${swipers[0].pic_url}')`}"
@click="clickSlideHandler(swipers[0].path)"
></div>
<div
class="banner-style6 mobile-only"
:style="{paddingBottom:'80%',backgroundImage:`url('${swipers[0].pic_url}')`}"
@click="clickSlideHandler(swipers[0].path)"
></div>
</div>
</template>
<script>
import popup from "../props/index";
export default {
//搜索区块（Banner）-无轮播（中）
components: {
popup
},
data() {
return {
slide: 0,
swipers: [
{
pic_url:
"https://de0s2vtm6rzpn.cloudfront.net/b2b/event_block/9841/search6/9841search61583500796_rsz.jpg",
path:
"https://yvonne.tripsaas.com/tour/detail/LIFE-TSN0514BRT01?type=c&group_code=TSN05BR9D01A"
}
]
};
},
mounted() {
this.$root.$emit("change-head-style", 2);
},
methods: {
clickSlideHandler(url) {
if (url && url.length > 1) {
location.href = url;
}
}
}
};
</script>
<style>
.banner-style6 {
margin-top: -60px;
width: 100%;
background-color: #f1f1f1;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-bottom:25%;
}
</style>
\ No newline at end of file
src/components/swiper/style8.vue 0 → 100644
View file @ f0a818d2
This diff is collapsed.
src/components/swiper/style9.vue 0 → 100644
View file @ f0a818d2
This diff is collapsed.
src/components/videos/video-one.vue 0 → 100644
View file @ f0a818d2
<template>
<div class="q-mt-lg">
<section class="vedio1 section-block">
<div class="vedio-wrap">
<div class="vedio">
<q-video class="iframe" src="https://www.youtube.com/embed/k3_tw44QsZQ?rel=0" />
</div>
</div>
<div class="content">
<h2 class="block-title">影片 - 1</h2>
<p
class="block-desc"
>創立於2018年。主要業務包括國內外旅遊、飯店、機票、商務旅遊等全方位服務。合作飯店覆蓋全球200個國家，並與超過一百萬間酒店緊密合作。我們擁有先進的交易服務平台，包括行動裝置瀏覽模式，目前有超過60%以上的訂單是從手機預訂，讓您隨時隨地輕鬆預定行程。我們致力於讓旅遊變得容易，專業行程企劃為您掌握最新景點、最佳行程！</p>
</div>
</section>
</div>
</template>
<script>
export default {};
</script>
<style>
@media only screen and (max-width: 1200px) {
.vedio1 > * {
width: 100% !important;
}
.vedio1 .content {
padding-top: 0px !important;
padding-left: 0 !important;
margin: 0 !important;
}
.vedio1 .content .block-title {
margin: 0 !important;
}
}
.vedio1 {
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 0 16px;
}
.vedio1 > * {
position: relative;
width: 50%;
}
.vedio1 .vedio {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.vedio1 .vedio .iframe {
position: absolute;
width: 100%;
left: 0;
top: 0;
bottom: 0;
}
.vedio1 .content {
padding-left: 40px;
}
.vedio1 .content .block-title {
font-size: 25px;
margin-bottom: 0px;
font-weight:600;
}
.vedio1 .content .block-desc {
line-height: 1.8;
font-size: 16px;
color: #666;
}
</style>
\ No newline at end of file
src/components/videos/video-two.vue 0 → 100644
View file @ f0a818d2
<template>
<div class="q-mt-lg">
<section class="vedio2 section-block">
<div class="vedio-wrap">
<div class="vedio">
<q-video class="iframe" src="https://www.youtube.com/embed/k3_tw44QsZQ?rel=0" />
</div>
</div>
</section>
</div>
</template>
<script>
export default {};
</script>
<style>
@media only screen and (max-width: 1200px) {
/* .vedio1 > * {
width: 100% !important;
}
.vedio1 .content {
padding-top: 0px !important;
padding-left: 0 !important;
margin: 0 !important;
}
.vedio1 .content .block-title {
margin: 0 !important;
} */
}
.vedio2 {
padding: 0 16px;
}
.vedio2 .vedio-wrap{
position: relative;
margin: 0 auto;
width: 100%;
max-width: 800px;
}
.vedio2 .vedio {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.vedio2 .vedio .iframe {
position: absolute;
width: 100%;
left: 0;
top: 0;
bottom: 0;
}
</style>
\ No newline at end of file
src/i18n/zh-cn/index.js
View file @ f0a818d2
export default { export default {
failed: '请求失败', failed: '请求失败',
success: '请求成功' success: '请求成功',
login: "登陆",
search: "請輸入目的地"
} }
\ No newline at end of file
src/i18n/zh-tw/index.js
View file @ f0a818d2
export default { export default {
failed: '加載失敗', failed: '加載失敗',
success: '加載成功' success: '加載成功',
login: "登陸",
search: "搜尋目的地",
search_date_begin: "最早出發日期",
search_date_end: "最晚出發日期"
} }
\ No newline at end of file
src/layouts/HomeLayout.vue
View file @ f0a818d2
This diff is collapsed.
src/pages/Index.vue
View file @ f0a818d2
This diff is collapsed.
src/router/routes.js
View file @ f0a818d2
...@@ -2,10 +2,11 @@ const routes = [{ ...@@ -2,10 +2,11 @@ const routes = [{
path: '/', path: '/',
component: () => component: () =>
import ('layouts/HomeLayout.vue'), import ('layouts/HomeLayout.vue'),
children: [ children: [{
{ path: '', component: () => path: '',
import ('pages/Index.vue') } component: () =>
] import ('pages/Index.vue')
}]
}] }]
// Always leave this as last one // Always leave this as last one
......
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