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