up

web/src/router/index.js

@@ -179,6 +179,18 @@ const routes = [
         component: () => import('../views/About/index.vue'),
         meta: { myName: 'About' },
       },
+      {
+        path: '/Layout/About/Director',
+        name: 'Director',
+        component: () => import('../views/About/Director.vue'),
+        meta: { myName: 'About' },
+      },
+      {
+        path: '/Layout/About/link',
+        name: 'AboutLink',
+        component: () => import('../views/About/link.vue'),
+        meta: { myName: 'About' },
+      },
     ]
   }
 ]

web/src/views/About/Director.vue

@@ -0,0 +1,196 @@
+<!--  -->
+<template>
+  <div class="Director">
+    <div class="ban"></div>
+    <div class="pos">
+      <span class="pos1">Your Position:&nbsp;</span>
+      <Router-link to="/Layout/Home">Home></Router-link>
+      <Router-link to="/Layout/About">About></Router-link>
+    </div>
+    <div class="conten">
+      <h1 class="webTitle">From the Director</h1>
+      <div class="peopleBox">
+        <h2>——<span>Leadership</span>——</h2>
+        <ul>
+          <li>
+            <img src="/data/About/ren.jpg" />
+            <strong>Han Zhanming</strong>
+            <p>Director of Capital Museum</p>
+          </li>
+        </ul>
+      </div>
+      <div class="contentBox">
+        <p>
+          The Capital Museum of China is a comprehensive museum affiliated with
+          the municipal government of Beijing. It is committed to displaying
+          Beijing's 500,000 years of history of human settlement, 3,000 years of
+          urban history and 800 years of history as the capital of China. What
+          is more, the museum is responsible for the collection, collation,
+          restoration, research and preservation of the historical and cultural
+          heritage of the Beijing region. Furthermore, it stands as an important
+          site of cultural exchange between the new Beijing and the larger
+          world.
+        </p>
+        <p>
+          In the Capital Museum's eleven core exhibition rooms lie collections
+          of cultural relics comprising more than one million tangible and
+          documentary artifacts, including numerous exquisite works of art and
+          precious historical objects. These invaluable relics serve as
+          collective evidences of the robust creativity and lasting vitality of
+          the great and ancient nation of China.
+        </p>
+        <p>
+          The three temporary exhibition rooms of the Capital Museum are often
+          used to house first-class exhibits from around China and the world.
+          These exhibitions epitomize the city of Beijing's readiness to embrace
+          different cultures and peoples from around the globe. At the same
+          time, they reflect both the uniformity and the diversity of humanity's
+          historical and cultural development.
+        </p>
+        <p>
+          Friends from home and abroad, we invite you all to visit the website
+          of the Capital Museum and get to know Beijing and China a little
+          better. You are also welcome to visit the Capital Museum to see into
+          the past and present of Beijing and China — and perhaps to see into
+          yourself a little better as well.
+        </p>
+      </div>
+      <div class="back_btn" @click="$router.push('/Layout/About')">Back</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Director",
+  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>
+.Director {
+  .ban {
+    width: 100%;
+    margin: auto;
+    background: url("/data/About/banner.jpg") no-repeat center top #000000;
+    height: 300px;
+  }
+  .pos {
+    height: 28px;
+    line-height: 28px;
+    font-size: 12px;
+    margin: 0 auto 10px auto;
+    width: 1180px;
+    .pos1 {
+      color: #c20e11;
+    }
+  }
+  .conten {
+    width: 1180px;
+    margin: 0 auto;
+    .webTitle {
+      font-size: 35px;
+      line-height: 118px;
+      background-color: #fff;
+      border: 1px solid #e0e0e0;
+      border-bottom: none;
+      text-align: center;
+    }
+    .peopleBox {
+      background-color: #fff;
+      border: 1px solid #e0e0e0;
+      border-bottom: none;
+      padding-bottom: 40px;
+      & > h2 {
+        font-size: 22px;
+        color: #939393;
+        line-height: 118px;
+        text-align: center;
+        & > span {
+          color: #bf2323;
+          margin: 0 20px;
+        }
+      }
+      ul {
+        overflow: hidden;
+        li {
+          background-color: #f1f1f1;
+          border: 1px solid #e0e0e0;
+          display: inline;
+          float: left;
+          width: 1098px;
+          margin-left: 38px;
+          padding: 30px 0 40px 0;
+          img {
+            border: 5px solid #fff;
+            border-radius: 50%;
+            display: block;
+            width: 170px;
+            height: 170px;
+            overflow: hidden;
+            margin: 0 auto 20px auto;
+          }
+          strong {
+            font-weight: 700;
+            font-size: 36px;
+            line-height: 200%;
+            text-align: center;
+            display: block;
+          }
+          p {
+            font-weight: bold;
+            font-size: 18px;
+            color: #c20e11;
+            line-height: 200%;
+            text-align: center;
+          }
+        }
+      }
+    }
+    .contentBox {
+      font-size: 18px;
+      color: #1f1d1d;
+      line-height: 26px;
+      background-color: #fff;
+      border: 1px solid #e0e0e0;
+      padding: 40px;
+      p {
+        margin-bottom: 30px;
+      }
+    }
+    .back_btn {
+      font-weight: bold;
+      font-size: 16px;
+      line-height: 38px;
+      background: #f1f1f1;
+      border: 1px solid #000;
+      text-align: center;
+      display: block;
+      width: 160px;
+      height: 38px;
+      margin: 30px auto;
+      cursor: pointer;
+    }
+  }
+}
+</style>

web/src/views/About/index.vue

@@ -28,7 +28,9 @@
           in the great wisdom of Beijing.<br />
         </p>
       </div>
-      <p class="more">Read More</p>
+      <p class="more" @click="$router.push('/Layout/About/Director')">
+        Read More
+      </p>
     </div>
     <div class="history">
       <div>
@@ -72,15 +74,18 @@
         <li v-for="(item, index) in link" :key="index">
           <a :href="item" target="_blank">
             <span
-              :style="`background-image: url(&quot;/data/About/link${
-                index + 1
-              }.jpg&quot;)`"
+              :style="`background-image: url(/data/About/link${index + 1}.jpg)`"
             ></span>
           </a>
         </li>
       </ul>
       <!-- 更多 -->
-      <img class="see" src="/data/About/a7.gif" alt="" />
+      <img
+        class="see"
+        src="/data/About/a7.gif"
+        alt=""
+        @click="$router.push('/Layout/About/link')"
+      />
     </div>
     <div class="contact">
       <p>Official website of Capital Museum: <span>首页（地址待定）</span></p>

web/src/views/About/link.vue

@@ -0,0 +1,203 @@
+<!--  -->
+<template>
+  <div class="AboutLink">
+    <div class="ban"></div>
+    <div class="pos">
+      <span class="pos1">Your Position:&nbsp;</span>
+      <Router-link to="/Layout/Home">Home></Router-link>
+      <Router-link to="/Layout/About">About></Router-link>
+    </div>
+    <div class="lmname"></div>
+    <div class="wrap" :class="{wrap2:item.bac}" v-for="(item,index) in data" :key="index">
+      <div class="box">
+        <h2>{{item.title}}</h2>
+        <div class="row" v-for="val in item.son" :key="val.img">
+          <a :href="val.url" target="_blank">
+            <span
+              :style="`background-image: url(/data/About/link/${val.img}.jpg)`"
+            ></span>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="join">
+      <img src="/data/About/botTxt.gif" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AboutLink",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data:[
+        {title:'Australia',son:[
+          {img:'1',url:'https://museumsvictoria.com.au/'},
+        ]},
+        {title:'Cambodia',bac:true,son:[
+          {img:'2',url:'https://apsaraauthority.gov.kh/?page=front&lg=en'},
+        ]},
+        {title:'Canada',son:[
+          {img:'3',url:'https://www.rom.on.ca/en'},
+          {img:'4',url:'https://royalbcmuseum.bc.ca/'},
+        ]},
+        {title:'Colombia',bac:true,son:[
+          {img:'5',url:'http://www.museonacional.gov.co/Paginas/default.aspx'},
+        ]},
+        {title:'Hungary',son:[
+          {img:'6',url:'https://mnm.hu/en'},
+          {img:'7',url:'http://www.btm.hu/en/'},
+        ]},
+        {title:'Japan',bac:true,son:[
+          {img:'8',url:'http://www.edo-tokyo-museum.or.jp/en/'},
+        ]},
+        {title:'Mauritius',son:[
+          {img:'9',url:'http://www.mauritiusmuseums.mu/English/Pages/default.aspx'},
+        ]},
+        {title:'Poland',bac:true,son:[
+          {img:'10',url:'https://mnwr.pl/en/'},
+        ]},
+        {title:'Republic of Korea',son:[
+          {img:'11',url:'https://museum.seoul.go.kr/eng/index.do'},
+        ]},
+        {title:'Russia',bac:true,son:[
+          {img:'12',url:'https://en.shm.ru/'},
+          {img:'13',url:'https://mosmuseum.ru/'},
+        ]},
+        {title:'Thailand',son:[
+          {img:'14',url:'https://www.mynmv.com/'},
+        ]},
+        {title:'Ukraine',bac:true,son:[
+          {img:'15',url:'http://www.lhm.lviv.ua/eng/index.html'},
+          {img:'16',url:'https://khanenkomuseum.kiev.ua/en/main'},
+          {img:'17',url:'http://www.kyivhistorymuseum.org/en/museum-affiliates'},
+        ]},
+        {title:'United States of America',son:[
+          {img:'18',url:'https://fisher.usc.edu/'},
+          {img:'19',url:'https://www.samuseum.org/'},
+          {img:'20',url:'https://www.vmfa.museum/'},
+        ]},
+      ]
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.AboutLink {
+  background-color: #fff;
+  .ban {
+    width: 100%;
+    margin: auto;
+    background: url("/data/About/banner.jpg") no-repeat center top #000000;
+    height: 300px;
+  }
+  .pos {
+    height: 28px;
+    line-height: 28px;
+    font-size: 12px;
+    margin: 0 auto 10px auto;
+    width: 1180px;
+    .pos1 {
+      color: #c20e11;
+    }
+  }
+  .lmname {
+    clear: both;
+    width: 1180px;
+    height: 132px;
+    margin: 0 auto;
+    background: url("/data/About/linktop.jpg") no-repeat left 50%;
+    border-bottom: 1px solid #cacaca;
+  }
+  .wrap {
+    clear: both;
+    padding-bottom: 20px;
+    .box {
+      width: 1180px;
+      overflow: hidden;
+      margin: 0 auto;
+      & > h2 {
+        padding: 34px 0 18px;
+        font-size: 18px;
+        line-height: 30px;
+        font-weight: normal;
+        color: #101010;
+      }
+      .row {
+        cursor: pointer;
+        width: 386px;
+        height: 143px;
+        background: url("/data/About/a2.gif") no-repeat 0 0;
+        float: left;
+        display: inline;
+        margin: 0 10px 20px 0;
+        position: relative;
+        a {
+          display: block;
+        }
+        span {
+          width: 100%;
+          height: 90px;
+          display: block;
+          position: absolute;
+          left: 0;
+          top: 50%;
+          margin-top: -45px;
+          background-position: 50% 50%;
+          background-repeat: no-repeat;
+          background-size: auto contain;
+          -webkit-filter: grayscale(100%);
+          -moz-filter: grayscale(100%);
+          -ms-filter: grayscale(100%);
+          -o-filter: grayscale(100%);
+          filter: grayscale(100%);
+          filter: gray;
+        }
+        &:hover {
+          span {
+            -webkit-filter: grayscale(0);
+            -moz-filter: grayscale(0);
+            -ms-filter: grayscale(0);
+            -o-filter: grayscale(0);
+            filter: grayscale(0);
+          }
+        }
+        &:nth-of-type(3){
+          margin-right: 0;
+        }
+      }
+    }
+  }
+  .wrap2{
+    background-image: url('/data/About/acBac.jpg');
+  }
+  .join{
+    clear: both;
+    width: 100%;
+    height: 173px;
+    padding-top: 86px;
+    background: url('/data/About/botBac.jpg') repeat-x top center;
+    text-align: center;
+  }
+}
+</style>

web/src/views/layout/data.js

@@ -76,11 +76,12 @@ export const topData = [
     id: 8,
     name: "About",
     url: "About",
+    about:true,
     children: [
-      { id: 8.1, name: "From the Director" },
-      { id: 8.2, name: "History" },
-      { id: 8.3, name: "Partners & Connections" },
-      { id: 8.4, name: "Contact" },
+      {url:338, id: 8.1, name: "From the Director" },
+      {url:805, id: 8.2, name: "History" },
+      {url:1307, id: 8.3, name: "Partners & Connections" },
+      {url:1515, id: 8.4, name: "Contact" },
     ],
   },
 ]

web/src/views/layout/index.vue

@@ -19,7 +19,7 @@
                 :class="{ active2: menaInd === val.url }"
                 v-for="(val, index) in item.children"
                 :key="index"
-                @click.stop="skipTow(val.url)"
+                @click.stop="skipTow(val.url, item.about)"
               >
                 {{ val.name }}
               </li>
@@ -117,8 +117,14 @@ export default {
       this.$router.push("/Layout/" + url).catch(() => {});
     },
     // 第二级的跳转
-    skipTow(url) {
-      this.$router.push(url).catch(() => {});
+    skipTow(url, about) {
+      // 如果是about页面
+      if (about === true) {
+        this.$router.push("/Layout/About").catch(() => {});
+        setTimeout(() => {
+          window.scrollTo({ top: url, behavior: "smooth" });
+        }, 100);
+      } else this.$router.push(url).catch(() => {});
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）