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

<template>
  <div class="Visit6" data-aria-viewport-area tabindex="0"
    aria-label aria-description="You have reached the content area of the Café & Shop page. To browse the content, please use the tab key."
  >
    <div class="conten">
      <div class="row">
        <div>
          <h3 tabindex="0">Cafeteria</h3>
          <p tabindex="0">
            The cafeteria is located on the northeast corner of the round exhibition room at basement level. Covering about 200 square meters, it offers coffee, soft drinks and low alcohol beverages.
          </p>
        </div>
        <div>
          <img src="../../assets/images/Visit/cafe1.jpg" alt="Cafeteria"
            tabindex="0"
            aria-description="Cafeteria"
          >
        </div>
      </div>
      <div class="row">
        <div>
          <img src="../../assets/images/Visit/cafe2.jpg" alt="Shop"
            tabindex="0"
            aria-description="Shop"
          >
        </div>
        <div class="blank">
          <h3 tabindex="0">Shop</h3>
          <p tabindex="0">
            Located in the southwest of the museum's basement and with a floor space of about
            550 square meters, the souvenir shop offers a wide variety of souvenirs including special
            souvenirs from the museum, books, and audio-visual products. Also on sale here are
            various arts and crafts with local characteristics, gold and jade ornaments, collotype
            calligraphic works and paintings of great collecting value, and other arts and crafts with
            unique features. The thousands of books on sale here mainly have a "Beijing taste" or
            are books on collecting and connoisseurship.
          </p>
        </div>
      </div>
      <div class="buy">
        <img src="../../assets/images/Visit/cafeBuy.jpg" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Visit6",
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$eventBus.$emit('request-read', `You have reached the Café & Shop page of the Visit section. This page includes one navigation section, six window sections, and one interactive section. To choose an section, please hit the shortcut key.`)
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.Visit6{
  .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;
      }
    }
    .buy{
      margin: 30px 0 10px;
      text-align: center;
    }
  }
}
</style>