ShouBo/web/src/views/Visit/Visit5.vue

<template>
  <div class="Visit5" data-aria-viewport-area tabindex="0"
    aria-label aria-description="You have reached the content area under the Accessibility page. To browse the content, please use the tab key."
  >
    <div class="conten">
      <div class="row">
        <div>
          <h3 tabindex="0">Facilities for the Handicapped</h3>
          <p tabindex="0">Wheelchairs are available for visitors with special needs. Professional consultants and guides are on hand to help.</p>
          <br />
          <p tabindex="0">
            In addition to professional commentators in the exhibition halls, 15 advanced self-service 
            screens and six special ones for people in wheelchairs have been installed in the exhibit 
            areas. Visitors can read and download data, or carry out interactive operations via these
            screens. A total of 18 card-operated telephones, including six for those in wheelchairs,
            have also been installed.
          </p>
        </div>
        <div>
          <img src="../../assets/images/Visit/access1.jpg" alt="Facilities for the Handicapped"
            tabindex="0" aria-description="Facilities for the Handicapped"
          >
        </div>
      </div>
      <div class="row">
        <div>
          <img src="../../assets/images/Visit/access2.jpg" alt="Nursery Room"
            tabindex="0" aria-description="Nursery Room"
          >
        </div>
        <div class="blank">
          <h3 tabindex="0">Nursery Room</h3>
          <p tabindex="0">
            Nursery room is available on the 5th floor of the museum. Professional consultants
            and guides are on hand to help.
          </p>
        </div>
      </div>
      <div class="row">
        <div>
          <h3 tabindex="0">Lockers</h3>
          <p tabindex="0">
            Lockers are available on the 1st floor, the right-hand side of the north entrance. Professional
            consultants and guides are on hand to help.
          </p>
        </div>
        <div>
          <img src="../../assets/images/Visit/access3.jpg" alt="Lockers"
            tabindex="0" aria-description="Lockers"
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Visit5",
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$eventBus.$emit('request-read', `You have reached the Accessibility page under the Visit section. This page includes a 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>
.Visit5{
  .conten{
    color: #000;
    width: 1200px;
    font-size: 18px;
    line-height: 26px;
    margin: auto;
    .row{
      width: 866px;
      display: flex;
      &>div{
        width: 50%;
        &>h3{
              padding-top: 30px;

          font-size: 18px;
          font-weight: 700;
          margin-bottom: 20px;
        }
        &>p{
          font-size: 14px;
        }
        &>img{
          width: 100%;
        }
      }
      .blank{
        padding-left: 10px;
      }
    }
  }
}
</style>