Commit f1e10046 authored by 黄奎's avatar 黄奎

页面修改

parent 75cc4c51
<template>
<div
v-if="visibleSync"
:style="[customStyle]"
:class="{ 'u-drawer-visible': showDrawer }"
class="u-drawer"
>
<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="[
<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]"
>
]" @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>
......@@ -36,8 +18,8 @@
</template>
<script>
import uMask from '../mask/index'
/**
import uMask from '../mask/index'
/**
* popup 弹窗
* @description 弹出层容器,用于展示弹窗、信息提示等内容,支持上、下、左、右和中部弹出。组件只提供容器,内部内容由用户自定义
* @tutorial https://www.uviewui.com/components/popup.html
......@@ -54,9 +36,9 @@ import uMask from '../mask/index'
* @event {Function} close 弹出层收起
* @example <u-popup v-model="show"><div>出淤泥而不染,濯清涟而不妖</div></u-popup>
*/
export default {
export default {
name: "u-popup",
components:{
components: {
uMask
},
props: {
......@@ -105,7 +87,7 @@ export default {
// 用户自定义样式
customStyle: {
type: Object,
default() {
default () {
return {};
}
},
......@@ -144,9 +126,9 @@ export default {
let translate = "100%";
// 判断是否是否百分比或者auto值,是的话,直接使用该值,否则默认为rpx单位的数值
let length =
/%$/.test(this.length) || this.length == "auto"
? this.length
: uni.upx2px(this.length) + "px";
/%$/.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;
......@@ -190,9 +172,9 @@ export default {
centerStyle() {
let style = {};
let length =
/%$/.test(this.length) || this.length == "auto"
? this.length
: uni.upx2px(this.length) + "px";
/%$/.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) {
......@@ -239,7 +221,6 @@ export default {
// 此处的原理是,关闭时先通过动画隐藏弹窗和遮罩,再移除整个组件
// 打开时,先渲染组件,延时一定时间再让遮罩和弹窗的动画起作用
change(param1, param2, status) {
console.log('close....')
// 如果this.popup为false,以为着为picker,actionsheet等组件调用了popup组件
if (this.popup == true) this.$emit("input", status);
this[param1] = status;
......@@ -255,11 +236,11 @@ export default {
);
}
}
};
};
</script>
<style scoped lang="scss">
.u-drawer {
.u-drawer {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
......@@ -270,46 +251,46 @@ export default {
bottom: 0;
overflow: hidden;
z-index: 5999;
}
}
.u-drawer-content {
.u-drawer-content {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: absolute;
z-index: 1003;
transition: all 0.25s linear;
}
}
.u-drawer-left {
.u-drawer-left {
top: 0;
bottom: 0;
left: 0;
background-color: #ffffff;
}
}
.u-drawer-right {
.u-drawer-right {
right: 0;
top: 0;
bottom: 0;
background-color: #ffffff;
}
}
.u-drawer-top {
.u-drawer-top {
top: 0;
left: 0;
right: 0;
background-color: #ffffff;
}
}
.u-drawer-bottom {
.u-drawer-bottom {
bottom: 0;
left: 0;
right: 0;
background-color: #ffffff;
}
}
.u-drawer-center {
.u-drawer-center {
/* #ifndef APP-NVUE */
display: flex;
flex-direction: column;
......@@ -322,31 +303,31 @@ export default {
align-items: center;
opacity: 0;
z-index: 99999;
}
}
.u-mode-center-box {
.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 {
.u-drawer-content-visible.u-drawer-center {
transform: scale(1);
opacity: 1;
}
}
.u-animation-zoom {
.u-animation-zoom {
transform: scale(1.15);
}
}
.u-drawer-content-visible {
.u-drawer-content-visible {
transform: translate3D(0px, 0px, 0px) !important;
}
}
.u-drawer-mask {
.u-drawer-mask {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
......@@ -358,12 +339,13 @@ export default {
right: 0;
background-color: rgba(0, 0, 0, 0.4);
transition: opacity 0.25s;
}
}
.u-drawer-mask-visible {
.u-drawer-mask-visible {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
opacity: 1;
}
}
</style>
......@@ -2341,6 +2341,7 @@
left: calc(0%)
}
}
.section-tour {
margin-bottom: 30px !important;
padding: 30px 30px 0;
......@@ -2445,7 +2446,7 @@
.detail-content {
padding: 40px 0;
font-size:16px;
font-size: 16px;
line-height: 28px;
}
......@@ -2594,7 +2595,7 @@
background-color: #6aa8c2;
color: #fff;
box-shadow: 0 0 3px 0 #4c4c4c73;
cursor:pointer;
cursor: pointer;
}
.detail-banner-pic .items {
......@@ -2604,6 +2605,7 @@
height: 330px;
background-color: #fff;
}
.detail-banner-pic .items .item {
overflow: hidden;
padding: 25px;
......@@ -2611,43 +2613,50 @@
-moz-transition: left .3s;
-o-transition: left .3s;
transition: left .3s;
}
.detail-banner-pic .items .item figure{
}
.detail-banner-pic .items .item figure {
margin: 0;
width: 100%;
height: 75%;
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;
}
.detail-banner-pic .items .item b {
}
.detail-banner-pic .items .item b {
color: #6f6f6f;
max-height: 60px;
overflow: hidden;
margin-top: 10px;
display: inline-block;
font-weight: bold;
}
.daily2 .daily-detail .detail-banner-pic .items>* {
}
.daily2 .daily-detail .detail-banner-pic .items>* {
position: absolute;
left: 0;
top: 0;
display: inline-block;
height: 330px;
}
.Style3_main .isHiden3{
height:700px;
}
.Style3_main .isHiden3 {
height: 700px;
overflow: hidden;
}
.provide-food i{
font-size:20px;
margin-right:6px;
}
.style3_detail{
display:inline-block;
margin-right:20px;
font-size:18px;
}
}
.provide-food i {
font-size: 20px;
margin-right: 6px;
}
.style3_detail {
display: inline-block;
margin-right: 20px;
font-size: 18px;
}
</style>
<template>
<div class="Style3_main">
......@@ -2676,7 +2685,8 @@
</div>
<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 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="item" v-for="(subItem,subIndex) in item.details" :key="subIndex">
<figure>
......@@ -2733,20 +2743,19 @@
return {
trips: [],
slide: 0,
isShow:false
isShow: false
};
},
created() {},
mounted() {
console.log(this.tripList, 'triplistt');
this.init();
if (localStorage.baseifo) {
this.TripConfig = JSON.parse(window.localStorage.getItem('baseifo'));
}
if(this.TripConfig.TripConfig.TripDayIsOpen==1){
this.isShow=false;
}else{
this.isShow=true;
if (this.TripConfig.TripConfig.TripDayIsOpen == 1) {
this.isShow = false;
} else {
this.isShow = true;
}
},
......@@ -2955,11 +2964,9 @@
x.islast = (j + 1) == this.tripList.length
this.$set(this.tripList, j, x)
x.dateTime = this.setDate(j);
x.myIndex=1;
x.myIndex = 1;
})
this.trips = this.tripList
console.log(this.trips, 'tripsss');
},
setDate: function (j) {
if (j === 0) {
......@@ -2996,18 +3003,18 @@
}
},
//获取左边index
getLeftIndex(item){
getLeftIndex(item) {
item.myIndex--
if(item.myIndex<1){
item.myIndex=item.details.length;
if (item.myIndex < 1) {
item.myIndex = item.details.length;
}
this.$forceUpdate();
},
//获取右边
getRightIndex(item){
getRightIndex(item) {
item.myIndex++;
if(item.myIndex>item.details.length){
item.myIndex=1;
if (item.myIndex > item.details.length) {
item.myIndex = 1;
}
this.$forceUpdate();
}
......
......@@ -194,9 +194,7 @@
return "";
}
},
mounted() {
console.log(this.plugData, 'plugDataaaa');
}
mounted() {}
};
</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