Skip to content

U
uni-pdtravel
Commit af62f309 authored by 潘永坪's avatar 潘永坪
Browse files
Options

样式修改

parent 0cc9bf89
Hide whitespace changes
Inline Side-by-side
Showing with 55 additions and 43 deletions
pages/combination/distributionCombiChoose/distributionCombiChoose.vue
View file @ af62f309
<!-- 修改这个页面时，需要同步更新combiChoose页面的代码 -->
<template>
<view class="wrap">
<scroll-view @scroll="scrollFull" style="height: 100%;" scroll-y>
<scroll-view @scroll="scrollFull" style="height: 100%;" :scroll-into-view="toViewFull" scroll-y>
<view class="banner">
<u-swiper :list="imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" circular>
<view slot="indicator" class="indicator-num">
......@@ -9,12 +9,12 @@
</view>
</u-swiper>
</view>
<view class="middle">
<view class="middle" id="middle">
<view class="merchant-info" :style="middleInfoStyle">
<view class="merchant-name">
{{currentMerchant.name}}
{{currentMerchant.name||''}}
</view>
<view class="merchant-info-bottom" :style="xxx">
<view class="merchant-info-bottom" :style="merchantBottomStyle" >
<view class="merchant-bottom-left">
<view>
<text v-if="showBusiness" style="color: #00B42B;">营业中</text>
......@@ -27,7 +27,7 @@
</view>
<view class="merchant-bottom-right">
<view class="merchant-address">
{{currentMerchant.address}}
{{currentMerchant.address||''}}
</view>
<view class="merchant-nav" @click="navigation(currentMerchant)">
<view class="merchant-bg">
......@@ -134,25 +134,28 @@
</view>
<view class="bottom">
<view class="bottom-left" @click="showCustomer()">
<u-icon name="chat" size="36"></u-icon>
<u-icon name="chat" size="42"></u-icon>
客服
</view>
<view class="bottom-middle">
<view class="bottom-more" v-show="chooseProduct.length > 0">
组合购更优惠
<text class="bottom-three"></text>
<view class="bottom-right">
<view class="bottom-choose">
<view class="bottom-more" v-show="chooseProduct.length > 0">
组合购更优惠
<text class="bottom-triangle"></text>
</view>
<view class="bottom-detail" @click="showDetail()" :style="{ top: chooseProduct.length > 0 ? '-28rpx' : '0' }">
<text style="margin-right: 10rpx;">已选产品 </text>
<text class="bottom-number">
{{ chooseProduct.length }}
</text>
<u-icon name="arrow-up" size="32"></u-icon>
</view>
</view>
<view class="bottom-detail" @click="showDetail()" :style="{ top: chooseProduct.length > 0 ? '-28rpx' : '0' }">
<text style="margin-right: 10rpx;">已选产品 </text>
<text class="bottom-number">
{{ chooseProduct.length }}
</text>
<u-icon name="arrow-up" size="32"></u-icon>
<view class="bottom-btn" @click="goFillorder()">
去预定
</view>
</view>
<view class="bottom-right">
<text class="bottom-btn" @click="goFillorder()">去预定</text>
</view>
</view>
</scroll-view>
<!-- 客服组件 -->
......@@ -216,17 +219,18 @@ export default {
chooseMerchantProduct: '', //不支持多产品购买时，选中的景区产品
showBusiness:false,//用于是否显示营业中
showPauseBusiness:false,//用于显示暂停营业
toViewRight:'',//右边滚动到某个元素
toViewLeft:'',//左边滚动到某个元素
merchantIndex:0,//选中的商家下标
middleHeight:0,//中间列表盒子高度
heightArr:[],//元素高度数组
middleInfoStyle:'',//中间盒子上部分样式
middleBottomStyle:'',//中间盒子下部分样式
infoHeight:0,//middle-info盒子高度
scrlllHeight:0,//中间盒子滚动时的高度
originHeight:0,//中间盒子原本高度
xxx:''
middleInfoStyle:'',//中间盒子上部分样式
middleBottomStyle:'',//中间盒子下部分样式
merchantBottomStyle:'',//商家信息下部分样式
toViewRight:'',//右边滚动到某个元素
toViewLeft:'',//左边滚动到某个元素
toViewFull:'',//全屏滚动到某个元素
}
},
watch: {
......@@ -524,14 +528,14 @@ export default {
},
//---商家下标切换
merchantTabChange(index){
//点击右边可滚动
//点击左边，右边可滚动
this.middleHeight=this.scrlllHeight
//加个延时，防止第一次点击时无效果
this.$nextTick(()=>{
setTimeout(()=>{
this.merchantIndex=index
this.toViewRight='merchant'+index
})
// this.toViewFull='middle'
},100)
},
//---展示明细弹窗
showDetail() {
......@@ -548,15 +552,15 @@ export default {
if(e.detail.scrollTop>height){
//商家信息固定，中间可滚动，全屏不滚动
this.middleInfoStyle='top:0;position:fixed;'
this.middleBottomStyle='margin-top:40px'
this.middleHeight=this.scrlllHeight
this.xxx='display:none'
this.middleBottomStyle='margin-top:50px'
this.merchantBottomStyle='height:0;margin-top:0;'
}else{
//商家不固定，中间不可滚动，全屏滚动
this.middleInfoStyle='position:relative;'
this.middleBottomStyle='margin-top:0'
this.middleHeight=this.originHeight
this.xxx='display:flex;'
this.middleBottomStyle='margin-top:0'
this.merchantBottomStyle='height:auto;margin-top:12rpx;'
}
}
}).exec()
......@@ -778,7 +782,7 @@ export default {
width: 100%;
background: #ffffff;
border-radius: 24rpx 24rpx 0 0;
padding: 6px 10rpx 10px 10px;
padding:10px;
z-index: 1;
transition-property: all;
transition-duration: 1s;
......@@ -786,18 +790,19 @@ export default {
transition-delay: 0s;
}
.merchant-name{
font-size: 36rpx;
font-size: 18px;
font-weight: 600;
}
.merchant-info-bottom{
margin-top: 12rpx;
display: flex;
overflow: hidden;
}
.merchant-bottom-left{
width: 220rpx;
height: 110rpx;
margin-right: 20rpx;
padding:16rpx 20rpx;
padding:18rpx 20rpx;
background: #F7F8FA;
border-radius: 12rpx;
font-weight: 600;
......@@ -806,7 +811,7 @@ export default {
}
view:last-child{
font-size: 24rpx;
margin-top: 10rpx;
margin-top: 6rpx;
}
}
.merchant-bottom-right{
......@@ -884,7 +889,6 @@ export default {
width: 100%;
}
.merchantlist label.off .product {
background: #f3f3f3;
color: #999999;
}
.merchantlist label.off .product-name {
......@@ -935,7 +939,7 @@ export default {
flex: 1;
}
.product-name {
font-size: 30rpx;
font-size: 32rpx;
font-weight: bold;
color: #191919;
display: flex;
......@@ -955,19 +959,21 @@ export default {
.product-rule{
font-size: 24rpx;
color: #999999;
margin-top: 16rpx;
margin-top: 12rpx;
}
.product-rule text:not(:last-child) ::after {
display: inline-block;
content: '';
height: 22rpx;
margin: 0 10rpx;
margin: 0 14rpx;
background: #ccc;
width: 1px;
position: relative;
top: 2rpx;
}
.product-price{
display: flex;
margin-top: 10rpx;
margin-top: 6rpx;
align-items: center;
justify-content: space-between;
font-size: 24rpx;
......@@ -1011,8 +1017,13 @@ export default {
display: flex;
flex-direction: column;
align-items: center;
font-size: 24rpx;
}
.bottom-right{
display: flex;
align-items: center;
}
.bottom-middle {
.bottom-choose {
position: relative;
padding: 0 40rpx;
}
......@@ -1025,7 +1036,7 @@ export default {
padding: 10rpx 20rpx;
color: #ffffff;
}
.bottom-three {
.bottom-triangle{
width: 14rpx;
height: 14rpx;
display: inline-block;
......@@ -1054,6 +1065,7 @@ export default {
margin:0 10rpx;
}
.bottom-btn {
display: inline-block;
width: 200rpx;
......
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