From 5a1874080ae2a058db35a05778a5aa4d3cf3f541 Mon Sep 17 00:00:00 2001
From: “dzb” <2632970487@qq.com>
Date: 星期四, 03 十一月 2022 11:42:16 +0800
Subject: [PATCH] 页面导航框架搭建
---
src/views/layout/components/Main/index.vue | 109 +++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 91 insertions(+), 18 deletions(-)
diff --git a/src/views/layout/components/Main/index.vue b/src/views/layout/components/Main/index.vue
index 666f922..0436431 100644
--- a/src/views/layout/components/Main/index.vue
+++ b/src/views/layout/components/Main/index.vue
@@ -4,22 +4,12 @@
<div class="content">
<!-- 椤甸潰瀵艰埅鍖哄煙 -->
<div class="page-nav" v-if="navFlag">
- <div>
- <h1>绯荤粺璁剧疆</h1>
- <div>
- <span >鍩烘湰璁剧疆</span>
- <span >闂ㄦ埛璁剧疆</span>
- </div>
- <div>
- <span >璁惧绠＄悊</span>
- <span>鎺ュ叆绠＄悊</span>
- </div>
-
-
+ <div class="nav-item" v-for="item in navList" :key="item.id">
+ <div class="nav-title">{{item.title}}</div>
+ <div class="nav-child" v-if="item.children && item.children.length!==0">
+ <el-link :underline="false" class="child-item" v-for="child in item.children" @click="handleJump(child.link)" :key="child.id">{{child.label}}</el-link>
+ </div>
</div>
- <div>杩愯惀绠＄悊</div>
- <div>瑙嗛宸℃煡</div>
- <div>鏅鸿兘宸℃煡</div>
</div>
<router-view v-else></router-view>
<!-- 搴曢儴鍖哄煙 -->
@@ -39,12 +29,56 @@
},
data() {
return {
- navFlag:true
+ navFlag: true,
+ navList:[
+ {
+ id:1,
+ title:'绯荤粺璁剧疆',
+ children:[
+ {
+ id:2,
+ label:'閮ㄩ棬绠＄悊',
+ link:'',
+ },
+ {
+ id:3,
+ label:'璐︽埛绠＄悊',
+ link:'',
+ },
+ {
+ id:4,
+ label:'瑙掕壊绠＄悊',
+ link:'',
+ },
+ {
+ id:5,
+ label:'鏉冮檺绠＄悊',
+ link:'',
+ },
+ {
+ id:6,
+ label:'鏃ュ織绠＄悊',
+ link:'',
+ },
+ ]
+ },
+ {
+ id:7,
+ title:'杩愯惀绠＄悊'
+ }
+ ]
}
},
- watch:{
- '$route.path'(newPath,oldPath){
+ watch: {
+ '$route.path'(newPath, oldPath) {
newPath === '/home' ? this.navFlag = true : this.navFlag = false
+ }
+ },
+ methods:{
+ handleJump(url){
+ console.log(url)
+ // 璺敱璺宠浆
+ // this.$router.push({path:url})
}
}
};
@@ -53,9 +87,48 @@
.el-main {
min-width: 1024px;
padding: 0;
+
.content {
padding: 11px;
height: 100%;
+ .page-nav{
+ padding: 40px 100px;
+ text-align: left;
+ .nav-item{
+ line-height: 60px;
+ .nav-title{
+ color: #4b9bb7;
+ }
+ .nav-child{
+ display: flex;
+ // justify-content: space-between;
+ flex-wrap: wrap;
+ .el-link{
+ justify-content: flex-start;
+ padding-left: 30px;
+ }
+ .child-item{
+ width: 24%;
+ text-align: left;
+ margin-bottom: 22px;
+ margin-right: 1%;
+ border: 1px solid #17324c;
+ color: #4b9bb7;
+ position: relative;
+ &::after{
+ content: '';
+ display: block;
+ position: absolute;
+ left: 15px;
+ height: 8px;
+ width: 8px;
+ border-radius: 50%;
+ background-color: #4b9bb7;
+ }
+ }
+ }
+ }
+ }
}
}
</style>
--
Gitblit v1.8.0