Skip to content

U
user
Commit d677557b by weijiguang
Options

优化UI

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