Merge branch 'master' of http://192.168.0.115:3000/shaogen1995/ShouBo

webM/src/router/index.js

@@ -105,7 +105,66 @@ const routes = [
         component: () => import('../views/Collections/Detail.vue'),
         meta: { myTitle: 'Collections', topColor: '#656567' },
       },
-    ]
+      // Learn页面
+      {
+        path: '/Layout/Learn',
+        name: 'Learn',
+        component: () => import('../views/Learn/index.vue'),
+        meta: { myTitle: 'Learn & Engage', topColor: '#997369' },
+        redirect: { name: 'LearnStudents' },
+        children: [
+          // 二级路由子页面
+          {
+            path: '/Layout/Learn/Students',
+            name: 'LearnStudents',
+            component: () => import('../views/Learn/Students.vue'),
+            meta: { myTitle: 'Learn & Engage', topColor: '#997369' },
+          },
+          {
+            path: '/Layout/Learn/Adults',
+            name: 'LearnAdults',
+            component: () => import('../views/Learn/Adults.vue'),
+            meta: { myTitle: 'Learn & Engage', topColor: '#997369' },
+          },
+          {
+            path: '/Layout/Learn/Families',
+            name: 'LearnFamilies',
+            component: () => import('../views/Learn/Families.vue'),
+            meta: { myTitle: 'Learn & Engage', topColor: '#997369' },
+          },
+        ]
+      },
+      {
+        path: '/Layout/Learn/Info',
+        name: 'LearnInfo',
+        component: () => import('../views/Learn/info.vue'),
+        meta: { myTitle: 'Learn & Engage', topColor: '#764032' },
+      },
+      // Publications页面
+      {
+        path: '/Layout/Publications',
+        name: 'Publications',
+        component: () => import('../views/Publications/index.vue'),
+        meta: { myTitle: 'Publications', topColor: '#cdb6ac' },
+        redirect: { name: 'LearnStudents' },
+        children: [
+          // 二级路由子页面
+          {
+            path: '/Layout/Publications/Magazines',
+            name: 'PuMagazines',
+            component: () => import('../views/Publications/Magazines.vue'),
+            meta: { myTitle: 'Publications', topColor: '#cdb6ac' },
+          },
+          {
+            path: '/Layout/Publications/Catalogues',
+            name: 'PuCatalogues',
+            component: () => import('../views/Publications/Catalogues.vue'),
+            meta: { myTitle: 'Publications', topColor: '#cdb6ac' },
+          },
+
+        ]
+      },
+]
   }
 ]
 

webM/src/views/Collections/Detail.vue

@@ -60,6 +60,8 @@ export default {
     }
     .txt {
       padding: 20px 20px 40px;
+      background: url('../../assets/img/Collections/bgCD.png');
+      background-size: 100% 100%;
       & > h3 {
         padding: 0 0 0 30px;
         font-size: 22px;

webM/src/views/Exhibitions/Detail.vue

@@ -287,9 +287,8 @@ export default {
       zoom: 1;
       margin-bottom: 20px;
       & > span {
-        padding: 0 30px;
+        padding: 0 0px 0 30px;
         display: block;
-        float: left;
       }
       .info_1 {
         background: url("../../assets/img/bg_5.png") left 8px no-repeat;

webM/src/views/Layout/index.vue

@@ -196,21 +196,23 @@ export default {
           ],
         },
         {
+          acc:'Learn & Engage',
           name: "Learn & Engage",
           path: "",
           son: [
-            { name: "For Students", path: "" },
-            { name: "For Adults", path: "" },
-            { name: "For Families & Children", path: "" },
+            { name: "For Students", path: "/Layout/Learn/Students" },
+            { name: "For Adults", path: "/Layout/Learn/Adults" },
+            { name: "For Families & Children", path: "/Layout/Learn/Families" },
           ],
         },
         {
+          acc:'Publications',
           name: "Publications",
           path: "",
           son: [
-            { name: "Magazines", path: "" },
-            { name: "Exhibition Catalogues", path: "" },
-            { name: "Research", path: "" },
+            { name: "Magazines", path: "/Layout/Publications/Magazines" },
+            { name: "Exhibition Catalogues", path: "/Layout/Publications/Catalogues" },
+            // { name: "Research", path: "" },
           ],
         },
         {

webM/src/views/Learn/Adults.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="LearnAdults">
+    <div class="main">
+      <div class="row" @click="skip(item.id)" v-for="(item, index) in data" :key="index">
+        <img v-lazy="`/data/LearnEngage/sm/${item.id}.png`" alt="" />
+        <div class="txt" v-if="item.info">
+          <h3>{{item.info.title}}</h3>
+          <p>Date：{{item.info.time}}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { LearnEngage } from "./data";
+export default {
+  name: "LearnAdults",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+        skip(id) {
+      this.$router.push({
+        name: "LearnInfo",
+        query: { id, k: "Adults" },
+      });
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.data = LearnEngage.Adults;
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.LearnAdults {
+  width: 100%;
+  .main {
+    width: 100%;
+    padding: 0px 20px 30px;
+    .row {
+      width: 100%;
+      border-radius: 8px;
+      overflow: hidden;
+      background-color: #fff;
+      box-shadow: 0px 1px 4px 3px #ccc;
+      margin-bottom: 20px;
+      & > img {
+        width: 100%;
+      }
+      .txt{
+        padding: 15px;
+        &>h3{
+          font-size: 16px;
+        }
+        &>p{
+          font-size: 14px;
+          color: #999;
+        }
+      }
+    }
+  }
+}
+</style>

webM/src/views/Learn/Families.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="LearnFamilies">
+    <div class="main">
+      <div class="row" @click="skip(item.id)" v-for="(item, index) in data" :key="index">
+        <img v-lazy="`/data/LearnEngage/sm/${item.id}.png`" alt="" />
+        <div class="txt" v-if="item.info">
+          <h3>{{item.info.title}}</h3>
+          <p>Date：{{item.info.time}}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { LearnEngage } from "./data";
+export default {
+  name: "LearnFamilies",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+        skip(id) {
+      this.$router.push({
+        name: "LearnInfo",
+        query: { id, k: "Families" },
+      });
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.data = LearnEngage.Families;
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.LearnFamilies {
+  width: 100%;
+  .main {
+    width: 100%;
+    padding: 0px 20px 30px;
+    .row {
+      width: 100%;
+      border-radius: 8px;
+      overflow: hidden;
+      background-color: #fff;
+      box-shadow: 0px 1px 4px 3px #ccc;
+      margin-bottom: 20px;
+      & > img {
+        width: 100%;
+      }
+      .txt{
+        padding: 15px;
+        &>h3{
+          font-size: 16px;
+        }
+        &>p{
+          font-size: 14px;
+          color: #999;
+        }
+      }
+    }
+  }
+}
+</style>

webM/src/views/Learn/Students.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="LearnStudents">
+    <div class="main">
+      <div
+        class="row"
+        @click="skip(item.id)"
+        v-for="(item, index) in data"
+        :key="index"
+      >
+        <img v-lazy="`/data/LearnEngage/sm/${item.id}.png`" alt="" />
+        <div class="txt" v-if="item.info">
+          <h3>{{ item.info.title }}</h3>
+          <p>Date：{{ item.info.time }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { LearnEngage } from "./data";
+export default {
+  name: "LearnStudents",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    skip(id) {
+      this.$router.push({
+        name: "LearnInfo",
+        query: { id, k: "Students" },
+      });
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.data = LearnEngage.Students;
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.LearnStudents {
+  width: 100%;
+  .main {
+    width: 100%;
+    padding: 0px 20px 30px;
+    .row {
+      width: 100%;
+      border-radius: 8px;
+      overflow: hidden;
+      background-color: #fff;
+      box-shadow: 0px 1px 4px 3px #ccc;
+      margin-bottom: 20px;
+      & > img {
+        width: 100%;
+      }
+      .txt {
+        padding: 15px;
+        & > h3 {
+          font-size: 16px;
+        }
+        & > p {
+          font-size: 14px;
+          color: #999;
+        }
+      }
+    }
+  }
+}
+</style>

webM/src/views/Learn/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="Learn">
+    <div class="ban" ref="ban">
+      <img src="@/assets/img/bannerL.png" alt="" />
+    </div>
+    <div class="rowAll" :class="{ curSorll: menaSon }">
+      <div
+        @click="cutTab(item.path)"
+        class="row"
+        v-for="(item, index) in tabData"
+        :key="index"
+        :class="{ active: idMate === item.path }"
+      >
+        {{ item.name }}
+      </div>
+    </div>
+    <Router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Learn",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      menaSon: false,
+      idMate: "/Layout/Learn/Students",
+      tabData: [
+        { name: "Students", path: "/Layout/Learn/Students" },
+        { name: "Adults", path: "/Layout/Learn/Adults" },
+        { name: "Families & Children", path: "/Layout/Learn/Families" },
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    $route() {
+      this.idMate = this.$route.path;
+    },
+  },
+  //方法集合
+  methods: {
+    cutTab(path) {
+      this.$router.push(path).catch(() => {});
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.idMate = this.$route.path;
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        // 获取顶部元素ban的高度
+        let banDom = this.$refs.ban;
+        // 获取滚动的总元素
+        let scrollDom = document.querySelector(".Layout");
+        // 获取顶部固定栏
+        let LayoutTop = document.querySelector(".Layout .top");
+        scrollDom.onscroll = () => {
+          if (scrollDom.scrollTop > banDom.offsetHeight) {
+            LayoutTop.style.display = "none";
+            this.menaSon = true;
+          } else {
+            LayoutTop.style.display = "flex";
+            this.menaSon = false;
+          }
+        };
+      }, 0);
+    });
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {
+    // 获取滚动的总元素,删除滚动事件
+    let scrollDom = document.querySelector(".Layout");
+    scrollDom.onscroll = null;
+    // 获取顶部固定栏
+    let LayoutTop = document.querySelector(".Layout .top");
+    LayoutTop.style.display = "flex";
+  }, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.Learn {
+  width: 100%;
+  background-color: #f7f6f3;
+  .ban {
+    position: relative;
+    width: 100%;
+    & > img {
+      width: 100%;
+    }
+  }
+  .rowAll {
+    width: 100%;
+    height: 70px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    background-color: #f7f6f3;
+    .row {
+      font-size: 16px;
+      height: 30px;
+      line-height: 30px;
+      padding: 0 8px;
+    }
+    .active {
+      background-color: #c1aa7b;
+      border-radius: 15px;
+      color: #fff;
+    }
+  }
+  .curSorll {
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+}
+</style>

webM/src/views/Learn/info.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="LearnInfo">
+    <div class="ban">
+      <img src="@/assets/img/bannerLI.png" alt="" />
+      <h3>Learn & Engage</h3>
+    </div>
+    <div class="main">
+      <h3>{{ data.title }}</h3>
+      <div class="info">
+        <span class="info_1">{{ data.time }}</span>
+        <span class="info_2">{{ data.loc }}</span>
+        <span class="info_3">{{ data.ren }}</span>
+      </div>
+      <div class="txt">
+        <p v-html="data.top" v-if="data.top"></p>
+        <img
+          :src="`/data/LearnEngage/in/${$route.query.id}.jpg`"
+          alt=""
+          v-if="data.imgShow !== 0"
+        />
+        <div v-html="data.txt"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { LearnEngage } from "./data";
+export default {
+  name: "LearnInfo",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    let { id, k } = this.$route.query;
+    id = Number(id);
+    let temp = LearnEngage[k];
+    temp.forEach((v) => {
+      if (v.id === id) this.data = v.info;
+    });
+    setTimeout(() => {
+      document.title = this.data.title;
+    }, 100);
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.LearnInfo {
+  width: 100%;
+  .ban {
+    position: relative;
+    width: 100%;
+    & > img {
+      width: 100%;
+    }
+    & > h3 {
+      position: absolute;
+      font-size: 24px;
+      color: #fff;
+      left: 30px;
+      bottom: 30px;
+      border-bottom: 1px solid #fff;
+    }
+  }
+  .main {
+    padding: 20px;
+    background: url('../../assets/img/bgLI.png');
+    background-size: 100% 100%;
+    & > h3 {
+      font-size: 18px;
+      margin-bottom: 15px;
+    }
+    .info {
+      font-size: 14px;
+      line-height: 36px;
+      color: #666;
+      overflow: hidden;
+      zoom: 1;
+      margin-bottom: 20px;
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 20px;
+      & > span {
+        padding: 0 0px 0 30px;
+        display: block;
+      }
+      .info_1 {
+        background: url("../../assets/img/bg_5.png") left 8px no-repeat;
+      }
+      .info_2 {
+        background: url("../../assets/img/bg_6.png") left 8px no-repeat;
+      }
+      .info_3 {
+        background: url("../../assets/img/bg_7.png") left 8px no-repeat;
+      }
+    }
+    .txt{
+      &>img{
+        width: 100%;
+        margin-bottom: 15px;
+      }
+      /deep/ p {
+        font-size: 14px;
+        color: #6A6A6A;
+        margin-bottom: 15px;
+        line-height: 18px;
+      }
+    }
+  }
+}
+</style>

webM/src/views/Publications/Catalogues.vue

@@ -0,0 +1,43 @@
+<template>
+<div class='PuCatalogues'>PuCatalogues</div>
+</template>
+
+<script>
+export default {
+name:'PuCatalogues',
+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>
+//@import url(); 引入公共css类
+
+</style>

webM/src/views/Publications/Magazines.vue

@@ -0,0 +1,311 @@
+<template>
+  <div class="PuMagazines">
+    <!-- 1 -->
+    <div class="box1">
+      <h3 class="biaoji">Introduction of Magazine</h3>
+      <p>
+        The Museum is a national academic journal for museum studies supervised
+        by the Chinese Academy of Sciences, hosted by the Science Press and
+        sponsored by the Capital Museum (Beijing), Tianjin Museum and the Hebei
+        Museum. The bimonthly journal was launched in February, 2017.
+      </p>
+      <p>
+        The Museum, taking the study of culture and museums, and the spread of
+        culture as one of its responsibility in line with the national policy of
+        “Integrated Development of Beijing, Tianjin and Hebei Province”, aims to
+        provide a platform for exchange and learning among national culture and
+        museum circles, relevant professional college teachers and students, and
+        the masses of cultural enthusiasts.
+      </p>
+      <div v-if="box1Show">
+        <p>
+          The Museum features three sections - thematic exploration, theoretical
+          research, and museum practice. It mainly covers museum-related
+          academic research results on the gathering and preservation of
+          collections, restoration and preservation of collections, collection
+          research, exhibition and evaluation, museum education, publication and
+          cultural creation, museum management, openness and security, museum
+          architecture, museum digitalization and informatization, monographs
+          and essays, historical and archeological research related to museums,
+          protection and research of ancient buildings and ancient ruins and
+          other related research results.
+        </p>
+        <p>
+          The Museum Editorial Board<br />
+          Director: Lin Peng<br />
+          Deputy Directors: Chen Zhuo, Cheng Caihong, Bai Jie, Shi Qiang<br />
+          Editor: Guo Xiaoling<br />
+          Executive Editor: Yan Xiangdong<br />
+          Associate Editors: Huang Xueyin, Wang Jianping, Xu Lumei
+        </p>
+        <p>
+          The Editorial Department of The Museum<br />
+          Directors: Zhang Yana, Zhang Liang<br />
+          Editors: Fan Xin, Zhou Zhou, Zhang Ruiyang, Yan Guangyu, Zheng Zuoyi,
+          Gong Xiangjun, Li Jiguang, Li Lanfang, Zang Tianjie, Zhao Xiaojiao<br />
+          Art Director: Li Meng
+        </p>
+      </div>
+      <div class="more" @click="box1Show = !box1Show">
+        {{ box1Show ? "Hide" : "See More" }}
+      </div>
+    </div>
+    <!-- 2 -->
+    <div class="box1">
+      <h3 class="biaoji">Notice to Contributors</h3>
+      <p>
+        The Museum is a national academic journal on museums published at home
+        and abroad. It features three sections - thematic exploration,
+        theoretical research, and museum practice - mainly devoted to
+        museum-related academic research results: gathering and preservation of
+        collections, restoration and preservation of collections, collections
+        research, exhibition and evaluation, museum education, propaganda and
+        literary creation, museum management, openness and security, museum
+        architecture, museum digitalization and informatization, monographs and
+        essays, historical and archeological research related to museums,
+        protection and research of ancient buildings and ancient ruins and other
+        related research results. Domestic and foreign authors are welcome to
+        submit articles. In doing so, the following requirements should be
+        followed.
+      </p>
+      <div v-if="box2Show">
+        <p>
+          1. You should refine and condense your article to 5000-8000 words, and
+          attach an abstract of 100-300 words and 3-5 key words in both Chinese
+          and English at the head of the article.
+        </p>
+        <p>
+          2. The written form of your article’s words, punctuation, years and
+          numbers should be in line with the common criteria established by the
+          General Administration of Press and Publication of the PRC.
+        </p>
+        <p>
+          3. Illustrations and tables should be concise and the text in them
+          should be modifiable. Please try to provide pictures with clarity of
+          over 300 dpi. You should specify the name and source of your
+          illustrations and tables.
+        </p>
+        <p>
+          4. Articles must be original and not previously published in any other
+          medium. Quotations must be clearly marked or licensed. Authors will be
+          held fully responsible for the consequences of any violations of the
+          copyright of others.
+        </p>
+        <p>
+          5. For a translated draft, you need to get the copyright beforehand
+          and attach relevant explanation. In case of copyright controversies,
+          the translators will be held responsible for the consequences.
+        </p>
+        <p>
+          6. Please specify the author's name, organization, mailing address,
+          telephone number and e-mail address.
+        </p>
+        <p>
+          7. Please do not send any article that has been submitted to other
+          publishers, and please keep the original. If you do not get a
+          notification of acceptance within six months, please contact us. Once
+          the article is published, we will pay remuneration in accordance with
+          our pay standard. Besides, we have the right to use it in digital ways
+          such as copy, compilation, distribution and dissemination of the full
+          article through an information network. The fee for the changing
+          copyright will be paid with the remuneration.
+        </p>
+        <p>
+          All colleagues of cultural and museum circles are welcome to submit
+          articles.<br />
+          The contact information is as follow,<br />
+          Address: No. 16, Donghuangchenggen North Street, Dongcheng District,
+          Beijing, 100717<br />
+          Editorial Department: +86 (10) 64033878、64034135、64030141（fax）<br />
+          Email: bowuyuan@mail.sciencep.com<br />
+          Review Platform: http://ees.scichina.com/user/login.action
+        </p>
+      </div>
+      <div class="more" @click="box2Show = !box2Show">
+        {{ box2Show ? "Hide" : "See More" }}
+      </div>
+    </div>
+    <!-- 3 -->
+    <div class="box2">
+      <h3 class="biaoji">
+        Contact Us<span>(Contact information of the journal)</span>
+      </h3>
+      <p class="cur">Tel</p>
+      <p>+86 (10) 64033878、64034135、63370450</p>
+      <p class="cur">Fax</p>
+      <p>+86 (10) 64030141</p>
+      <p class="cur">Email</p>
+      <p>bowuyuan@mail.sciencep.com</p>
+      <p class="cur">Review Platform</p>
+      <p>http://ees.scichina.com/user/login.action</p>
+      <p class="cur">Address</p>
+      <p>No. 16, Donghuangchenggen North Street, Beijing.</p>
+      <p class="cur">Postcode</p>
+      <p>100717</p>
+    </div>
+    <!-- 4 -->
+    <div class="box3">
+      <h2 class="title">Our Magazines</h2>
+      <div class="xian">
+        <div
+          class="xian_son"
+          @click="xianInd = item"
+          :class="{ active: item === xianInd }"
+          v-for="item in xian"
+          :key="item"
+        >
+          <div></div>
+          <p>{{ item }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PuMagazines",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      box1Show: false,
+      box2Show: false,
+      xianInd: "2021",
+      xian: ["2021", "2020", "2019", "2018", "2017"],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.PuMagazines {
+  padding: 0 20px 40px;
+  .more {
+    margin: 40px auto;
+    width: 117px;
+    height: 37px;
+    background: url("../../assets/img/Layout/see.png");
+    background-size: 100% 100%;
+    color: #c1aa7b;
+    line-height: 40px;
+    text-align: center;
+  }
+  .biaoji {
+    font-size: 22px;
+    padding-left: 30px;
+    background: url("../../assets/img/Layout/chosen.png") left center no-repeat;
+    background-size: 22px 18px;
+    margin-bottom: 20px;
+    margin-top: 20px;
+    & > span {
+      display: block;
+      font-size: 14px;
+      font-weight: 400;
+      color: #6a6a6a;
+    }
+  }
+  .box1 {
+    padding-top: 20px;
+    border-bottom: 1px solid #ccc;
+    p {
+      font-size: 16px;
+      line-height: 20px;
+      margin-bottom: 15px;
+      color: #6a6a6a;
+    }
+  }
+  .box2 {
+    padding-top: 20px;
+    border-bottom: 1px solid #ccc;
+    .cur {
+      font-size: 20px;
+      color: #bc1c24;
+      line-height: 20px;
+      margin-bottom: 0;
+    }
+    & > p {
+      color: #6a6a6a;
+      font-size: 16px;
+      margin-bottom: 15px;
+    }
+  }
+  .box3 {
+    padding-top: 40px;
+    .title {
+      height: 30px;
+      line-height: 30px;
+      background: url("../../assets/img/Layout/title.png") left center no-repeat;
+      background-size: 41px 29px;
+      color: #c1aa7b;
+      font-size: 22px;
+      padding-left: 50px;
+      margin-bottom: 20px;
+      font-weight: 700;
+    }
+    .xian {
+      margin-top: 40px;
+      position: relative;
+      width: 100%;
+      height: 2px;
+      background-color: #c1aa7b;
+      margin-bottom: 30px;
+      .xian_son {
+        position: absolute;
+        top: -8px;
+        left: 7%;
+        & > div {
+          width: 17px;
+          height: 17px;
+          border-radius: 50%;
+          border: 2px solid #c1aa7b;
+          background-color: #fff;
+        }
+        & > p {
+          color: #1f1f1f;
+          font-size: 16px;
+          font-weight: 700;
+          margin-top: 5px;
+          margin-left: -8px;
+        }
+        &:nth-of-type(2) {
+          left: 27%;
+        }
+        &:nth-of-type(3) {
+          left: 47%;
+        }
+        &:nth-of-type(4) {
+          left: 67%;
+        }
+        &:nth-of-type(5) {
+          left: 87%;
+        }
+      }
+      .active {
+        & > div {
+          background-color: #c1aa7b;
+        }
+        & > p {
+          color: #bc1c24;
+        }
+      }
+    }
+  }
+}
+</style>

webM/src/views/Publications/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="Publications">
+    <div class="ban" ref="ban">
+      <img src="@/assets/img/bannerP.png" alt="" />
+      <h3>Publications</h3>
+    </div>
+    <div class="rowAll" :class="{ curSorll: menaSon }">
+      <div
+        @click="cutTab(item.path)"
+        class="row"
+        v-for="(item, index) in tabData"
+        :key="index"
+        :class="{ active: idMate === item.path }"
+      >
+        {{ item.name }}
+      </div>
+    </div>
+    <Router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Publications",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      menaSon: false,
+      idMate: "/Layout/Publications/Magazines",
+      tabData: [
+        { name: "Magazines", path: "/Layout/Publications/Magazines" },
+        { name: "Catalogues", path: "/Layout/Publications/Catalogues" },
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    $route() {
+      this.idMate = this.$route.path;
+    },
+  },
+  //方法集合
+  methods: {
+    cutTab(path) {
+      this.$router.push(path).catch(() => {});
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.idMate = this.$route.path;
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        // 获取顶部元素ban的高度
+        let banDom = this.$refs.ban;
+        // 获取滚动的总元素
+        let scrollDom = document.querySelector(".Layout");
+        // 获取顶部固定栏
+        let LayoutTop = document.querySelector(".Layout .top");
+        scrollDom.onscroll = () => {
+          if (scrollDom.scrollTop > banDom.offsetHeight) {
+            LayoutTop.style.display = "none";
+            this.menaSon = true;
+          } else {
+            LayoutTop.style.display = "flex";
+            this.menaSon = false;
+          }
+        };
+      }, 0);
+    });
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {
+    // 获取滚动的总元素,删除滚动事件
+    let scrollDom = document.querySelector(".Layout");
+    scrollDom.onscroll = null;
+    // 获取顶部固定栏
+    let LayoutTop = document.querySelector(".Layout .top");
+    LayoutTop.style.display = "flex";
+  }, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.Publications {
+  width: 100%;
+  .ban {
+    position: relative;
+    width: 100%;
+    & > img {
+      width: 100%;
+    }
+    & > h3 {
+      position: absolute;
+      font-size: 24px;
+      color: #fff;
+      left: 30px;
+      bottom: 30px;
+      border-bottom: 1px solid #fff;
+    }
+  }
+  .rowAll {
+    width: 100%;
+    height: 70px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    background-color: #f7f6f3;
+    .row {
+      font-size: 16px;
+      height: 30px;
+      line-height: 30px;
+      padding: 0 8px;
+    }
+    .active {
+      background-color: #c1aa7b;
+      border-radius: 15px;
+      color: #fff;
+    }
+  }
+  .curSorll {
+    z-index: 99;
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+}
+</style>