Skip to content

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

页面修改

parent 75cc4c51
Hide whitespace changes
Inline Side-by-side
Showing with 354 additions and 367 deletions
src/components/props/index.vue
View file @ f1e10046
<template> <template>
<div <div v-if="visibleSync" :style="[customStyle]" :class="{ 'u-drawer-visible': showDrawer }" class="u-drawer">
v-if="visibleSync"
:style="[customStyle]"
:class="{ 'u-drawer-visible': showDrawer }"
class="u-drawer"
>
<u-mask :maskClickAble="maskCloseAble" :show="showDrawer && mask" @click="maskClick"></u-mask> <u-mask :maskClickAble="maskCloseAble" :show="showDrawer && mask" @click="maskClick"></u-mask>
<div <div class="u-drawer-content" @click="modeCenterClose(mode)" :class="[
class="u-drawer-content"
@click="modeCenterClose(mode)"
:class="[
safeAreaInsetBottom ? 'safe-area-inset-bottom' : '', safeAreaInsetBottom ? 'safe-area-inset-bottom' : '',
'u-drawer-' + mode, 'u-drawer-' + mode,
showDrawer ? 'u-drawer-content-visible' : '', showDrawer ? 'u-drawer-content-visible' : '',
zoom && mode == 'center' ? 'u-animation-zoom' : '' zoom && mode == 'center' ? 'u-animation-zoom' : ''
]" ]" @touchmove.stop.prevent @click.stop :style="[style]">
@touchmove.stop.prevent <div class="u-mode-center-box" @click.stop @touchmove.stop.prevent v-if="mode == 'center'" :style="[centerStyle]">
@click.stop
:style="[style]"
>
<div
class="u-mode-center-box"
@click.stop
@touchmove.stop.prevent
v-if="mode == 'center'"
:style="[centerStyle]"
>
<slot /> <slot />
</div> </div>
<div v-else> <div v-else>
...@@ -36,334 +18,334 @@ ...@@ -36,334 +18,334 @@
</template> </template>
<script> <script>
import uMask from '../mask/index' import uMask from '../mask/index'
/** /**
* popup 弹窗 * popup 弹窗
* @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义 * @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
* @tutorial https://www.uviewui.com/components/popup.html * @tutorial https://www.uviewui.com/components/popup.html
* @property {String} mode 弹出方向（默认left） * @property {String} mode 弹出方向（默认left）
* @property {Boolean} mask 是否显示遮罩（默认true） * @property {Boolean} mask 是否显示遮罩（默认true）
* @property {String Number} length mode=left | 见官网说明（默认auto） * @property {String Number} length mode=left | 见官网说明（默认auto）
* @property {Boolean} zoom 是否开启缩放动画，只在mode为center时有效（默认true） * @property {Boolean} zoom 是否开启缩放动画，只在mode为center时有效（默认true）
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false） * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
* @property {Boolean} mask-close-able 点击遮罩是否可以关闭弹出层（默认true） * @property {Boolean} mask-close-able 点击遮罩是否可以关闭弹出层（默认true）
* @property {Object} custom-style 用户自定义样式 * @property {Object} custom-style 用户自定义样式
* @property {Number String} border-radius 弹窗圆角值（默认0） * @property {Number String} border-radius 弹窗圆角值（默认0）
* @property {Number String} z-index 弹出内容的z-index值（默认1075） * @property {Number String} z-index 弹出内容的z-index值（默认1075）
* @event {Function} open 弹出层打开 * @event {Function} open 弹出层打开
* @event {Function} close 弹出层收起 * @event {Function} close 弹出层收起
* @example <u-popup v-model="show"><div>出淤泥而不染，濯清涟而不妖</div></u-popup> * @example <u-popup v-model="show"><div>出淤泥而不染，濯清涟而不妖</div></u-popup>
*/ */
export default { export default {
name: "u-popup", name: "u-popup",
components:{ components: {
uMask uMask
},
props: {
/**
* 显示状态
*/
show: {
type: Boolean,
default: false
}, },
/** props: {
* 弹出方向，left|right|top|bottom|center /**
*/ * 显示状态
mode: { */
type: String, show: {
default: "left" type: Boolean,
}, default: false
/** },
* 是否显示遮罩 /**
*/ * 弹出方向，left|right|top|bottom|center
mask: { */
type: Boolean, mode: {
default: true type: String,
}, default: "left"
// 抽屉的宽度(mode=left|right)，或者高度(mode=top|bottom)，单位rpx，或者"auto" },
// 或者百分比"50%"，表示由内容撑开高度或者宽度 /**
length: { * 是否显示遮罩
type: [Number, String], */
default: "auto" mask: {
}, type: Boolean,
// 是否开启缩放动画，只在mode=center时有效 default: true
zoom: { },
type: Boolean, // 抽屉的宽度(mode=left|right)，或者高度(mode=top|bottom)，单位rpx，或者"auto"
default: true // 或者百分比"50%"，表示由内容撑开高度或者宽度
}, length: {
// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距 type: [Number, String],
safeAreaInsetBottom: { default: "auto"
type: Boolean, },
default: false // 是否开启缩放动画，只在mode=center时有效
}, zoom: {
// 是否可以通过点击遮罩进行关闭 type: Boolean,
maskCloseAble: { default: true
type: Boolean, },
default: true // 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距
}, safeAreaInsetBottom: {
// 用户自定义样式 type: Boolean,
customStyle: { default: false
type: Object, },
default() { // 是否可以通过点击遮罩进行关闭
return {}; 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
} }
}, },
value: { data() {
type: Boolean, return {
default: false visibleSync: false,
}, showDrawer: false,
// 此为内部参数，不在文档对外使用，为了解决Picker和keyboard等融合了弹窗的组件 timer: null,
// 对v-model双向绑定多层调用造成报错不能修改props值的问题 style1: {}
popup: { };
type: Boolean,
default: true
}, },
// 显示显示弹窗的圆角，单位rpx computed: {
borderRadius: { // 根据mode的位置，设定其弹窗的宽度(mode = left|right)，或者高度(mode = top|bottom)
type: [Number, String], style() {
default: 0 let style = {};
}, let translate = "100%";
zIndex: { // 判断是否是否百分比或者auto值，是的话，直接使用该值，否则默认为rpx单位的数值
type: [Number, String], let length =
default: 99 /%$/.test(this.length) || this.length == "auto" ?
} this.length :
}, uni.upx2px(this.length) + "px";
data() { // 如果是左边或者上边弹出时，需要给translate设置为负值，用于隐藏
return { if (this.mode == "left" || this.mode == "top")
visibleSync: false, translate = length == "auto" ? "-100%" : "-" + length;
showDrawer: false, if (this.mode == "left" || this.mode == "right") {
timer: null, style = {
style1: {} width: length,
}; height: "100%",
}, transform: `translate3D(${translate},0px,0px)`
computed: { };
// 根据mode的位置，设定其弹窗的宽度(mode = left|right)，或者高度(mode = top|bottom) } else if (this.mode == "top" || this.mode == "bottom") {
style() { style = {
let style = {}; width: "100%",
let translate = "100%"; height: length,
// 判断是否是否百分比或者auto值，是的话，直接使用该值，否则默认为rpx单位的数值 transform: `translate3D(0px,${translate},0px)`
let length = };
/%$/.test(this.length) || this.length == "auto" }
? this.length style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.popup;
: uni.upx2px(this.length) + "px"; // 如果用户设置了borderRadius值，添加弹窗的圆角
// 如果是左边或者上边弹出时，需要给translate设置为负值，用于隐藏 if (this.borderRadius) {
if (this.mode == "left" || this.mode == "top") switch (this.mode) {
translate = length == "auto" ? "-100%" : "-" + length; case "left":
if (this.mode == "left" || this.mode == "right") { style.borderRadius = `0 ${this.borderRadius}px ${this.borderRadius}px 0`;
style = { break;
width: length, case "top":
height: "100%", style.borderRadius = `0 0 ${this.borderRadius}px ${this.borderRadius}px`;
transform: `translate3D(${translate},0px,0px)` break;
}; case "right":
} else if (this.mode == "top" || this.mode == "bottom") { style.borderRadius = `${this.borderRadius}px 0 0 ${this.borderRadius}px`;
style = { break;
width: "100%", case "bottom":
height: length, style.borderRadius = `${this.borderRadius}px ${this.borderRadius}px 0 0`;
transform: `translate3D(0px,${translate},0px)` break;
}; default:
} }
style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.popup; // 不加可能圆角无效
// 如果用户设置了borderRadius值，添加弹窗的圆角 //style.overflow = 'hidden';
if (this.borderRadius) { }
switch (this.mode) { return style;
case "left": },
style.borderRadius = `0 ${this.borderRadius}px ${this.borderRadius}px 0`; // 中部弹窗的特有样式
break; centerStyle() {
case "top": let style = {};
style.borderRadius = `0 0 ${this.borderRadius}px ${this.borderRadius}px`; let length =
break; /%$/.test(this.length) || this.length == "auto" ?
case "right": this.length :
style.borderRadius = `${this.borderRadius}px 0 0 ${this.borderRadius}px`; uni.upx2px(this.length) + "px";
break; style.width = length;
case "bottom": style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.popup;
style.borderRadius = `${this.borderRadius}px ${this.borderRadius}px 0 0`; if (this.borderRadius) {
break; style.borderRadius = `${this.borderRadius}px`;
default: // 不加可能圆角无效
//style.overflow = 'hidden';
} }
// 不加可能圆角无效 return style;
//style.overflow = 'hidden';
} }
return style;
}, },
// 中部弹窗的特有样式 watch: {
centerStyle() { value(val) {
let style = {}; if (val) {
let length = this.open();
/%$/.test(this.length) || this.length == "auto" } else {
? this.length this.close();
: 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将居中内容，此元素会铺满屏幕，点击需要关闭弹窗 created() {
// 让其只在mode=center时起作用 // 先让弹窗组件渲染，再改变遮罩和抽屉元素的样式，让其动画其起作用(必须要有延时，才会有效果)
modeCenterClose(mode) { this.visibleSync = this.value;
if (mode != "center" || !this.maskCloseAble) return; setTimeout(() => {
this.close(); this.showDrawer = this.value;
}, 30);
}, },
open() { methods: {
this.change("visibleSync", "showDrawer", true); // 遮罩被点击
}, maskClick() {
// 此处的原理是，关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件 this.close();
// 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用 },
change(param1, param2, status) { close() {
console.log('close....') this.change("showDrawer", "visibleSync", false);
// 如果this.popup为false，以为着为picker，actionsheet等组件调用了popup组件 },
if (this.popup == true) this.$emit("input", status); // 中部弹出时，需要.u-drawer-content将居中内容，此元素会铺满屏幕，点击需要关闭弹窗
this[param1] = status; // 让其只在mode=center时起作用
if (this.timer) { modeCenterClose(mode) {
clearTimeout(this.timer); if (mode != "center" || !this.maskCloseAble) return;
this.close();
},
open() {
this.change("visibleSync", "showDrawer", true);
},
// 此处的原理是，关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件
// 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用
change(param1, param2, status) {
// 如果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
);
} }
this.timer = setTimeout(
() => {
this[param2] = status;
this.$emit(status ? "open" : "close");
},
status ? 30 : 300
);
} }
} };
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.u-drawer { .u-drawer {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: block; display: block;
/* #endif */ /* #endif */
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
overflow: hidden; overflow: hidden;
z-index: 5999; z-index: 5999;
} }
.u-drawer-content { .u-drawer-content {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: block; display: block;
/* #endif */ /* #endif */
position: absolute; position: absolute;
z-index: 1003; z-index: 1003;
transition: all 0.25s linear; transition: all 0.25s linear;
} }
.u-drawer-left { .u-drawer-left {
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-color: #ffffff; background-color: #ffffff;
} }
.u-drawer-right { .u-drawer-right {
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
background-color: #ffffff; background-color: #ffffff;
} }
.u-drawer-top { .u-drawer-top {
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: #ffffff; background-color: #ffffff;
} }
.u-drawer-bottom { .u-drawer-bottom {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: #ffffff; background-color: #ffffff;
} }
.u-drawer-center { .u-drawer-center {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/* #endif */ /* #endif */
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
opacity: 0; opacity: 0;
z-index: 99999; z-index: 99999;
} }
.u-mode-center-box { .u-mode-center-box {
min-width: 100rpx; min-width: 100rpx;
min-height: 100rpx; min-height: 100rpx;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: block; display: block;
/* #endif */ /* #endif */
position: relative; position: relative;
} }
.u-drawer-content-visible.u-drawer-center { .u-drawer-content-visible.u-drawer-center {
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
} }
.u-animation-zoom { .u-animation-zoom {
transform: scale(1.15); transform: scale(1.15);
} }
.u-drawer-content-visible { .u-drawer-content-visible {
transform: translate3D(0px, 0px, 0px) !important; 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 { .u-drawer-mask-visible {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
display: block; display: block;
/* #endif */ /* #endif */
opacity: 0; opacity: 1;
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> </style>
src/components/trip/style3.vue
View file @ f1e10046
...@@ -2341,6 +2341,7 @@ ...@@ -2341,6 +2341,7 @@
left: calc(0%) left: calc(0%)
} }
} }
.section-tour { .section-tour {
margin-bottom: 30px !important; margin-bottom: 30px !important;
padding: 30px 30px 0; padding: 30px 30px 0;
...@@ -2445,7 +2446,7 @@ ...@@ -2445,7 +2446,7 @@
.detail-content { .detail-content {
padding: 40px 0; padding: 40px 0;
font-size:16px; font-size: 16px;
line-height: 28px; line-height: 28px;
} }
...@@ -2594,7 +2595,7 @@ ...@@ -2594,7 +2595,7 @@
background-color: #6aa8c2; background-color: #6aa8c2;
color: #fff; color: #fff;
box-shadow: 0 0 3px 0 #4c4c4c73; box-shadow: 0 0 3px 0 #4c4c4c73;
cursor:pointer; cursor: pointer;
} }
.detail-banner-pic .items { .detail-banner-pic .items {
...@@ -2604,50 +2605,58 @@ ...@@ -2604,50 +2605,58 @@
height: 330px; height: 330px;
background-color: #fff; background-color: #fff;
} }
.detail-banner-pic .items .item {
.detail-banner-pic .items .item {
overflow: hidden; overflow: hidden;
padding: 25px; padding: 25px;
-webkit-transition: left .3s; -webkit-transition: left .3s;
-moz-transition: left .3s; -moz-transition: left .3s;
-o-transition: left .3s; -o-transition: left .3s;
transition: left .3s; transition: left .3s;
} }
.detail-banner-pic .items .item figure{
.detail-banner-pic .items .item figure {
margin: 0; margin: 0;
width: 100%; width: 100%;
height: 75%; height: 75%;
border-radius: 3px; border-radius: 3px;
box-shadow: 1px 1px 3px 1px rgba(99,99,99,.33) inset; box-shadow: 1px 1px 3px 1px rgba(99, 99, 99, .33) inset;
position: relative; position: relative;
} }
.detail-banner-pic .items .item b {
.detail-banner-pic .items .item b {
color: #6f6f6f; color: #6f6f6f;
max-height: 60px; max-height: 60px;
overflow: hidden; overflow: hidden;
margin-top: 10px; margin-top: 10px;
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
} }
.daily2 .daily-detail .detail-banner-pic .items>* {
.daily2 .daily-detail .detail-banner-pic .items>* {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
display: inline-block; display: inline-block;
height: 330px; height: 330px;
} }
.Style3_main .isHiden3{
height:700px; .Style3_main .isHiden3 {
overflow: hidden; height: 700px;
} overflow: hidden;
.provide-food i{ }
font-size:20px;
margin-right:6px; .provide-food i {
} font-size: 20px;
.style3_detail{ margin-right: 6px;
display:inline-block; }
margin-right:20px;
font-size:18px; .style3_detail {
} display: inline-block;
margin-right: 20px;
font-size: 18px;
}
</style> </style>
<template> <template>
<div class="Style3_main"> <div class="Style3_main">
...@@ -2676,7 +2685,8 @@ ...@@ -2676,7 +2685,8 @@
</div> </div>
<div :data-index="item.myIndex" :data-total="item.details.length" class="detail-banner-pic" v-if="index!=0"> <div :data-index="item.myIndex" :data-total="item.details.length" class="detail-banner-pic" v-if="index!=0">
<i class="iconfont iconpreviewleft arrow left" @click="getLeftIndex(item)"></i> <i class="iconfont iconpreviewleft arrow left" @click="getLeftIndex(item)"></i>
<i class="iconfont iconpreviewright arrow right" @click="getRightIndex(item)" style="right:0;left:auto;"></i> <i class="iconfont iconpreviewright arrow right" @click="getRightIndex(item)"
style="right:0;left:auto;"></i>
<div class="items"> <div class="items">
<div class="item" v-for="(subItem,subIndex) in item.details" :key="subIndex"> <div class="item" v-for="(subItem,subIndex) in item.details" :key="subIndex">
<figure> <figure>
...@@ -2733,20 +2743,19 @@ ...@@ -2733,20 +2743,19 @@
return { return {
trips: [], trips: [],
slide: 0, slide: 0,
isShow:false isShow: false
}; };
}, },
created() {}, created() {},
mounted() { mounted() {
console.log(this.tripList, 'triplistt');
this.init(); this.init();
if (localStorage.baseifo) { if (localStorage.baseifo) {
this.TripConfig = JSON.parse(window.localStorage.getItem('baseifo')); this.TripConfig = JSON.parse(window.localStorage.getItem('baseifo'));
} }
if(this.TripConfig.TripConfig.TripDayIsOpen==1){ if (this.TripConfig.TripConfig.TripDayIsOpen == 1) {
this.isShow=false; this.isShow = false;
}else{ } else {
this.isShow=true; this.isShow = true;
} }
}, },
...@@ -2955,11 +2964,9 @@ ...@@ -2955,11 +2964,9 @@
x.islast = (j + 1) == this.tripList.length x.islast = (j + 1) == this.tripList.length
this.$set(this.tripList, j, x) this.$set(this.tripList, j, x)
x.dateTime = this.setDate(j); x.dateTime = this.setDate(j);
x.myIndex=1; x.myIndex = 1;
}) })
this.trips = this.tripList this.trips = this.tripList
console.log(this.trips, 'tripsss');
}, },
setDate: function (j) { setDate: function (j) {
if (j === 0) { if (j === 0) {
...@@ -2996,18 +3003,18 @@ ...@@ -2996,18 +3003,18 @@
} }
}, },
//获取左边index //获取左边index
getLeftIndex(item){ getLeftIndex(item) {
item.myIndex-- item.myIndex--
if(item.myIndex<1){ if (item.myIndex < 1) {
item.myIndex=item.details.length; item.myIndex = item.details.length;
} }
this.$forceUpdate(); this.$forceUpdate();
}, },
//获取右边 //获取右边
getRightIndex(item){ getRightIndex(item) {
item.myIndex++; item.myIndex++;
if(item.myIndex>item.details.length){ if (item.myIndex > item.details.length) {
item.myIndex=1; item.myIndex = 1;
} }
this.$forceUpdate(); this.$forceUpdate();
} }
......
src/components/trip/tripList.vue
View file @ f1e10046
...@@ -194,9 +194,7 @@ ...@@ -194,9 +194,7 @@
return ""; return "";
} }
}, },
mounted() { mounted() {}
console.log(this.plugData, 'plugDataaaa');
}
}; };
</script> </script>
......
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