up

web/src/router/index.js

@@ -164,8 +164,21 @@ const routes = [
             component: () => import('../views/JoinSupport/Give.vue'),
             meta: { myName: 'Join & Support', nameAll: 'Give' },
           },
+          {
+            path: '/Layout/JoinSupport/GiveInfo',
+            name: 'GiveInfo',
+            component: () => import('../views/JoinSupport/GiveInfo.vue'),
+            meta: { myName: 'Join & Support', nameAll: 'Give' },
+          },
         ]
       },
+      //About页面
+      {
+        path: '/Layout/About',
+        name: 'About',
+        component: () => import('../views/About/index.vue'),
+        meta: { myName: 'About' },
+      },
     ]
   }
 ]

web/src/views/About/index.vue

@@ -0,0 +1,292 @@
+<!--  -->
+<template>
+  <div class="About">
+    <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="director">
+      <div>
+        <p>Welcome to the website of the Capital Museum of China.</p>
+        <p>
+          We are looking forward to your visit. The Capital Museum is a palace
+          of Beijing culture. Its collections relate to the long development of
+          the capital city, showcasing its magnificent living history of 500,000
+          years, urban history of 3,000 years and history as the Chinese capital
+          for 800 years. The museum also presents cultural and artistic
+          exhibitions from different regions and displays the achievements of
+          various ethnic groups at home and abroad. You can feel the breadth of
+          both Chinese and world civilizations.
+        </p>
+        <p>
+          Historical culture is the soul of a city and in the case of Beijing it
+          is a great witness to the long history of Chinese civilization. We are
+          looking forward to welcoming you to share with us the full
+          interpretation of this glorious civilization while immersing yourself
+          in the great wisdom of Beijing.<br />
+        </p>
+      </div>
+      <p class="more">Read More</p>
+    </div>
+    <div class="history">
+      <div>
+        <p>
+          <span
+            style="font-family: arial, helvetica, sans-serif; font-size: 14px"
+            >The Capital Museum, located in the Confucius Temple, was prepared
+            in 1953 and formally opened in 1981.</span
+          >
+        </p>
+        <p><br /></p>
+        <p>
+          <span
+            style="font-family: arial, helvetica, sans-serif; font-size: 14px"
+            >As a major cultural construction project in Beijing in the "10th
+            Five-Year Plan", the new complex of the Capital Museum, approved by
+            the Beijing Municipal Government in 1999, further approved by the
+            State Council after being submitted by the National Development and
+            Reform Commission in 2001, commenced its construction in December
+            2001.</span
+          >
+        </p>
+        <p><br /></p>
+        <p>
+          <span
+            style="font-family: arial, helvetica, sans-serif; font-size: 14px"
+            >The new Capital Museum had the trial operation in December 2005 and
+            was officially opened on May 18, 2006. With its magnificent
+            architecture, abundant exhibitions, advanced technology and complete
+            functions, the Capital Museum contributes to Beijing's standing as a
+            famous historical and cultural city, a cultural centre and an
+            international metropolis and ranks among the first class museums
+            both at home and abroad and is regarded as one of the first "State
+            First-class Museums" in 2008.</span
+          >
+        </p>
+      </div>
+    </div>
+    <div class="partner">
+      <ul>
+        <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;)`"
+            ></span>
+          </a>
+        </li>
+      </ul>
+      <!-- 更多 -->
+      <img class="see" src="/data/About/a7.gif" alt="" />
+    </div>
+    <div class="contact">
+      <p>Official website of Capital Museum: <span>首页（地址待定）</span></p>
+      <p>
+        Telephone reservation (individual visitors):
+        <span>+86 (10) 63393339</span>
+      </p>
+      <p>
+        Telephone reservation (group visitors): <span>+86 (10) 63370458</span>
+      </p>
+      <p>Inquiry Hotline: <span>+86 (10) 63370491</span></p>
+      <p>
+        <a href="mailto:ICD@capitalmuseum.org.cn"
+          ><img src="/data/About/youxiang.jpg"
+        /></a>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "About",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      link: [
+        "http://www.edo-tokyo-museum.or.jp/en/",
+        "https://en.shm.ru/",
+        "https://www.rom.on.ca/en",
+        "https://museum.seoul.go.kr/eng/index.do",
+        "https://museumsvictoria.com.au/",
+        "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>
+.About {
+  .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;
+    }
+  }
+  .director {
+    clear: both;
+    background-image: url("/data/About/au2.jpg");
+    background-position: center top;
+    background-repeat: no-repeat;
+    background-color: #cb0707;
+    padding-top: 135px;
+    width: 100%;
+    font-size: 16px;
+    color: #fff;
+    line-height: 20px;
+    padding-bottom: 20px;
+    & > div {
+      width: 750px;
+      margin: 0 auto;
+      padding-left: 50px;
+      & > p {
+        text-align: justify;
+        padding-bottom: 13px;
+      }
+    }
+    .more {
+      cursor: pointer;
+      color: #fff;
+      font-weight: bold;
+      font-size: 12px;
+      color: #fff;
+      line-height: 30px;
+      text-align: center;
+      border: 1px solid #fff;
+      width: 110px;
+      margin: 20px auto;
+      padding: 0;
+    }
+  }
+  .history {
+    clear: both;
+    width: 100%;
+    height: 501px;
+    background-image: url("/data/About/au3.gif");
+    background-repeat: no-repeat;
+    background-position: center top;
+    & > div {
+      width: 1120px;
+      margin: 0 auto;
+      padding-top: 165px;
+      font-size: 16px;
+      color: #656565;
+      line-height: 20px;
+    }
+  }
+  .partner {
+    clear: both;
+    width: 100%;
+    height: 559px;
+    position: relative;
+    background: url("/data/About/a6.jpg") no-repeat top center;
+    & > ul {
+      width: 1190px;
+      position: absolute;
+      top: 115px;
+      left: 50%;
+      margin-left: -595px;
+      zoom: 1;
+      overflow: hidden;
+      & > li {
+        cursor: pointer;
+        width: 386px;
+        height: 143px;
+        float: left;
+        display: inline;
+        margin: 0 10px 20px 0;
+        position: relative;
+        background: url("/data/About/a2.gif") no-repeat 0 0;
+        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);
+          }
+        }
+      }
+    }
+    .see {
+      cursor: pointer;
+      position: absolute;
+      top: 451px;
+      left: 50%;
+      margin-left: -74px;
+    }
+  }
+  .contact {
+    clear: both;
+    width: 930px;
+    margin: 0 auto 100px;
+    background-image: url("/data/About/au6.gif");
+    background-position: center top;
+    background-repeat: no-repeat;
+    background-color: #fff;
+    padding: 143px 35px 35px;
+    font-size: 24px;
+    line-height: 30px;
+    & > p {
+      padding: 10px 0;
+      font-size: 14px;
+      & > span {
+        color: rgb(255, 0, 0);
+      }
+    }
+  }
+}
+</style>

web/src/views/JoinSupport/Give.vue

@@ -2,9 +2,9 @@
   <div class="Give">
     <div class="row">
       <div class="left">
-        <div class="txt">Individuals</div>
+        <div class="txt" @click="skip(4)">Individuals</div>
       </div>
-      <div class="right">
+      <div class="right" @click="skip(4)">
         <div class="txtShow">
           Since the establishment of Capital Museum, we have got sufficient
           supports from people from all walks of life. Due to the limited space,
@@ -15,7 +15,7 @@
       </div>
     </div>
     <div class="row">
-      <div class="right right2">
+      <div class="right right2" @click="skip(5)">
         <div class="txtShow">
           The century-old Beijing Match Factory donated to Capital Museum a
           large number of files and real objects which record the development of
@@ -25,7 +25,7 @@
         </div>
       </div>
       <div class="left left2">
-        <div class="txt">Corporations & Institutions</div>
+        <div class="txt" @click="skip(5)">Corporations & Institutions</div>
       </div>
     </div>
   </div>
@@ -44,7 +44,14 @@ export default {
   //监控data中的数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    skip(id) {
+      this.$router.push({
+        name: "GiveInfo",
+        query: { id },
+      });
+    },
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
@@ -62,7 +69,8 @@ export default {
 .Give {
   clear: both;
   width: 1200px;
-  margin: 0 auto 100px;
+  height: 700px;
+  margin: 0 auto 0;
   background-repeat: no-repeat;
   background-position: 0 0;
   .row {
@@ -93,10 +101,10 @@ export default {
         line-height: 76px;
       }
     }
-    .left2{
+    .left2 {
       background: url("/data/JoinSupport/wg2.gif");
       background-size: 100% 100%;
-      .txt{
+      .txt {
         width: 370px;
       }
     }
@@ -118,7 +126,7 @@ export default {
         color: #fff;
       }
     }
-    .right2{
+    .right2 {
       background: url("/data/JoinSupport/wg2.jpg");
       background-size: 100% 100%;
     }

web/src/views/JoinSupport/GiveInfo.vue

@@ -1,45 +1,109 @@
 <!--  -->
 <template>
-<div class='GiveInfo'>GiveInfo</div>
+  <div class="GiveInfo">
+    <div class="main">
+      <h1>{{ info.h3 }}</h1>
+      <div class="txt" v-html="info.txt"></div>
+    </div>
+    <div class="phw">
+      <div class="phone">
+        86 (10) 63370488<br />
+        86 (10) 63363388 to extension 6223
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-
+import { JoinSupport } from "../dataAll";
 export default {
-name:'GiveInfo',
-components: {},
-data() {
-//这里存放数据
-return {
-
+  name: "GiveInfo",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      info: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    let id = this.$route.query.id;
+    id = Number(id);
+    JoinSupport.Give.forEach((v) => {
+      if (v.id === id) this.info = v;
+    });
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
-},
-//监听属性 类似于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类
-
+.GiveInfo {
+  background: url("/data/JoinSupport/bg4.gif");
+  background-repeat: repeat-x;
+  background-position: center bottom;
+  padding-bottom: 1px;
+  .main {
+    clear: both;
+    width: 1200px;
+    margin: 0 auto;
+    background-color: #1f1d1d;
+    padding: 30px 30px 100px;
+    opacity: 0.9;
+    font-size: 14px;
+    color: #ccc;
+    line-height: 26px;
+    & > h1 {
+      padding-left: 20px;
+      font-size: 24px;
+      line-height: 26px;
+      color: #fff;
+      background-image: url("/data/JoinSupport/hong.gif");
+      background-repeat: no-repeat;
+      background-position: 0 12px;
+      padding-bottom: 20px;
+    }
+    .txt {
+      /deep/ p {
+        font-size: 18px;
+        line-height: 26px;
+        margin-bottom: 60px;
+      }
+    }
+  }
+  .phw {
+    clear: both;
+    width: 1200px;
+    margin: 0 auto 100px;
+    position: relative;
+    .phone {
+      width: 529px;
+      height: 181px;
+      position: absolute;
+      left: 23px;
+      top: -120px;
+      background-image: url("/data/JoinSupport/dianhua.png");
+      background-repeat: no-repeat;
+      background-position: 0 0;
+      font-weight: bold;
+      font-size: 24px;
+      color: #fff;
+      line-height: 36px;
+      padding: 76px 0 0 112px;
+    }
+  }
+}
 </style>

web/src/views/JoinSupport/Volunteer.vue

@@ -64,9 +64,9 @@ export default {
 .Volunteer {
   clear: both;
   width: 1200px;
-  height: 627px;
+  height: 727px;
   padding-top: 4px;
-  margin: 20px auto 100px;
+  margin: 20px auto 0;
   background-image: url("/data/JoinSupport/bg3.gif");
   background-repeat: no-repeat;
   background-position: 0 0;

web/src/views/JoinSupport/VolunteerInfo.vue

@@ -56,10 +56,11 @@ export default {
 .VolunteerInfo {
   clear: both;
   width: 1186px;
-  margin: 0 auto 80px;
+  margin: 0 auto 0;
   font-size: 18px;
   color: #333;
   line-height: 30px;
+  padding-bottom: 100px;
   & > h1 {
     font-weight: 700;
     text-align: center;

web/src/views/JoinSupport/index.vue

@@ -77,6 +77,7 @@ export default {
 </script>
 <style lang='less' scoped>
 .JoinSupport {
+  background-color: #fff;
   .ban {
     width: 100%;
     margin: auto;
@@ -88,7 +89,7 @@ export default {
     width: 100%;
     padding-bottom: 8px;
     background: url("../../assets/images/Visit/bg_3.png") left bottom repeat-x
-      #f1f1f1;
+      #fff;
     overflow: hidden;
     zoom: 1;
     & > ul {
@@ -96,7 +97,7 @@ export default {
       width: 1180px;
       margin: 0 auto;
       & > li {
-        background: #f1f1f1;
+        background: #fff;
         cursor: pointer;
         width: 168px;
         height: 108px;