up

web/src/router/index.js

@@ -138,6 +138,34 @@ const routes = [
         ]
 
       },
+      // JoinSupport页面
+      {
+        path: '/Layout/JoinSupport',
+        name: 'JoinSupport',
+        component: () => import('../views/JoinSupport/index.vue'),
+        meta: { myName: 'Join & Support' },
+        redirect: { name: 'Volunteer' },
+        children: [
+          {
+            path: '/Layout/JoinSupport/Volunteer',
+            name: 'Volunteer',
+            component: () => import('../views/JoinSupport/Volunteer.vue'),
+            meta: { myName: 'Join & Support', nameAll: 'Volunteer' },
+          },
+          {
+            path: '/Layout/JoinSupport/VolunteerInfo',
+            name: 'VolunteerInfo',
+            component: () => import('../views/JoinSupport/VolunteerInfo.vue'),
+            meta: { myName: 'Join & Support', nameAll: 'Volunteer' },
+          },
+          {
+            path: '/Layout/JoinSupport/Give',
+            name: 'Give',
+            component: () => import('../views/JoinSupport/Give.vue'),
+            meta: { myName: 'Join & Support', nameAll: 'Give' },
+          },
+        ]
+      },
     ]
   }
 ]

web/src/views/JoinSupport/Give.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="Give">
+    <div class="row">
+      <div class="left">
+        <div class="txt">Individuals</div>
+      </div>
+      <div class="right">
+        <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,
+          here we only give a few examples, and we show our respect to all units
+          and individuals who have supported the development of Chinese museums
+          and have given help and supports to Capital Museum.
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="right right2">
+        <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
+          Beijing's light industry in modern history, including 518 sets of high
+          standard real samples of matches, 40 volumes data, and 3 volumes of
+          text materials of sparks, etc.
+        </div>
+      </div>
+      <div class="left left2">
+        <div class="txt">Corporations & Institutions</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Give",
+  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>
+.Give {
+  clear: both;
+  width: 1200px;
+  margin: 0 auto 100px;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  .row {
+    width: 100%;
+    height: 300px;
+    display: flex;
+    & > div {
+      width: 50%;
+      height: 100%;
+    }
+    .left {
+      position: relative;
+      background: url("/data/JoinSupport/wg1.gif");
+      background-size: 100% 100%;
+      .txt {
+        cursor: pointer;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 20px;
+        width: 218px;
+        height: 78px;
+        border: 1px solid #fff;
+        color: #fff;
+        font-weight: 700;
+        text-align: center;
+        line-height: 76px;
+      }
+    }
+    .left2{
+      background: url("/data/JoinSupport/wg2.gif");
+      background-size: 100% 100%;
+      .txt{
+        width: 370px;
+      }
+    }
+    .right {
+      position: relative;
+      cursor: pointer;
+      background: url("/data/JoinSupport/wg1.jpg");
+      background-size: 100% 100%;
+      .txtShow {
+        transition: all 0.3s;
+        opacity: 0;
+        padding: 90px 45px 0;
+        background-color: rgba(0, 0, 0, 0.6);
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        font-size: 14px;
+        line-height: 24px;
+        color: #fff;
+      }
+    }
+    .right2{
+      background: url("/data/JoinSupport/wg2.jpg");
+      background-size: 100% 100%;
+    }
+    &:hover {
+      .right {
+        .txtShow {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+</style>

web/src/views/JoinSupport/GiveInfo.vue

@@ -0,0 +1,45 @@
+<!--  -->
+<template>
+<div class='GiveInfo'>GiveInfo</div>
+</template>
+
+<script>
+
+export default {
+name:'GiveInfo',
+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>

web/src/views/JoinSupport/Volunteer.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="Volunteer">
+    <div
+      class="row"
+      v-for="(item, index) in data"
+      :key="item.id"
+      @click="skip(item.id)"
+    >
+      <img :src="`/data/JoinSupport/v${index + 1}.jpg`" alt="" />
+      <h1>{{ item.h3 }}</h1>
+      <div
+        class="y1"
+        :style="`background-image:url('/data/JoinSupport/y${index + 1}.png')`"
+      ></div>
+      <div
+        class="d1"
+        :style="`background-image:url('/data/JoinSupport/y${index + 1}Ac.png')`"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { JoinSupport } from "../dataAll";
+export default {
+  name: "Volunteer",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 点击单个进入详情
+    skip(id) {
+      this.$router.push({
+        name: "VolunteerInfo",
+        query: { id },
+      });
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.data = JoinSupport.Volunteer;
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.Volunteer {
+  clear: both;
+  width: 1200px;
+  height: 627px;
+  padding-top: 4px;
+  margin: 20px auto 100px;
+  background-image: url("/data/JoinSupport/bg3.gif");
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  .row {
+    cursor: pointer;
+    width: 300px;
+    height: 627px;
+    float: left;
+    position: relative;
+    overflow: hidden;
+    background-color: #000;
+    & > img {
+      transition: all 0.5s;
+      border: none;
+      vertical-align: top;
+      opacity: 0.4;
+      width: 300px;
+      height: 627px;
+    }
+    & > h1 {
+      font-weight: 700;
+      width: 300px;
+      font-size: 24px;
+      color: #fff;
+      text-align: center;
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 10;
+    }
+    .y1 {
+      width: 74px;
+      height: 74px;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      z-index: 1;
+      margin: -37px 0 0 -37px;
+    }
+    .d1 {
+      transition: all 0.5s;
+      display: block;
+      opacity: 0;
+      width: 228px;
+      height: 228px;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      z-index: 2;
+      margin: -114px 0 0 -114px;
+    }
+    &:hover {
+      & > img {
+        opacity: 1;
+      }
+      .d1 {
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

web/src/views/JoinSupport/VolunteerInfo.vue

@@ -0,0 +1,136 @@
+<!--  -->
+<template>
+  <div class="VolunteerInfo">
+    <h1>{{ info.h3 }}</h1>
+    <div class="txt" v-html="info.txt"></div>
+    <div v-if="info.card">
+      <div class="card" v-for="(item, index) in info.card" :key="index">
+        <h2>Requirements <span></span></h2>
+        <div class="pp" v-html="item.pp"></div>
+        <!-- 红色小圈 -->
+        <div class="quan"></div>
+      </div>
+    </div>
+    <div class="bottom" v-html="info.bott" v-if="info.bott"></div>
+  </div>
+</template>
+
+<script>
+// <p class='xx'>1111111111</p> <p>1111111111</p>
+import { JoinSupport } from "../dataAll";
+export default {
+  name: "VolunteerInfo",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      info: {},
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    let id = this.$route.query.id;
+    id = Number(id);
+    JoinSupport.Volunteer.forEach((v) => {
+      if (v.id === id) this.info = v;
+    });
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.VolunteerInfo {
+  clear: both;
+  width: 1186px;
+  margin: 0 auto 80px;
+  font-size: 18px;
+  color: #333;
+  line-height: 30px;
+  & > h1 {
+    font-weight: 700;
+    text-align: center;
+    padding: 20px 0 0px;
+    font-size: 30px;
+    color: #000;
+    line-height: 1em;
+  }
+  .txt {
+    /deep/.xx {
+      font-weight: 700;
+      margin-top: 50px;
+    }
+    /deep/ p {
+      margin-bottom: 22px;
+    }
+  }
+  .card {
+    position: relative;
+    margin-top: 20px;
+    margin-bottom: 50px;
+    clear: both;
+    padding: 40px 130px 40px 40px;
+    background-color: #fff;
+    box-shadow: 0px 1px 3px 1px #ccc;
+    & > h2 {
+      height: 40px;
+      line-height: 40px;
+      font-size: 30px;
+      font-weight: 700;
+      position: relative;
+      & > span {
+        position: absolute;
+        bottom: -2px;
+        left: 0;
+        display: inline-block;
+        width: 65px;
+        height: 3px;
+        background-color: #c7000b;
+      }
+    }
+    .pp {
+      /deep/ p {
+        margin-top: 22px;
+      }
+      /deep/ span {
+        color: rgb(255, 0, 0);
+      }
+      /deep/ a {
+        color: rgb(255, 0, 0);
+        font-weight: 700;
+        text-decoration: underline;
+      }
+    }
+    .quan{
+      position: absolute;
+      top: 50%;
+      right: 30px;
+      transform: translateY(-50%);
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      border: 2px solid #c50009;
+    }
+  }
+  .bottom{
+    text-align: center;
+    /deep/ p {
+      font-weight: 700;
+      margin-bottom: 22px;
+    }
+  }
+}
+</style>

web/src/views/JoinSupport/index.vue

@@ -0,0 +1,130 @@
+<!--  -->
+<template>
+  <div class="JoinSupport">
+    <div class="ban"></div>
+    <div class="nav_2">
+      <ul>
+        <li
+          :class="{ cur: $route.meta.nameAll === item.url }"
+          v-for="(item, index) in topLi"
+          :key="index"
+          @click="skip(item.url)"
+        >
+          <img
+            :src="`/data/JoinSupport/${item.img}`"
+            alt=""
+          />
+          <p>{{ item.name }}</p>
+        </li>
+      </ul>
+    </div>
+    <div class="pos">
+      <span class="pos1">Your Position:&nbsp;</span>
+      <Router-link to="/Layout/Home">Home></Router-link>
+      <Router-link to="/Layout/JoinSupport/Volunteer">Join & Support ></Router-link>
+      <Router-link :to="`/Layout/JoinSupport/${$route.meta.nameAll}`">{{'Ways to '+$route.meta.nameAll}} ></Router-link>
+    </div>
+    <!-- 二级嵌套路由 -->
+    <Router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "JoinSupport",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      topLi: [
+        {
+          id: 1,
+          name: "Ways to Volunteer",
+          url:'Volunteer',
+          img: "n1.png",
+        },
+        {
+          id: 2,
+          name: "Ways to Give",
+          url:'Give',
+          img: "n2.png",
+        },
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    skip(url){
+      this.$router.push(`/Layout/JoinSupport/${url}`).catch(() => {});
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.JoinSupport {
+  .ban {
+    width: 100%;
+    margin: auto;
+    background: url("/data/JoinSupport/banner.jpg") no-repeat
+      center top #000000;
+    height: 300px;
+  }
+  .nav_2 {
+    width: 100%;
+    padding-bottom: 8px;
+    background: url("../../assets/images/Visit/bg_3.png") left bottom repeat-x
+      #f1f1f1;
+    overflow: hidden;
+    zoom: 1;
+    & > ul {
+      display: flex;
+      width: 1180px;
+      margin: 0 auto;
+      & > li {
+        background: #f1f1f1;
+        cursor: pointer;
+        width: 168px;
+        height: 108px;
+        text-align: center;
+        & > img {
+          margin-top: 25px;
+        }
+        & > p {
+          margin-top: 5px;
+          font-size: 14px;
+          line-height: 18px;
+        }
+      }
+      .cur {
+        background: url("../../assets/images/Visit/bg_1.jpg") center top
+          no-repeat #f1f1f1;
+      }
+    }
+  }
+  .pos {
+    height: 28px;
+    line-height: 28px;
+    font-size: 12px;
+    margin: 0 auto 10px auto;
+    width: 1180px;
+    .pos1 {
+      color: #c20e11;
+    }
+  }
+}
+</style>

web/src/views/layout/data.js

@@ -66,10 +66,10 @@ export const topData = [
   {
     id: 7,
     name: "Join & Support",
-    url: "JoinSupport",
+    url: "JoinSupport/Volunteer",
     children: [
-      { id: 7.1, name: "Ways to Volunteer" },
-      { id: 7.2, name: "Ways to Give" },
+      {url:'/Layout/JoinSupport/Volunteer', id: 7.1, name: "Ways to Volunteer" },
+      {url:'/Layout/JoinSupport/Give', id: 7.2, name: "Ways to Give" },
     ],
   },
   {