From 55213fd6d8958e922c13e2c50c8423c9e459ede2 Mon Sep 17 00:00:00 2001 From: 明梦爽 <2972214568@qq.com> Date: 星期三, 24 十一月 2021 20:55:42 +0800 Subject: [PATCH] 前台项目基本完成 --- src/components/Home.vue | 113 +++++++++++++++++++++++++++++++++----------------------- 1 files changed, 66 insertions(+), 47 deletions(-) diff --git a/src/components/Home.vue b/src/components/Home.vue index 5b76a03..a1c4611 100644 --- a/src/components/Home.vue +++ b/src/components/Home.vue @@ -5,7 +5,9 @@ <div> <img src="../assets/xiaohui4.png" alt="" /> </div> - <div class="bg"></div> + <div> + <img src="../assets/bg.png" alt=""> + </div> </el-header> <!-- 涓婚〉瀵艰埅鏍� --> <el-row> @@ -18,12 +20,12 @@ :default-active="activeIndex" @select="handleSelect" > - <el-menu-item + <el-menu-item :key="index" - v-for="(item,index) in menuList" - :index="item.index" + v-for="(item, index) in menuList" + :index="(item.id).toString()" > - {{ item.name }} + {{ item.contypeName }} </el-menu-item> </el-menu> </el-row> @@ -38,41 +40,68 @@ </template> <script> +import {getNavList} from '../api/api' export default { name: '', data() { return { - activeIndex: 'index', - menuList:[ - {index:'index',name:'棣栭〉'}, - {index:'introduce',name:'绉戝崗姒傚喌'}, - {index:'zhengce',name:'鏀跨瓥娉曡'}, - {index:'keXieXiangMu',name:'绉戝崗椤圭洰'}, - {index:'xueShuJiaoLiu',name:'瀛︽湳浜ゆ祦'}, - {index:'banShiZhiNan',name:'鍔炰簨鎸囧崡'}, - {index:'kePu',name:'绉戞櫘椋庨噰'}, - {index:'xueXiaoShouYe',name:'瀛︽牎棣栭〉'}, - {index:'telephone',name:'鑱旂郴鎴戜滑'}, - ] + activeIndex: '1', + menuList: [], } }, - created(){ + created() { + this.getNavArr(); }, - mounted(){ - - }, - watch:{ - - }, + mounted() {}, + watch: {}, methods: { - handleSelect(key, keyPath) { - // console.log(key, keyPath) - this.$router.push({ - path: '/home/' + key, - query:{ - title:key + //鑾峰彇瀵艰埅鏍� + 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 'kePuFengCai' + 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 + } + }) + } } } } @@ -83,25 +112,15 @@ 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: 93px !important; + height: 120px !important; + padding: 0 80px 0 120px; overflow: hidden; - div { - display: flex; - justify-content: left; - } + display: flex; + justify-content: space-between; + align-items: center; } .el-menu { .el-menu-item { @@ -126,7 +145,7 @@ text-align: center; line-height: 60px; } -.box{ +.box { width: 1200px; margin: 0 auto; } -- Gitblit v1.8.0