From 25ab6ddae2902b6735d7641b1371b25587a3589c Mon Sep 17 00:00:00 2001
From: 明梦爽 <2972214568@qq.com>
Date: 星期四, 03 三月 2022 15:15:33 +0800
Subject: [PATCH] the new

---
 src/components/Home.vue |  153 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 153 insertions(+), 0 deletions(-)

diff --git a/src/components/Home.vue b/src/components/Home.vue
new file mode 100644
index 0000000..3e42a65
--- /dev/null
+++ b/src/components/Home.vue
@@ -0,0 +1,153 @@
+<template>
+  <el-container class="home-container">
+    <!-- 涓婚〉澶撮儴 -->
+    <el-header>
+      <div>
+        <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" active-text-color="#000000" :default-active="activeIndex" @select="handleSelect">
+        <el-menu-item :key="index" v-for="(item, index) in menuList" :index="(item.id).toString()">
+          {{ item.name }}
+        </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'
+import axios from 'axios'
+export default {
+  name: '',
+  data() {
+    return {
+      activeIndex: '1',
+      menuList: [{name: '棣栭〉',id: 1},{name: '绉戝崗姒傚喌',id: 22},{name: '鏀跨瓥娉曡',id: 23},{name: '绉戝崗椤圭洰',id: 24},
+      {name: '瀛︽湳浜ゆ祦',id: 25},{name: '鍔炰簨鎸囧崡',id: 26},{name: '绉戞櫘椋庨噰',id: 27},{name: '瀛︽牎棣栭〉',id: 28},
+      {name: '鑱旂郴鎴戜滑',id: 29}],
+      menuList2:[]
+    }
+  },
+  created() {
+    // this.getNavArr();
+  },
+  mounted() {
+    let api3 = 'http://localhost:7070/news_type/all'
+    axios.get(api3).then((res)=>{
+      // console.log(res);
+      this.menuList2 = res.data.data
+    }).catch((error)=>{
+      console.log(error);
+    })
+  },
+  watch: {},
+  methods: {
+    // //鑾峰彇瀵艰埅鏍�
+    // getNavArr(){
+    //   const data ={};
+    //   getNavList(data).then(res => {
+    //     console.log('res', res)
+    //     if(res.code == 200){
+    //       this.menuList2 = res.data.data
+    //     }
+    //     this.menuList2 = res.data.data
+    //   }).catch(err => {
+    //     console.log('err', err)
+    //   })
+    // },
+    
+    formatterTitle(t){
+      switch(t){
+        case '1':
+          return 'index'
+        case '22':
+          return 'introduce'
+        case '23':
+          return 'zhengce'
+        case '24':
+          return 'keXieXiangMu'
+        case '25':
+          return 'xueShuJiaoLiu'
+        case '26':
+          return 'banShiZhiNan'
+        case '27':
+          return 'kePuFengCai'
+        case '28':
+          return 'xueXiaoShouYe'
+        case '29':
+          return 'telephone'
+      }
+    },
+    handleSelect(key, keyPath) {
+      if (key == '28') {
+        window.open('https://www.pdsu.edu.cn/#')
+      } else {
+        this.$router.push({
+          path: '/home/' + this.formatterTitle(key),
+          query: {
+            title: this.formatterTitle(key),
+            id:key
+          }
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.home-container {
+  height: 100%;
+}
+.el-header {
+  background-color: rgb(1, 72, 153);
+}
+.el-header {
+  height: 120px !important;
+  padding: 0 80px 0 120px;
+  overflow: hidden;
+  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;
+}
+.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