From 07ecebb09d124f877f5b96badecd86682d9e5939 Mon Sep 17 00:00:00 2001
From: 明梦爽 <2972214568@qq.com>
Date: 星期四, 18 十一月 2021 15:24:27 +0800
Subject: [PATCH] 动态获取完成
---
src/components/Home.vue | 211 +++++++++++++++++++++++++++-------------------------
1 files changed, 108 insertions(+), 103 deletions(-)
diff --git a/src/components/Home.vue b/src/components/Home.vue
index ef195e3..df42532 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -1,102 +1,107 @@
<template>
<el-container class="home-container">
+ <!-- 涓婚〉澶撮儴 -->
<el-header>
<div>
- <img src="../assets/heima.png" alt="" />
- <span>鐢靛晢鍚庡彴绠＄悊绯荤粺</span>
+ <img src="../assets/xiaohui4.png" alt="" />
</div>
- <el-button type="info" @click="logout">閫�鍑�</el-button>
+ <div>
+ <img src="../assets/bg.png" alt="">
+ </div>
</el-header>
- <el-container>
- <el-aside :width="isCollapse ? '64px' : '200px'">
- <div class="toggle-button" @click="toggleCollapse">|||</div>
- <el-menu
- background-color="rgb(50, 55, 67)"
- text-color="#fff"
- active-text-color="rgb(61, 159, 243)"
- unique-opened
- :collapse="isCollapse"
- :collapse-transition="false"
- router
- :default-active="activePath"
+ <!-- 涓婚〉瀵艰埅鏍� -->
+ <el-row>
+ <el-menu
+ mode="horizontal"
+ background-color="rgb(64, 112, 186)"
+ text-color="white"
+ class="menu"
+ active-text-color="#000000"
+ :default-active="activeIndex"
+ @select="handleSelect"
+ >
+ <el-menu-item
+ :key="index"
+ v-for="(item, index) in menuList"
+ :index="(item.id).toString()"
>
- <!-- 涓�绾ц彍鍗� -->
- <el-submenu
- :index="item.id + ''"
- v-for="item in menulist"
- :key="item.id"
- >
- <template slot="title">
- <i :class="iconsObj[item.id]"></i>
- <span>{{ item.authName }}</span>
- </template>
- <!-- 浜岀骇鑿滃崟 -->
- <el-menu-item
- :index="'/' + subItem.path"
- v-for="subItem in item.children"
- :key="subItem.id"
- @click="saveNavState('/' + subItem.path)"
- >
- <template slot="title">
- <i class="el-icon-menu"></i>
- <span>{{ subItem.authName }}</span>
- </template>
- </el-menu-item>
- </el-submenu>
- </el-menu>
- </el-aside>
- <el-main>
- <router-view></router-view>
+ {{ item.contypeName }}
+ </el-menu-item>
+ </el-menu>
+ </el-row>
+ <el-container>
+ <!-- 鏇村彉鐨勫唴瀹瑰尯鍩� -->
+ <el-main class="main">
+ <router-view class="box"></router-view>
</el-main>
</el-container>
+ <el-footer>@骞抽《灞卞闄㈢瀛︽妧鏈崗浼�</el-footer>
</el-container>
</template>
<script>
+import {getNavList} from '../api/api'
export default {
+ name: '',
data() {
return {
- //宸︿晶鑿滃崟鏁版嵁
- menulist: [],
- iconsObj: {
- 125: 'iconfont icon-user',
- 103: 'iconfont icon-tijikongjian',
- 101: 'iconfont icon-shangpin',
- 102: 'iconfont icon-danju',
- 145: 'iconfont icon-baobiao'
- },
- isCollapse: false,
- //琚縺娲荤殑閾炬帴鍦板潃
- activePath: ''
+ activeIndex: '1',
+ menuList: [],
}
},
created() {
- this.getMenuLsit()
- this.activePath = window.sessionStorage.getItem('activePath')
+ this.getNavArr();
},
+ mounted() {},
+ watch: {},
methods: {
- logout() {
- //娓呯┖token
- window.sessionStorage.clear()
- //璺宠浆鍒扮櫥褰曢〉
- this.$router.push('/login')
+ //鑾峰彇瀵艰埅鏍�
+ getNavArr(){
+ const data ={};
+ //.then() 涓昏鐢ㄤ簬涓�涓嚱鏁扮敤鍒板彟涓�涓嚱鏁扮殑杩斿洖鍊�
+ getNavList(data).then(res => {
+ console.log('res', res)
+ if(res.code == 200){
+ this.menuList = res.data
+ }
+ }).catch(err => {
+ console.log('err', err)
+ })
},
- // 鑾峰彇鎵�鏈夎彍鍗�
- async getMenuLsit() {
- const { data: res } = await this.$http.get('/menus')
- // 濡傛灉璇锋眰澶辫触 鎶婇敊璇秷鎭墦鍗板嚭鏉�
- if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
- //濡傛灉璇锋眰鎴愬姛锛屽皢鑾峰彇鐨勬暟鎹嬁杩囨潵鍗冲彲
- this.menulist = res.data
- console.log(res.data)
+ formatterTitle(t){
+ switch(t){
+ case '1':
+ return 'index'
+ case '2':
+ return 'introduce'
+ case '3':
+ return 'zhengce'
+ case '4':
+ return 'keXieXiangMu'
+ case '5':
+ return 'xueShuJiaoLiu'
+ case '6':
+ return 'banShiZhiNan'
+ case '7':
+ return 'kePu'
+ case '8':
+ return 'xueXiaoShouYe'
+ case '9':
+ return 'telephone'
+ }
},
- toggleCollapse() {
- this.isCollapse = !this.isCollapse
- },
- //淇濆瓨閾炬帴鐨勬縺娲荤姸鎬�
- saveNavState(activePath) {
- window.sessionStorage.setItem('activePath', activePath)
- this.activePath = activePath
+ handleSelect(key, keyPath) {
+ if (key == '8') {
+ window.open('https://www.pdsu.edu.cn/#')
+ } else {
+ this.$router.push({
+ path: '/home/' + this.formatterTitle(key),
+ query: {
+ title: this.formatterTitle(key),
+ id:key
+ }
+ })
+ }
}
}
}
@@ -107,41 +112,41 @@
height: 100%;
}
.el-header {
- background-color: rgb(55, 61, 63);
+ background-color: rgb(1, 72, 153);
+}
+.el-header {
+ height: 120px !important;
+ padding: 0 40px;
+ overflow: hidden;
display: flex;
justify-content: space-between;
- padding-left: 0;
align-items: center;
- color: #fff;
- font-size: 20px;
- > div {
- display: flex;
- justify-content: center;
- align-items: center;
- span {
- margin-left: 15px;
- }
+}
+.el-menu {
+ .el-menu-item {
+ width: 150px;
+ font-size: 15px;
+ text-align: center;
}
}
-.el-aside {
- background-color: rgb(50, 55, 67);
- .el-menu {
- border-right: none;
- }
+.menu {
+ display: flex;
+ justify-content: space-between;
}
-.el-main {
- background-color: rgb(233, 237, 240);
+.el-footer {
+ background-color: rgb(85, 81, 82);
}
-.iconfont {
- margin-right: 10px;
+.main {
+ padding: 20px 5px;
}
-.toggle-button {
- background-color: rgb(72, 81, 98);
+.el-footer {
+ font-size: 15px;
color: white;
text-align: center;
- font-size: 10px;
- line-height: 26px;
- letter-spacing: 0.2em;
- cursor: pointer;
+ line-height: 60px;
}
-</style>
+.box {
+ width: 1200px;
+ margin: 0 auto;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0