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 | 187 +++++++++++++++++++++++++++++-----------------
1 files changed, 119 insertions(+), 68 deletions(-)
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 3090d8c..df42532 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -1,57 +1,109 @@
<template>
<el-container class="home-container">
+ <!-- 涓婚〉澶撮儴 -->
<el-header>
<div>
- <img src="../assets/xiaohui.png" alt="" />
- <span>骞抽《灞卞闄㈢瀛︽妧鏈浼�</span>
+ <img src="../assets/xiaohui4.png" alt="" />
+ </div>
+ <div>
+ <img src="../assets/bg.png" alt="">
</div>
</el-header>
+ <!-- 涓婚〉瀵艰埅鏍� -->
<el-row>
- <el-menu
- mode="horizontal"
- background-color="rgb(64, 112, 186)"
- text-color="white"
- class="menu"
- :default-active="activeIndex"
- @select="handleSelect"
+ <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-menu-item index="index">棣栭〉</el-menu-item>
- <el-menu-item index="introduce">绉戝崗姒傚喌</el-menu-item>
- <el-menu-item index="3">鏀跨瓥娉曡</el-menu-item>
- <el-menu-item index="4">绉戝崗椤圭洰</el-menu-item>
- <el-menu-item index="5">瀛︽湳浜ゆ祦</el-menu-item>
- <el-menu-item index="6">鍔炰簨鎸囧崡</el-menu-item>
- <el-menu-item index="7">绉戞櫘椋庨噰</el-menu-item>
- <el-menu-item index="8">瀛︽牎棣栭〉</el-menu-item>
- <el-menu-item index="9">鑱旂郴鎴戜滑</el-menu-item>
+ {{ item.contypeName }}
+ </el-menu-item>
</el-menu>
</el-row>
<el-container>
- <el-main>
- <router-view></router-view>
- </el-main>
+ <!-- 鏇村彉鐨勫唴瀹瑰尯鍩� -->
+ <el-main class="main">
+ <router-view class="box"></router-view>
+ </el-main>
</el-container>
- <el-footer>Footer</el-footer>
+ <el-footer>@骞抽《灞卞闄㈢瀛︽妧鏈崗浼�</el-footer>
</el-container>
</template>
<script>
+import {getNavList} from '../api/api'
export default {
- name:'',
- data(){
- return{
- activeIndex:'index',
- }
- },
- methods:{
- handleSelect(key, keyPath) {
- console.log(key, keyPath);
- this.$router.push({
- path:'/home/'+keyPath
- })
- }
+ name: '',
+ data() {
+ return {
+ activeIndex: '1',
+ menuList: [],
}
-
+ },
+ created() {
+ this.getNavArr();
+ },
+ mounted() {},
+ watch: {},
+ methods: {
+ //鑾峰彇瀵艰埅鏍�
+ 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)
+ })
+ },
+ 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'
+ }
+ },
+ 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
+ }
+ })
+ }
+ }
+ }
}
</script>
@@ -60,42 +112,41 @@
height: 100%;
}
.el-header {
- background: -webkit-linear-gradient(
- left,
- rgb(5, 102, 141),
- rgb(240, 243, 189)
- );
-
- background: -o-linear-gradient(right, rgb(5, 102, 141), rgb(240, 243, 189));
-
- background: -moz-linear-gradient(right, rgb(5, 102, 141), rgb(240, 243, 189));
-
- background: linear-gradient(to right, rgb(5, 102, 141), rgb(240, 243, 189));
+ background-color: rgb(1, 72, 153);
}
.el-header {
- height: 90px !important;
+ height: 120px !important;
+ padding: 0 40px;
overflow: hidden;
- div {
- display: flex;
- justify-content: left;
- // align-items: center;
- span {
- margin-left: 100px;
- font-size: 30px;
- line-height: 90px;
- }
- }
- .el-menu {
- .el-menu-item {
- width: 150px;
- font-size: 15px;
- text-align: center;
- }
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.el-menu {
+ .el-menu-item {
+ width: 150px;
+ font-size: 15px;
+ text-align: center;
}
}
-.menu{
- display: flex;
- justify-content: space-between;
+.menu {
+ display: flex;
+ justify-content: space-between;
}
-
+.el-footer {
+ background-color: rgb(85, 81, 82);
+}
+.main {
+ padding: 20px 5px;
+}
+.el-footer {
+ font-size: 15px;
+ color: white;
+ text-align: center;
+ line-height: 60px;
+}
+.box {
+ width: 1200px;
+ margin: 0 auto;
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0