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

<template>
<div class='Visit7' data-aria-viewport-area tabindex="0"
  aria-label aria-description=" You have reached the content area of the Visitor Guidelines page. To browse the content, please use the tab key."
>
  <div class="conten">
    <div class="top" tabindex="0"
      aria-label="" aria-description="Visitor Guidelines"
    >
      <img src="../../assets/images/Visit/last1.jpg" alt="">
    </div>
    <div class="txt">
      <div>
        <p tabindex="0"><span>01</span>All exhibitions in the museum are free.</p>
        <p tabindex="0"><span>02</span>The museum opens from Tuesday to Sunday, 9:00 - 17:00 (no admission after 16:00), but is closed on Mondays (except for holidays).</p>
        <p tabindex="0"><span>03</span>Please make ticket reservations at least one day before the desired visit and obtain your free ticket with your reservation number.</p>
        <p tabindex="0"><span>04</span>Please keep your valid ID (passport) available for inspection.</p>
      </div>
      <div>
        <p tabindex="0"><span>05</span>Inebriated and improperly-dressed persons will be refused entry.</p>
        <p tabindex="0"><span>06</span>Inflammable and explosive materials, knives subject to control and dangerous articles cannot be brought into the museum.</p>
        <p tabindex="0"><span>07</span>Photography is permitted, but flash and tripod is not allowed.</p>
        <p tabindex="0"><span>08</span>In case of an emergency, please follow the directions of our museum staff.</p>
      </div>
    </div>
    <div class="thank" tabindex="0">Thank you for your cooperation.</div>
    <div class="bottom">
      <p tabindex="0">Official website of Capital Museum <a :href="$homePageUrl" tabindex="0">{{$homePageUrl}}</a></p>
      <p tabindex="0">Telephone reservation (individual visitors) <span>+86 (10) 63393339</span></p>
      <p tabindex="0">Telephone reservation (group visitors) <span>+86 (10) 63370458</span></p>
      <p tabindex="0">Inquiry Hotline <span>+86 (10) 63370491</span></p>
    </div>
  </div>
</div>
</template>

<script>
export default {
name:'Visit7',
components: {},
data() {
//这里存放数据
return {

};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {

},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
  this.$eventBus.$emit('request-read', `You have reached the Visitor Guidelines page of the Visit section. This page includes 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>
.Visit7{
  .conten{
    width: 1200px;
    font-size: 18px;
    line-height: 26px;
    margin: auto;
    .top{
      margin-bottom: 20px;
      width: 100%;
      height: 70px;
      &>img{
        width: 100%;
        height: 100%;
      }
    }
    .txt{
      display: flex;
      &>div{
        padding-top: 20px;
        width: 50%;
        &>p{
          position: relative;
          display: flex;
          align-items: center;
          font-size: 14px;
          margin-bottom: 20px;
          padding-left: 45px;
          &>span{
            position: absolute;
            top: -5px;
            left: 0;
            display: block;
            font-size: 30px;
          }
        }
        &:nth-of-type(1){
          border-right: 1px solid #ccc;
          padding-right: 20px;
        }
        &:nth-of-type(2){
          padding-left: 20px;
          &>p{
            margin-bottom: 30px;
          }
        }
        &>p{
          &:last-child{
            margin-bottom: 0;
          }
        }
      }
    }
    .thank{
      color: rgb(255, 0, 0);
      font-size: 14px;
      text-align: center;
      margin: 20px 0;
    }
    .bottom{
      margin-bottom: 30px;
      padding: 20px 0;
      border: 1px solid black;
      &>p{
        text-align: center;
        font-size: 14px;
        margin: 20px;
        &>span, a{
          color: rgb(255, 0, 0);
        }
      }
    }
  }
}

</style>