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

<template>
  <div class="Volunteer" data-aria-viewport-area tabindex="0"
    aria-label aria-description="You've reached the content area of the Ways to Volunteer page, please use the tab key to go through the content."
  >
    <div
      class="row"
      v-for="(item, index) in data"
      :key="item.id"
      @click="skip(item.id)"
      @keydown.enter.passive="skip(item.id)"
      tabindex="0"
      aria-label="Image link"
      :aria-description="item.h3"
    >
      <img :src="`/data/JoinSupport/v${index + 1}.jpg`" alt="" />
      <h1 class="aria-theme-independent">{{ item.h3 }}</h1>
      <div
        class="y1 aria-theme-independent"
        :style="`background-image:url('/data/JoinSupport/y${index + 1}.png')`"
      ></div>
      <div
        class="d1 aria-theme-independent"
        :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() {
    this.$eventBus.$emit('request-read', `You've reached the Ways to Volunteer page of the Join & Support section. This page contains one navigation section, six window sections, and one interactive section. To choose an area, please hit the shortcut key.`)
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.Volunteer {
  clear: both;
  width: 900px;
  height: 727px;
  padding-top: 4px;
  margin: 20px auto 0;
  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, &:focus-within {
      & > img {
        opacity: 1;
      }
      .d1 {
        opacity: 1;
      }
    }
  }
}
</style>