12 changed files with 868 additions and 18 deletions
Split View
Diff Options
-
12apis/orderApi.js
-
151common/css/reset.scss
-
268components/uni-steps/uni-steps.vue
-
25enums/index.js
-
2pages/enterprise-info/index.vue
-
1pages/mine/index.vue
-
380pages/order-detail/index.vue
-
43pages/order-make/index.vue
-
4pages/test/index.vue
-
BINstatic/imgs/order/customer-default.png
-
BINstatic/imgs/order/location-icon.png
-
BINstatic/imgs/order/status-icon.png
@ -0,0 +1,268 @@ |
|||
<template> |
|||
<view class="uni-steps"> |
|||
<view :class="[direction === 'column' ? 'uni-steps__column' : 'uni-steps__row']"> |
|||
<view :class="[direction === 'column' ? 'uni-steps__column-container' : 'uni-steps__row-container']"> |
|||
<view :class="[direction === 'column' ? 'uni-steps__column-line-item' : 'uni-steps__row-line-item']" v-for="(item, index) in options" :key="index"> |
|||
<view |
|||
:class="[ |
|||
direction === 'column' ? 'uni-steps__column-line' : 'uni-steps__row-line', |
|||
direction === 'column' ? 'uni-steps__column-line--before' : 'uni-steps__row-line--before' |
|||
]" |
|||
:style="{ backgroundColor: index <= active && index !== 0 ? activeColor : index === 0 ? 'transparent' : deactiveColor }" |
|||
></view> |
|||
<view :class="[direction === 'column' ? 'uni-steps__column-check' : 'uni-steps__row-check']" v-if="index === active"> |
|||
<uni-icons :color="activeColor" type="checkbox-filled" size="14"></uni-icons> |
|||
</view> |
|||
<view |
|||
:class="[direction === 'column' ? 'uni-steps__column-circle' : 'uni-steps__row-circle']" |
|||
v-else |
|||
:style="{ backgroundColor: index < active ? activeColor : deactiveColor }" |
|||
></view> |
|||
<view |
|||
:class="[ |
|||
direction === 'column' ? 'uni-steps__column-line' : 'uni-steps__row-line', |
|||
direction === 'column' ? 'uni-steps__column-line--after' : 'uni-steps__row-line--after' |
|||
]" |
|||
:style="{ |
|||
backgroundColor: index < active && index !== options.length - 1 ? activeColor : index === options.length - 1 ? 'transparent' : deactiveColor |
|||
}" |
|||
></view> |
|||
</view> |
|||
</view> |
|||
<view :class="[direction === 'column' ? 'uni-steps__column-text-container' : 'uni-steps__row-text-container']"> |
|||
<view v-for="(item, index) in options" :key="index" :class="[direction === 'column' ? 'uni-steps__column-text' : 'uni-steps__row-text']"> |
|||
<text |
|||
:style="{ color: index <= active ? activeColor : deactiveColor }" |
|||
:class="[direction === 'column' ? 'uni-steps__column-title' : 'uni-steps__row-title']" |
|||
> |
|||
{{ item.title }} |
|||
</text> |
|||
<text |
|||
:style="{ color: index <= active ? activeColor : deactiveColor }" |
|||
:class="[direction === 'column' ? 'uni-steps__column-desc' : 'uni-steps__row-desc']" |
|||
> |
|||
{{ item.desc }} |
|||
</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
// import uniIcons from '../uni-icons/uni-icons.vue' |
|||
export default { |
|||
name: 'UniSteps', |
|||
// components: { |
|||
// uniIcons |
|||
// }, |
|||
props: { |
|||
direction: { |
|||
// 排列方向 row column |
|||
type: String, |
|||
default: 'row' |
|||
}, |
|||
activeColor: { |
|||
// 激活状态颜色 |
|||
type: String, |
|||
default: '#1aad19' |
|||
}, |
|||
deactiveColor: { |
|||
// 未激活状态颜色 |
|||
type: String, |
|||
default: '#999999' |
|||
}, |
|||
active: { |
|||
// 当前步骤 |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
options: { |
|||
type: Array, |
|||
default() { |
|||
return [] |
|||
} |
|||
} // 数据 |
|||
}, |
|||
data() { |
|||
return {} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.uni-steps { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
width: 100%; |
|||
/* #endif */ |
|||
/* #ifdef APP-NVUE */ |
|||
flex: 1; |
|||
/* #endif */ |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.uni-steps__row { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.uni-steps__column { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
// flex-direction: row-reverse; |
|||
} |
|||
|
|||
.uni-steps__row-text-container { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
flex-direction: row; |
|||
} |
|||
|
|||
.uni-steps__column-text-container { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
flex-direction: column; |
|||
flex: 1; |
|||
} |
|||
|
|||
.uni-steps__row-text { |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-flex; |
|||
/* #endif */ |
|||
flex: 1; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.uni-steps__column-text { |
|||
padding: 6px 0px; |
|||
border-bottom-style: solid; |
|||
border-bottom-width: 1px; |
|||
border-bottom-color: $uni-border-color; |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.uni-steps__row-title { |
|||
font-size: $uni-font-size-base; |
|||
line-height: 16px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.uni-steps__column-title { |
|||
font-size: $uni-font-size-base; |
|||
text-align: left; |
|||
line-height: 18px; |
|||
} |
|||
|
|||
.uni-steps__row-desc { |
|||
font-size: 12px; |
|||
line-height: 14px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.uni-steps__column-desc { |
|||
font-size: $uni-font-size-sm; |
|||
text-align: left; |
|||
line-height: 18px; |
|||
} |
|||
|
|||
.uni-steps__row-container { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
flex-direction: row; |
|||
} |
|||
|
|||
.uni-steps__column-container { |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-flex; |
|||
/* #endif */ |
|||
width: 30px; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.uni-steps__row-line-item { |
|||
/* #ifndef APP-NVUE */ |
|||
display: inline-flex; |
|||
/* #endif */ |
|||
flex-direction: row; |
|||
flex: 1; |
|||
height: 14px; |
|||
line-height: 14px; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.uni-steps__column-line-item { |
|||
/* #ifndef APP-NVUE */ |
|||
display: flex; |
|||
/* #endif */ |
|||
flex-direction: column; |
|||
flex: 1; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.uni-steps__row-line { |
|||
flex: 1; |
|||
height: 1px; |
|||
background-color: $uni-text-color-grey; |
|||
} |
|||
|
|||
.uni-steps__column-line { |
|||
width: 1px; |
|||
background-color: $uni-text-color-grey; |
|||
} |
|||
|
|||
.uni-steps__row-line--after { |
|||
transform: translateX(1px); |
|||
} |
|||
|
|||
.uni-steps__column-line--after { |
|||
flex: 1; |
|||
transform: translate(0px, 1px); |
|||
} |
|||
|
|||
.uni-steps__row-line--before { |
|||
transform: translateX(-1px); |
|||
} |
|||
|
|||
.uni-steps__column-line--before { |
|||
height: 6px; |
|||
transform: translate(0px, -1px); |
|||
} |
|||
|
|||
.uni-steps__row-circle { |
|||
width: 5px; |
|||
height: 5px; |
|||
border-radius: 100px; |
|||
background-color: $uni-text-color-grey; |
|||
margin: 0px 3px; |
|||
} |
|||
|
|||
.uni-steps__column-circle { |
|||
width: 5px; |
|||
height: 5px; |
|||
border-radius: 100px; |
|||
background-color: $uni-text-color-grey; |
|||
margin: 4px 0px 5px 0px; |
|||
} |
|||
|
|||
.uni-steps__row-check { |
|||
margin: 0px 6px; |
|||
} |
|||
|
|||
.uni-steps__column-check { |
|||
height: 14px; |
|||
line-height: 14px; |
|||
margin: 2px 0px; |
|||
} |
|||
</style> |
|||
@ -1,20 +1,394 @@ |
|||
<template> |
|||
<view> |
|||
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="订单详情"></uni-nav-bar> |
|||
<view class="status-area flex-row-center-start"> |
|||
<image class="flex-base" style="width: 40rpx; height: 40rpx; margin-right: 16rpx" src="/static/imgs/order/status-icon.png"></image> |
|||
<text style="font-size: 30rpx; color: #ffffff">{{ statusImg[orderInfo.status] }}</text> |
|||
</view> |
|||
<view class="address-area"> |
|||
<view class="flex-row-start-start" style="padding: 24rpx 0 40rpx"> |
|||
<image class="flex-base" style="width: 100rpx; height: 100rpx; margin-right: 20rpx" src="/static/imgs/order/customer-default.png"></image> |
|||
<view class="flex-col-start-start"> |
|||
<text style="font-size: 30rpx; color: #333333; font-weight: 600">{{ orderInfo.customerEnterpriseName }}</text> |
|||
<text style="font-size: 26rpx; color: #333333; margin-top: 26rpx"> |
|||
联系人: {{ `${orderInfo.deliveryAddress.receiver} ${orderInfo.deliveryAddress.receiverMobile}` }} |
|||
</text> |
|||
</view> |
|||
</view> |
|||
<view class="flex-row-start-start footer"> |
|||
<image style="width: 32rpx; height: 32rpx; margin-right: 10rpx" src="/static/imgs/order/location-icon.png"></image> |
|||
<text style="font-size: 26rpx; color: #333333; word-break: break-all">{{ transformAddress(orderInfo.deliveryAddress) }}</text> |
|||
</view> |
|||
</view> |
|||
<view class="order-area" v-for="(supplierOrder, index) in orderInfo.supplierOrder" :key="supplierOrder.supplierOrderId"> |
|||
<view class="flex-row-center-space header"> |
|||
<text style="font-size: 32rpx; font-weight: 600">{{ supplierOrder.supplierEnterpriseName }}</text> |
|||
<view> |
|||
<!-- 待收货展示 --> |
|||
<view v-if="supplierOrder.status == supplierOrderStatusEnum.WAIT_RECEIVE" class="button-item" @click="confirmReceive(supplierOrder)">确认收货</view> |
|||
<!-- 待借款展示 --> |
|||
<view v-if="supplierOrder.status == supplierOrderStatusEnum.WAIT_CLIENT_LOAN" class="button-item" @click="goBorrowing(supplierOrder)">去借款</view> |
|||
<!-- 飞算支付且待还款状态 --> |
|||
<view |
|||
v-if="orderInfo.paymentMethod == paymentMethodEnum.FLY_PAY && supplierOrder.status == supplierOrderStatusEnum.WAIT_CLIENT_REPAY" |
|||
class="button-item" |
|||
@click="goRepaying(supplierOrder)" |
|||
> |
|||
去借款 |
|||
</view> |
|||
<text v-else style="font-size: 30rpx; color: #ff5368; font-weight: 600">{{ supplierOrderStatusMap[supplierOrder.status] }}</text> |
|||
</view> |
|||
</view> |
|||
<view v-for="order in supplierOrder.orderItems" :key="order.productId"> |
|||
<view style="background-color: #fff; padding-bottom: 20rpx"> |
|||
<view class="order-header flex-row-start-space"> |
|||
<text style="font-size: 30rpx; font-weight: 600"> |
|||
{{ `${order.brandName}${order.productName} | ${order.gramWeight}g | ${order.width}*${order.length} | ${order.pieceQuantity}张` }} |
|||
</text> |
|||
</view> |
|||
<view class="order-row flex-row-center-space"> |
|||
<text>重量(吨):</text> |
|||
<text>{{ order.buyTon }}</text> |
|||
</view> |
|||
<view class="order-row flex-row-center-space"> |
|||
<text>单价(元/吨):</text> |
|||
<text>{{ order.unitPrice }}</text> |
|||
</view> |
|||
<view class="order-row flex-row-center-space"> |
|||
<text>小计(元):</text> |
|||
<text>{{ order.subtotal }}</text> |
|||
</view> |
|||
<view class="order-row flex-row-center-space" style="margin: 0"> |
|||
<text>备注信息:{{ order.remark }}</text> |
|||
</view> |
|||
</view> |
|||
<view style="padding: 24rpx 10rpx"> |
|||
<uni-steps |
|||
:options="transformStep(order.outboundProcessList)" |
|||
active-color="#1890FF" |
|||
:active="order.outboundProcessList.length > 0 ? order.outboundProcessList.length : -1" |
|||
></uni-steps> |
|||
</view> |
|||
</view> |
|||
<!-- 送货凭证 --> |
|||
<view v-if="showSendImgs(supplierOrder.status)" class="footer" :style="showList.includes(`${index}_send`) ? '' : 'height:88rpx;'"> |
|||
<view class="header flex-row-center-space"> |
|||
<text style="font-size: 28rpx; font-weight: 600">送货凭证</text> |
|||
<view class="flex-row-center-end" @click="changeShowIndex(`${index}_send`)"> |
|||
<text style="font-size: 28rpx; margin-right: 8rpx">{{ showList.includes(`${index}_send`) ? '收起' : '展开' }}</text> |
|||
<uni-icons :type="showList.includes(`${index}_send`) ? 'top' : 'bottom'" size="16"></uni-icons> |
|||
</view> |
|||
</view> |
|||
<view class="imgs flex-row-start-start"> |
|||
<image style="width: 120rpx; height: 120rpx; margin-right: 12rpx" src=""></image> |
|||
</view> |
|||
</view> |
|||
<!-- 收货凭证 --> |
|||
<view v-if="showReceiveImgs(supplierOrder.status)" class="footer" :style="showList.includes(`${index}_receive`) ? '' : 'height:88rpx;'"> |
|||
<view class="header flex-row-center-space"> |
|||
<text style="font-size: 28rpx; font-weight: 600">送货凭证</text> |
|||
<view class="flex-row-center-end" @click="changeShowIndex(`${index}_receive`)"> |
|||
<text style="font-size: 28rpx; margin-right: 8rpx">{{ showList.includes(`${index}_receive`) ? '收起' : '展开' }}</text> |
|||
<uni-icons :type="showList.includes(`${index}_receive`) ? 'top' : 'bottom'" size="16"></uni-icons> |
|||
</view> |
|||
</view> |
|||
<view class="imgs flex-row-start-start"> |
|||
<image style="width: 120rpx; height: 120rpx; margin-right: 12rpx" src=""></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="fee flex-row-center-space"> |
|||
<text style="font-size: 28rpx; color: #555555">其他费用: ￥{{ orderInfo.otherFee || 0 }}</text> |
|||
<view class="flex-row-center-end"> |
|||
<text style="font-size: 28rpx; color: #555555">合计:</text> |
|||
<text style="font-size: 40rpx; color: #f5222d; font-weight: 600">￥{{ orderInfo.totalOfferPrice || 0 }}</text> |
|||
</view> |
|||
</view> |
|||
<view class="order-footer"> |
|||
<view class="flex-row-center-space order-row"> |
|||
<text class="label">订单编号</text> |
|||
<view class="flex-row-center-end value"> |
|||
<text>{{ orderInfo.orderId }}</text> |
|||
<text style="color: #007aff; margin-left: 8rpx" @click="clip(orderInfo.orderId)">复制</text> |
|||
</view> |
|||
</view> |
|||
<view class="flex-row-center-space order-row"> |
|||
<text class="label">下单时间</text> |
|||
<text class="value">{{ orderInfo.createTime }}</text> |
|||
</view> |
|||
<view class="flex-row-center-space order-row"> |
|||
<text class="label">交货时间</text> |
|||
<text class="value">{{ orderInfo.receivedTime }}</text> |
|||
</view> |
|||
<view class="flex-row-center-space order-row" style="border: none"> |
|||
<text class="label">支付方式</text> |
|||
<text class="value">{{ paymentMethodMap[orderInfo.paymentMethod] || '-' }}</text> |
|||
</view> |
|||
</view> |
|||
<qn-footer fixed height="120rpx"> |
|||
<view class="flex-row-center-end" style="padding: 0 32rpx"> |
|||
<view class="button">查看合同</view> |
|||
</view> |
|||
</qn-footer> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { go2, back } from '@/utils/hook.js' |
|||
import { getClientOrderInfo } from '@/apis/orderApi.js' |
|||
import { orderStatusEnum, supplierOrderStatusMap, supplierOrderStatusEnum, paymentMethodMap, paymentMethodEnum } from '@/enums/index.js' |
|||
const statusImg = { |
|||
[orderStatusEnum.WAIT_SUPPLIER_CONFIRM]: '待供应商确认', |
|||
[orderStatusEnum.ORDERED]: '已下单', |
|||
[orderStatusEnum.FINISHED]: '已完成', |
|||
[orderStatusEnum.CANCELED]: '已取消' |
|||
} |
|||
export default { |
|||
data() { |
|||
return {} |
|||
return { |
|||
orderInfo: { |
|||
deliveryAddress: {}, |
|||
supplierOrder: [] |
|||
}, |
|||
statusImg, |
|||
supplierOrderStatusMap: Object.freeze(supplierOrderStatusMap), |
|||
paymentMethodMap: Object.freeze(paymentMethodMap), |
|||
supplierOrderStatusEnum: Object.freeze(supplierOrderStatusEnum), |
|||
paymentMethodEnum: Object.freeze(paymentMethodEnum), |
|||
showList: [] |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
if (option.orderId) { |
|||
getClientOrderInfo({ |
|||
customerOrderId: option.orderId |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.orderInfo = res |
|||
} |
|||
}) |
|||
} else { |
|||
uni.showToast({ |
|||
title: '订单信息错误', |
|||
icon: 'error', |
|||
success: () => { |
|||
setTimeout(() => { |
|||
back() |
|||
}, 2000) |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
methods: { |
|||
go2, |
|||
back |
|||
back, |
|||
transformAddress(address) { |
|||
let res = '' |
|||
if (address) { |
|||
res = `${address.provinceName}${address.cityName}${address.districtName}${address.detail}` |
|||
} |
|||
return res |
|||
}, |
|||
// 生成步骤条 |
|||
transformStep(list) { |
|||
// 分切 出库 完成 |
|||
let step1 = [], |
|||
step2 = [], |
|||
step3 = [] |
|||
if (list && list.length > 0) { |
|||
list.forEach((item) => { |
|||
if (item.status == '30301') { |
|||
step1.push({ |
|||
title: '分切', |
|||
desc: item.userName + '\n\r' + item.createTime |
|||
}) |
|||
} else if (item.status == '30302') { |
|||
step2.push({ |
|||
title: '出库', |
|||
desc: item.userName + item.quantity + '\n\r' + item.createTime |
|||
}) |
|||
} else if (item.status == '30303') { |
|||
step3.push({ |
|||
title: '完成', |
|||
desc: '已收货' |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
if (step1.length == 0) { |
|||
step1.push({ |
|||
title: '分切', |
|||
desc: '未完成' |
|||
}) |
|||
} |
|||
if (step2.length == 0) { |
|||
step2.push({ |
|||
title: '出库', |
|||
desc: '未完成' |
|||
}) |
|||
} |
|||
if (step3.length == 0) { |
|||
step3.push({ |
|||
title: '完成', |
|||
desc: '未完成' |
|||
}) |
|||
} |
|||
return [...step1, ...step2, ...step3] |
|||
}, |
|||
changeShowIndex(index) { |
|||
let target = this.showList.indexOf(index) |
|||
if (target > -1) { |
|||
this.showList.splice(target, 1) |
|||
} else { |
|||
this.showList.push(index) |
|||
} |
|||
}, |
|||
// 根据状态是否展示送货凭证 |
|||
showSendImgs(status) { |
|||
let list = [ |
|||
supplierOrderStatusEnum.WAIT_RECEIVE, |
|||
supplierOrderStatusEnum.WAIT_CLIENT_LOAN, |
|||
supplierOrderStatusEnum.PAYING, |
|||
supplierOrderStatusEnum.WAIT_CLIENT_PAY, |
|||
supplierOrderStatusEnum.PAY_FAIL, |
|||
supplierOrderStatusEnum.FINISHED, |
|||
supplierOrderStatusEnum.WAIT_CLIENT_REPAY, |
|||
supplierOrderStatusEnum.REPAYING, |
|||
supplierOrderStatusEnum.CANCELED |
|||
] |
|||
return list.includes(status) |
|||
}, |
|||
// 根据状态是否展示收货凭证 |
|||
showReceiveImgs(status) { |
|||
let list = [ |
|||
supplierOrderStatusEnum.WAIT_CLIENT_LOAN, |
|||
supplierOrderStatusEnum.PAYING, |
|||
supplierOrderStatusEnum.WAIT_CLIENT_PAY, |
|||
supplierOrderStatusEnum.PAY_FAIL, |
|||
supplierOrderStatusEnum.FINISHED, |
|||
supplierOrderStatusEnum.WAIT_CLIENT_REPAY, |
|||
supplierOrderStatusEnum.REPAYING, |
|||
supplierOrderStatusEnum.CANCELED |
|||
] |
|||
return list.includes(status) |
|||
}, |
|||
// 去借款 |
|||
goBorrowing(order) {}, |
|||
// 确认收货 |
|||
confirmReceive(order) {}, |
|||
goRepaying(order) {}, |
|||
clip(content) { |
|||
uni.setClipboardData({ |
|||
data: content, |
|||
success: function () { |
|||
uni.showToast({ |
|||
title: '复制成功', |
|||
icon: 'success', |
|||
duration: 2000 |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
<style lang="scss" scoped> |
|||
.status-area { |
|||
padding: 24rpx 32rpx; |
|||
width: 750rpx; |
|||
background-image: linear-gradient(90deg, #ff4d2e 6%, #ff952f 100%); |
|||
} |
|||
.address-area { |
|||
padding: 0 32rpx; |
|||
width: 750rpx; |
|||
background-color: #ffffff; |
|||
.footer { |
|||
padding: 24rpx 32rpx; |
|||
background-color: #ffffff; |
|||
border-top: 1px solid #e5e5e5; |
|||
} |
|||
} |
|||
.order-area { |
|||
.header { |
|||
padding: 24rpx 32rpx; |
|||
word-break: break-all; |
|||
background: #e5f1ff; |
|||
width: 750rpx; |
|||
} |
|||
.order-header { |
|||
padding: 24rpx 32rpx; |
|||
word-break: break-all; |
|||
background: #fff; |
|||
width: 750rpx; |
|||
border-bottom: 2rpx dashed #d8d8d8; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.order-row { |
|||
width: 750rpx; |
|||
padding: 0 32rpx; |
|||
margin-bottom: 18rpx; |
|||
font-size: 28rpx; |
|||
color: #555555; |
|||
} |
|||
.footer { |
|||
background-color: #ffffff; |
|||
width: 750rpx; |
|||
overflow: hidden; |
|||
margin-bottom: 20rpx; |
|||
.header { |
|||
padding: 24rpx 32rpx; |
|||
background-color: #fff; |
|||
} |
|||
.imgs { |
|||
padding: 16rpx 32rpx 32rpx; |
|||
min-height: 120rpx; |
|||
} |
|||
} |
|||
} |
|||
.fee { |
|||
padding: 24rpx 32rpx; |
|||
width: 750rpx; |
|||
background-color: #ffffff; |
|||
margin: 20rpx 0; |
|||
} |
|||
.order-footer { |
|||
padding: 0rpx 32rpx; |
|||
width: 750rpx; |
|||
background-color: #ffffff; |
|||
.order-row { |
|||
padding: 24rpx 0; |
|||
border-bottom: 2rpx solid #d8d8d8; |
|||
.label { |
|||
font-size: 28rpx; |
|||
color: #000000; |
|||
} |
|||
.value { |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
} |
|||
} |
|||
} |
|||
.button { |
|||
height: 88rpx; |
|||
width: 220rpx; |
|||
background-color: #fff; |
|||
line-height: 84rpx; |
|||
border: 1px solid #007aff; |
|||
border-radius: 10rpx; |
|||
text-align: center; |
|||
font-size: 30rpx; |
|||
color: #007aff; |
|||
} |
|||
.button-item { |
|||
padding: 0rpx 24rpx; |
|||
height: 42rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
background: #007aff; |
|||
border-radius: 20rpx; |
|||
font-size: 26rpx; |
|||
color: #ffffff; |
|||
} |
|||
</style> |
|||
| Before | After |
|---|---|
|
|
| Width: 150 | Height: 150 | Size: 14 KiB |
| Before | After |
|---|---|
|
|
| Width: 16 | Height: 16 | Size: 782 B |
| Before | After |
|---|---|
|
|
| Width: 40 | Height: 40 | Size: 1.0 KiB |
Write
Preview
Loading…
Cancel
Save