117 lines
2.4 KiB
Vue
117 lines
2.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">
|
|
<el-icon class="icon">
|
|
<Operation />
|
|
</el-icon>
|
|
<el-text class="text">更多</el-text>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
const route = useRoute()
|
|
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">
|
|
.left_menu_wrap {
|
|
height: 100vh;
|
|
width: 120px;
|
|
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: 30px;
|
|
}
|
|
|
|
.icon {
|
|
color: #999;
|
|
font-size: 32px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.text {
|
|
color: #999;
|
|
font-size: 22px;
|
|
}
|
|
}
|
|
}
|
|
</style> |