shaogen1995 3 gadi atpakaļ
vecāks
revīzija
df0e8fd704

BIN
web/public/data/About/a2.gif


BIN
web/public/data/About/a6.jpg


BIN
web/public/data/About/a7.gif


BIN
web/public/data/About/au2.jpg


BIN
web/public/data/About/au3.gif


BIN
web/public/data/About/au6.gif


BIN
web/public/data/About/banner.jpg


BIN
web/public/data/About/link1.jpg


BIN
web/public/data/About/link2.jpg


BIN
web/public/data/About/link3.jpg


BIN
web/public/data/About/link4.jpg


BIN
web/public/data/About/link5.jpg


BIN
web/public/data/About/link6.jpg


BIN
web/public/data/About/youxiang.jpg


BIN
web/public/data/JoinSupport/bg4.gif


BIN
web/public/data/JoinSupport/dianhua.png


BIN
web/public/data/JoinSupport/hong.gif


+ 13 - 0
web/src/router/index.js

@@ -164,8 +164,21 @@ const routes = [
             component: () => import('../views/JoinSupport/Give.vue'),
             component: () => import('../views/JoinSupport/Give.vue'),
             meta: { myName: 'Join & Support', nameAll: 'Give' },
             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' },
+      },
     ]
     ]
   }
   }
 ]
 ]

+ 292 - 0
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>

+ 17 - 9
web/src/views/JoinSupport/Give.vue

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

+ 99 - 35
web/src/views/JoinSupport/GiveInfo.vue

@@ -1,45 +1,109 @@
 <!--  -->
 <!--  -->
 <template>
 <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>
 </template>
 
 
 <script>
 <script>
-
+import { JoinSupport } from "../dataAll";
 export default {
 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>
 </script>
 <style lang='less' scoped>
 <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>
 </style>

+ 2 - 2
web/src/views/JoinSupport/Volunteer.vue

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

+ 2 - 1
web/src/views/JoinSupport/VolunteerInfo.vue

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

+ 3 - 2
web/src/views/JoinSupport/index.vue

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

Failā izmaiņas netiks attēlotas, jo tās ir par lielu
+ 5 - 3
web/src/views/dataAll.js