|
|
|
@ -1,221 +1,72 @@ |
|
|
|
<template> |
|
|
|
<view> |
|
|
|
<navbar title="订单详情" leftClick @leftClick="$utils.navigateBack" /> |
|
|
|
|
|
|
|
<!-- <view class=""> |
|
|
|
<view class="controls"> |
|
|
|
<view class="title"> |
|
|
|
<image src="../static/order/icon.png" mode=""></image> |
|
|
|
服务完成 |
|
|
|
</view> |
|
|
|
<view class="tips"> |
|
|
|
待送回 |
|
|
|
</view> |
|
|
|
<view class="btns"> |
|
|
|
<view class="btn1"> |
|
|
|
快递寄回 |
|
|
|
</view> |
|
|
|
<view class="btn2"> |
|
|
|
线下配送 |
|
|
|
<view class="page"> |
|
|
|
<navbar title="订单详情" leftClick @leftClick="$utils.navigateBack" color="#fff" /> |
|
|
|
|
|
|
|
<view class="page-content"> |
|
|
|
<view class="page-label">订单详情</view> |
|
|
|
<!-- 商品详情 --> |
|
|
|
<productCard :data="productDetail" size="medium" :readonly="true"></productCard> |
|
|
|
|
|
|
|
<view class="info"> |
|
|
|
<view class="info-header">订单信息</view> |
|
|
|
<view class="info-content"> |
|
|
|
<view class="flex info-row"> |
|
|
|
<text>实付款</text> |
|
|
|
<text class="price"><text class="price-unit">¥</text>{{ orderDetail.price }}</text> |
|
|
|
</view> |
|
|
|
<view class="flex info-row"> |
|
|
|
<text>订单号</text> |
|
|
|
<text>{{ orderDetail.orderNo }}</text> |
|
|
|
</view> |
|
|
|
<view class="flex info-row"> |
|
|
|
<text>付款时间</text> |
|
|
|
<text>{{ orderDetail.payTime }}</text> |
|
|
|
</view> |
|
|
|
<view class="flex info-row"> |
|
|
|
<text>核销时间</text> |
|
|
|
<text>{{ orderDetail.verifyTime }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="steps"> |
|
|
|
<uv-steps |
|
|
|
activeColor="#FD5100" |
|
|
|
:current="stepsCurrent" dot> |
|
|
|
<uv-steps-item :title="item" |
|
|
|
:key="index" |
|
|
|
v-for="(item, index) in steps"></uv-steps-item> |
|
|
|
</uv-steps> |
|
|
|
</view> |
|
|
|
</view> --> |
|
|
|
|
|
|
|
<view class="info"> |
|
|
|
<view class="flex" style="display: flex;"> |
|
|
|
<view style="width: 8rpx;height: 30rpx; |
|
|
|
background: #E3441A;border-radius: 6rpx;" /> |
|
|
|
<view class="head-title">订单详情</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="flex"> |
|
|
|
<view class="server-item" :key="index" v-for="(good, index) in order.commonOrderSkuList"> |
|
|
|
|
|
|
|
<view class="img-box"> |
|
|
|
<image :src="good.image && good.image.split(',')[0]" mode="aspectFill"></image> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="server-info"> |
|
|
|
|
|
|
|
<view class="server-title"> |
|
|
|
{{good.title}} |
|
|
|
<!-- <view class="coupon">领券立减</view> --> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- <view class="current-price"> |
|
|
|
<text class="unit">￥</text>{{good.price}} |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="sales-volume" style="margin-top: 5px;"> |
|
|
|
<view class="desc">规格：{{good.sku}}</view> |
|
|
|
</view> --> |
|
|
|
|
|
|
|
<view class="texture"> |
|
|
|
产品材质：{{ good.subText }} |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="num"> |
|
|
|
产品数量：{{good.num}} |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="total-price"> |
|
|
|
<div class="total-title">总价格</div> |
|
|
|
<view class="price"> |
|
|
|
<text class="unit">￥</text> |
|
|
|
{{ good.price }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- <view class="time-coupon"> |
|
|
|
|
|
|
|
<view class="flex"> |
|
|
|
<image src="@/static/home/time-icon.png"></image> |
|
|
|
<view class="time">{{order.useTime}}分钟</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="sales-volume"> |
|
|
|
<image src="@/static/icons/icon1.png"></image> |
|
|
|
<view class="desc">已售出{{msgShop.payNum}}+单</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> --> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- <view class="line min_tips"> |
|
|
|
<view class="head-div flex"> |
|
|
|
<view style="width: 118rpx;height: 118rpx;border-radius: 50%;overflow: hidden;"> |
|
|
|
<image style="width: 118rpx;" :src="msgTechnician.image" mode="widthFix"></image> |
|
|
|
</view> |
|
|
|
<view style="padding: 10rpx 34rpx;display: flex;flex-direction: column;justify-content: space-around;"> |
|
|
|
<view class="nickname"> |
|
|
|
{{msgTechnician.title}} |
|
|
|
<view v-if="msgTechnician.isVip" class="tag"> |
|
|
|
<image src="@/static/order/s.png" mode="aspectFit"></image> |
|
|
|
<view class="auth">官方认证</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="days"> |
|
|
|
<van-rate v-model="msgTechnician.score" :size="10" readonly color="#ffb54c" void-icon="star" |
|
|
|
void-color="#eee" /> |
|
|
|
<view class=""> |
|
|
|
好评{{msgTechnician.pinNum}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view @click="gototechnicianDetail(msgTechnician)" class="btn-x"> |
|
|
|
服务技师 |
|
|
|
</view> |
|
|
|
</view> --> |
|
|
|
|
|
|
|
<view class="line address"> |
|
|
|
<view class="addressDetail"> |
|
|
|
<view class="address-line"> |
|
|
|
<view class="main">{{order.name}} {{order.phone}}</view> |
|
|
|
<view @click="copy(order.name + ' ' + order.phone)" class="copy">复制</view> |
|
|
|
</view> |
|
|
|
<view class="address-line"> |
|
|
|
<view class="main">{{order.address}} {{order.addressDetails}}</view> |
|
|
|
<view @click="copy(order.address + ' ' + order.addressDetails)" class="copy">复制</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<!-- <view class="line"> |
|
|
|
<view class="t min_tips"> |
|
|
|
<view class=""> |
|
|
|
实付款 |
|
|
|
</view> |
|
|
|
<view class="current-price"> |
|
|
|
￥{{ order.price }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> --> |
|
|
|
|
|
|
|
<!-- 订单信息 --> |
|
|
|
<view class="line"> |
|
|
|
<view class="t min_tips"> |
|
|
|
<view class=""> |
|
|
|
订单信息 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="min_tips"> |
|
|
|
<view class=""> |
|
|
|
订单编号 |
|
|
|
</view> |
|
|
|
<view class=""> |
|
|
|
{{order.id}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="min_tips"> |
|
|
|
<view class=""> |
|
|
|
下单时间 |
|
|
|
</view> |
|
|
|
<view class=""> |
|
|
|
{{order.createTime}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 下单须知 --> |
|
|
|
<view class="line"> |
|
|
|
<view class="t min_tips"> |
|
|
|
<view class=""> |
|
|
|
下单须知 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="min_tips" style="line-height: 40rpx;"> |
|
|
|
{{ order.orderDetails }} |
|
|
|
</view> |
|
|
|
<view class="btns"> |
|
|
|
<button open-type="contact" class="btn"> |
|
|
|
联系客服 |
|
|
|
</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
<customerServicePopup ref="customerServicePopup" /> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import customerServicePopup from '@/components/config/customerServicePopup.vue' |
|
|
|
import productCard from '@/components/product/productCard.vue' |
|
|
|
import { |
|
|
|
mapState |
|
|
|
} from 'vuex' |
|
|
|
|
|
|
|
const TEMP_BANNER_IMG_URL = 'http://gips3.baidu.com/it/u=70459541,3412285454&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280' |
|
|
|
|
|
|
|
export default { |
|
|
|
components: { |
|
|
|
customerServicePopup |
|
|
|
productCard |
|
|
|
}, |
|
|
|
computed: {}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
stepsCurrent: 0, |
|
|
|
steps: [ |
|
|
|
'接单', |
|
|
|
'检查', |
|
|
|
'开始清洗', |
|
|
|
'服务完成', |
|
|
|
], |
|
|
|
order: {}, |
|
|
|
// todo: fetch |
|
|
|
productDetail: { |
|
|
|
id: '001', |
|
|
|
imgUrl: TEMP_BANNER_IMG_URL, |
|
|
|
price: 99, |
|
|
|
num: 1, |
|
|
|
sales: 235, |
|
|
|
title: '60分钟肩颈推拿按摩', |
|
|
|
desc: '疏通经络 放松肌肉', |
|
|
|
tags: ['专业技师', '舒适环境', '深度放松'], |
|
|
|
details: '<p>这里是商品详情..............<br/>这里是商品详情..............</p>' |
|
|
|
}, |
|
|
|
orderDetail: { |
|
|
|
id: '001', |
|
|
|
orderNo: 'da123567', |
|
|
|
price: 99, |
|
|
|
payTime: '2024-12-24 18:45:23', |
|
|
|
verifyTime: '2024-12-24 18:45:23', |
|
|
|
}, |
|
|
|
id: 0, |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -230,6 +81,8 @@ |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getOrderDetail() { |
|
|
|
// todo: delete test code |
|
|
|
return |
|
|
|
this.$api('getOrderDetail', { |
|
|
|
id: this.id |
|
|
|
}, res => { |
|
|
|
@ -257,376 +110,66 @@ |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.order { |
|
|
|
background: linear-gradient(#4899a6, #6fc6ad, #6fc6ad); |
|
|
|
padding-bottom: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.controls { |
|
|
|
margin: 20rpx; |
|
|
|
background-color: #fff; |
|
|
|
height: 400rpx; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
width: 710rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.title { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
font-size: 40rpx; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 100rpx; |
|
|
|
height: 100rpx; |
|
|
|
margin-right: 20rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.page { |
|
|
|
height: 100vh; |
|
|
|
background-color: #FFFFFF; |
|
|
|
|
|
|
|
.tips { |
|
|
|
font-size: 26rpx; |
|
|
|
color: #FD5100; |
|
|
|
margin-top: 10rpx; |
|
|
|
/deep/ .nav-bar__view { |
|
|
|
background-image: linear-gradient(#84A73F, #D8FF8F); |
|
|
|
} |
|
|
|
|
|
|
|
.btns { |
|
|
|
margin-top: 50rpx; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
view { |
|
|
|
margin: 0 20rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
color: #fff; |
|
|
|
background-color: $uni-color; |
|
|
|
padding: 15rpx 40rpx; |
|
|
|
border-radius: 40rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.btn2 { |
|
|
|
background-color: #FFFFFF; |
|
|
|
border: 1px solid #A7A7A7; |
|
|
|
color: #A7A7A7; |
|
|
|
} |
|
|
|
/deep/ .product-card__view { |
|
|
|
padding: 19rpx 7rpx 28rpx 7rpx !important; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.steps { |
|
|
|
margin: 20rpx; |
|
|
|
background-color: #fff; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
width: 710rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
padding: 70rpx 0; |
|
|
|
|
|
|
|
/deep/ .uv-text__value { |
|
|
|
font-size: 22rpx !important; |
|
|
|
&-content { |
|
|
|
padding: 35rpx 46rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.box { |
|
|
|
padding: 20px; |
|
|
|
|
|
|
|
.btns { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
margin-top: 10px; |
|
|
|
|
|
|
|
.btn { |
|
|
|
color: #fff; |
|
|
|
padding: 10rpx 50rpx; |
|
|
|
background-color: #ffb300; |
|
|
|
border-radius: 30rpx; |
|
|
|
font-size: 25rpx; |
|
|
|
margin-right: 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.btc { |
|
|
|
background: #ccc; |
|
|
|
&-label { |
|
|
|
color: #000000; |
|
|
|
font-size: 28rpx; |
|
|
|
padding-left: 11rpx; |
|
|
|
position: relative; |
|
|
|
margin-left: 7rpx; |
|
|
|
|
|
|
|
&:before { |
|
|
|
content: ' '; |
|
|
|
width: 5rpx; |
|
|
|
height: 40rpx; |
|
|
|
background-image: linear-gradient(#84A73F, #D8FF8F); |
|
|
|
border-radius: 3rpx; |
|
|
|
|
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.info { |
|
|
|
margin: 10px; |
|
|
|
padding: 20rpx; |
|
|
|
background-color: #fff; |
|
|
|
width: calc(100% - 40px); |
|
|
|
border-radius: 10px; |
|
|
|
|
|
|
|
.head-title { |
|
|
|
font-family: PingFang SC, PingFang SC-Bold; |
|
|
|
color: #2f2e2e; |
|
|
|
line-height: 30rpx; |
|
|
|
margin-left: 10rpx; |
|
|
|
padding: 30rpx 7rpx; |
|
|
|
border-top: 1px dashed #707070; |
|
|
|
color: #999999; |
|
|
|
font-size: 22rpx; |
|
|
|
|
|
|
|
&-header { |
|
|
|
color: #000000; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.server-item { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
&-row { |
|
|
|
justify-content: space-between; |
|
|
|
background: white; |
|
|
|
border-radius: 15rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
margin: 20rpx 0rpx; |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
.img-box { |
|
|
|
width: 180rpx; |
|
|
|
height: 180rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
overflow: hidden; |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
border-radius: 10rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.server-info { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-around; |
|
|
|
width: calc(100% - 180rpx); |
|
|
|
box-sizing: border-box; |
|
|
|
padding: 20rpx 15rpx; |
|
|
|
|
|
|
|
.server-title { |
|
|
|
display: flex; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
|
|
|
|
.texture, |
|
|
|
.num { |
|
|
|
font-size: 24rpx; |
|
|
|
color: #717171; |
|
|
|
} |
|
|
|
|
|
|
|
.total-price { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
.price { |
|
|
|
color: #F85023; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.coupon { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
background: #F29E45; |
|
|
|
color: white; |
|
|
|
width: 120rpx; |
|
|
|
height: 40rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
margin-left: 10rpx; |
|
|
|
font-size: 22rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.time-coupon, |
|
|
|
.price { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.time-coupon { |
|
|
|
margin: 10rpx 0rpx; |
|
|
|
font-size: 26rpx; |
|
|
|
justify-content: space-between; |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
.flex { |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
image { |
|
|
|
width: 25rpx; |
|
|
|
height: 25rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.time { |
|
|
|
color: #B8B8B8; |
|
|
|
margin-left: 6rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.sales-volume { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
color: #B8B8B8; |
|
|
|
font-size: 24rpx; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 25rpx; |
|
|
|
height: 25rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
margin-top: 23rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.address { |
|
|
|
|
|
|
|
.address-top { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
.price { |
|
|
|
color: #000000; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 30rpx; |
|
|
|
height: 30rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.addressDetail { |
|
|
|
color: #777; |
|
|
|
font-size: 22rpx; |
|
|
|
padding: 5px 0; |
|
|
|
|
|
|
|
.address-line { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.main { |
|
|
|
width: 88%; |
|
|
|
box-sizing: border-box; |
|
|
|
padding-right: 20rpx; |
|
|
|
overflow: hidden; // 超出的文本隐藏 |
|
|
|
text-overflow: ellipsis; // 溢出用省略号显示 |
|
|
|
display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。 |
|
|
|
-webkit-line-clamp: 2; // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。 |
|
|
|
-webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） |
|
|
|
} |
|
|
|
|
|
|
|
.copy { |
|
|
|
width: 12%; |
|
|
|
background: #FEBC3A; |
|
|
|
color: white; |
|
|
|
font-size: 20rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
height: 40rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
text { |
|
|
|
background-color: #F29E45; |
|
|
|
padding: 8rpx 10rpx; |
|
|
|
color: #fff; |
|
|
|
font-size: 20rpx; |
|
|
|
margin-left: 10px; |
|
|
|
border-radius: 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.min_tips { |
|
|
|
font-size: 22rpx; |
|
|
|
color: #777; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 5px 0; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.current-price { |
|
|
|
font-size: 30rpx; |
|
|
|
color: #FD5100; |
|
|
|
} |
|
|
|
|
|
|
|
.line { |
|
|
|
border-top: 2px dotted #00000011; |
|
|
|
padding: 20rpx 0; |
|
|
|
|
|
|
|
.t { |
|
|
|
padding: 5px 0; |
|
|
|
color: #000; |
|
|
|
font-size: 26rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.head-div { |
|
|
|
.nickname { |
|
|
|
font-size: 30rpx; |
|
|
|
font-weight: 600; |
|
|
|
text-align: left; |
|
|
|
line-height: 42rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.tag { |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
image { |
|
|
|
height: 45rpx; |
|
|
|
width: 90rpx; |
|
|
|
vertical-align: middle; |
|
|
|
} |
|
|
|
|
|
|
|
.auth { |
|
|
|
position: absolute; |
|
|
|
white-space: nowrap; |
|
|
|
color: #FF6200; |
|
|
|
left: 23rpx; |
|
|
|
font-size: 17rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.days { |
|
|
|
font-size: 20rpx; |
|
|
|
font-weight: 400; |
|
|
|
text-align: left; |
|
|
|
line-height: 56rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
view { |
|
|
|
padding-left: 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.btn-x { |
|
|
|
color: #6fc6ad; |
|
|
|
border: 1px solid #6fc6ad; |
|
|
|
padding: 10rpx 20rpx; |
|
|
|
border-radius: 30rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.btns { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
margin-top: 100rpx; |
|
|
|
|
|
|
|
.btn { |
|
|
|
color: #A9A7A7; |
|
|
|
border: 1px solid #A9A7A7; |
|
|
|
padding: 10rpx 20rpx; |
|
|
|
border-radius: 30rpx; |
|
|
|
background-color: transparent; |
|
|
|
font-size: 24rpx; |
|
|
|
margin: 0; |
|
|
|
&::after{ |
|
|
|
border: 0; |
|
|
|
} |
|
|
|
&-unit { |
|
|
|
font-size: 14rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
