更新

src/layout/foot.vue

@@ -0,0 +1,48 @@
+<template>
+  <div id="foot">
+    <el-col :span="24" class="f-text">
+      <!-- <p>办公地址：长春市经济技术开发区金川街151号，吉林省高等学校毕业生就业指导中心2楼一站式办公大厅，邮编：130033。</p>
+      <p>公交线路：乘坐120路、227路、20路、260路、80路、130路、281路、154路、190路、125路公交北方市场下车，北方市场南门南行200米。</p>
+      <p>业务咨询电话：0431-84657570 0431-84657571; 办公时间：周一至周五，法定假日不对外办公。</p>
+      <p>吉ICP备09006292号-1 Copyright 2019 版权所有 吉林省高等学校毕业生就业指导中心 All Rights Reserved</p> -->
+      <p @click="btn(footInfo1)">{{ footInfo1.txt }}</p>
+    </el-col>
+    <el-col :span="24" style="text-align: center">
+      <el-link :underline="false">
+        <img src="../assets/tu7.png" />
+      </el-link>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'foot',
+  props: {
+    footInfo1: { type: Object },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {
+    btn(txt) {
+      this.$emit('btn', txt);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.f-text {
+  padding: 15px 0px;
+  text-align: center;
+  font-size: 14px;
+  color: #fff;
+}
+</style>

src/layout/header.vue

@@ -0,0 +1,89 @@
+<template>
+  <div id="header">
+    <el-col :span="24" id="top">
+      <div class="w_1200">
+        <el-col :span="24" class="top">
+          <el-col :span="19">
+            <p>您好，欢迎访问吉林高等信息。。。</p>
+          </el-col>
+        </el-col>
+      </div>
+    </el-col>
+    <el-col :span="24" id="banner">
+      <el-col :span="24" class="banner">
+        <el-image :src="footInfo1.bannerUrl" style="width: 100%; height: 100%"></el-image>
+        <div class="w_1200">
+          <el-col :span="24" class="logoCon">
+            <el-col :span="2">
+              <el-image :src="footInfo1.logo" style="width: 100%"></el-image>
+            </el-col>
+            <el-col :span="22" class="textCon">
+              <p class="bannerText">{{ footInfo1.name }}</p>
+              <p>{{ footInfo1.enName }}</p>
+            </el-col>
+          </el-col>
+        </div>
+      </el-col>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'header',
+  props: {
+    footInfo1: { type: Object },
+  },
+  components: {},
+  data: function() {
+    return {
+      // bannerImg: {
+      //   bannerUrl: require('@a/master_banner.png'),
+      //   logo: require('@a/master_logo.png'),
+      // },
+    };
+  },
+  created() {
+    // console.log(footInfo);
+  },
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.top {
+  height: 40px;
+  background-color: hsla(0, 0%, 96.1%, 0.31);
+  p {
+    line-height: 40px;
+  }
+}
+.banner {
+  height: 304px;
+  position: relative;
+  .logoCon {
+    position: absolute;
+    top: 20%;
+    left: 5%;
+    width: 93%;
+    .textCon {
+      padding: 22px;
+      .bannerText {
+        font-size: 40px;
+        font-weight: 600px;
+      }
+      p {
+        color: #1770c4;
+        font-family: cursive;
+      }
+    }
+  }
+}
+</style>

src/views/index.vue

@@ -1,31 +1,7 @@
 <template>
   <div id="index">
     <el-row>
-      <el-col :span="24" id="top">
-        <div class="w_1200">
-          <el-col :span="24" class="top">
-            <el-col :span="19">
-              <p>您好，欢迎访问吉林高等信息。。。</p>
-            </el-col>
-          </el-col>
-        </div>
-      </el-col>
-      <el-col :span="24" id="banner">
-        <el-col :span="24" class="banner">
-          <el-image :src="bannerImg.bannerUrl" style="width: 100%; height: 100%"></el-image>
-          <div class="w_1200">
-            <el-col :span="24" class="logoCon">
-              <el-col :span="2">
-                <el-image :src="bannerImg.logo" style="width: 100%"></el-image>
-              </el-col>
-              <el-col :span="22" class="textCon">
-                <p class="bannerText">吉林省高等学校毕业生就业信息网</p>
-                <p>Employment Information Network for graduates of Jilin Province colleges and universities</p>
-              </el-col>
-            </el-col>
-          </div>
-        </el-col>
-      </el-col>
+      <hea :footInfo1="footInfo"></hea>
       <el-col :span="24" class="main">
         <el-col :span="24" id="nav">
           <div class="w_1200">
@@ -361,17 +337,7 @@
       </el-col>
       <el-col :span="24" class="footer">
         <div class="w_1200">
-          <el-col :span="24" class="f-text">
-            <p>办公地址：长春市经济技术开发区金川街151号，吉林省高等学校毕业生就业指导中心2楼一站式办公大厅，邮编：130033。</p>
-            <p>公交线路：乘坐120路、227路、20路、260路、80路、130路、281路、154路、190路、125路公交北方市场下车，北方市场南门南行200米。</p>
-            <p>业务咨询电话：0431-84657570 0431-84657571; 办公时间：周一至周五，法定假日不对外办公。</p>
-            <p>吉ICP备09006292号-1 Copyright 2019 版权所有 吉林省高等学校毕业生就业指导中心 All Rights Reserved</p>
-          </el-col>
-          <el-col :span="24" style="text-align: center">
-            <el-link :underline="false">
-              <img src="../assets/tu7.png" />
-            </el-link>
-          </el-col>
+          <foot :footInfo1="footInfo" @btn="btn"></foot>
         </div>
       </el-col>
     </el-row>
@@ -379,6 +345,8 @@
 </template>
 
 <script>
+import foot from '@/layout/foot.vue';
+import hea from '@/layout/header.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   metaInfo() {
@@ -386,13 +354,30 @@ export default {
   },
   name: 'index',
   props: {},
-  components: {},
-  data: function () {
+  components: {
+    foot,
+    hea,
+  },
+  data: function() {
     return {
-      bannerImg: {
-        bannerUrl: require('@a/master_banner.png'),
+      // 底部信息
+      footInfo: {
+        txt: '测试',
+        name: '吉林省高等学校毕业生就业信息网',
+        enName: 'Employment Information Network for graduates of Jilin Province colleges and universities',
         logo: require('@a/master_logo.png'),
+        bannerUrl: require('@a/master_banner.png'),
       },
+      // headerInfo: {
+      //   name: '吉林省高等学校毕业生就业信息网',
+      //   enName: 'Employment Information Network for graduates of Jilin Province colleges and universities',
+      //   logo: require('@a/master_logo.png'),
+      //   bannerUrl: require('@a/master_banner.png'),
+      // },
+      // bannerImg: {
+      //   bannerUrl: require('@a/master_banner.png'),
+      //   logo: require('@a/master_logo.png'),
+      // },
       navList: [
         {
           text: '网站首页',
@@ -525,6 +510,9 @@ export default {
     handleSelect(key, keyPath) {
       console.log(key, keyPath);
     },
+    btn(data) {
+      console.log(data);
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -550,34 +538,7 @@ li {
 }
 #index {
   background-color: #f6f6f6;
-  .top {
-    height: 40px;
-    background-color: hsla(0, 0%, 96.1%, 0.31);
-    p {
-      line-height: 40px;
-    }
-  }
-  .banner {
-    height: 304px;
-    position: relative;
-    .logoCon {
-      position: absolute;
-      top: 20%;
-      left: 5%;
-      width: 93%;
-      .textCon {
-        padding: 22px;
-        .bannerText {
-          font-size: 40px;
-          font-weight: 600px;
-        }
-        p {
-          color: #1770c4;
-          font-family: cursive;
-        }
-      }
-    }
-  }
+
   .nav {
     .el-menu {
       .el-menu-item {
@@ -817,12 +778,6 @@ li {
   .footer {
     height: 190px;
     background-color: rgb(4, 87, 199);
-    .f-text {
-      padding: 15px 0px;
-      text-align: center;
-      font-size: 14px;
-      color: #fff;
-    }
   }
 }
 </style>