up

web/src/router/index.js

@@ -94,14 +94,43 @@ const routes = [
         path: '/Layout/LearnEngage/:id',
         name: 'LearnEngage',
         component: () => import('../views/LearnEngage/index.vue'),
-        meta: { myName: 'LearnEngage' },
+        meta: { myName: 'Learn & Engage' },
       },
       // LearnEngage详情页面
       {
         path: '/Layout/LearnEngageInfo',
         name: 'LearnEngageInfo',
         component: () => import('../views/LearnEngage/info.vue'),
-        meta: { myName: 'LearnEngage' },
+        meta: { myName: 'Learn & Engage' },
+      },
+      // Publications页面
+      {
+        path: '/Layout/Publications',
+        name: 'Publications',
+        component: () => import('../views/Publications/index.vue'),
+        meta: { myName: 'Publications' },
+        redirect: { name: 'Publications1' },
+        children: [
+          {
+            path: '/Layout/Publications/1',
+            name: 'Publications1',
+            component: () => import('../views/Publications/Publications1.vue'),
+            meta: { myName: 'Publications', nameAll: 'Magazines' },
+          },
+          {
+            path: '/Layout/PublicationsInfo',
+            name: 'PublicationsInfo',
+            component: () => import('../views/Publications/PublicationsInfo.vue'),
+            meta: { myName: 'Publications', nameAll: 'Magazines' },
+          },
+          {
+            path: '/Layout/Publications/2',
+            name: 'Publications2',
+            component: () => import('../views/Publications/Publications2.vue'),
+            meta: { myName: 'Publications', nameAll: 'Exhibition Catalogues' },
+          },
+        ]
+
       },
     ]
   }

web/src/views/LearnEngage/info.vue

@@ -45,7 +45,6 @@
 </template>
 
 <script>
-// <p class='xx'></p> <p></p> <p><br /><br /></p>
 import { LearnEngage } from "../dataAll";
 export default {
   name: "LearnEngageInfo",

web/src/views/Publications/Publications2.vue

@@ -0,0 +1,70 @@
+<!--  -->
+<template>
+  <div class="Publications2">
+    <div class="title">
+      <img src="../../assets/images/Visit/pLeft.jpg" alt="" />
+      <span>{{ $route.meta.nameAll }}</span>
+      <div class="xian"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+  name: "Publications2",
+  components: {},
+  data() {
+    //这里存放数据
+    return {};
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.Publications2{
+   width: 1187px;
+  overflow: hidden;
+  zoom: 1;
+  margin: 0 auto;
+  .title {
+    position: relative;
+    display: flex;
+    height: 65px;
+    align-items: center;
+    margin: 0px auto 20px;
+    width: 1180px;
+    font-size: 24px;
+    font-weight: bold;
+    text-indent: 5px;
+    border-bottom: 1px solid black;
+    .xian {
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+      width: 80px;
+      height: 2px;
+      background-color: #c7000b;
+    }
+  }
+}
+
+</style>

web/src/views/Publications/PublicationsInfo.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="PublicationsInfo">
+    <div class="top">
+      <div class="main">
+        <div v-html="info.p"></div>
+        <img :src="info.imgUrl" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Publications } from "../dataAll";
+export default {
+  name: "PublicationsInfo",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      info: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    let id = this.$route.query.id;
+    id = Number(id);
+    let temp = Publications.Magazines;
+    for (let k in temp) {
+      temp[k].forEach((v) => {
+        if (v.id === id) this.info = v;
+      });
+    }
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.PublicationsInfo {
+  .top {
+    width: 100%;
+    height: 329px;
+    background: url("/data/Publications/infoBan.jpg") left top no-repeat #7f694a;
+    margin-bottom: 23px;
+    color: #fff;
+    .main {
+      width: 1125px;
+      margin: 0 auto;
+      overflow: hidden;
+      zoom: 1;
+      & > div {
+        float: left;
+        width: 820px;
+        margin-top: 85px;
+        font-size: 42px;
+        line-height: 60px;
+        font-weight: bold;
+      }
+      & > img {
+        width: 275px;
+        height: 312px;
+        float: right;
+        margin-top: 17px;
+      }
+    }
+  }
+}
+</style>

web/src/views/Publications/index.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="Publications">
+    <div class="ban"></div>
+    <div class="nav_2">
+      <ul>
+        <li
+          :class="{ cur: $route.meta.nameAll === item.name }"
+          v-for="(item, index) in topLi"
+          :key="index"
+          @click="skip(item.path)"
+        >
+          <img :src="`/data/Publications/${index + 1}.png`" alt="" />
+          <p>{{ item.name }}</p>
+        </li>
+      </ul>
+    </div>
+    <!-- 面包屑 -->
+    <div class="pos">
+      <span class="pos1">Your Position:&nbsp;</span>
+      <Router-link to="/Layout/Home">Home></Router-link>
+      <Router-link to="/Layout/Publications/1">Publications></Router-link>
+      <span class="jump" @click="backUrl">{{ $route.meta.nameAll }}></span>
+    </div>
+    <!-- 二级嵌套路由 -->
+    <Router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Publications",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      path: "",
+      topLi: [
+        { name: "Magazines", path: "/Layout/Publications/1" },
+        { name: "Exhibition Catalogues", path: "/Layout/Publications/2" },
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    skip(url) {
+      this.$router.push(url).catch(() => {});
+    },
+    backUrl() {
+      if (this.$route.path === "/Layout/PublicationsInfo") {
+        let temp
+        let id =this.$route.query.id
+        id = Number(id)
+        if(id>=1&&id<=5) temp =2021
+        else if(id<=11) temp =2020
+        else if(id<=17) temp =2019
+        else if(id<=23) temp =2018
+        else temp =2017
+        this.$router.push({
+          name: "Publications1",
+          query: { k:temp },
+        });
+      }
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.Publications {
+  .ban {
+    width: 100%;
+    margin: auto;
+    background: url("/data/Publications/banner.jpg") no-repeat center top
+      #000000;
+    height: 218px;
+  }
+  .nav_2 {
+    width: 100%;
+    padding-bottom: 8px;
+    background: url("../../assets/images/Visit/bg_3.png") left bottom repeat-x
+      #f1f1f1;
+    overflow: hidden;
+    zoom: 1;
+    & > ul {
+      display: flex;
+      width: 1180px;
+      margin: 0 auto;
+      & > li {
+        background: #f1f1f1;
+        cursor: pointer;
+        width: 168px;
+        height: 108px;
+        text-align: center;
+        & > img {
+          margin-top: 25px;
+          // width: 49px;
+          // height: 39px;
+        }
+        & > p {
+          margin-top: 5px;
+          font-size: 14px;
+          line-height: 18px;
+        }
+      }
+      .cur {
+        background: url("../../assets/images/Visit/bg_1.jpg") center top
+          no-repeat #f1f1f1;
+      }
+    }
+  }
+  .pos {
+    height: 28px;
+    line-height: 28px;
+    font-size: 12px;
+    margin: 0 auto 10px auto;
+    width: 1180px;
+    .pos1 {
+      color: #c20e11;
+    }
+    .jump{
+      cursor: pointer;
+    }
+  }
+}
+</style>

web/src/views/layout/data.js

@@ -45,7 +45,7 @@ export const topData = [
   },
   {
     id: 5,
-    name: "LearnEngage",
+    name: "Learn & Engage",
     url: "LearnEngage/Students",
     children: [
       {url:'/Layout/LearnEngage/Students', id: 5.1, name: "For Students" },
@@ -58,9 +58,8 @@ export const topData = [
     name: "Publications",
     url: "Publications",
     children: [
-      { id: 6.1, name: "Magazines" },
-      { id: 6.2, name: "Exhibition Catalogues" },
-      { id: 6.3, name: "Exhibition Brochures" },
+      {url:'/Layout/Publications/1', id: 6.1, name: "Magazines" },
+      {url:'/Layout/Publications/2', id: 6.2, name: "Exhibition Catalogues" },
     ],
   },
   {

web/src/views/layout/index.vue

@@ -15,7 +15,12 @@
           >
             <span>{{ item.name }}</span>
             <ul class="mainbav_sub">
-              <li v-for="(val, index) in item.children" :key="index" @click.stop="skipTow(val.url)">
+              <li
+                :class="{ active2: menaInd === val.url }"
+                v-for="(val, index) in item.children"
+                :key="index"
+                @click.stop="skipTow(val.url)"
+              >
                 {{ val.name }}
               </li>
             </ul>
@@ -92,12 +97,19 @@ export default {
         { name: "|&emsp; Events", path: "" },
         { name: "|&emsp; Employment", path: "" },
       ],
+      // 控制二级菜单的高亮
+      menaInd: null,
     };
   },
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
-  watch: {},
+  watch: {
+    $route() {
+      this.menaInd = this.$route.path;
+      // console.log('------',this.menaInd);
+    },
+  },
   //方法集合
   methods: {
     // 第一级的跳转
@@ -105,15 +117,16 @@ export default {
       this.$router.push("/Layout/" + url).catch(() => {});
     },
     // 第二级的跳转
-    skipTow(url){
+    skipTow(url) {
       this.$router.push(url).catch(() => {});
-    }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
+  created() {
+    this.menaInd = this.$route.path;
   },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
@@ -186,6 +199,10 @@ export default {
               border-left: 2px solid #cc0003;
             }
           }
+          .active2 {
+            background-color: rgba(204, 0, 3, 0.8);
+            border-left: 2px solid #cc0003;
+          }
         }
       }
       .language {