From 9e9e7b3bd346f5189becc20fb6ac127c320ec1ee Mon Sep 17 00:00:00 2001 From: wang <3597712270@qq.com> Date: 星期二, 26 三月 2024 13:31:38 +0800 Subject: [PATCH] 前端页面 --- UI-Project/src/layout/MainErpView.vue | 126 +++++++++++++++++------------------------ 1 files changed, 52 insertions(+), 74 deletions(-) diff --git a/UI-Project/src/layout/MainErpView.vue b/UI-Project/src/layout/MainErpView.vue index 20334e7..d5c18f5 100644 --- a/UI-Project/src/layout/MainErpView.vue +++ b/UI-Project/src/layout/MainErpView.vue @@ -75,56 +75,31 @@ </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" @@ -154,9 +129,13 @@ </template> <style scoped> +#all{ + background-color: #eee; + height: 100%; +} .el-container{ height: 100vh; - width: 100vw + width: 99vw } *{ @@ -167,7 +146,17 @@ 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; @@ -181,17 +170,11 @@ width: 99%; float: right; height: 99%; + background-color: #fff; } - - - - /*------------*/ - - - -.menu div div{ +/* .menu div div{ width: 138px; height: 35px; @@ -208,16 +191,12 @@ 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; @@ -243,21 +222,21 @@ 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; } @@ -268,7 +247,7 @@ } ul li a:hover { - color: #ffffff; + color: #1087ff; } .item_divider { @@ -282,6 +261,7 @@ width: 138px; height: 35px; display: block; + /* text-align: justify; */ text-decoration: none; color: white; font-size: 14px; @@ -289,12 +269,12 @@ } .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; @@ -306,12 +286,12 @@ .menu_title:hover { /* background: #dedede; */ - color: #ffffff; + color: #3b9af9; } .indicator { display: block; - width: 50px; + width: 40px; height: 35px; font-weight: bold; position: absolute; @@ -344,8 +324,6 @@ .enter-x-left:nth-child(4){ animation-delay: 0.4s; } - - @keyframes enter-x-left { to { opacity: 1; -- Gitblit v1.8.0