ShouBo/web/src/views/JoinSupport/index.vue

<!--  -->
<template>
  <div class="JoinSupport">
    <div class="ban" data-aria-viewport-area tabindex="0"
      aria-label :aria-description="`You've reached the banner area of the ${$route.meta.nameAll} page; this area has one image; please use the tab key to go through the content.`"
    ></div>
    <div class="nav_2" data-aria-viewport-area tabindex="0"
      aria-label aria-description="You've reached the secondary menu of the Join & Support section; this menu has two options; please use the tab key to go through the menu."
    >
      <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" data-aria-viewport-area tabindex="0"
      aria-label aria-description="You've reached the path area, this area has three URLs; please use the tab key to navigate through the content."
    >
      <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 {
  background-color: #fff;
  .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
      #fff;
    overflow: hidden;
    zoom: 1;
    & > ul {
      display: flex;
      width: 1180px;
      margin: 0 auto;
      & > li {
        background: #fff;
        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>