Skip to content

U
user
Commit d677557b by weijiguang
Options

优化UI

parent d8236526
Showing with 57 additions and 56 deletions
components/OrderQrCode/index.vue
...@@ -234,7 +234,7 @@ export default { ...@@ -234,7 +234,7 @@ export default {
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
padding-bottom: 24rpx; padding-bottom: 24rpx;
border-bottom: 2rpx solid #ECECEC; border-bottom: 0.1rpx solid #F4F4F4;
letter-spacing: 1rpx; letter-spacing: 1rpx;
} }
.text { .text {
......
components/menuAssembly/index.vue
...@@ -356,7 +356,7 @@ export default { ...@@ -356,7 +356,7 @@ export default {
font-size: 20rpx; font-size: 20rpx;
color: #999999; color: #999999;
font-family: Futura-Medium, Futura; font-family: Futura-Medium, Futura;
line-height: 13rpx; line-height: 15rpx;
.num { .num {
text-decoration: line-through; text-decoration: line-through;
......
components/shopCar/shopCar.vue
...@@ -278,7 +278,7 @@ export default { ...@@ -278,7 +278,7 @@ export default {
.header { .header {
padding:24.87rpx 31.78rpx 22.3rpx 31.54rpx; padding:24.87rpx 31.78rpx 22.3rpx 31.54rpx;
display: flex; display: flex;
border-bottom: 1rpx solid #ECECEC; border-bottom: 0.1px solid #F4F4F4;
.left { .left {
flex: 1; flex: 1;
......
menuSubPackage/pages/areaSelect/areaSelect.vue
...@@ -14,14 +14,14 @@ ...@@ -14,14 +14,14 @@
<div class="header"> <div class="header">
<view class="name">{{ item.name }}</view> <view class="name">{{ item.name }}</view>
<view class="adressBox"> <view class="adressBox">
<view> <view class="map">
<u-icon class="map" name="map" color="#999999" size="14"></u-icon> <u-icon name="map" color="#999999" size="12"></u-icon>
</view> </view>
<view class="address">{{ item.address }}</view> <view class="address">{{ item.address }}</view>
</view> </view>
<view class="timeBox"> <view class="timeBox">
<view> <view class="clock">
<u-icon name="clock" color="#999999" size="14"></u-icon> <u-icon name="clock" color="#999999" size="10"></u-icon>
</view> </view>
<view class="time">{{ item.startTime }} - {{ item.endTime }}</view> <view class="time">{{ item.startTime }} - {{ item.endTime }}</view>
</view> </view>
...@@ -115,12 +115,15 @@ export default { ...@@ -115,12 +115,15 @@ export default {
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
color: #333333; color: #333333;
} }
.adressBox{ .adressBox {
width: 348rpx; width: 348rpx;
margin-top: 16rpx; margin-top: 16rpx;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
.address{ .map {
margin-top: 4rpx;
}
.address {
margin-left: 12rpx; margin-left: 12rpx;
font-size: 24rpx; font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
...@@ -129,12 +132,15 @@ export default { ...@@ -129,12 +132,15 @@ export default {
margin-top: -5rpx; margin-top: -5rpx;
} }
} }
.timeBox{ .timeBox {
margin-top: 16rpx; margin-top: 16rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
.time{ .clock {
margin-top: -6rpx;
}
.time {
margin-left: 12rpx; margin-left: 12rpx;
font-size: 24rpx; font-size: 24rpx;
font-family: ArialMT; font-family: ArialMT;
...@@ -146,7 +152,7 @@ export default { ...@@ -146,7 +152,7 @@ export default {
.line { .line {
height: 146rpx; height: 146rpx;
width: 2rpx; width: 2rpx;
border: 1rpx solid #ECECEC; border: 0.1px solid #F4F4F4;
} }
.dec { .dec {
margin-left: 43rpx; margin-left: 43rpx;
...@@ -177,7 +183,7 @@ export default { ...@@ -177,7 +183,7 @@ export default {
font-weight: 400; font-weight: 400;
color: #999999; color: #999999;
text-align: center; text-align: center;
line-height: 40rpx; line-height: 56rpx;
} }
} }
......
menuSubPackage/pages/goodsDetail/goodsDetail.vue
...@@ -17,11 +17,11 @@ ...@@ -17,11 +17,11 @@
</swiper> </swiper>
</view> </view>
<view class="good spec-info-left"> <view class="good spec-info-left">
<text class="good-name">{{ goodInfo.name }}</text> <view class="good-name">{{ goodInfo.name }}</view>
<view class="specs"> <view class="specs">
<!-- 规格 --> <!-- 规格 -->
<view v-for="specItem in goodInfo.specs" :key="specItem.specId"> <view v-for="specItem in goodInfo.specs" :key="specItem.specId">
<view class="good-spec-name">{{ specItem.specName }}</view> <div class="good-spec-name">{{ specItem.specName }}</div>
<view class="good-spec-rule"> <view class="good-spec-rule">
<div v-for="specItemRule in specItem.rules" class="div_item" :key="specItemRule.ruleId" @click="selectRoles(specItemRule, specItem)"> <div v-for="specItemRule in specItem.rules" class="div_item" :key="specItemRule.ruleId" @click="selectRoles(specItemRule, specItem)">
<div v-if="specItemRule.isRecommend=='1'" :class="[UseIt(specItemRule.ruleId)?'disabledStyle':'']" class="default"></div> <div v-if="specItemRule.isRecommend=='1'" :class="[UseIt(specItemRule.ruleId)?'disabledStyle':'']" class="default"></div>
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
<view class="good-select-height"></view> <view class="good-select-height"></view>
</view> </view>
<view class="good-select good-select-height" :style="{'padding-bottom':BottomSafeHeight+'px'}"> <view class="good-select" :style="{'padding-bottom':BottomSafeHeight+'px; height:'+(getPx(268)-BottomSafeHeight)+'px'}">
<view class="good-select-price"> <view class="good-select-price">
<div class="price"> <div class="price">
<view class="good-select-price-normal"><text class="moneyLog">￥</text>{{ Utils.isInteger(priceTotal.discount) }}</view> <view class="good-select-price-normal"><text class="moneyLog">￥</text>{{ Utils.isInteger(priceTotal.discount) }}</view>
...@@ -59,8 +59,6 @@ ...@@ -59,8 +59,6 @@
<view class="subtract" @click="reduceGood"></view> <view class="subtract" @click="reduceGood"></view>
<span>{{ size }}</span> <span>{{ size }}</span>
<view class="add" @click="addGood" ></view> <view class="add" @click="addGood" ></view>
<!-- <u-icon name="minus-circle" @click="reduceGood" color="#2979ff" size="22"></u-icon> -->
<!-- <u-icon name="plus-circle-fill" color="#2979ff" @click="addGood" size="22"></u-icon> -->
</div> </div>
</view> </view>
<view v-if="size > 0" class="good-select-cont"> <view v-if="size > 0" class="good-select-cont">
...@@ -148,6 +146,9 @@ export default { ...@@ -148,6 +146,9 @@ export default {
// } // }
// }, // },
methods: { methods: {
getPx(rpx) {
return rpx * (wx.getSystemInfoSync().windowWidth / 750);
},
initInfo(goodsInfo){ initInfo(goodsInfo){
this.available = [] this.available = []
this.selected = [] this.selected = []
...@@ -399,6 +400,7 @@ export default { ...@@ -399,6 +400,7 @@ export default {
.swiper_img { .swiper_img {
width: 100%; width: 100%;
height: 100% !important; height: 100% !important;
vertical-align: bottom;
} }
.spec-content { .spec-content {
...@@ -411,9 +413,6 @@ export default { ...@@ -411,9 +413,6 @@ export default {
} }
.specs {
margin-top: 30rpx;
}
.good { .good {
display: block; display: block;
...@@ -426,25 +425,30 @@ export default { ...@@ -426,25 +425,30 @@ export default {
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
line-height: 40rpx; line-height: 40rpx;
margin-top: 24rpx;
padding-bottom: 22rpx; padding-bottom: 22rpx;
// background-color: #000000;
}
.specs {
// margin-top: 30rpx;
} }
.good-spec-name { .good-spec-name {
margin-top: 30rpx; padding-top: 30rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
color: #999999; color: #999999;
font-weight: 400; font-weight: 400;
font-size: 24rpx; font-size: 24rpx;
text-align: left; text-align: left;
line-height: 34rpx; line-height: 34rpx;
// background-color: blue;
} }
.good-spec-rule { .good-spec-rule {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
margin-top: 26.02rpx; margin-top: 26rpx;
flex-wrap: wrap; flex-wrap: wrap;
border-radius: 0rpx; border-radius: 0rpx;
...@@ -456,7 +460,6 @@ export default { ...@@ -456,7 +460,6 @@ export default {
min-width: 120rpx; min-width: 120rpx;
z-index: 999999; z-index: 999999;
.default { .default {
width: 45rpx; width: 45rpx;
height: 48rpx; height: 48rpx;
...@@ -464,12 +467,10 @@ export default { ...@@ -464,12 +467,10 @@ export default {
background-size: 100%; background-size: 100%;
position: absolute; position: absolute;
right: -17rpx; right: -17rpx;
top: -15rpx; top: -30rpx;
z-index: 9; z-index: 9;
} }
} }
} }
} }
...@@ -553,20 +554,21 @@ button[disabled]:not([type]) { ...@@ -553,20 +554,21 @@ button[disabled]:not([type]) {
position: fixed; position: fixed;
bottom: 0rpx; bottom: 0rpx;
text-align: center; text-align: center;
height: 268rpx; // height: 268rpx;
background-color: #fff; background-color: #fff;
height: auto; height: auto;
padding-bottom: 20rpx; padding-bottom: 20rpx;
box-shadow: 0px -2px 8px 0px rgba(214, 214, 214, 0.5);
} }
.good-select-price { .good-select-price {
display: flex; display: flex;
align-items: center; align-items: center;
height: 68rpx; // height: 68rpx;
background: #FFFFFF; background: #FFFFFF;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 22rpx 32rpx; padding: 24rpx 32rpx 24rpx 32rpx;
.price{ .price{
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
...@@ -574,13 +576,13 @@ button[disabled]:not([type]) { ...@@ -574,13 +576,13 @@ button[disabled]:not([type]) {
.good-select-price-normal { .good-select-price-normal {
font-family: Futura-Medium, Futura; font-family: Futura-Medium, Futura;
letter-spacing: 1px; letter-spacing: 1px;
font-size: 32rpx; font-size: 36rpx;
color: #333333; color: #333333;
margin-right: 12rpx; margin-right: 12rpx;
font-weight: 500; font-weight: 500;
line-height: 38rpx; line-height: 38rpx;
.moneyLog { .moneyLog {
font-size: 28rpx; font-size: 32rpx;
} }
} }
...@@ -621,7 +623,7 @@ button[disabled]:not([type]) { ...@@ -621,7 +623,7 @@ button[disabled]:not([type]) {
.good-select-btn2 { .good-select-btn2 {
width: 328rpx; width: 328rpx;
height: 104rpx; height: 106rpx;
border-radius: 2px; border-radius: 2px;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
......
orderSubPackage/pages/orderInfo/index.vue
...@@ -512,7 +512,7 @@ export default { ...@@ -512,7 +512,7 @@ export default {
} }
.address { .address {
border-bottom: 1rpx solid #ECECEC; border-bottom: 0.1px solid #F4F4F4;
padding-bottom: 25rpx; padding-bottom: 25rpx;
.address_1 { .address_1 {
...@@ -603,7 +603,7 @@ export default { ...@@ -603,7 +603,7 @@ export default {
.discount { .discount {
margin-top: 24rpx; margin-top: 24rpx;
padding-bottom: 24rpx; padding-bottom: 24rpx;
border-bottom: 1rpx solid #ECECEC; border-bottom: 0.1px solid #F4F4F4;
.discount_1 { .discount_1 {
display: flex; display: flex;
...@@ -694,7 +694,7 @@ export default { ...@@ -694,7 +694,7 @@ export default {
color: #333333; color: #333333;
line-height: 40rpx; line-height: 40rpx;
height: 40rpx; height: 40rpx;
border-bottom: 1rpx solid #ECECEC; border-bottom: 0.1px solid #F4F4F4;
padding-bottom: 24rpx; padding-bottom: 24rpx;
} }
......
orderSubPackage/pages/settlement/index.vue
...@@ -17,9 +17,8 @@ ...@@ -17,9 +17,8 @@
<h3>商品详细</h3> <h3>商品详细</h3>
<div class="goods" v-for="item in goods" :key="item.goodsId"> <div class="goods" v-for="item in goods" :key="item.goodsId">
<div class="goods_item"> <div class="goods_item">
<image mode="aspectFit" v-if="item.pics.thumbnailApplet" class="goods_img" <image v-if="item.pics.thumbnailApplet" class="goods_img" :src="item.pics.thumbnailApplet"/>
:src="item.pics.thumbnailApplet"></image> <image v-else class="goods_img" :src="item.pics.thumbnail" />
<image v-else class="goods_img" :src="item.pics.thumbnail"></image>
<div class="goods_text"> <div class="goods_text">
<div class="goods_name"> <div class="goods_name">
...@@ -37,16 +36,6 @@ ...@@ -37,16 +36,6 @@
</div> </div>
</div> </div>
</div> </div>
<!-- <div class="discount">
<div class="discount_1">
<div class="name">优惠免减</div>
<div class="price">- ¥{{ itemReduction(item.sku.discount, item.sku.price, item.num) }}</div>
</div>
<div class="concessional_rate">
<div class="name">特惠价</div>
<div class="price">¥{{ setPrice(item.sku.discount * item.num) }}</div>
</div>
</div> -->
</div> </div>
<div class="total"> <div class="total">
...@@ -305,7 +294,7 @@ export default { ...@@ -305,7 +294,7 @@ export default {
.take_order { .take_order {
margin-top: 25rpx; margin-top: 25rpx;
padding-top: 23.83rpx; padding-top: 23.83rpx;
border-top: 2rpx solid #ECECEC; border-top: 0.1px solid #F4F4F4;
height: 2rpx; height: 2rpx;
} }
.title { .title {
...@@ -325,7 +314,7 @@ export default { ...@@ -325,7 +314,7 @@ export default {
color: #0050F6; color: #0050F6;
font-size: 32rpx; font-size: 32rpx;
font-family: Futura-Medium, Futura; font-family: Futura-Medium, Futura;
font-weight: 700; font-weight: normal;
margin: 0 8rpx; margin: 0 8rpx;
display: inline-block; display: inline-block;
} }
...@@ -350,7 +339,7 @@ export default { ...@@ -350,7 +339,7 @@ export default {
.goods { .goods {
margin-top: 24.95rpx; margin-top: 24.95rpx;
border-bottom: 1px solid #ECECEC; border-bottom: 0.1px solid #F4F4F4;
padding-bottom: 32rpx; padding-bottom: 32rpx;
.goods_item { .goods_item {
......
pages/menu/menu.vue
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
<view class="order-banner" v-if="buied" @click="openQrcode"> <view class="order-banner" v-if="buied" @click="openQrcode">
<view class="info"> <view class="info">
<view class="first">取单码：<text class="first-code">{{ orderInfo.orderNum }}</text></view> <view class="first">取单码：<text class="first-code">{{ orderInfo.orderNum }}</text></view>
<view class="second" v-if="orderInfo.state =='4'">订单已制作完成，请尽快取餐~</view> <view class="second1" v-if="orderInfo.state =='4'">订单已制作完成，请尽快取餐~</view>
<view class="second" v-else>请您耐心等候，剩余等候时间<text class="time">{{ orderInfo.waitTime }}</text>分钟</view> <view class="second" v-else>请您耐心等候，剩余等候时间<text class="time">{{ orderInfo.waitTime }}</text>分钟</view>
</view> </view>
<view class="line"></view> <view class="line"></view>
...@@ -442,7 +442,7 @@ export default { ...@@ -442,7 +442,7 @@ export default {
width: 718rpx; width: 718rpx;
height: 179rpx; height: 179rpx;
background: #FFFFFF; background: #FFFFFF;
box-shadow: -2px -4px 8px 0px rgba(102, 102, 102, 0.1), 4px 4px 8px 0px rgba(102, 102, 102, 0.1); box-shadow: -2px -2px 8px 0px rgba(102, 102, 102, 0.1), 4px 4px 8px 0px rgba(102, 102, 102, 0.1);
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
left: 16rpx; left: 16rpx;
...@@ -469,6 +469,7 @@ export default { ...@@ -469,6 +469,7 @@ export default {
} }
} }
.second1,
.second { .second {
margin-top: 12rpx; margin-top: 12rpx;
width: 400rpx; width: 400rpx;
...@@ -488,6 +489,9 @@ export default { ...@@ -488,6 +489,9 @@ export default {
margin: 0 16rpx; margin: 0 16rpx;
} }
} }
.second1 {
margin-top: 20rpx;
}
} }
.line { .line {
...@@ -523,7 +527,7 @@ export default { ...@@ -523,7 +527,7 @@ export default {
.barCode-dis { .barCode-dis {
text-align: center; text-align: center;
margin-top: 14rpx; margin-top: 12rpx;
font-size: 16rpx; font-size: 16rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
......
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