czg_team
/
cashier-web
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add: 优化

This commit is contained in:
gyq 2025-10-09 09:20:44 +08:00
parent 5cd5265ffb
commit e69e0e7aa0
2 changed files with 469 additions and 395 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.env.development
View File

@ -7,14 +7,14 @@ VITE_APP_BASE_API=/dev-api
# 接口地址 # 接口地址
# VITE_APP_API_URL=https://tapi.cashier.sxczgkj.cn/ # 测试 # VITE_APP_API_URL=https://tapi.cashier.sxczgkj.cn/ # 测试
# VITE_APP_API_URL=https://cashier.sxczgkj.com/ # 正式 VITE_APP_API_URL=https://cashier.sxczgkj.com/ # 正式
VITE_APP_API_URL=http://192.168.1.42/ # 本地 # VITE_APP_API_URL=http://192.168.1.42/ # 本地
# WebSocket 端点（不配置则关闭），线上 ws://api.youlai.tech/ws ，本地 ws://localhost:8989/ws # WebSocket 端点（不配置则关闭），线上 ws://api.youlai.tech/ws ，本地 ws://localhost:8989/ws
# VITE_APP_WS_ENDPOINT=wss://sockets.sxczgkj.com/wss # VITE_APP_WS_ENDPOINT=wss://sockets.sxczgkj.com/wss
# VITE_APP_WS_ENDPOINT=wss://czgeatws.sxczgkj.com/wss # 正式 VITE_APP_WS_ENDPOINT=wss://czgeatws.sxczgkj.com/wss # 正式
VITE_APP_WS_ENDPOINT=ws://192.168.1.42:2348 # 本地 # VITE_APP_WS_ENDPOINT=ws://192.168.1.42:2348 # 本地
# 启用 Mock 服务 # 启用 Mock 服务

856
src/views/tool/table/index.vue
View File

@ -1,188 +1,262 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-tabs v-model="tableArea.tabsSel" type="card" @tab-click="tabClick"> <el-tabs v-model="tableArea.tabsSel" type="card" @tab-click="tabClick">
<el-tab-pane label="全部" name="" /> <el-tab-pane label="全部" name="" />
<el-tab-pane v-for="item in tableArea.tabs" :key="item.id" :label="item.name" :name="`${item.id}`"> <el-tab-pane
<template #label> v-for="item in tableArea.tabs"
<div class=""> :key="item.id"
<span> :label="item.name"
{{ item.name }} :name="`${item.id}`"
</span> >
<el-icon style="margin: 0 10px" @click="addEaraShow(item)"> <template #label>
<EditPen /> <div class="">
</el-icon> <span>
<el-popconfirm title="确定删除吗？" @confirm="delArea(item.id)"> {{ item.name }}
<template #reference> </span>
<el-icon> <el-icon style="margin: 0 10px" @click="addEaraShow(item)">
<Delete /> <EditPen />
</el-icon> </el-icon>
</template> <el-popconfirm title="确定删除吗？" @confirm="delArea(item.id)">
</el-popconfirm> <template #reference>
</div> <el-icon>
</template> <Delete />
</el-tab-pane> </el-icon>
</el-tabs> </template>
</el-popconfirm>
</div>
</template>
</el-tab-pane>
</el-tabs>
<div class=""> <div class="">
<el-button icon="plus" @click="addEaraShow()">添加区域</el-button> <el-button icon="plus" @click="addEaraShow()">添加区域</el-button>
<el-button type="primary" icon="plus" @click="addTableShow()">添加台桌</el-button> <el-button type="primary" icon="plus" @click="addTableShow()">添加台桌</el-button>
<el-button type="primary" icon="download" @click="showDownloadTableCode"> <el-button type="primary" icon="download" @click="showDownloadTableCode">
下载桌台码 下载桌台码
</el-button> </el-button>
<el-button type="primary" icon="download" @click="downloadShopCpde">下载店铺码</el-button> <el-button type="primary" icon="download" @click="downloadShopCpde">
</div> 下载店铺码
</el-button>
</div>
<div class="u-flex u-p-b-15 u-font-14 u-m-t-16"> <div class="u-flex u-p-b-15 u-font-14 u-m-t-16">
<div v-for="(item, key) in status" :key="key" class="state u-m-r-24"> <div v-for="(item, key) in status" :key="key" class="state u-m-r-24">
<span class="dot" :style="{ <span
backgroundColor: status[key] ? status[key].type : '', class="dot"
}" /> :style="{
{{ item.label }} backgroundColor: status[key] ? status[key].type : '',
</div> }"
</div> />
{{ item.label }}
</div>
</div>
<!-- 列表 --> <!-- 列表 -->
<div class="head-container"> <div class="head-container">
<div v-loading="loading" class="table_list"> <div v-loading="loading" class="table_list">
<div v-for="item in tableList" :key="item.id" class="item" <div
:style="{ 'background-color': status[item.status] ? status[item.status].type : '' }"> v-for="item in tableList"
<div class="new-top flex u-row-between"> :key="item.id"
<div class="u-flex u-flex-1 u-p-r-10"> class="item"
<span class="name u-line-1" style="max-width: 50px"> :style="{
{{ item.name }} 'background-color': status[item.status] ? status[item.status].type : '',
</span> }"
<span class="u-font-14 u-line-1" style="max-width: 100px"> >
丨{{ areaMap[item.areaId] || "" }} <div class="new-top flex u-row-between">
</span> <div class="u-flex u-flex-1 u-p-r-10">
</div> <span class="name u-line-1" style="max-width: 50px">
<el-dropdown trigger="click" @command="tableComman($event, item)"> {{ item.name }}
<el-icon color="#fff" class="cur-pointer"> </span>
<More /> <span class="u-font-14 u-line-1" style="max-width: 100px">
</el-icon> 丨{{ areaMap[item.areaId] || "" }}
<template #dropdown> </span>
<el-dropdown-menu> </div>
<el-dropdown-item command="edit"> <el-dropdown trigger="click" @command="tableComman($event, item)">
<span>编辑</span> <el-icon color="#fff" class="cur-pointer">
</el-dropdown-item> <More />
<el-dropdown-item command="bindTableCode" v-if="envName !== 'production'"> </el-icon>
<span>绑定桌码</span> <template #dropdown>
</el-dropdown-item> <el-dropdown-menu>
<el-dropdown-item command="del"> <el-dropdown-item command="edit">
<span>删除</span> <span>编辑</span>
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> <el-dropdown-item
</template> command="bindTableCode"
</el-dropdown> v-if="envName !== 'production'"
</div> >
<div class="box"> <span>绑定桌码</span>
<div class="top"> </el-dropdown-item>
<div v-if="item.status == 'subscribe'"> <el-dropdown-item command="del">
<div class="row row1" style="align-items: flex-start"> <span>删除</span>
<span style="font-size: 14px; color: #333"> </el-dropdown-item>
{{ item.bookingInfo.createUserName }}订{{ item.bookingInfo.bookingPerson }}「{{ </el-dropdown-menu>
item.bookingInfo.gender == 1 ? "先生" : "女士" </template>
}}」 </el-dropdown>
</span> </div>
<div class="state" style="font-size: 12px; color: #666; display: flex; align-items: center"> <div class="box">
<img style="width: 16px; height: 16px; filter: contrast(0.5)" src="@/assets/images/perpole.png" <div class="top">
alt="" /> <div v-if="item.status == 'subscribe' && item.bookingInfo">
<div class="row row1" style="align-items: flex-start">
<span style="font-size: 14px; color: #333">
{{ item.bookingInfo.createUserName }}订{{
item.bookingInfo.bookingPerson
}}「{{ item.bookingInfo.gender == 1 ? "先生" : "女士" }}」
</span>
<div
class="state"
style="
font-size: 12px;
color: #666;
display: flex;
align-items: center;
"
>
<img
style="width: 16px; height: 16px; filter: contrast(0.5)"
src="@/assets/images/perpole.png"
alt=""
/>
{{ item.bookingInfo.bookingTime.substring(11, 19) }} {{ item.bookingInfo.bookingTime.substring(11, 19) }}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<span style="font-size: 14px; color: #333; margin-top: 5px"> <span style="font-size: 14px; color: #333; margin-top: 5px">
{{ item.bookingInfo.phoneNumber }} {{ item.bookingInfo.phoneNumber }}
</span> </span>
</div> </div>
</div> </div>
<div v-else class="u-font-18 font-600 total-price"> <div v-else class="u-font-18 font-600 total-price">
<span v-if="item.status == 'using'" class="cur-pointer" @click="diancanShow(item, 'isAddGoods')"> <span
¥{{ item.totalAmount || 0 }}「{{ item.productNum }}件」 v-if="item.status == 'using'"
</span> class="cur-pointer"
<!-- <span v-else class="color-fff">|</span> --> @click="diancanShow(item, 'isAddGoods')"
</div> >
<div class="row btn-group" style="margin-top: 10px"> ¥{{ item.totalAmount || 0 }}「{{ item.productNum }}件」
<template v-if="item.status == 'subscribe'"> </span>
<el-button type="success" :disabled="!item.tableId || item.status === 'closed'" <!-- <span v-else class="color-fff">|</span> -->
@click="markStatus(item, -1)"> </div>
取消预约 <div class="row btn-group" style="margin-top: 10px">
</el-button> <template v-if="item.status == 'subscribe'">
</template> <el-button
<template v-if="item.status == 'subscribe' && item.bookingInfo.status == 20"> type="success"
<el-button type="success" :disabled="!item.tableId || item.status === 'closed'" :disabled="!item.tableId || item.status === 'closed'"
@click="markStatus(item, 10)"> @click="markStatus(item, -1)"
到店 >
</el-button> 取消预约
</template> </el-button>
<template v-if=" </template>
item.status == 'idle' || <template
(item.status == 'subscribe' && item.bookingInfo.status == 10) v-if="
"> item.status == 'subscribe' &&
<el-button type="primary" :disabled="!item.tableCode || item.status === 'closed'" item.bookingInfo &&
@click="diancanShow(item)"> item.bookingInfo.status == 20
点餐 "
</el-button> >
</template> <el-button
<template v-else-if="item.status != 'idle' && item.status != 'subscribe'"> type="success"
<template v-if="item.status == 'using'"> :disabled="!item.tableId || item.status === 'closed'"
<el-button :disabled="!item.tableId || item.status === 'closed'" @click="markStatus(item, 10)"
@click="diancanShow(item, 'isAddGoods')"> >
加菜 到店
</el-button> </el-button>
<el-button type="danger" :disabled="!item.tableId || item.status === 'closed'" </template>
@click="diancanShow(item, 'isPayOrder')"> <template
结账 v-if="
</el-button> item.status == 'idle' ||
</template> (item.status == 'subscribe' &&
<template v-else-if="item.status == 'closed'"> item.bookingInfo &&
<el-button type="info" disabled>已关台</el-button> item.bookingInfo.status == 10)
</template> "
<template v-else-if="item.status == 'cleaning'"> >
<el-button type="info" :style="{ <el-button
backgroundColor: status[item.status].type, type="primary"
borderColor: status[item.status].type, :disabled="!item.tableCode || item.status === 'closed'"
}"> @click="diancanShow(item)"
清理中 >
</el-button> 点餐
</template> </el-button>
<template v-else> </template>
<el-button type="info" disabled>点餐</el-button> <template
</template> v-else-if="item.status != 'idle' && item.status != 'subscribe'"
</template> >
</div> <template v-if="item.status == 'using'">
</div> <el-button
<div class="u-flex u-col-bottom bottom u-row-between color-666" :disabled="!item.tableId || item.status === 'closed'"
:class="{ 'opacity-0': item.status == 'closed' }"> @click="diancanShow(item, 'isAddGoods')"
<div class="u-flex u-col-center"> >
<img style="width: 16px; height: 16px; filter: contrast(0.5)" src="@/assets/images/perpole.png" 加菜
alt="" /> </el-button>
<span class="u-m-t-4 u-font-12 u-m-l-2"> <el-button
{{ item.useNum || 0 }}/{{ item.maxCapacity }} type="danger"
</span> :disabled="!item.tableId || item.status === 'closed'"
</div> @click="diancanShow(item, 'isPayOrder')"
<div v-if="item.status == 'using'" class="u-flex"> >
<img style="width: 16px; height: 16px; filter: contrast(0.5)" src="@/assets/images/shalou.png" alt="" /> 结账
<span class="u-m-t-4 u-font-12">{{ formatTime(item.durationTime) }}</span> </el-button>
</div> </template>
</div> <template v-else-if="item.status == 'closed'">
</div> <el-button type="info" disabled>已关台</el-button>
</div> </template>
<div class="empty_wrap"> <template v-else-if="item.status == 'cleaning'">
<el-empty v-if="!tableList.length" description="空空如也~" /> <el-button
</div> type="info"
</div> :style="{
</div> backgroundColor: status[item.status].type,
borderColor: status[item.status].type,
}"
>
清理中
</el-button>
</template>
<template v-else>
<el-button type="info" disabled>点餐</el-button>
</template>
</template>
</div>
</div>
<div
class="u-flex u-col-bottom bottom u-row-between color-666"
:class="{ 'opacity-0': item.status == 'closed' }"
>
<div class="u-flex u-col-center">
<img
style="width: 16px; height: 16px; filter: contrast(0.5)"
src="@/assets/images/perpole.png"
alt=""
/>
<span class="u-m-t-4 u-font-12 u-m-l-2">
{{ item.useNum || 0 }}/{{ item.maxCapacity }}
</span>
</div>
<div v-if="item.status == 'using'" class="u-flex">
<img
style="width: 16px; height: 16px; filter: contrast(0.5)"
src="@/assets/images/shalou.png"
alt=""
/>
<span class="u-m-t-4 u-font-12">
{{ formatTime(item.durationTime) }}
</span>
</div>
</div>
</div>
</div>
<div class="empty_wrap">
<el-empty v-if="!tableList.length" description="空空如也~" />
</div>
</div>
</div>
<!-- 弹窗 --> <!-- 弹窗 -->
<addEara ref="refAddEara" @success="areainit" /> <addEara ref="refAddEara" @success="areainit" />
<addTable ref="refAddTable" @success="tableInit" /> <addTable ref="refAddTable" @success="tableInit" />
<!-- 下载桌台码 --> <!-- 下载桌台码 -->
<downloadTableCode ref="refDownloadTableCode" /> <downloadTableCode ref="refDownloadTableCode" />
<!-- 绑定桌码 --> <!-- 绑定桌码 -->
<bindCode ref="refBindCode" @refresh="tableInit" /> <bindCode ref="refBindCode" @refresh="tableInit" />
</div> </div>
</template> </template>
<script setup> <script setup>
@ -202,43 +276,43 @@ const envName = import.meta.env.VITE_APP_NAME;
//绑定桌码 //绑定桌码
const refBindCode = ref(); const refBindCode = ref();
function showBindCode(item) { function showBindCode(item) {
refBindCode.value.open(item); refBindCode.value.open(item);
} }
//桌台二维码 //桌台二维码
const refDownloadTableCode = ref(); const refDownloadTableCode = ref();
function showDownloadTableCode() { function showDownloadTableCode() {
refDownloadTableCode.value.show(); refDownloadTableCode.value.show();
} }
let loading = ref(false); let loading = ref(false);
//工具方法 //工具方法
function formatTime(milliseconds) { function formatTime(milliseconds) {
console.log(milliseconds); console.log(milliseconds);
if (!milliseconds) { if (!milliseconds) {
return ""; return "";
} }
const days = Math.floor(milliseconds / (1000 * 60 * 60 * 24)); const days = Math.floor(milliseconds / (1000 * 60 * 60 * 24));
const hours = Math.floor((milliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const hours = Math.floor((milliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60)); const minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60));
return `${days ? days + "天" : ""} ${hours ? hours + "时" : ""} ${minutes + "分"}`; return `${days ? days + "天" : ""} ${hours ? hours + "时" : ""} ${minutes + "分"}`;
} }
function downloadTableCpde() { } function downloadTableCpde() {}
function downloadShopCpde() { function downloadShopCpde() {
try { try {
const link = document.createElement("a"); const link = document.createElement("a");
link.href = shopUser.userInfo.smallQrcode; link.href = shopUser.userInfo.smallQrcode;
const fileName = shopUser.userInfo.shopName + "店铺码" + ".png"; const fileName = shopUser.userInfo.shopName + "店铺码" + ".png";
console.log(fileName); console.log(fileName);
link.setAttribute("download", fileName); link.setAttribute("download", fileName);
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
document.body.removeChild(link); document.body.removeChild(link);
this.$message.success("下载成功"); this.$message.success("下载成功");
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
} }
// 台桌 // 台桌
@ -249,278 +323,278 @@ function downloadShopCpde() {
* @param item * @param item
*/ */
function tableComman(command, item) { function tableComman(command, item) {
if (command === "bindTableCode") { if (command === "bindTableCode") {
showBindCode(item); showBindCode(item);
return; return;
} }
if (command === "edit") { if (command === "edit") {
return refAddTable.value.show(item); return refAddTable.value.show(item);
} }
if (command === "del") { if (command === "del") {
ElMessageBox.confirm("是否删除" + item.name + "台桌", "提示", { ElMessageBox.confirm("是否删除" + item.name + "台桌", "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning", type: "warning",
}) })
.then(async () => { .then(async () => {
await tableApi.delete(item.id); await tableApi.delete(item.id);
ElMessage.success("删除成功"); ElMessage.success("删除成功");
tableInit(); tableInit();
}) })
.catch(() => { }); .catch(() => {});
return; return;
} }
} }
const refAddTable = ref(null); const refAddTable = ref(null);
function addTableShow(item) { function addTableShow(item) {
refAddTable.value.show(item); refAddTable.value.show(item);
} }
const tableList = ref([]); const tableList = ref([]);
const tablequery = reactive({ const tablequery = reactive({
page: 1, page: 1,
size: 100, size: 100,
}); });
async function tableInit() { async function tableInit() {
const res = await tableApi.getList({ ...tablequery, areaId: tableArea.tabsSel }); const res = await tableApi.getList({ ...tablequery, areaId: tableArea.tabsSel });
tableList.value = res.records; tableList.value = res.records;
} }
// 区域 // 区域
let areaMap = ref({}); let areaMap = ref({});
const refAddEara = ref(null); const refAddEara = ref(null);
function addEaraShow(item) { function addEaraShow(item) {
refAddEara.value.show(item); refAddEara.value.show(item);
} }
const tabVlaue = ref(""); const tabVlaue = ref("");
const tabs = ref([]); const tabs = ref([]);
const tableArea = reactive({ const tableArea = reactive({
tabs: [], tabs: [],
tabsSel: "", tabsSel: "",
}); });
watch( watch(
() => tableArea.tabsSel, () => tableArea.tabsSel,
() => { () => {
tableInit(); tableInit();
} }
); );
//区域删除 //区域删除
function delArea(id) { function delArea(id) {
shopAreaApi.delete(id).then((res) => { shopAreaApi.delete(id).then((res) => {
ElMessage.success("删除成功"); ElMessage.success("删除成功");
areainit(); areainit();
}); });
} }
//区域列表初始化 //区域列表初始化
async function areainit() { async function areainit() {
const res = await shopAreaApi.getList(); const res = await shopAreaApi.getList();
console.log(res); console.log(res);
tableArea.tabs = res.records; tableArea.tabs = res.records;
areaMap.value = res.records.reduce((prve, cur) => { areaMap.value = res.records.reduce((prve, cur) => {
prve[cur.id] = cur.name; prve[cur.id] = cur.name;
return prve; return prve;
}, {}); }, {});
} }
async function diancanShow(item, key) { async function diancanShow(item, key) {
if (!key) { if (!key) {
router.push({ path: "/tool/index", query: { tableCode: item.tableCode } }); router.push({ path: "/tool/index", query: { tableCode: item.tableCode } });
return; return;
} }
if (key == "isAddGoods") { if (key == "isAddGoods") {
router.push({ path: "/tool/index", query: { id: item.orderId, key } }); router.push({ path: "/tool/index", query: { id: item.orderId, key } });
} }
if (key == "isPayOrder") { if (key == "isPayOrder") {
router.push({ path: "/tool/index", query: { id: item.orderId, key } }); router.push({ path: "/tool/index", query: { id: item.orderId, key } });
} }
} }
const tabClick = (tab) => { const tabClick = (tab) => {
console.log(tab); console.log(tab);
}; };
init(); init();
function init() { function init() {
areainit(); areainit();
tableInit(); tableInit();
} }
onMounted(() => { }); onMounted(() => {});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.el-tabs { .el-tabs {
margin-bottom: 0; margin-bottom: 0;
} }
</style> </style>
<style scoped lang="scss"> <style scoped lang="scss">
.cur-pointer { .cur-pointer {
cursor: pointer; cursor: pointer;
} }
.opacity-0 { .opacity-0 {
opacity: 0; opacity: 0;
} }
.icon { .icon {
margin-left: 10px; margin-left: 10px;
} }
:deep(.btn-group .el-button) { :deep(.btn-group .el-button) {
width: 100%; width: 100%;
} }
:deep(.el-dropdown-menu__item) { :deep(.el-dropdown-menu__item) {
line-height: 36px; line-height: 36px;
padding: 0 20px; padding: 0 20px;
min-width: 60px; min-width: 60px;
text-align: center; text-align: center;
} }
.state { .state {
display: flex; display: flex;
align-items: center; align-items: center;
.dot { .dot {
$size: 8px; $size: 8px;
width: $size; width: $size;
height: $size; height: $size;
border-radius: 50%; border-radius: 50%;
margin-right: $size; margin-right: $size;
} }
} }
.table_list { .table_list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 20px; gap: 20px;
min-height: 150px; min-height: 150px;
.empty_wrap { .empty_wrap {
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.btn-group { .btn-group {
display: flex; display: flex;
gap: 10px; gap: 10px;
} }
.item { .item {
padding: 1px; padding: 1px;
overflow: hidden; overflow: hidden;
border: 1px solid #ddd; border: 1px solid #ddd;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
border-radius: 6px; border-radius: 6px;
background-color: #1890ff; background-color: #1890ff;
max-width: 210px; max-width: 210px;
min-width: 190px; min-width: 190px;
&.using { &.using {
background-color: rgb(250, 85, 85); background-color: rgb(250, 85, 85);
} }
&.closed { &.closed {
background-color: rgb(221, 221, 221); background-color: rgb(221, 221, 221);
filter: grayscale(1); filter: grayscale(1);
} }
.total-price { .total-price {
line-height: 35px; line-height: 35px;
height: 35px; height: 35px;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
.new-top { .new-top {
height: 30px; height: 30px;
color: #fff; color: #fff;
padding: 0 12px; padding: 0 12px;
} }
.name { .name {
font-size: 16px; font-size: 16px;
line-height: 30px; line-height: 30px;
margin-right: 10px; margin-right: 10px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.box { .box {
height: 100%; height: 100%;
background-color: #fff; background-color: #fff;
border-radius: 3px 3px 6px 6px; border-radius: 3px 3px 6px 6px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
} }
.bottom { .bottom {
border-top: 1px solid #f7f7fa; border-top: 1px solid #f7f7fa;
padding: 6px 15px; padding: 6px 15px;
} }
.top { .top {
padding: 10px; padding: 10px;
background-color: #fff; background-color: #fff;
flex: 1; flex: 1;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
.row { .row {
display: flex; display: flex;
gap: 10px; gap: 10px;
.tips { .tips {
font-size: 12px; font-size: 12px;
} }
&.row1 { &.row1 {
justify-content: space-between; justify-content: space-between;
font-size: 14px; font-size: 14px;
} }
} }
} }
.btm { .btm {
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
background-color: #efefef; background-color: #efefef;
display: flex; display: flex;
border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
.btm_item { .btm_item {
flex: 1; flex: 1;
height: 40px; height: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
&:nth-child(1) { &:nth-child(1) {
&::before { &::before {
content: ""; content: "";
height: 50%; height: 50%;
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
position: absolute; position: absolute;
top: 25%; top: 25%;
right: 0; right: 0;
} }
} }
.i { .i {
color: #666; color: #666;
} }
} }
} }
} }
} }
</style> </style>