优化更多

This commit is contained in:
gyq 2024-07-10 13:39:17 +08:00
parent 91670a440b
commit a70fa744b2
1 changed files with 166 additions and 170 deletions

View File

@ -1,18 +1,24 @@
<template> <template>
<div class="drawerbox"> <div class="drawerbox">
<el-drawer size="60%" :with-header="false" direction="rtl" v-model="dialogVisible" style="padding: 0;"> <el-drawer
<div class="drawerbox_box"> size="60%"
<div class="drawerbox_bo_top"> :with-header="false"
<div class="drawerbox_bo_top_left"> direction="rtl"
<div class="drawerbox_bo_top_left_one"> v-model="dialogVisible"
{{ store.userInfo.loginName }} style="padding: 0"
</div> >
<div class="drawerbox_bo_top_left_tow" style="margin-top: 10px;"> <div class="drawerbox_box">
收银员{{ store.userInfo.userCode }} <span style="color: #666;">登录{{ <div class="drawerbox_bo_top">
store.userInfo.loginTime }}</span> <div class="drawerbox_bo_top_left">
</div> <div class="drawerbox_bo_top_left_one">
</div> {{ store.userInfo.shopName }}
<!-- <div class="drawerbox_bo_top_ring"> </div>
<div class="drawerbox_bo_top_left_tow" style="margin-top: 10px">
收银员{{ store.userInfo.userCode }}
<span style="color: #666">{{ store.userInfo.loginTime }}</span>
</div>
</div>
<!-- <div class="drawerbox_bo_top_ring">
<div class="drawerbox_bo_top_ring_tb"> <div class="drawerbox_bo_top_ring_tb">
<el-icon style="margin: 0 auto;" size="20"> <el-icon style="margin: 0 auto;" size="20">
<FolderAdd /> <FolderAdd />
@ -26,51 +32,46 @@
<span>最小化</span> <span>最小化</span>
</div> </div>
</div> --> </div> -->
</div> </div>
<div class="drawerbox_bo_box"> <div class="drawerbox_bo_box">
<div style="padding:10px;color: #999; font-weight:bold;">系统</div> <div style="padding: 10px; color: #999; font-weight: bold">系统</div>
<div class="drawerbox_bo_box_itemb_felx"> <div class="drawerbox_bo_box_itemb_felx">
<div class="drawerbox_bo_box_itembox"> <div class="drawerbox_bo_box_itembox">
<div class="drawerbox_bo_box_icon"> <div class="drawerbox_bo_box_icon">
<el-icon size="40"> <el-icon size="40">
<Setting /> <Setting />
</el-icon> </el-icon>
</div> </div>
<div class="drawerbox_bo_box_icontext"> <div class="drawerbox_bo_box_icontext">设置</div>
设置 </div>
</div> <div class="drawerbox_bo_box_itembox" @click="openCallHandle">
</div> <div class="drawerbox_bo_box_icon">
<div class="drawerbox_bo_box_itembox" @click="openCallHandle"> <el-icon size="40">
<div class="drawerbox_bo_box_icon"> <Bell />
<el-icon size="40"> </el-icon>
<Bell /> </div>
</el-icon> <div class="drawerbox_bo_box_icontext">叫号</div>
</div> </div>
<div class="drawerbox_bo_box_icontext"> <div
叫号 class="drawerbox_bo_box_itembox"
</div> @click="router.push({ name: 'device_list' })"
</div> >
<div class="drawerbox_bo_box_itembox" @click="router.push({ name: 'device_list' })"> <div class="drawerbox_bo_box_icon">
<div class="drawerbox_bo_box_icon"> <el-icon size="40">
<el-icon size="40"> <TurnOff />
<TurnOff /> </el-icon>
</el-icon> </div>
</div> <div class="drawerbox_bo_box_icontext">设备管理</div>
<div class="drawerbox_bo_box_icontext"> </div>
设备管理 <div class="drawerbox_bo_box_itembox" @click="screenref.shows()">
</div> <div class="drawerbox_bo_box_icon">
</div> <el-icon size="40">
<div class="drawerbox_bo_box_itembox" @click="screenref.shows()"> <Switch />
<div class="drawerbox_bo_box_icon"> </el-icon>
<el-icon size="40"> </div>
<Switch /> <div class="drawerbox_bo_box_icontext">锁屏</div>
</el-icon> </div>
</div> <!-- <div class="drawerbox_bo_box_itembox" @click="to('webview', {
<div class="drawerbox_bo_box_icontext">
锁屏
</div>
</div>
<!-- <div class="drawerbox_bo_box_itembox" @click="to('webview', {
url: 'https://cashiernewadmin.sxczgkj.cn/', url: 'https://cashiernewadmin.sxczgkj.cn/',
title: '后台管理' title: '后台管理'
})"> })">
@ -83,155 +84,150 @@
后台管理 后台管理
</div> </div>
</div> --> </div> -->
</div> </div>
</div> </div>
</div> </div>
<div class="boxabsolute"> <div class="boxabsolute">
<div> <div>©银收客 v{{ packageData.version }}</div>
©银收客 v{{ packageData.version }} <!-- <div>
</div>
<!-- <div>
有效期 有效期
</div> --> </div> -->
</div> </div>
</el-drawer> </el-drawer>
</div> </div>
<screen ref="screenref"></screen> <screen ref="screenref"></screen>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref } from "vue";
import { useRouter } from 'vue-router' import { useRouter } from "vue-router";
import { useUser } from "@/store/user.js" import { useUser } from "@/store/user.js";
import screen from '@/components/screen.vue' import screen from "@/components/screen.vue";
import packageData from '../../package.json' import packageData from "../../package.json";
const router = useRouter() const router = useRouter();
const emit = defineEmits(['openCall']) const emit = defineEmits(["openCall"]);
const store = useUser() const store = useUser();
const screenref = ref(null) const screenref = ref(null);
const dialogVisible = ref(false) const dialogVisible = ref(false);
function show() { function show() {
dialogVisible.value = true dialogVisible.value = true;
} }
// //
function openCallHandle() { function openCallHandle() {
dialogVisible.value = false dialogVisible.value = false;
emit('openCall') emit("openCall");
} }
// //
function to(pathName, data) { function to(pathName, data) {
router.push({ router.push({
name: pathName, name: pathName,
query: data query: data,
}) });
} }
defineExpose({ defineExpose({
show show,
}) });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.drawerbox { .drawerbox {
:deep(.el-drawer__body) { :deep(.el-drawer__body) {
background: #1c1d1f !important; background: #1c1d1f !important;
position: relative; position: relative;
}
.boxabsolute {
position: absolute;
bottom: 20px;
left: 50%;
transform: translate(-50%);
div {
color: #8c9196;
text-align: center;
} }
.boxabsolute { div:nth-child(2) {
position: absolute; margin-top: 10px;
bottom: 20px; }
left: 50%; }
transform: translate(-50%);
div { .drawerbox_box {
color: #8c9196; color: #fff;
.drawerbox_bo_top {
padding: 20px 0;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ccc;
.drawerbox_bo_top_left {
display: flex;
flex-direction: column;
}
.drawerbox_bo_top_ring {
display: flex;
align-items: center;
.drawerbox_bo_top_ring_tb {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
border-radius: 6px;
padding: 6px 10px;
span {
width: 80px;
margin-top: 5px;
text-align: center; text-align: center;
}
} }
}
div:nth-child(2) {
margin-top: 10px;
}
} }
.drawerbox_box { .drawerbox_bo_box {
color: #fff; width: 100%;
.drawerbox_bo_top { .drawerbox_bo_box_itemb_felx {
padding: 20px 0; display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.drawerbox_bo_box_itembox {
width: 20%;
display: flex;
flex-direction: column;
align-items: center;
margin-right: 20px;
margin-bottom: 30px;
.drawerbox_bo_box_icon {
border-radius: 6px;
background: #2196f3;
width: 100px;
height: 100px;
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 1px solid #ccc; justify-content: center;
}
.drawerbox_bo_top_left {
display: flex;
flex-direction: column;
}
.drawerbox_bo_top_ring {
display: flex;
align-items: center;
.drawerbox_bo_top_ring_tb {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
border-radius: 6px;
padding: 6px 10px;
span {
width: 80px;
margin-top: 5px;
text-align: center;
}
}
}
}
.drawerbox_bo_box {
width: 100%;
.drawerbox_bo_box_itemb_felx {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.drawerbox_bo_box_itembox {
width: 20%;
display: flex;
flex-direction: column;
align-items: center;
margin-right: 20px;
margin-bottom: 30px;
.drawerbox_bo_box_icon {
border-radius: 6px;
background: #2196f3;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.drawerbox_bo_box_icontext {
margin-top: 10px;
}
}
}
.drawerbox_bo_box_icontext {
margin-top: 10px;
}
} }
}
} }
}
} }
</style> </style>