96 lines
2.6 KiB
Vue
96 lines
2.6 KiB
Vue
<template>
|
|
<el-aside :width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246); box-shadow: rgba(0, 21, 155, 0.35) 2px 0 6px">
|
|
<el-aside :style="AsideObj">
|
|
<el-menu
|
|
style="height: 100vh; overflow-x: hidden"
|
|
background-color="rgb(170, 113, 81)"
|
|
:collapse="isCollapse"
|
|
:collapse-transition="false"
|
|
text-color="#fff"
|
|
router
|
|
active-text-color="#ffd04b">
|
|
<div style="height: 80px; color: white; font-weight: bold;
|
|
display: flex; align-items: center; justify-content: center">
|
|
<img src="../../assets/logo.png" alt="" style="height: 30px">
|
|
<span style="margin-left: 5px" v-show="isShow">泠珑水阁管理系统</span>
|
|
</div>
|
|
|
|
<el-sub-menu index="1">
|
|
<template #title>
|
|
<el-icon><HomeFilled /></el-icon>
|
|
<span>用户管理</span>
|
|
</template>
|
|
|
|
<el-menu-item index="/UserManagement">
|
|
<el-icon><List /></el-icon>
|
|
<span slot="title">用户列表</span>
|
|
</el-menu-item>
|
|
|
|
<el-menu-item index="/PersonalCenter">
|
|
<el-icon><UserFilled /></el-icon>
|
|
<span slot="title">个人中心</span>
|
|
</el-menu-item>
|
|
</el-sub-menu>
|
|
|
|
<el-sub-menu index="2">
|
|
<template #title>
|
|
<el-icon><HomeFilled /></el-icon>
|
|
<span>商品管理</span>
|
|
</template>
|
|
|
|
<el-menu-item index="/AddProduct">
|
|
<el-icon><Menu /></el-icon>
|
|
<span slot="title">添加商品</span>
|
|
</el-menu-item>
|
|
|
|
<el-menu-item index="/MerchandiseCenter">
|
|
<el-icon><UserFilled /></el-icon>
|
|
<span slot="title">商品中心</span>
|
|
</el-menu-item>
|
|
</el-sub-menu>
|
|
|
|
</el-menu>
|
|
</el-aside>
|
|
</el-aside>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {ref} from 'vue'
|
|
import { defineProps } from 'vue';
|
|
import emitter from '@/utils/emitter'
|
|
import router from '@/router';
|
|
import {List} from "@element-plus/icons-vue";
|
|
defineProps(['send-data'])
|
|
|
|
const showLog = ref(true)
|
|
|
|
const isCollapse = ref(false)
|
|
const isShow = ref(true)
|
|
const sideWidth = ref(200)
|
|
const AsideObj = ref({
|
|
width: '200px'
|
|
})
|
|
|
|
emitter.on('Aside', (value:any) => {
|
|
showLog.value = value
|
|
if(showLog.value){
|
|
AsideObj.value.width = '64px'
|
|
isCollapse.value = true
|
|
isShow.value = false
|
|
sideWidth.value = 64
|
|
}else{
|
|
AsideObj.value.width = '200px'
|
|
isCollapse.value = false
|
|
isShow.value = true
|
|
sideWidth.value = 200
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
</script>
|
|
<style scoped>
|
|
|
|
</style> |