|
@@ -10,58 +10,118 @@
|
|
|
<img src="../assets/img/luzhougongan.png" alt="" />
|
|
|
</span>
|
|
|
</div>
|
|
|
- <el-menu
|
|
|
- :default-active="activeIndex"
|
|
|
- class="el-menu-demo"
|
|
|
- mode="horizontal"
|
|
|
- @select="handleSelect"
|
|
|
- text-color="#006C9AFF"
|
|
|
- active-text-color="#51CFFEFF"
|
|
|
- background-color="transparent"
|
|
|
- >
|
|
|
- <el-menu-item index="0">
|
|
|
- <span class="nav1"><img src="../assets/img/nav-home.png"></span>首页
|
|
|
- </el-menu-item>
|
|
|
- <el-menu-item index="1">
|
|
|
- <span class="nav1"><img src="../assets/img/nav-search.png"></span>快速检索
|
|
|
- </el-menu-item>
|
|
|
- <el-submenu index="2">
|
|
|
- <template slot="title">
|
|
|
- <span class="nav1"><img src="../assets/img/nav-doc.png"></span>文档管理
|
|
|
+ <el-menu
|
|
|
+ :default-active="activeIndex"
|
|
|
+ class="el-menu-demo"
|
|
|
+ mode="horizontal"
|
|
|
+ @select="handleSelect"
|
|
|
+ text-color="#006C9AFF"
|
|
|
+ active-text-color="#51CFFEFF"
|
|
|
+ background-color="transparent"
|
|
|
+ router
|
|
|
+ :stroke-width=15
|
|
|
+ >
|
|
|
+ <el-menu-item index="/home/page">
|
|
|
+ <span class="nav1">
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ srcIndex == '/home/page'
|
|
|
+ ? icoUrl[0]['home1']
|
|
|
+ : icoUrl[0]['home2']
|
|
|
+ "
|
|
|
+ /> </span
|
|
|
+ >首页
|
|
|
+ </el-menu-item>
|
|
|
+ <el-menu-item index="/home/retrieval">
|
|
|
+ <span class="nav1">
|
|
|
+ <img :src="
|
|
|
+ srcIndex == '/home/retrieval'
|
|
|
+ ?icoUrl[1]['search1']
|
|
|
+ :icoUrl[1]['search2']
|
|
|
+ " />
|
|
|
+ </span
|
|
|
+ >快速检索
|
|
|
+ </el-menu-item>
|
|
|
+ <el-submenu index="2">
|
|
|
+ <template slot="title">
|
|
|
+ <span class="nav1">
|
|
|
+ <img :src="
|
|
|
+ srcIndex=='2'
|
|
|
+ ?icoUrl[2]['doc1']
|
|
|
+ :icoUrl[2]['doc2']
|
|
|
+ " />
|
|
|
+ </span
|
|
|
+ >文档管理
|
|
|
</template>
|
|
|
- <el-menu-item index="2-1">部门文档</el-menu-item>
|
|
|
- <el-menu-item index="2-2">公共文档</el-menu-item>
|
|
|
- <el-menu-item index="2-3">个人文档</el-menu-item>
|
|
|
- <el-menu-item index="2-3">文档设置</el-menu-item>
|
|
|
- </el-submenu>
|
|
|
- <el-submenu index="3">
|
|
|
- <template slot="title">
|
|
|
- <span class="nav1"><img src="../assets/img/nav-person.png"></span>个人设置
|
|
|
+ <el-menu-item index="/home/file/part" >部门文档</el-menu-item>
|
|
|
+ <el-menu-item index="/home/file/publi" >公共文档</el-menu-item>
|
|
|
+ <el-menu-item index="/home/file/individual" >个人文档</el-menu-item>
|
|
|
+ <el-menu-item index="/home/file/set" >文档设置</el-menu-item>
|
|
|
+ </el-submenu>
|
|
|
+ <el-submenu index="3">
|
|
|
+ <template slot="title">
|
|
|
+ <span class="nav1">
|
|
|
+ <img :src="
|
|
|
+ srcIndex=='3'
|
|
|
+ ?icoUrl[3]['person1']
|
|
|
+ :icoUrl[3]['person2']
|
|
|
+ " />
|
|
|
+ <!-- <img src="../assets/img/nav-person1.png"> --> </span
|
|
|
+ >个人设置
|
|
|
</template>
|
|
|
- <el-menu-item index="3-1">个人文档分类</el-menu-item>
|
|
|
- <el-menu-item index="3-2">个人存储空间</el-menu-item>
|
|
|
- <el-menu-item index="3-3">登录密码修改</el-menu-item>
|
|
|
- </el-submenu>
|
|
|
- <el-submenu index="4">
|
|
|
- <template slot="title">
|
|
|
- <span class="nav1"><img src="../assets/img/nav-setting.png"></span>系统管理
|
|
|
+ <el-menu-item index="/home/personal/classify"
|
|
|
+ >个人文档分类</el-menu-item
|
|
|
+ >
|
|
|
+ <el-menu-item index="/home/personal/space"
|
|
|
+ >个人存储空间</el-menu-item
|
|
|
+ >
|
|
|
+ <el-menu-item index="/home/personal/modify"
|
|
|
+ >登录密码修改</el-menu-item
|
|
|
+ >
|
|
|
+ </el-submenu>
|
|
|
+ <el-submenu index="4">
|
|
|
+ <template slot="title">
|
|
|
+ <span class="nav1">
|
|
|
+ <img :src="
|
|
|
+ srcIndex=='4'
|
|
|
+ ?icoUrl[4]['search1']
|
|
|
+ :icoUrl[4]['search2']
|
|
|
+ " />
|
|
|
+ </span
|
|
|
+ >系统管理
|
|
|
</template>
|
|
|
- <el-menu-item index="4-1">组织管理</el-menu-item>
|
|
|
- <el-menu-item index="4-2">用户管理</el-menu-item>
|
|
|
- <el-menu-item index="4-3">权限管理</el-menu-item>
|
|
|
- <el-menu-item index="4-4">系统日志管理</el-menu-item>
|
|
|
- <el-menu-item index="4-5">存储空间管理</el-menu-item>
|
|
|
+ <el-menu-item index="/home/system/user">用户管理</el-menu-item>
|
|
|
+ <el-menu-item index="/home/system/role">角色管理</el-menu-item>
|
|
|
+ <el-menu-item index="/home/system/menu">菜单管理</el-menu-item>
|
|
|
+ <el-menu-item index="/home/system/department"
|
|
|
+ >部门管理</el-menu-item
|
|
|
+ >
|
|
|
+ <el-menu-item index="/home/system/post">岗位管理</el-menu-item>
|
|
|
+ <el-menu-item index="/home/system/dictionary"
|
|
|
+ >字典管理</el-menu-item
|
|
|
+ >
|
|
|
+ <el-menu-item index="/home/system/parameter">参数管理</el-menu-item>
|
|
|
+ <el-menu-item index="/home/system/notice">通知公告</el-menu-item>
|
|
|
+ <el-submenu index="2-4">
|
|
|
+ <template slot="title">日志管理</template>
|
|
|
+ <el-menu-item index="/home/system/journal/operation"
|
|
|
+ >操作日志</el-menu-item
|
|
|
+ >
|
|
|
+ <el-menu-item index="/home/system/journal/register"
|
|
|
+ >登录日志</el-menu-item
|
|
|
+ >
|
|
|
</el-submenu>
|
|
|
- </el-menu>
|
|
|
+ </el-submenu>
|
|
|
+ </el-menu>
|
|
|
<div class="right">
|
|
|
- <span class="right_1">
|
|
|
- <img src="../assets/img/2.jpg">
|
|
|
- </span>
|
|
|
+ <span class="right_1">
|
|
|
+ <img src="../assets/img/2.jpg" />
|
|
|
+ </span>
|
|
|
<span class="right_2">孙芳</span>
|
|
|
<div class="right_3"></div>
|
|
|
- <span class="right_4">
|
|
|
- <img src="../assets/img/exit.png">
|
|
|
- </span>
|
|
|
+ <span class="right_4">
|
|
|
+ <img src="../assets/img/exit.png" @click="exit()"/>
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="bottom"></div>
|
|
@@ -73,36 +133,68 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import page from "./Page/PageView";
|
|
|
-import retrieval from "./Retrieval/RetrievalView";
|
|
|
-import file from "./File/FileView";
|
|
|
-import personal from "./Personal/PersonalView";
|
|
|
-import system from "./System/SystemView";
|
|
|
+// import page from "./Page/PageView";
|
|
|
+// import retrieval from "./Retrieval/RetrievalView";
|
|
|
+// import file from "./File/FileView";
|
|
|
+// import personal from "./Personal/PersonalView";
|
|
|
+// import system from "./System/SystemView";
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- activeIndex: "1",
|
|
|
+ activeIndex: "/home/page",
|
|
|
+ srcIndex: '/home/page',
|
|
|
+ // 图片数组
|
|
|
+ icoUrl:
|
|
|
+ [
|
|
|
+ {
|
|
|
+ home1: require("../assets/img/nav-home1.png"),
|
|
|
+ home2: require("../assets/img/nav-home.png"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ search1: require('../assets/img/nav-search1.png'),
|
|
|
+ search2: require('../assets/img/nav-search.png'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ doc1: require('../assets/img/nav-doc1.png'),
|
|
|
+ doc2: require('../assets/img/nav-doc.png'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ person1: require('../assets/img/nav-person1.png'),
|
|
|
+ person2: require('../assets/img/nav-person.png'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ search1: require('../assets/img/nav-setting1.png'),
|
|
|
+ search2: require('../assets/img/nav-setting.png'),
|
|
|
+ }
|
|
|
+ ],
|
|
|
+
|
|
|
};
|
|
|
},
|
|
|
- components: {
|
|
|
- page,
|
|
|
- retrieval,
|
|
|
- file,
|
|
|
- personal,
|
|
|
- system
|
|
|
- },
|
|
|
+ // components: {
|
|
|
+ // page,
|
|
|
+ // retrieval,
|
|
|
+ // file,
|
|
|
+ // personal,
|
|
|
+ // system
|
|
|
+ // },
|
|
|
methods: {
|
|
|
handleSelect(key, keyPath) {
|
|
|
- console.log(key, keyPath);
|
|
|
+ this.srcIndex = keyPath[0];
|
|
|
+ // console.log(this.srcIndex,keyPath);
|
|
|
+ // console.log(key);
|
|
|
},
|
|
|
+ exit(){
|
|
|
+ alert('你确定要注销界面吗?')
|
|
|
+ this.$router.push('/login1')
|
|
|
+ }
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang='scss'>
|
|
|
.container {
|
|
|
- background: #0C0827FF;
|
|
|
+ background: #0c0827ff;
|
|
|
background-size: 100% 100%;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
@@ -115,7 +207,7 @@ export default {
|
|
|
height: calc(100vh * (40 / 1080));
|
|
|
width: 100%;
|
|
|
padding-right: calc(100vh * (17 / 1920));
|
|
|
- padding-left: calc(100vh * (35 / 1920));
|
|
|
+ padding-left: calc(100vh * (55 / 1920));
|
|
|
display: flex;
|
|
|
//顶部左边板块
|
|
|
.left {
|
|
@@ -149,66 +241,79 @@ export default {
|
|
|
padding-bottom: calc(100vh * (8 / 1080));
|
|
|
border: none;
|
|
|
display: flex;
|
|
|
- li{
|
|
|
- height: calc(100vh * (40 / 1080));
|
|
|
- line-height: calc(100vh * (40 / 1080));
|
|
|
- margin-right: calc(100vw * (60 / 1920));
|
|
|
+
|
|
|
+ li {
|
|
|
+ height: calc(100vh * (40 / 1080));
|
|
|
+ line-height: calc(100vh * (40 / 1080));
|
|
|
+ margin-right: calc(100vw * (60 / 1920));
|
|
|
+ :hover{
|
|
|
+ background: #1E497CFF !important;
|
|
|
+ }
|
|
|
}
|
|
|
- .nav1>img{
|
|
|
- width: calc(100vw * (24 / 1920));
|
|
|
- height: calc(100vh * (24 / 1080));
|
|
|
- margin-bottom: calc(100vw * (5 / 1920));
|
|
|
- margin-right: calc(100vh * (5 / 1080));
|
|
|
+ .nav1 > img {
|
|
|
+ width: calc(100vw * (24 / 1920));
|
|
|
+ height: calc(100vh * (24 / 1080));
|
|
|
+ margin-bottom: calc(100vw * (5 / 1920));
|
|
|
+ margin-right: calc(100vh * (5 / 1080));
|
|
|
}
|
|
|
}
|
|
|
// 顶部右边板块
|
|
|
.right {
|
|
|
width: calc(100vw * (100 / 1920));
|
|
|
height: calc(100vh * (40 / 1080));
|
|
|
- margin-left: calc(100vw * (150 / 1920));
|
|
|
+ margin-left: calc(100vw * (140 / 1920));
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- .right_1>img{
|
|
|
- width: calc(100vw * (20 / 1920));
|
|
|
- height: calc(100vh * (20 / 1080));
|
|
|
- }
|
|
|
- .right_2 {
|
|
|
- font-size: 12px;
|
|
|
- color: white;
|
|
|
- }
|
|
|
- .right_3 {
|
|
|
- width: 1px;
|
|
|
- height: 13px;
|
|
|
- background: #02AAC0;
|
|
|
- border-radius: 0px 0px 0px 0px;
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- .right_4>img {
|
|
|
- width: calc(100vw * (26 / 1920));
|
|
|
- height: calc(100vh * (26 / 1080));
|
|
|
- }
|
|
|
+ .right_1 > img {
|
|
|
+ width: calc(100vw * (20 / 1920));
|
|
|
+ height: calc(100vh * (20 / 1080));
|
|
|
+ margin-right: calc(100vw * (5 / 1920));
|
|
|
+ }
|
|
|
+ .right_2 {
|
|
|
+ font-size: 12px;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ .right_3 {
|
|
|
+ width: 1px;
|
|
|
+ height: 13px;
|
|
|
+ background: #02aac0;
|
|
|
+ border-radius: 0px 0px 0px 0px;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ .right_4 > img {
|
|
|
+ width: calc(100vw * (26 / 1920));
|
|
|
+ height: calc(100vh * (26 / 1080));
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
//顶部下边图片板块
|
|
|
.bottom {
|
|
|
height: calc(100vh * (20 / 1080));
|
|
|
width: 100%;
|
|
|
- background: url("../assets/img/nav-decorate.png") center/cover;
|
|
|
+ background: url("../assets/img/nav-decorate.png");
|
|
|
+ background-size: 100% calc(100vh * (20 / 1080));
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-::v-deep .el-menu-item{
|
|
|
- padding: 0;
|
|
|
- padding-bottom: (100vh * (50 / 1080));
|
|
|
+::v-deep .el-menu-item {
|
|
|
+ padding: 0;
|
|
|
+ padding-bottom: (100vh * (50 / 1080));
|
|
|
+}
|
|
|
+::v-deep .el-submenu__title {
|
|
|
+ padding: 0;
|
|
|
+ padding-bottom: (100vh * (50 / 1080));
|
|
|
}
|
|
|
-::v-deep .el-submenu__title{
|
|
|
- padding: 0;
|
|
|
- padding-bottom: (100vh * (50 / 1080));
|
|
|
+::v-deep .el-menu--horizontal > .el-submenu .el-submenu__title {
|
|
|
+ height: calc(100vh * (40 / 1080));
|
|
|
+ line-height: calc(100vh * (40 / 1080));
|
|
|
}
|
|
|
-::v-deep .el-menu--horizontal > .el-submenu .el-submenu__title{
|
|
|
- height: calc(100vh * (40 / 1080));
|
|
|
- line-height: calc(100vh * (40 / 1080));
|
|
|
+::v-deep li:hover{
|
|
|
+ background: #1E497CFF !important;
|
|
|
}
|
|
|
+::v-deep .el-menu--horizontal .el-menu-item:not(.isdisabled):hover{
|
|
|
+ background: #1E497CFF !important;
|
|
|
+}
|
|
|
+
|
|
|
|
|
|
</style>
|