755 lines
26 KiB
Vue
755 lines
26 KiB
Vue
<template>
|
||
<div class="orderbox">
|
||
<div class="orderbox_left">
|
||
<el-tabs v-model="ordereData.status" class="demo-tabs" @tab-click="handleClick">
|
||
<el-tab-pane label="全部" name="">
|
||
<div class="demo_tabs_div">
|
||
<el-input v-model="ordereData.orderNo" placeholder="请输入订单号查询" @input="inputChange" clearable />
|
||
<!-- <el-button style="margin-left: 10px;" type="primary" @click="onSubmit">搜索</el-button> -->
|
||
</div>
|
||
<add :loading="loadingboxshow" :ordereData="ordereData" @emititemboxshow="emititemboxshow" v-if="ordereData.list.length">
|
||
</add>
|
||
<div v-else style="width: 100%; text-align: center; margin: 30px 0;">暂无数据</div>
|
||
<el-pagination v-if="ordereData.list.length" layout="prev, pager, next, jumper"
|
||
style="margin-top: 20px;" :total="Number(ordereData.total)"
|
||
@current-change="handleCurrentChange" />
|
||
</el-tab-pane>
|
||
<el-tab-pane label="销售" name="closed">
|
||
<add :ordereData="ordereData" v-if="ordereData.list.length"></add>
|
||
<div v-else style="width: 100%; text-align: center; margin: 30px 0;">暂无数据</div>
|
||
<el-pagination v-if="ordereData.list.length" layout="prev, pager, next, jumper"
|
||
style="margin-top: 20px;" :total="Number(ordereData.total)"
|
||
@current-change="handleCurrentChange" />
|
||
</el-tab-pane>
|
||
<el-tab-pane label="退单" name="refund">
|
||
<add :ordereData="ordereData" v-if="ordereData.list.length"></add>
|
||
<div v-else style="width: 100%; text-align: center; margin: 30px 0;">暂无数据</div>
|
||
<el-pagination v-if="ordereData.list.length" layout="prev, pager, next, jumper"
|
||
style="margin-top: 20px;" :total="Number(ordereData.total)"
|
||
@current-change="handleCurrentChange" />
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
<div class="orderbox_right" v-if="itemboxshow" v-loading="orderDetaildata.loading" :loading="loadingboxshow">
|
||
<div class="orderbox_right_top">
|
||
<span>堂食订单</span>
|
||
<el-icon :size="32" style="color: var(--primary-color) ;" @click="itemboxshow = false">
|
||
<CircleCloseFilled />
|
||
</el-icon>
|
||
</div>
|
||
<div class="tableDataclass">
|
||
<div class="orderbox_right_item">
|
||
<span class="span">订单号：</span><span class="nunber">{{ orderDetaildata.orderNo }}</span>
|
||
</div>
|
||
<div class="orderbox_right_item">
|
||
<span class="span">收银员：</span><span class="nunber">{{ orderDetaildata.userName }}</span>
|
||
</div>
|
||
<div class="orderbox_right_item">
|
||
<span class="span">创建时间：</span><span class="nunber">{{ orderDetaildata.createdAt }}</span>
|
||
</div>
|
||
<div class="orderbox_right_item">
|
||
<span class="span">终端：</span><span class="nunber">{{ orderDetaildata.zdNo }}</span>
|
||
</div>
|
||
<div class="orderbox_right_item">
|
||
<span class="span">会员：</span><span class="nunber">{{ orderDetaildata.memberName }}</span>
|
||
</div>
|
||
<div class="orderbox_right_item">
|
||
<span class="span">台桌：</span><span class="nunber">{{ orderDetaildata.tableId }}</span>
|
||
</div>
|
||
<div class="orderbox_right_item">
|
||
<span class="span">流水号：</span><span class="nunber">{{ orderDetaildata.masterId }}</span>
|
||
</div>
|
||
<div class="orderbox_right_top" style="margin-top: 20px; border-bottom: 2px solid #ccc;">
|
||
<span>合计：</span>
|
||
<span>￥{{ orderDetaildata.orderAmount }}</span>
|
||
</div>
|
||
<div class="orderbox_right_top" style="margin-top: 20px; border-bottom: 2px solid #ccc;">
|
||
<span style="font-size: 16px;" v-if="orderDetaildata.status == 'pending'">挂单</span>
|
||
<span style="font-size: 16px;" v-if="orderDetaildata.status == 'refund'">退单</span>
|
||
<span style="font-size: 16px;" v-if="orderDetaildata.status == 'closed'">订单完成</span>
|
||
</div>
|
||
<div class="orderbox_right_top" style="margin-top: 20px;">
|
||
<span>商品明细</span>
|
||
<span>{{ orderDetaildata.detailList.length }}项</span>
|
||
</div>
|
||
<div class="orderbox_right_list" style="margin-top: 20px;">
|
||
<div>商品</div>
|
||
<div>数量</div>
|
||
<div>单价</div>
|
||
<div>小计</div>
|
||
</div>
|
||
<div class="orderbox_right_list_item" style="margin-top: 20px;"
|
||
v-for="(item, index) in orderDetaildata.detailList" :key="index">
|
||
<div>{{ item.productName }}-{{ item.productSkuName }}号商品</div>
|
||
<div style="text-align: center;">{{ item.num }}</div>
|
||
<div style="text-align: center;">{{ item.price }}</div>
|
||
<div>{{ item.priceAmount }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="orderbox_right_button">
|
||
<div class="orderbox_right_buttonbutton">
|
||
<router-link to="/" style="width: 45%;">
|
||
<el-button style="width: 100%;" type="primary">打票</el-button>
|
||
</router-link>
|
||
<el-button style="width: 45%;" type="danger" @click="recharge = true">退单</el-button>
|
||
<!--payreturnOrderclick @click="recharge = true" -->
|
||
</div>
|
||
<!-- <el-button style="width: 100%; margin-top: 10px;" type="primary" @click="onSubmit">结算</el-button> -->
|
||
</div>
|
||
</div>
|
||
<div class="orderbox_rightbox" v-else>
|
||
<div class="orderbox_rightbox_top">
|
||
<div
|
||
style="padding: 6px; background:#187ead; border-radius:50%;width: 50px;height: 50px; display: flex; align-items: center; justify-content: center;">
|
||
<el-icon :size="30" color="#fff">
|
||
<Document />
|
||
</el-icon>
|
||
</div>
|
||
<div class="orderbox_rightbox_top_div">
|
||
<div>今日普通订单</div>
|
||
<div style="font-size:14px;">今日本终端处理的订单</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="orderbox_rightbox_top">
|
||
<div
|
||
style="padding: 6px; background:#187ead; border-radius:50%;width: 50px;height: 50px; display: flex; align-items: center; justify-content: center;">
|
||
<el-icon :size="30" color="#fff">
|
||
<Connection />
|
||
</el-icon>
|
||
</div>
|
||
<div class="orderbox_rightbox_top_div">
|
||
<div>今日普通订单</div>
|
||
<div style="font-size:14px;">今日本终端处理的订单</div>
|
||
</div>
|
||
</div>
|
||
<div class="orderbox_rightbox_top">
|
||
<div
|
||
style="padding: 6px; background:#187ead; border-radius:50%;width: 50px;height: 50px; display: flex; align-items: center; justify-content: center;">
|
||
<el-icon :size="30" color="#fff">
|
||
<Crop />
|
||
</el-icon>
|
||
</div>
|
||
<div class="orderbox_rightbox_top_div">
|
||
<div>今日普通订单</div>
|
||
<div style="font-size:14px;">今日本终端处理的订单</div>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
<el-dialog v-model="recharge" title="退单" width="800" :before-close="handlerecharge">
|
||
<div class="recharge_footer">
|
||
<div class="recharge_footer_item">
|
||
<el-input v-model="remark" style="width: 100%" :rows="2" type="textarea" placeholder="请输入退单原因" />
|
||
<div class="recharge_footer_items" @click="remark = '顾客取消'">
|
||
<div>顾客取消</div>
|
||
</div>
|
||
<div class="recharge_footer_items" @click="remark = '等待时间长'">
|
||
<div>等待时间长</div>
|
||
</div>
|
||
<div class="recharge_footer_items" @click="remark = '支付错误'">
|
||
<div>支付错误</div>
|
||
</div>
|
||
<div class="recharge_footer_items" @click="remark = '商品不满意'">
|
||
<div>商品不满意</div>
|
||
</div>
|
||
<div class="recharge_footer_items" @click="remark = '服务态度不满意'">
|
||
<div>服务态度不满意</div>
|
||
</div>
|
||
</div>
|
||
<div class="recharge_footer_itemright">
|
||
<div class="recharge_footer_itemright_top">
|
||
<div>
|
||
单号：{{ orderDetaildata.orderNo }}
|
||
</div>
|
||
<div>
|
||
下单时间：{{ orderDetaildata.createdAt }}
|
||
</div>
|
||
<div>
|
||
<span>金额：￥{{ orderDetaildata.orderAmount }}</span>
|
||
<!-- <span>优惠：￥0.00</span> -->
|
||
<span>包装费：￥{{ orderDetaildata.packFee }}</span>
|
||
<!-- <span>可退款：￥{{ orderDetaildata.packFee }}</span> -->
|
||
|
||
</div>
|
||
</div>
|
||
<div class="recharge_footer_itemright_botton">
|
||
<div class="recharge_footer_itemright_botton_top">
|
||
<el-checkbox @change="changezong" v-model="changechecked" size="large" /><span
|
||
style="margin-left: 10px;">全选，共项目</span>
|
||
</div>
|
||
<div class="recharge_footer_itemright_botton_item"
|
||
v-for="(item, index) in orderDetaildata.detailList" :key="index">
|
||
<div class="recharge_footer_itemright_botton_itemone">
|
||
<el-checkbox @change="changezong(item, index, 1)"
|
||
:disabled="item.status == 'closed' ? false : true" v-model="item.checked"
|
||
size="large" />
|
||
<span style="margin-left: 10px;">{{ item.productName }}</span>
|
||
</div>
|
||
<div class="recharge_footer_itemright_botton_itemtow">
|
||
{{ item.num }}
|
||
</div>
|
||
<div class="recharge_footer_itemright_botton_itemthere">
|
||
￥{{ item.price }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="recharge_footer_itemright_botton_box">
|
||
<div class="recharge_footer_itemright_botton_boxone">
|
||
<div class="recharge_footer_itemright_botton_boxoneabsolute">退单金额：</div>
|
||
<div class="recharge_footer_itemright_botton_boxonetext">￥{{ refundamount }}</div>
|
||
</div>
|
||
<div class="recharge_footer_itemright_botton_boxtow">
|
||
<el-button type="primary" style="width: 100%; height: 100%;"
|
||
@click="payreturnOrderclick">支付退回</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, reactive } from 'vue'
|
||
import { ElMessage, dayjs } from 'element-plus'
|
||
import { useUser } from "@/store/user.js"
|
||
import lodash from 'lodash'
|
||
import { orderfindOrder, orderorderDetail, payreturnOrder } from '@/api/order/index.js'
|
||
import add from '@/views/order/components/add.vue'
|
||
const store = useUser()
|
||
const itemboxshow = ref(false)
|
||
|
||
const handleClick = (Name) => {//切换teb
|
||
ordereData.status = Name.props.name
|
||
asyncorderfindOrder()
|
||
}
|
||
|
||
const recharge = ref(false)//退单切换
|
||
|
||
const handlerecharge = () => { //退单切换
|
||
recharge.value = !recharge.value
|
||
}
|
||
|
||
const payreturnOrderclick = async () => {
|
||
if (refundamount.value == 0) {
|
||
ElMessage.error('退款金额不能为0！')
|
||
return false
|
||
}
|
||
try {
|
||
let arr = orderDetaildata.value.detailList.filter(item => {
|
||
if (item.checked && item.status == 'closed') {
|
||
var obj = {
|
||
id: item.id,
|
||
orderId: orderDetaildata.value.id,
|
||
remark: remark.value
|
||
}
|
||
}
|
||
return obj
|
||
})
|
||
if (arr.length != 0) {
|
||
await payreturnOrder(arr)
|
||
changechecked.value = false
|
||
recharge.value = false
|
||
asyncorderfindOrder()
|
||
} else {
|
||
ElMessage.error('以没有退款项目！')
|
||
}
|
||
|
||
} catch (error) {
|
||
|
||
}
|
||
|
||
}
|
||
|
||
const loadingboxshow = ref(false);
|
||
|
||
const emititemboxshow = async (e) => { //接收子组件值 并赋值给父组件
|
||
loadingboxshow.value = true
|
||
try {
|
||
let res = await orderorderDetail({
|
||
shopId: store.userInfo.shopId,
|
||
id: e.id
|
||
})
|
||
itemboxshow.value = true
|
||
loadingboxshow.value = false
|
||
orderDetaildata.value = res
|
||
orderDetaildata.value.detailList.forEach((e) => {
|
||
e.checked = false
|
||
})
|
||
} catch (error) {
|
||
loadingboxshow.value = false
|
||
|
||
}
|
||
}
|
||
const remark = ref('')//备注
|
||
|
||
const changechecked = ref(false) //全选
|
||
|
||
const refundamount = ref(0)//退款金额
|
||
|
||
const changezong = (e, b, c) => {
|
||
if (c == 1) {
|
||
if (e.checked) {
|
||
refundamount.value = (Number(refundamount.value) + (Number(e.num) * Number(e.price))).toFixed(2)
|
||
} else {
|
||
refundamount.value = (Number(refundamount.value) - (Number(e.num) * Number(e.price))).toFixed(2)
|
||
}
|
||
if (orderDetaildata.value.detailList.every(item => item.checked == true)) {//判断是否全选
|
||
changechecked.value = true
|
||
} else {
|
||
changechecked.value = false
|
||
}
|
||
} else {
|
||
orderDetaildata.value.detailList.forEach((e) => {
|
||
if (changechecked.value) {
|
||
e.checked = true
|
||
refundamount.value = orderDetaildata.value.orderAmount
|
||
} else {
|
||
e.checked = false
|
||
refundamount.value = 0
|
||
}
|
||
|
||
})
|
||
|
||
}
|
||
|
||
}
|
||
|
||
const orderDetaildata = ref({//详情数据
|
||
// loading
|
||
})
|
||
const ordereData = reactive({//表格数据
|
||
list: [],
|
||
size: 10,
|
||
page: 1,
|
||
status: '',
|
||
total: '',
|
||
orderNo: '',
|
||
})
|
||
const asyncorderfindOrder = async () => {//获取流水
|
||
try {
|
||
let res = await orderfindOrder({
|
||
shopId: store.userInfo.shopId,
|
||
status: ordereData.status,
|
||
size: ordereData.size,
|
||
page: ordereData.page,
|
||
orderNo: ordereData.orderNo
|
||
})
|
||
ordereData.total = res.total
|
||
ordereData.list = res.list
|
||
} catch (error) {
|
||
// ElMessage({
|
||
// message: '获取失败',
|
||
// type: 'error',
|
||
// })
|
||
}
|
||
}
|
||
const handleCurrentChange = (val) => { //页码
|
||
// ordereData.page = 1
|
||
ordereData.page = val
|
||
asyncorderfindOrder()
|
||
}
|
||
const inputChange = lodash.debounce(function () { //搜索手机号
|
||
asyncorderfindOrder()
|
||
}, 500)
|
||
onMounted(() => {
|
||
// resetMembrform.value = { ...membrform.value }
|
||
asyncorderfindOrder()
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.orderbox {
|
||
display: flex;
|
||
height: 100%;
|
||
|
||
.orderbox_left {
|
||
width: 60%;
|
||
height: 100%;
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
|
||
.demo-tabs {
|
||
height: 100%;
|
||
|
||
:deep(.el-tabs__content) {
|
||
height: 90%;
|
||
}
|
||
|
||
:deep(.el-tab-pane) {
|
||
height: 100%;
|
||
}
|
||
|
||
:deep(.el-tabs__nav) {
|
||
width: 100%;
|
||
}
|
||
|
||
:deep(.el-tabs__item) {
|
||
width: 33.33%;
|
||
padding: 0;
|
||
position: relative;
|
||
// width: 10px !important;
|
||
}
|
||
|
||
:deep(.el-tabs__active-bar) {
|
||
height: 0 !important;
|
||
}
|
||
|
||
:deep(.el-tabs__active-bar)::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
height: 2px;
|
||
width: 10px;
|
||
background: red;
|
||
transform: translateX(-50%);
|
||
// width: 10px !important;
|
||
}
|
||
|
||
:deep(.el-is-active) {
|
||
width: 33.33%;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.demo_tabs_div {
|
||
padding: 0 20px;
|
||
display: flex;
|
||
}
|
||
|
||
.demo_tabs_box {
|
||
width: 100%;
|
||
padding: 10px 20px;
|
||
height: 82%;
|
||
overflow: auto;
|
||
|
||
.demo_tabs_boxitem {
|
||
width: 100%;
|
||
padding: 6px 16px;
|
||
border-radius: 6px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
// background: #eeeeee;
|
||
border-bottom: 1px solid #ccc;
|
||
|
||
.demo_tabs_boxitem_one {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
|
||
.demo_tabs_boxitem_oneone {
|
||
display: flex;
|
||
margin-left: 20px;
|
||
flex-direction: column;
|
||
height: 70px;
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.demo_tabs_boxitem_onetow {
|
||
// width: 40%;
|
||
display: flex;
|
||
margin-left: 20px;
|
||
flex-direction: column;
|
||
height: 70px;
|
||
justify-content: space-around;
|
||
|
||
div {
|
||
// width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.demo_tabs_boxitem_tow {
|
||
// width: 20%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 70px;
|
||
justify-content: space-around;
|
||
align-items: flex-end;
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.orderbox_rightbox {
|
||
position: relative;
|
||
width: 40%;
|
||
padding: 20px;
|
||
margin-left: 10px;
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
|
||
.orderbox_rightbox_top:nth-child(1) {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.orderbox_rightbox_top {
|
||
margin-top: 10px;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
padding: 10px 16px;
|
||
width: 100%;
|
||
border-radius: 10px;
|
||
background: #e7e5e5;
|
||
|
||
.orderbox_rightbox_top_div {
|
||
margin-left: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.recharge_footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.recharge_footer_item {
|
||
background: #f2f2f2;
|
||
width: 40%;
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
display: flex;
|
||
flex-flow: wrap;
|
||
|
||
.recharge_footer_items {
|
||
margin-left: 10px;
|
||
// background: #187ead;
|
||
border: 1px solid #187ead;
|
||
padding: 10px 22px;
|
||
color: #187ead;
|
||
height: fit-content;
|
||
text-align: center;
|
||
border-radius: 6px;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
|
||
.recharge_footer_itemright {
|
||
padding-left: 20px;
|
||
width: 60%;
|
||
position: relative;
|
||
bottom: 0;
|
||
left: 0;
|
||
|
||
.recharge_footer_itemright_top {
|
||
width: 100%;
|
||
padding: 6px 10px;
|
||
background: #f2f2f2;
|
||
border-radius: 10px;
|
||
|
||
div:nth-child(1) {
|
||
margin-top: 0px;
|
||
}
|
||
|
||
div:nth-child(3) {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
|
||
span:nth-child(1) {
|
||
margin-left: 0;
|
||
}
|
||
|
||
span:nth-child(2) {
|
||
color: red;
|
||
}
|
||
|
||
span:nth-child(4) {
|
||
font-weight: bold;
|
||
}
|
||
|
||
span {
|
||
margin-left: 6px;
|
||
}
|
||
}
|
||
|
||
div {
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
|
||
.recharge_footer_itemright_botton {
|
||
max-height: 300px;
|
||
overflow: auto;
|
||
|
||
.recharge_footer_itemright_botton_top {
|
||
margin-top: 10px;
|
||
color: #757575;
|
||
}
|
||
|
||
.recharge_footer_itemright_botton_item {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
border-bottom: 1px solid #ccc;
|
||
|
||
.recharge_footer_itemright_botton_itemone {
|
||
width: 60%;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
|
||
.recharge_footer_itemright_botton_itemtow {
|
||
width: 20%;
|
||
}
|
||
|
||
.recharge_footer_itemright_botton_itemthere {
|
||
width: 20%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.recharge_footer_itemright_botton_box {
|
||
border-top: 1px solid #ccc;
|
||
padding: calc(var(--el-dialog-padding-primary) + 10px) 12px 0 12px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.recharge_footer_itemright_botton_boxone {
|
||
width: 60%;
|
||
height: 60px;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.recharge_footer_itemright_botton_boxoneabsolute {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
color: #c0c0c0;
|
||
}
|
||
|
||
.recharge_footer_itemright_botton_boxonetext {
|
||
font-size: 26px;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
}
|
||
}
|
||
|
||
.recharge_footer_itemright_botton_boxtow {
|
||
width: 40%;
|
||
height: 60px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.orderbox_right {
|
||
position: relative;
|
||
width: 40%;
|
||
padding: 20px;
|
||
margin-left: 10px;
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
|
||
.orderbox_right_top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-bottom: 10px;
|
||
border-bottom: 2px solid #000;
|
||
}
|
||
|
||
.orderbox_right_list {
|
||
display: flex;
|
||
font-size: 14px;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-bottom: 10px;
|
||
text-align: center;
|
||
border-bottom: 2px solid #ccc;
|
||
|
||
div:nth-child(1) {
|
||
text-align: left;
|
||
width: 45%;
|
||
}
|
||
|
||
div:nth-child(2) {
|
||
width: 15%;
|
||
align-items: center;
|
||
}
|
||
|
||
div:nth-child(3) {
|
||
width: 15%;
|
||
align-items: center;
|
||
}
|
||
|
||
div:nth-child(4) {
|
||
text-align: right;
|
||
width: 25%;
|
||
}
|
||
}
|
||
|
||
.orderbox_right_list_item {
|
||
display: flex;
|
||
font-size: 14px;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-bottom: 10px;
|
||
|
||
div:nth-child(1) {
|
||
text-align: left;
|
||
width: 45%;
|
||
}
|
||
|
||
div:nth-child(2) {
|
||
width: 15%;
|
||
align-items: center;
|
||
}
|
||
|
||
div:nth-child(3) {
|
||
width: 15%;
|
||
align-items: center;
|
||
}
|
||
|
||
div:nth-child(4) {
|
||
text-align: right;
|
||
width: 25%;
|
||
}
|
||
}
|
||
|
||
.tableDataclass {
|
||
width: 100%;
|
||
overflow: auto;
|
||
height: 75%;
|
||
|
||
.orderbox_right_item {
|
||
margin-top: 16px;
|
||
|
||
span {
|
||
font-size: var(--el-font-size-base);
|
||
// color: var(--primary-color);
|
||
}
|
||
}
|
||
}
|
||
|
||
.orderbox_right_button {
|
||
position: absolute;
|
||
width: 90%;
|
||
left: 50%;
|
||
bottom: 16px;
|
||
|
||
.orderbox_right_buttonbutton {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
transform: translateX(-50%) !important;
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
</style> |