up

web/src/router/index.js

@@ -129,6 +129,12 @@ const routes = [
             component: () => import('../views/Publications/Publications2.vue'),
             meta: { myName: 'Publications', nameAll: 'Exhibition Catalogues' },
           },
+          {
+            path: '/Layout/Publications/3',
+            name: 'Publications3',
+            component: () => import('../views/Publications/Publications3.vue'),
+            meta: { myName: 'Publications', nameAll: 'Research' },
+          },
         ]
 
       },

web/src/views/Publications/Publications1.vue

@@ -50,7 +50,7 @@ export default {
   data() {
     //这里存放数据
     return {
-      // <p><i></i></p> <p></p> <p><br /><br /><br /><br /></p> <span></span>
+      // <p><br /><i> </i></p> <p></p> <p><br /><br /><br /><br /></p> <span></span>
       txtInd: 0,
       txtData: [
         {
@@ -97,7 +97,6 @@ export default {
     this.imgList = this.imgAllData[this.dateInd];
     let date = this.$route.query.k;
     if (date) {
-      console.log(date);
       date = Number(date);
       this.dateInd = date;
       setTimeout(() => {

web/src/views/Publications/Publications2.vue

@@ -6,6 +6,20 @@
       <span>{{ $route.meta.nameAll }}</span>
       <div class="xian"></div>
     </div>
+    <div class="conten">
+      <img src="/data/Publications/heng.png" alt="" />
+      <ul>
+        <li v-for="(item, index) in list" :key="index">
+          <img :src="`/data/Publications/Exhibition/${index + 1}.jpg`" alt="" />
+          <div class="show">
+            <a :href="item" target="_blank">
+              <img src="/data/Publications/Exhibition/href.png" />
+              <p>Click here to open the catalogue</p>
+            </a>
+          </div>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -18,7 +32,16 @@ export default {
   components: {},
   data() {
     //这里存放数据
-    return {};
+    return {
+      list: [
+        "http://download.china.cn/idc/pdf/A_brief_history_of_Beijing.pdf",
+        "http://images.china.cn/images1/en/pdf/Geneva.pdf",
+        "http://download.china.cn/idc/pdf/Renaissance.pdf",
+        "http://download.china.cn/idc/pdf/TheMetropolisesandtheProsperities.pdf",
+        "http://images.china.cn/images1/en/pdf/Andes.pdf",
+        "http://images.china.cn/images1/en/pdf/smileofkhmer.pdf",
+      ],
+    };
   },
   //监听属性 类似于data概念
   computed: {},
@@ -40,8 +63,9 @@ export default {
 };
 </script>
 <style lang='less' scoped>
-.Publications2{
-   width: 1187px;
+.Publications2 {
+  padding-bottom: 30px;
+  width: 1187px;
   overflow: hidden;
   zoom: 1;
   margin: 0 auto;
@@ -65,6 +89,58 @@ export default {
       background-color: #c7000b;
     }
   }
+  .conten {
+    width: 100%;
+    margin-top: 40px;
+    & > img {
+      width: 100%;
+    }
+    & > ul {
+      & > li {
+        width: 281px;
+        height: 375px;
+        position: relative;
+        float: left;
+        margin: 7.5px 7.5px;
+        overflow: hidden;
+        & > img {
+          width: 281px;
+          height: 375px;
+        }
+        .show {
+          width: 100%;
+          height: 0;
+          background: #000;
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          opacity: 0;
+          text-align: center;
+          transition: all 0.6s;
+          & > a {
+            width: 175px;
+            color: #fff;
+            font-weight: bold;
+            font-size: 20px;
+            position: absolute;
+            left: 15%;
+            top: 50%;
+            line-height: 130%;
+            & > img {
+              position: absolute;
+              left: 45%;
+              bottom: 70px;
+            }
+          }
+        }
+        &:hover {
+          .show {
+            height: 50%;
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
 }
-
 </style>

web/src/views/Publications/Publications3.vue

@@ -0,0 +1,86 @@
+<!--  -->
+<template>
+  <div class="Publications3">
+    <div class="title">
+      <img src="../../assets/images/Visit/pLeft.jpg" alt="" />
+      <span>{{ $route.meta.nameAll }}</span>
+      <div class="xian"></div>
+    </div>
+    <div class="conten">
+      <img src="/data/Publications/Research1.jpg" alt="" />
+      <img src="/data/Publications/Research2.jpg" alt="" />
+      <img src="/data/Publications/Research3.jpg" alt="" />
+      <img src="/data/Publications/Research4.jpg" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+  name: "Publications3",
+  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>
+.Publications3 {
+  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;
+    }
+  }
+  .conten {
+    padding-bottom: 30px;
+    & > img {
+      margin: 0 15px 15px 0;
+      width: 585px;
+      height: 390px;
+      &:nth-of-type(2n){
+        margin-right: 0;
+      }
+    }
+  }
+}
+</style>

web/src/views/Publications/PublicationsInfo.vue

@@ -6,6 +6,10 @@
         <img :src="info.imgUrl" alt="" />
       </div>
     </div>
+    <div class="conten">
+      <div class="haed">Contents</div>
+      <div class="txt" v-html="info.txt"></div>
+    </div>
   </div>
 </template>
 
@@ -68,6 +72,9 @@ export default {
         font-size: 42px;
         line-height: 60px;
         font-weight: bold;
+        /deep/ i {
+          font-style: italic;
+        }
       }
       & > img {
         width: 275px;
@@ -77,5 +84,36 @@ export default {
       }
     }
   }
+  .conten {
+    width: 1187px;
+    overflow: hidden;
+    zoom: 1;
+    margin: 0 auto;
+    padding-bottom: 30px;
+    .haed {
+      font-size: 24px;
+      line-height: 64px;
+      text-indent: 30px;
+      margin-bottom: 15px;
+      background: url("/data/Publications/infoCon.png") left center no-repeat;
+    }
+    .txt{
+      /deep/ p{
+        color: rgb(127, 127, 127);
+        margin-bottom: 20px;
+        font-size: 18px;
+        line-height: 22px;
+      }
+      /deep/span{
+        font-size: 20px;
+        font-weight: 700;
+        color: black;
+      }
+      /deep/ i {
+        color: rgb(227, 108, 9);
+        font-size: 14px;
+      }
+    }
+  }
 }
 </style>

web/src/views/Publications/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="Publications">
-    <div class="ban"></div>
+    <div class="ban" :class="banImg"></div>
     <div class="nav_2">
       <ul>
         <li
@@ -33,41 +33,71 @@ export default {
   data() {
     //这里存放数据
     return {
+      banImg: "",
       path: "",
       topLi: [
         { name: "Magazines", path: "/Layout/Publications/1" },
         { name: "Exhibition Catalogues", path: "/Layout/Publications/2" },
+        { name: "Research", path: "/Layout/Publications/3" },
       ],
     };
   },
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
-  watch: {},
+  watch: {
+    $route(val) {
+      let id = val.query.id;
+      id = Number(id);
+      if (id >= 8) this.banImg = "ban2";
+      else this.banImg = "";
+    },
+  },
   //方法集合
   methods: {
     skip(url) {
-      this.$router.push(url).catch(() => {});
+      if (
+        this.$route.path === "/Layout/PublicationsInfo" &&
+        url === "/Layout/Publications/1"
+      ) {
+        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 },
+        });
+      } else 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
+        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 },
+          query: { k: temp },
         });
       }
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+    let id = this.$route.query.id;
+    id = Number(id);
+    if (id >= 8) this.banImg = "ban2";
+    else this.banImg = "";
+  },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前
@@ -88,6 +118,11 @@ export default {
       #000000;
     height: 218px;
   }
+  .ban2 {
+    background: url("/data/Publications/banner2.jpg") no-repeat center top
+      #000000;
+    height: 300px;
+  }
   .nav_2 {
     width: 100%;
     padding-bottom: 8px;
@@ -107,8 +142,8 @@ export default {
         text-align: center;
         & > img {
           margin-top: 25px;
-          // width: 49px;
-          // height: 39px;
+          height: 40px;
+          object-fit: contain;
         }
         & > p {
           margin-top: 5px;
@@ -131,7 +166,7 @@ export default {
     .pos1 {
       color: #c20e11;
     }
-    .jump{
+    .jump {
       cursor: pointer;
     }
   }

web/src/views/layout/data.js

@@ -60,6 +60,7 @@ export const topData = [
     children: [
       {url:'/Layout/Publications/1', id: 6.1, name: "Magazines" },
       {url:'/Layout/Publications/2', id: 6.2, name: "Exhibition Catalogues" },
+      {url:'/Layout/Publications/3', id: 6.3, name: "Research" },
     ],
   },
   {