| | |
| | | import userInfo from '@/stores/userInfo' |
| | | import {Close, Grid, Histogram, MessageBox, SwitchButton} from "@element-plus/icons-vue"; |
| | | const store=userInfo() |
| | | |
| | | |
| | | const router = useRouter() |
| | | const userStore = useUserInfoStore() |
| | | const user = userStore.user.userName |
| | |
| | | }) |
| | | router.push("/login") |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | //提取模块列表 |
| | | let menuList=$ref([]) |
| | | request.get("/menu").then((res) => { |
| | |
| | | router.push("/login") |
| | | } |
| | | }) |
| | | |
| | | |
| | | //获取菜单列表 |
| | | let menuItemList=$ref([]) |
| | | request.get("/menuItem").then((res) => { |
| | |
| | | router.push("/login") |
| | | } |
| | | }) |
| | | |
| | | |
| | | const menu = ref(null) |
| | | let indexKey = ref(null) |
| | | function handleOpen(key) { |
| | |
| | | }, |
| | | {deep:true} |
| | | ) |
| | | |
| | | |
| | | router.beforeEach((to, from) => { |
| | | //return false |
| | | }) |
| | | |
| | | |
| | | |
| | | |
| | | let openFlag = $ref(null) |
| | | //原始菜单打开 |
| | | const openMenu = (menuID) => { |
| | |
| | | openFlag = menuID |
| | | } |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | </script> |
| | | |
| | | |
| | | <template> |
| | | <div> |
| | | <el-container> |
| | |
| | | <img src="../assets/northGlass.ico" alt="" style="max-width: 100%;max-height: 100%"> |
| | | <h3 style="margin: 1rem ;font-weight: bold;width: 20vw;"> 欢迎{{ user }}使用北玻ERP系统!</h3> |
| | | <span style="height: 70%;width: 78vw;margin-top: 1rem;" > |
| | | |
| | | |
| | | <el-button class="sys-quit" @click="quit" type="info" round> |
| | | <el-icon size="large"><SwitchButton size=""/></el-icon> |
| | | </el-button> |
| | | </span> |
| | | |
| | | |
| | | </div> |
| | | </el-header> |
| | | <el-container > |
| | |
| | | default-active="2" |
| | | text-color="#fff"> |
| | | <el-sub-menu |
| | | |
| | | |
| | | v-for="items in menuList" |
| | | :index="items.id" |
| | | :key="items.id"> |
| | |
| | | {{ menuItem.itemName}} |
| | | </el-menu-item> |
| | | </router-link> |
| | | |
| | | |
| | | </el-sub-menu> |
| | | </el-menu>--> |
| | | <div class="menu" > |
| | | <div v-for="items in menuList"> |
| | | <div class='menu_title' @click="openMenu(items.id)" >{{items.menuName}}<span class='indicator' >▼</span></div> |
| | | <ul class='enter-x-left' v-show="openFlag==items.id"> |
| | | |
| | | |
| | | <li v-for="menuItem in menuItemList" |
| | | v-show="items.id==menuItem.menuID" |
| | | style="margin-bottom: 2px" |
| | |
| | | :to="{path:menuItem.url}"> |
| | | {{ menuItem.itemName}} |
| | | </router-link> |
| | | |
| | | |
| | | </li> |
| | | </ul> |
| | | </div> |
| | | </div> |
| | | </el-aside> |
| | | |
| | | |
| | | <el-main> |
| | | <div id="main"> |
| | | <router-view></router-view> |
| | | </div> |
| | | </el-main> |
| | | |
| | | |
| | | </el-container> |
| | | </el-container> |
| | | </div> |
| | | </template> |
| | | |
| | | |
| | | <style scoped> |
| | | .el-container{ |
| | | height: 100vh; |
| | | width: 100vw |
| | | } |
| | | |
| | | |
| | | *{ |
| | | padding: 0; |
| | | margin: 0; |
| | |
| | | float: right; |
| | | margin-right: 1rem; |
| | | width: 5rem; |
| | | |
| | | |
| | | } |
| | | :deep(span){ |
| | | margin-right: 0; |
| | | |
| | | |
| | | } |
| | | .el-collapse{ |
| | | font-size: 16px; |
| | |
| | | float: right; |
| | | height: 99%; |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | /*------------*/ |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | .menu div div{ |
| | | |
| | | |
| | | width: 138px; |
| | | height: 35px; |
| | | line-height: 35px; |
| | |
| | | cursor: pointer; |
| | | border-radius:8px; |
| | | /* outline: none; */ |
| | | |
| | | |
| | | background-color:#5CADFE; |
| | | box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19); |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | } |
| | | |
| | | |
| | | .menu { |
| | | width: 138px; |
| | | height: 33px; |
| | | line-height: 25px; |
| | | |
| | | |
| | | color: #000000; |
| | | font-size: 16px; |
| | | padding-left: 15px; |
| | | padding-right: 2px; |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | } |
| | | |
| | | |
| | | ul { |
| | | height: auto; |
| | | margin: 1px auto; |
| | | text-align: center; |
| | | } |
| | | |
| | | |
| | | ul li { |
| | | |
| | | |
| | | height: 28px; |
| | | line-height: 30px; |
| | | background: rgb(128, 128, 128); |
| | |
| | | text-align: left; |
| | | border-radius:8px; |
| | | /* outline: none; */ |
| | | |
| | | |
| | | background: #5CADFE; |
| | | box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19); |
| | | } |
| | | |
| | | |
| | | ul li:hover { |
| | | background:#5CADFE ; |
| | | color: #ffffff; |
| | | } |
| | | |
| | | |
| | | ul li a { |
| | | text-decoration: none; |
| | | color: #000000; |
| | | font-size: 14px; |
| | | } |
| | | ul li a:hover { |
| | | |
| | | |
| | | color: #ffffff; |
| | | } |
| | | |
| | | |
| | | .item_divider { |
| | | width: 118px; |
| | | height: 0px; |
| | |
| | | font-size: 14px; |
| | | text-decoration: none; |
| | | } |
| | | |
| | | |
| | | .menu_title { |
| | | width: 138px; |
| | | height: 35px; |
| | |
| | | position: relative; |
| | | font-weight: bold; |
| | | overflow: hidden; |
| | | |
| | | |
| | | } |
| | | |
| | | |
| | | .menu_title:hover { |
| | | /* background: #dedede; */ |
| | | color: #ffffff; |
| | | } |
| | | |
| | | |
| | | .indicator { |
| | | display: block; |
| | | width: 50px; |
| | |
| | | transition: all 0.3s ease; |
| | | text-align: center; |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | /* 动画效果 */ |
| | | .enter-x-left { |
| | | z-index: 9; |
| | |
| | | .enter-x-left:nth-child(4){ |
| | | animation-delay: 0.4s; |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | @keyframes enter-x-left { |
| | | to { |
| | | opacity: 1; |
| | | transform: translateX(0); |
| | | } |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | </style> |