You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
742 lines
18 KiB
742 lines
18 KiB
<!-- 订单详情 -->
|
|
<template>
|
|
<view class="order-detail-wrap">
|
|
<!-- 订单状态 -->
|
|
<view class="detail-head" :style="orderDetail.consignee ? '' : 'height:120rpx'">
|
|
<view class="state-box u-flex">
|
|
<image class="state-img" :src="$IMG_URL + '/imgs/order/order_state1.png'" mode=""></image>
|
|
<text>{{ orderDetail.status_desc }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 收货地址 -->
|
|
<view class="address-wrap" v-if="orderDetail.consignee">
|
|
<view class="order-address-box">
|
|
<view class="u-flex">
|
|
<text class="address-username">{{ orderDetail.consignee }}</text>
|
|
<text class="address-phone">{{ orderDetail.phone }}</text>
|
|
</view>
|
|
<view class="address-detail">{{ orderDetail.province_name }}{{ orderDetail.city_name }}{{ orderDetail.area_name }}{{ orderDetail.address }}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="detail-goods">
|
|
<!-- 订单信息 -->
|
|
<view class="order-list" v-for="order in orderDetail.item" :key="order.id">
|
|
<view class="order-card" @tap="jump('/pages/goods/detail', { id: order.goods_id })">
|
|
<shopro-mini-card :title="order.goods_title" :image="order.goods_image">
|
|
<template #describe>
|
|
<view class="order-sku u-ellipsis-1">
|
|
<text class="order-num">数量:{{ order.goods_num || 0 }};</text>
|
|
{{ order.goods_sku_text ? order.goods_sku_text : '' }}
|
|
</view>
|
|
</template>
|
|
<template #cardBottom>
|
|
<view class="card-price-box u-flex">
|
|
<text class="order-price font-OPPOSANS">￥{{ order.goods_price || 0 }}</text>
|
|
<button class="u-reset-button status-btn" v-if="order.status_name">{{ order.status_name }}</button>
|
|
</view>
|
|
</template>
|
|
</shopro-mini-card>
|
|
</view>
|
|
<!-- 配送方式 -->
|
|
<view class="express-type-box u-flex u-row-between">
|
|
<view class="u-flex">
|
|
<view class="express-type--title">配送：</view>
|
|
<view class="express-type--content">{{ expressType[order.dispatch_type] }}</view>
|
|
</view>
|
|
<!-- 发货详情 -->
|
|
<view
|
|
class="u-flex express-type--detail"
|
|
v-if="order.dispatch_type !== 'express'"
|
|
@tap="goDistribution(order.dispatch_type, orderDetail.id, order.id, order.dispatch_status)"
|
|
>
|
|
<text>详情</text>
|
|
<text class="u-iconfont uicon-arrow-right" style="color: #666;"></text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="order-bottom u-flex">
|
|
<!-- 退款原因 -->
|
|
<view class="refund_msg" v-if="order.refund_msg">
|
|
<text class="refund-title">退款原因：</text>
|
|
{{ order.refund_msg }}
|
|
</view>
|
|
<view class="btn-box" v-for="(btn, index) in order.btns" :key="btn">
|
|
<button @tap.stop="onConfirm(orderDetail.id, order.id)" class="u-reset-button btn1" :class="{ btn2: index + 1 === order.btns.length }" v-if="btn === 'get'">
|
|
确认收货
|
|
</button>
|
|
<button
|
|
@tap.stop="onComment(orderDetail.id, order.id)"
|
|
class="u-reset-button btn1"
|
|
:class="{ btn2: index + 1 === order.btns.length }"
|
|
v-if="btn === 'comment'"
|
|
>
|
|
去评价
|
|
</button>
|
|
<button
|
|
@tap.stop="jump('/pages/goods/detail', { id: order.goods_id })"
|
|
class="u-reset-button btn1"
|
|
:class="{ btn2: index + 1 === order.btns.length }"
|
|
v-if="btn === 'buy_again'"
|
|
>
|
|
再次购买
|
|
</button>
|
|
<button
|
|
@tap="onAftersaleDetail(order.ext_arr.aftersale_id)"
|
|
class="u-reset-button btn1"
|
|
:class="{ btn2: index + 1 === order.btns.length }"
|
|
v-if="btn === 'aftersale_info'"
|
|
>
|
|
售后详情
|
|
</button>
|
|
<button
|
|
@tap.stop="onAftersale(orderDetail.id, order.id)"
|
|
class="u-reset-button btn1"
|
|
:class="{ btn2: index + 1 === order.btns.length }"
|
|
v-if="btn === 'aftersale'"
|
|
>
|
|
申请售后
|
|
</button>
|
|
<button
|
|
@tap.stop="onAftersale(orderDetail.id, order.id)"
|
|
class="u-reset-button btn1"
|
|
:class="{ btn2: index + 1 === order.btns.length }"
|
|
v-if="btn === 're_aftersale'"
|
|
>
|
|
重新售后
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 订单信息 -->
|
|
<view class="notice-box" v-if="orderDetail.id">
|
|
<view class="notice-box__content">
|
|
<view class="notice-item--center u-flex">
|
|
<text class="title">订单编号：</text>
|
|
<text class="detail">{{ orderDetail.order_sn }}</text>
|
|
<button class="u-reset-button copy-btn" @tap="onCopy(orderDetail.order_sn)">复制</button>
|
|
</view>
|
|
<view class="notice-item u-flex">
|
|
<text class="title">下单时间：</text>
|
|
<text class="detail">{{ orderDetail.createtime }}</text>
|
|
</view>
|
|
<view class="notice-item u-flex" v-if="orderDetail.status > 0">
|
|
<text class="title">支付方式：</text>
|
|
<text class="detail">{{ payType[orderDetail.pay_type] }}</text>
|
|
</view>
|
|
<view class="notice-item u-flex" v-if="orderDetail.status > 0">
|
|
<text class="title">支付时间：</text>
|
|
<text class="detail">{{ orderDetail.paytime }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 价格信息 -->
|
|
<view class="order-price-box u-m-b-20" v-if="orderDetail.id">
|
|
<view class="notice-item u-flex u-row-between">
|
|
<text class="title">商品总额</text>
|
|
<text class="detail font-OPPOSANS">￥{{ orderDetail.goods_amount }}</text>
|
|
</view>
|
|
<view class="notice-item u-flex u-row-between">
|
|
<text class="title">运费</text>
|
|
<text class="detail font-OPPOSANS">￥{{ orderDetail.dispatch_amount }}</text>
|
|
</view>
|
|
<view class="notice-item u-flex u-row-between">
|
|
<text class="title">优惠金额</text>
|
|
<text class="detail font-OPPOSANS">-￥{{ orderDetail.discount_fee }}</text>
|
|
</view>
|
|
<view class="notice-item u-flex u-row-between" v-if="orderDetail.score_fee">
|
|
<text class="title">积分</text>
|
|
<text class="detail font-OPPOSANS">-{{ orderDetail.score_fee }}积分</text>
|
|
</view>
|
|
<view class="notice-item all-rpice-item u-flex" style="width: 100%;">
|
|
<text class="title">{{ orderDetail.status <= 0 ? '需付款' : '实付款' }}：</text>
|
|
<text class="detail all-price font-OPPOSANS">￥{{ orderDetail.total_fee }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部按钮 -->
|
|
<view class="foot-wrap safe-area-inset-bottom">
|
|
<view class="foot_box safe-area-inset-bottom">
|
|
<view class="money-box u-flex ">
|
|
<text class="money-title">共{{ allNum || '0' }}件商品 合计:</text>
|
|
<text class="all-price font-OPPOSANS">￥{{ orderDetail.total_fee || '0.00' }}</text>
|
|
</view>
|
|
<view class="btn-box u-flex">
|
|
<view class="" v-for="btn in orderDetail.btns" :key="btn">
|
|
<button v-if="btn === 'cancel'" @tap.stop="onCancel(orderDetail.id)" class="u-reset-button obtn1">取消订单</button>
|
|
<button v-if="btn === 'pay'" @tap.stop="onPay(orderDetail.id)" class="u-reset-button obtn2">付款</button>
|
|
<button v-if="btn === 'groupon'" @tap.stop="jump('/pages/activity/groupon/detail', { id: orderDetail.ext_arr.groupon_id })" class="u-reset-button obtn2">
|
|
拼团详情
|
|
</button>
|
|
<button v-if="btn === 'delete'" @tap.stop="onDelete(orderDetail.id)" class="u-reset-button delete-btn">删除</button>
|
|
<button v-if="btn === 'express'" @tap.stop="onExpress(orderDetail.id)" class="u-reset-button obtn1">查看物流</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
time: 0,
|
|
orderDetail: {},
|
|
orderStatus: {
|
|
'-2': '已关闭',
|
|
'-1': '已取消',
|
|
'0': '未付款',
|
|
'1': '已付款',
|
|
'2': '已完成'
|
|
},
|
|
payType: {
|
|
wallet: '余额支付',
|
|
wechat: '微信支付',
|
|
alipay: '支付宝支付',
|
|
iospay: 'ApplePay'
|
|
},
|
|
expressType: {
|
|
express: '物流快递',
|
|
selfetch: '到店/自提',
|
|
store: '商家配送',
|
|
autosend: '自动发货'
|
|
}
|
|
};
|
|
},
|
|
onShow() {
|
|
this.getOrderDetail();
|
|
},
|
|
onLoad() {},
|
|
computed: {
|
|
allNum() {
|
|
if (this.orderDetail.item) {
|
|
let items = this.orderDetail.item;
|
|
let allPrice = 0;
|
|
items.forEach(p => {
|
|
allPrice += p.goods_num;
|
|
});
|
|
return allPrice;
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
jump(path, parmas) {
|
|
this.$Router.push({
|
|
path: path,
|
|
query: parmas
|
|
});
|
|
},
|
|
// 详情发货信息
|
|
goDistribution(dispatchType, orderId, orderItemId) {
|
|
this.jump('/pages/order/express/distribution-detail', { expressType: dispatchType, orderId: orderId, orderItemId: orderItemId });
|
|
},
|
|
// 订单详情
|
|
getOrderDetail() {
|
|
let that = this;
|
|
that.$http('order.detail', {
|
|
id: that.$Route.query.id
|
|
}).then(res => {
|
|
if (res.code === 1) {
|
|
that.orderDetail = res.data;
|
|
that.orderDetail.createtime = that.$u.timeFormat(res.data.createtime, 'yyyy-mm-dd hh:MM');
|
|
that.orderDetail.paytime = that.$u.timeFormat(res.data.paytime, 'yyyy-mm-dd hh:MM');
|
|
}
|
|
});
|
|
},
|
|
// 复制
|
|
onCopy(code) {
|
|
let that = this;
|
|
uni.setClipboardData({
|
|
data: code,
|
|
success: function(data) {
|
|
that.$u.toast('已复制到剪切板');
|
|
}
|
|
});
|
|
},
|
|
|
|
// 确认收货
|
|
onConfirm(id, itemId) {
|
|
let that = this;
|
|
uni.showModal({
|
|
title: '提示',
|
|
confirmColor: '#f0c785',
|
|
content: '确定收到货了吗？',
|
|
success: res => {
|
|
if (res.confirm) {
|
|
that.$http(
|
|
'order.confirm',
|
|
{
|
|
id: id,
|
|
order_item_id: itemId
|
|
},
|
|
'确认中...'
|
|
).then(res => {
|
|
if (res.code === 1) {
|
|
that.getOrderDetail();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
// 申请售后
|
|
onAftersale(orderId, orderItemId) {
|
|
this.$Router.push({
|
|
path: '/pages/order/after-sale/refund',
|
|
query: { orderId: orderId, orderItemId: orderItemId }
|
|
});
|
|
},
|
|
|
|
// 售后详情
|
|
onAftersaleDetail(id) {
|
|
this.jump('/pages/order/after-sale/detail', { aftersaleId: id });
|
|
},
|
|
|
|
// 取消订单
|
|
onCancel(id) {
|
|
let that = this;
|
|
that.$http(
|
|
'order.cancel',
|
|
{
|
|
id: id
|
|
},
|
|
'取消中...'
|
|
).then(res => {
|
|
if (res.code === 1) {
|
|
that.$Router.back();
|
|
}
|
|
});
|
|
},
|
|
|
|
// 立即购买
|
|
onPay(id) {
|
|
uni.navigateTo({
|
|
url: `/pages/order/payment/method?orderId=${id}`
|
|
});
|
|
},
|
|
|
|
// 删除订单
|
|
onDelete(orderId) {
|
|
let that = this;
|
|
uni.showModal({
|
|
title: '删除订单',
|
|
content: '确定要删除这个订单么？',
|
|
cancelText: '取消',
|
|
confirmText: '删除',
|
|
success: res => {
|
|
if (res.confirm) {
|
|
that.$http('order.deleteOrder', {
|
|
id: orderId
|
|
}).then(res => {
|
|
if (res.code === 1) {
|
|
that.$Router.back();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
// 待评价
|
|
onComment(orderId, orderItemId) {
|
|
this.jump('/pages/goods/comment/add-comment', { orderId: orderId, orderItemId: orderItemId });
|
|
},
|
|
|
|
// 查看物流
|
|
onExpress(orderId, orderItemId) {
|
|
let that = this;
|
|
that.$http('order.expressList', {
|
|
order_id: orderId
|
|
}).then(res => {
|
|
if (res.code === 1) {
|
|
if (res.data.length == 1) {
|
|
this.jump('/pages/order/express/express-detail', { orderId: orderId, expressId: res.data[0].id });
|
|
} else if (res.data.length > 1) {
|
|
this.jump('/pages/order/express/express-list', { orderId: orderId });
|
|
} else {
|
|
this.$u.toast('暂无包裹~');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.detail-head {
|
|
background: linear-gradient(0deg, rgba(239, 196, 128, 1) 0%, rgba(248, 220, 165, 1) 100%) no-repeat;
|
|
background-size: 100% 180rpx;
|
|
height: 180rpx;
|
|
|
|
.state-box {
|
|
padding: 30rpx 40rpx;
|
|
color: rgba(#fff, 0.9);
|
|
|
|
.state-img {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
// background: #ccc;
|
|
margin-right: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 收货地址
|
|
.address-wrap {
|
|
position: relative;
|
|
background-color: #fff;
|
|
min-height: 160rpx;
|
|
width: 100%;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.order-address-box {
|
|
width: 710rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: -50rpx;
|
|
background-color: #fff;
|
|
min-height: 160rpx;
|
|
border-radius: 20rpx;
|
|
padding: 20rpx;
|
|
font-size: 30rpx;
|
|
|
|
font-weight: 500;
|
|
color: rgba(51, 51, 51, 1);
|
|
position: absolute;
|
|
.address-username {
|
|
margin-right: 20rpx;
|
|
}
|
|
.address-detail {
|
|
font-size: 26rpx;
|
|
|
|
font-weight: 500;
|
|
color: rgba(153, 153, 153, 1);
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
.detail-goods {
|
|
margin-bottom: 20rpx;
|
|
.order-list {
|
|
margin-bottom: 20rpx;
|
|
background-color: #fff;
|
|
padding: 0 20rpx;
|
|
.order-card {
|
|
padding: 20rpx 0;
|
|
.order-sku {
|
|
font-size: 24rpx;
|
|
|
|
font-weight: 400;
|
|
color: rgba(153, 153, 153, 1);
|
|
width: 450rpx;
|
|
margin-bottom: 20rpx;
|
|
.order-num {
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
.card-price-box {
|
|
.status-btn {
|
|
height: 32rpx;
|
|
border: 1rpx solid rgba(207, 169, 114, 1);
|
|
border-radius: 15rpx;
|
|
font-size: 20rpx;
|
|
font-weight: 400;
|
|
color: rgba(168, 112, 13, 1);
|
|
padding: 0 10rpx;
|
|
margin-left: 20rpx;
|
|
background: rgba(233, 183, 102, 0.16);
|
|
}
|
|
.order-price {
|
|
font-size: 26rpx;
|
|
|
|
font-weight: 600;
|
|
color: rgba(51, 51, 51, 1);
|
|
}
|
|
}
|
|
}
|
|
// 配送方式
|
|
.express-type-box {
|
|
width: 710rpx;
|
|
height: 90rpx;
|
|
background: rgba(247, 247, 247, 1);
|
|
border-radius: 10rpx;
|
|
padding: 0 20rpx;
|
|
.express-type--title {
|
|
font-size: 28rpx;
|
|
|
|
font-weight: 400;
|
|
color: rgba(153, 153, 153, 1);
|
|
}
|
|
.express-type--content {
|
|
font-size: 26rpx;
|
|
|
|
font-weight: 500;
|
|
color: rgba(51, 51, 51, 1);
|
|
}
|
|
.express-type--detail {
|
|
font-size: 24rpx;
|
|
|
|
font-weight: 400;
|
|
color: rgba(153, 153, 153, 1);
|
|
line-height: 30rpx;
|
|
}
|
|
}
|
|
.refund_msg {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
flex: 1;
|
|
text-align: left;
|
|
}
|
|
.order-bottom {
|
|
background: #fff;
|
|
justify-content: flex-end;
|
|
padding: 20rpx 0;
|
|
.btn1 {
|
|
width: 160rpx;
|
|
line-height: 60rpx;
|
|
border: 1rpx solid rgba(223, 223, 223, 1);
|
|
border-radius: 30rpx;
|
|
font-size: 26rpx;
|
|
background: #fff;
|
|
padding: 0;
|
|
margin-right: 20rpx;
|
|
}
|
|
.btn2 {
|
|
width: 160rpx;
|
|
line-height: 60rpx;
|
|
border: 1rpx solid rgba(213, 166, 90, 1) !important;
|
|
border-radius: 30rpx;
|
|
font-size: 26rpx;
|
|
color: #d5a65a !important;
|
|
padding: 0;
|
|
background: #fff;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 拼团项目
|
|
.group-box {
|
|
background: #fff;
|
|
padding: 40rpx 0;
|
|
height: 250rpx;
|
|
margin-bottom: 20rpx;
|
|
.tip-box {
|
|
font-size: 28rpx;
|
|
}
|
|
.title-box {
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
.group-num {
|
|
color: #f8002c;
|
|
}
|
|
.count-down-tip {
|
|
font-size: 24rpx;
|
|
padding-left: 10rpx;
|
|
}
|
|
.time-box {
|
|
font-size: 18rpx;
|
|
.count-text {
|
|
display: inline-block;
|
|
background-color: #383a46;
|
|
color: #fff;
|
|
font-size: 18rpx;
|
|
border-radius: 2rpx;
|
|
padding: 0 5rpx;
|
|
height: 28rpx;
|
|
text-align: center;
|
|
line-height: 28rpx;
|
|
margin: 0 6rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.group-people {
|
|
.img-box {
|
|
position: relative;
|
|
margin-right: 20rpx;
|
|
.tag {
|
|
position: absolute;
|
|
line-height: 36rpx;
|
|
background: linear-gradient(132deg, rgba(243, 223, 177, 1), rgba(243, 223, 177, 1), rgba(236, 190, 96, 1));
|
|
border-radius: 18rpx;
|
|
padding: 0 10rpx;
|
|
white-space: nowrap;
|
|
font-size: 24rpx;
|
|
color: #784f06;
|
|
z-index: 2;
|
|
top: -10rpx;
|
|
}
|
|
.avatar {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
background: #ccc;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 收货信息、订单信息。
|
|
.notice-box {
|
|
background: #fff;
|
|
margin-bottom: 20rpx;
|
|
.notice-box__head {
|
|
font-size: 30rpx;
|
|
|
|
font-weight: 500;
|
|
color: rgba(51, 51, 51, 1);
|
|
line-height: 80rpx;
|
|
border-bottom: 1rpx solid #dfdfdf;
|
|
padding: 0 25rpx;
|
|
}
|
|
.notice-box__content {
|
|
padding: 25rpx;
|
|
.self-pickup-box {
|
|
width: 100%;
|
|
.self-pickup--img {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
margin: 40rpx 0;
|
|
}
|
|
}
|
|
}
|
|
.notice-item--center {
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.notice-item,
|
|
.notice-item--center {
|
|
height: 50rpx;
|
|
align-items: flex-start;
|
|
.title {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
text-align: justify;
|
|
text-align-last: justify;
|
|
text-justify: distribute-all-lines;
|
|
width: 140rpx;
|
|
}
|
|
|
|
.detail {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
flex: 1;
|
|
}
|
|
.copy-btn {
|
|
width: 100rpx;
|
|
line-height: 50rpx;
|
|
border-radius: 25rpx;
|
|
padding: 0;
|
|
background: rgba(238, 238, 238, 1);
|
|
font-size: 22rpx;
|
|
|
|
font-weight: 400;
|
|
color: rgba(51, 51, 51, 1);
|
|
margin-left: 30rpx;
|
|
}
|
|
}
|
|
.notice-item--center {
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
// 订单价格信息
|
|
.order-price-box {
|
|
background-color: #fff;
|
|
padding: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
.notice-item {
|
|
height: 50rpx;
|
|
.title {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.detail {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
.all-rpice-item {
|
|
justify-content: flex-end;
|
|
.all-price {
|
|
font-size: 26rpx;
|
|
color: #ff0000;
|
|
}
|
|
}
|
|
}
|
|
|
|
.foot-wrap {
|
|
width: 750rpx;
|
|
height: 140rpx;
|
|
}
|
|
.foot_box {
|
|
width: 750rpx;
|
|
min-height: 100rpx;
|
|
background: rgba(255, 255, 255, 1);
|
|
border: 1rpx solid rgba(238, 238, 238, 1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
.money-box {
|
|
height: 60rpx;
|
|
padding: 0 20rpx;
|
|
.money-title {
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
}
|
|
.all-price {
|
|
color: #333;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
.btn-box {
|
|
justify-content: flex-end;
|
|
margin-bottom: 20rpx;
|
|
.delete-btn {
|
|
background: #ffeeee;
|
|
color: #e50808;
|
|
width: 160rpx;
|
|
line-height: 60rpx;
|
|
border-radius: 30rpx;
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
margin-right: 20rpx;
|
|
padding: 0;
|
|
}
|
|
.obtn1 {
|
|
width: 160rpx;
|
|
line-height: 60rpx;
|
|
background: rgba(238, 238, 238, 1);
|
|
border-radius: 30rpx;
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
color: rgba(51, 51, 51, 1);
|
|
margin-right: 20rpx;
|
|
padding: 0;
|
|
}
|
|
.obtn2 {
|
|
width: 160rpx;
|
|
line-height: 60rpx;
|
|
background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
|
|
box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
|
|
border-radius: 30rpx;
|
|
margin-right: 20rpx;
|
|
font-size: 26rpx;
|
|
font-weight: 400;
|
|
color: #fff;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|