197 lines
4.4 KiB
Vue
197 lines
4.4 KiB
Vue
<template>
|
|
<div class="left_menu_wrap">
|
|
<div class="item online">
|
|
<el-icon class="icon">
|
|
<Monitor />
|
|
</el-icon>
|
|
<el-text type="success">在线</el-text>
|
|
</div>
|
|
<router-link class="item" :class="{ active: route.path == item.path }" v-for="item in menus" :key="item.path"
|
|
:to="item.path">
|
|
<el-icon class="icon">
|
|
<component :is="item.icon" />
|
|
</el-icon>
|
|
<el-text class="text">{{ item.label }}</el-text>
|
|
</router-link>
|
|
<div class="item more" @click="moreref.show()">
|
|
<el-icon class="icon">
|
|
<Operation />
|
|
</el-icon>
|
|
<el-text class="text">更多</el-text>
|
|
</div>
|
|
</div>
|
|
<!-- 更多 -->
|
|
<more ref="moreref"></more>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import more from '@/components/more.vue'
|
|
const route = useRoute()
|
|
const moreref = ref(null)
|
|
console.log(route.path)
|
|
const menus = ref([
|
|
{
|
|
label: '收银',
|
|
path: '/',
|
|
icon: 'ShoppingCartFull'
|
|
},
|
|
{
|
|
label: '台桌',
|
|
path: '/table',
|
|
icon: 'Reading'
|
|
},
|
|
{
|
|
label: '订单',
|
|
path: '/order',
|
|
icon: 'Tickets'
|
|
},
|
|
{
|
|
label: '网络',
|
|
path: '/internat',
|
|
icon: 'Paperclip'
|
|
},
|
|
{
|
|
label: '会员',
|
|
path: '/member',
|
|
icon: 'User'
|
|
},
|
|
{
|
|
label: '交班',
|
|
path: '/work',
|
|
icon: 'SwitchButton'
|
|
}
|
|
])
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.drawerbox {
|
|
:deep(.el-drawer__body) {
|
|
background: #1c1d1f !important;
|
|
}
|
|
|
|
.drawerbox_box {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.drawerbox_bo_box {
|
|
width: 100%;
|
|
|
|
.drawerbox_bo_box_itemb_felx {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
padding: 0 20px;
|
|
|
|
.drawerbox_bo_box_itembox:nth-child(1) {
|
|
margin-left: 0px;
|
|
|
|
}
|
|
|
|
.drawerbox_bo_box_itembox {
|
|
width: 20%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-left: 40px;
|
|
|
|
.drawerbox_bo_box_icon {
|
|
border-radius: 6px;
|
|
background: #2196f3;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
.drawerbox_bo_box_icontext {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.left_menu_wrap {
|
|
height: 100vh;
|
|
width: 90px;
|
|
background-color: #555;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-decoration: none;
|
|
|
|
&:first-child {
|
|
border-bottom: 1px solid #666;
|
|
}
|
|
|
|
&.online {
|
|
|
|
.icon,
|
|
.text {
|
|
color: var(--el-color-success);
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
background-color: #333;
|
|
|
|
.icon,
|
|
.text {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
&.more {
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.icon {
|
|
color: #999;
|
|
font-size: 32px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.text {
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
</style> |