From bf5c42b55da25fbcbb8f92bde539a8e27d800b40 Mon Sep 17 00:00:00 2001 From: wuyouming666 <2265557248@qq.com> Date: 星期二, 26 三月 2024 14:16:59 +0800 Subject: [PATCH] Merge branch 'master' of http://10.153.19.25:10101/r/HangZhouMes --- UI-Project/src/layout/MainErpView.vue | 210 +++++++++++++++++++++++----------------------------- 1 files changed, 94 insertions(+), 116 deletions(-) diff --git a/UI-Project/src/layout/MainErpView.vue b/UI-Project/src/layout/MainErpView.vue index 3c66a15..d5c18f5 100644 --- a/UI-Project/src/layout/MainErpView.vue +++ b/UI-Project/src/layout/MainErpView.vue @@ -8,7 +8,7 @@ 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 @@ -19,8 +19,8 @@ }) router.push("/login") } - - + + //鎻愬彇妯″潡鍒楄〃 let menuList=$ref([]) request.get("/menu").then((res) => { @@ -31,7 +31,7 @@ router.push("/login") } }) - + //鑾峰彇鑿滃崟鍒楄〃 let menuItemList=$ref([]) request.get("/menuItem").then((res) => { @@ -42,7 +42,7 @@ router.push("/login") } }) - + const menu = ref(null) let indexKey = ref(null) function handleOpen(key) { @@ -55,12 +55,12 @@ }, {deep:true} ) - + router.beforeEach((to, from) => { //return false }) - - + + let openFlag = $ref(null) //鍘熷鑿滃崟鎵撳紑 const openMenu = (menuID) => { @@ -70,63 +70,38 @@ openFlag = menuID } } - - + + </script> - + <template> - <div> + <div id="all"> <el-container> <el-header > - <div style="height: 100%;width: 100%;display: flex"> + <div style="height: 100%;width: 100%;display: flex;background-color: #fff;"> <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> + <h3 style="margin: 1rem ;font-weight: bold;width: 20vw;"> 娆㈣繋{{ user }}浣跨敤鍖楃幓MES绯荤粺锛�</h3> <span style="height: 70%;width: 78vw;margin-top: 1rem;" > - - <el-button class="sys-quit" @click="quit" type="info" round> + <el-button class="sys-quit" @click="quit" round> <el-icon size="large"><SwitchButton size=""/></el-icon> </el-button> </span> - </div> </el-header> + <div id="line"></div> <el-container > - <el-aside width="160px" style="height: 97%; " > -<!-- <el-menu - style=" border-radius:0.5rem;border: 0.01rem solid #409EFF;margin-bottom: 0.5rem" - @open="handleOpen" - ref="menu" - active-color="#ffd04b" - background-color="#409EFF" - default-active="2" - text-color="#fff"> - <el-sub-menu - - v-for="items in menuList" - :index="items.id" - :key="items.id"> - <template #title> - <el-icon v-if="items.id==1"><Grid/></el-icon> - <el-icon v-if="items.id==2"><Histogram/></el-icon> - <el-icon v-if="items.id==3"><MessageBox/></el-icon> - <span style="font-weight: bold;">{{items.menuName}}</span> - </template> - <router-link - v-show="items.id==menuItem.menuID" - v-for="menuItem in menuItemList" - :to="{path:menuItem.url}"> - <el-menu-item > - {{ menuItem.itemName}} - </el-menu-item> - </router-link> - - </el-sub-menu> - </el-menu>--> + <el-aside width="160px" style="height: 99%; background-color: #fff;" > <div class="menu" > - <div v-for="items in menuList"> - <div class='menu_title' @click="openMenu(items.id)" >{{items.menuName}}<span class='indicator' >鈻�</span></div> + <div v-for="items in menuList"> + <div class='menu_title' @click="openMenu(items.id)" > + <!-- <span class='indicator' >鈱�</span> --> + <!-- <span class='indicator' >鈮�</span> --> + <!-- <img src="../assets/9.png" alt="" style="max-width: 50%;max-height: 50%;"> --> + <span>鈽�</span> + {{items.menuName}} + </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" @@ -135,30 +110,34 @@ :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> +#all{ + background-color: #eee; + height: 100%; +} .el-container{ height: 100vh; - width: 100vw + width: 99vw } - + *{ padding: 0; margin: 0; @@ -167,11 +146,21 @@ float: right; margin-right: 1rem; width: 5rem; - +} +/* 妯嚎 */ +#line{ +float:right; +width: 100%; +height: 1px; +/* margin-top: 0.5em; */ +margin-bottom: 0.5em; +background:#d4c4c4; +position: relative; +text-align: center; } :deep(span){ margin-right: 0; - + } .el-collapse{ font-size: 16px; @@ -181,18 +170,12 @@ width: 99%; float: right; height: 99%; + background-color: #fff; } - - - - /*------------*/ - - - - -.menu div div{ - + +/* .menu div div{ + width: 138px; height: 35px; line-height: 35px; @@ -208,69 +191,65 @@ border-bottom: 12px ; margin-bottom:4px; text-align: left; - cursor: pointer; - border-radius:8px; + 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); - - - -} - + /* 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); + /* background: rgb(128, 128, 128); */ color: #000000; padding-left: 36px; cursor: pointer; overflow: hidden; text-align: left; - border-radius:8px; + /* 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); + + /* 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 ; + /* background:#5CADFE ; */ color: #ffffff; } - + ul li a { text-decoration: none; color: #000000; font-size: 14px; } ul li a:hover { - - color: #ffffff; + + color: #1087ff; } - + .item_divider { width: 118px; height: 0px; @@ -282,36 +261,37 @@ width: 138px; height: 35px; display: block; + /* text-align: justify; */ text-decoration: none; color: white; font-size: 14px; text-decoration: none; } - + .menu_title { - width: 138px; - height: 35px; - line-height: 35px; - background: #fafafa; - color: rgb(128, 128, 128); - font-size: 16px; + width: 140px; + height: 45px; + line-height: 55px; + /* background: #fafafa; */ + color: rgb(43, 42, 42); + font-size: 17px; padding-left: 15px; transition: all 0.3s ease; cursor: pointer; position: relative; font-weight: bold; overflow: hidden; - + } - + .menu_title:hover { /* background: #dedede; */ - color: #ffffff; + color: #3b9af9; } - + .indicator { display: block; - width: 50px; + width: 40px; height: 35px; font-weight: bold; position: absolute; @@ -320,9 +300,9 @@ transition: all 0.3s ease; text-align: center; } - - - + + + /* 鍔ㄧ敾鏁堟灉 */ .enter-x-left { z-index: 9; @@ -344,14 +324,12 @@ .enter-x-left:nth-child(4){ animation-delay: 0.4s; } - - @keyframes enter-x-left { to { opacity: 1; transform: translateX(0); } } - - + + </style> \ No newline at end of file -- Gitblit v1.8.0