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

<template>
  <div class="Visit2" data-aria-viewport-area tabindex="0"
    aria-label aria-description="You've reached the content area for the Reservation page. This area contains three parts of content. Please press the tab key to browse the information."
  >
    <!-- <div
      class="public"
      :class="{ hintShow: hintShow }"
      @click="hintShow = true"
    >
      <div tabindex="0"
        aria-description="The reservation service is now under maintenance. Please go to Capital
        Museum's WeChat account for reservation."
      >
        The reservation service is now under maintenance. Please go to Capital
        Museum's WeChat account for reservation.<span>X</span>
      </div>
    </div> -->
    <div class="mm1" tabindex="-1">
      <div class="mm1l">
        <p>
          <img src="../../assets/images/Visit/pLeft.jpg" alt="" />
          <span>&nbsp;<strong tabindex="0">How to Make a Reservation?</strong></span>
        </p>
        <p><br /></p>
        <p tabindex="0">Telephone Reservation:</p>
        <p tabindex="0">•&nbsp; Individual visitors:&nbsp;<span style="color: rgb(255, 0, 0); font-family: arial, helvetica, sans-serif; font-size: 14px;">+86 (10) 63393339</span></p>
        <p tabindex="0">•&nbsp; Group visitors:&nbsp;<span style="font-size: 14px; color: rgb(255, 0, 0);">+86 (10) 63370458</span></p>
        <p tabindex="0">From 9:00 to 17:00 every day.</p>
        <p><br /></p>
      </div>
      <div class="mm1r">
        <p tabindex="0">
          Either system will issue a confirmation number. Visitors will be
          required to show the number and valid ID in order to receive free
          entrance tickets on the day of their visit.
        </p>
        <!-- <h2 tabindex="0">Online Reservation</h2> -->
      </div>
    </div>
    <div class="sidebar" tabindex="-1">
      <ul>
        <!-- 第一个内容 -->
        <li class="title">
          <div class="showCon" @click="cutFlag('one')"></div>
          <span tabindex="0">Guidelines for Reservations</span>
          <span
            class="arrow"
            :class="{ 'arrow-up': flag === 'one' }"
            @keydown.enter.passive="cutFlag('one')"
            tabindex="0"
            aria-label="Button"
            aria-description="Show / hide detail"
          ></span>
          <div class="in-sidebar" :class="{ inSidebarOne: flag === 'one' }">
            <p style="text-align: center"><br /></p>
            <p>
              <img src="../../assets/images/Visit/pp1.jpg" alt=""
                tabindex="0" aria-describedat="Ways of Reservation"
              />
            </p>
            <p><br /></p>
            <p>
              <span tabindex="0"><strong>Ways of Reservation</strong></span>
            </p>
            <p><br /></p>
            <p tabindex="0"
              aria-description=""
            >
              <span
                style="
                  font-family: arial, helvetica, sans-serif;
                  font-size: 14px;
                "
              >
                There are 3,600 daily personal booking places, available
                through website (3000 places) and telephone (600 places). The
                website
              </span>
              <a
                style="
                  font-family: arial, helvetica, sans-serif;
                  font-size: 14px;
                  text-decoration: none;
                  color: rgb(255, 0, 0)
                "
                :href="$homePageUrl"
                tabindex="0"
              >
                {{$homePageUrl}}
              </a>
              <span
                style="
                  font-family: arial, helvetica, sans-serif;
                  font-size: 14px;
                "
              >
                offers&nbsp;24-hour&nbsp;
              </span>
              <span
                style="
                  font-family: arial, helvetica, sans-serif;
                  font-size: 14px;
                "
              >
                service, and the&nbsp;telephone
              </span>
              <span
                style="
                  font-family: arial, helvetica, sans-serif;
                  font-size: 14px;
                  color: rgb(255, 0, 0);
                "
              >
                +86 (10) 63393339
              </span>
              <span
                style="
                  font-family: arial, helvetica, sans-serif;
                  font-size: 14px;
                "
              >
                service is available from 09:00 to 17:00. One person is only
                allowed to book one ticket.
              </span>
            </p>
            <p><br /></p>
            <p tabindex="0">
              <span
                style="
                  font-family: arial, helvetica, sans-serif;
                  font-size: 14px;
                "
                >For group reservation, we offer 400 tickets a day. Please
                call<span
                  style="
                    font-size: 14px;
                    font-family: arial, helvetica, sans-serif;
                    color: rgb(255, 0, 0);
                  "
                  >+86 (10) 63370458&nbsp;&nbsp;</span
                >between 09:00 to 17:00. Identity information of the group
                leader is required.</span
              >
            </p>
            <p><br /></p>
            <p tabindex="0">
              <span
                style="
                  font-family: arial, helvetica, sans-serif;
                  font-size: 14px;
                "
                >Reservation should be made at least one day in advance, and at
                most seven days in advance.</span
              >
            </p>
            <p><br /></p>
            <table data-sort="sortDisabled">
              <tbody>
                <tr class="firstRow">
                  <td
                    valign="top"
                    colspan="2"
                    rowspan="1"
                  >
                    <p style="text-align: center; height: 1px">
                      <img
                        src="../../assets/images/Visit/pp4.jpg"
                        style="max-width: 100%"
                      />
                    </p>
                  </td>
                </tr>
                <tr>
                  <td width="420" valign="top">
                    <p style="text-align: center">
                      <img
                        src="../../assets/images/Visit/pp2.jpg"
                        style="max-width: 100%"
                        tabindex="0"
                        aria-description="Way to Get Ticket"
                      />
                    </p>
                  </td>
                  <td width="420" valign="top">
                    <p>
                      <span style="font-family: arial, helvetica, sans-serif"
                        ><strong>&nbsp; &nbsp;&nbsp;</strong></span
                      >
                    </p>
                    <p tabindex="0">
                      <strong style="font-family: arial, helvetica, sans-serif"
                        ><span style="font-size: 18px"
                          >Way to Get Ticket</span
                        ></strong
                      >
                    </p>
                    <p><br /></p>
                    <p tabindex="0">
                      <span
                        style="
                          font-size: 14px;
                          font-family: arial, helvetica, sans-serif;
                        "
                      >
                        For personal visitors, please obtain the ticket at the
                        service center at the north door by showing your booking number and the ID card used when
                        the booking was made.
                      </span>
                    </p>
                    <p><br /></p>
                    <p tabindex="0">
                      <span
                        style="
                          font-size: 14px;
                          font-family: arial, helvetica, sans-serif;
                        "
                      >
                        For group visitors, the leader can obtain the ticket at the east door of the ground floor with valid documents and introductory letters.
                      </span>
                    </p>
                    <p><br /></p>
                  </td>
                </tr>
              </tbody>
            </table>
            <br/>
            <table data-sort="sortDisabled">
              <tbody>
                <tr class="firstRow">
                  <td
                    valign="top"
                    colspan="2"
                    rowspan="1"
                  >
                    <p style="text-align: center; height: 1px">
                      <img
                        src="../../assets/images/Visit/pp4.jpg"
                        style="max-width: 100%"
                      />
                    </p>
                  </td>
                </tr>
                <tr>
                  <td width="420" valign="top">
                    <p>
                      <strong
                        style="
                          font-family: arial, helvetica, sans-serif;
                          font-size: 18px;
                        "
                        ><br
                      /></strong>
                    </p>
                    <p tabindex="0">
                      <strong
                        style="
                          font-family: arial, helvetica, sans-serif;
                          font-size: 18px;
                        "
                        >&nbsp; Entrance Time</strong
                      ><br />
                    </p>
                    <p><br /></p>
                    <p tabindex="0">
                      <span
                        style="
                          font-family: arial, helvetica, sans-serif;
                          font-size: 14px;
                        "
                        >From 09:00-16:00, Tuesday to Sunday.&nbsp;</span
                      >
                    </p>
                    <p tabindex="0">
                      <span
                        style="
                          font-family: arial, helvetica, sans-serif;
                          font-size: 14px;
                        "
                        >The museum is closed every Monday, except for
                        holidays.&nbsp;</span
                      >
                    </p>
                    <p tabindex="0">
                      <span
                        style="
                          font-family: arial, helvetica, sans-serif;
                          font-size: 14px;
                        "
                        >Please enter the museum before 16:00.</span
                      >
                    </p>
                  </td>
                  <td width="420" valign="top">
                    <p style="text-align: center">
                      <img
                        src="../../assets/images/Visit/pp3.jpg"
                        style="max-width: 100%"
                        tabindex="0"
                        aria-description="Entrance Time"
                      />
                    </p>
                  </td>
                </tr>
              </tbody>
            </table>
            <p tabindex="0">
              <span
                style="
                  font-family: arial, helvetica, sans-serif;
                  font-size: 18px;
                "
                ><strong>Special Notices</strong></span
              >
            </p>
            <p><br /></p>
            <p tabindex="0">
              <span
                style="
                  font-family: arial, helvetica, sans-serif;
                  font-size: 14px;
                "
                >1. One ticket is only for one person and the ticket is only
                valid on the date printed.&nbsp;Please have the ticket checked
                at the entrance.</span
              >
            </p>
            <p tabindex="0">
              <span
                style="
                  font-family: arial, helvetica, sans-serif;
                  font-size: 14px;
                "
                >2. Senior citizens (above 60) and handicapped persons can enter
                the exhibition with valid documents even without reservation.
                Please ask museum personnel for help.</span
              ><br />
            </p>
            <p tabindex="0"
              aria-description="3. Space in the exhibition is limited, so museum may control the visitor numbers at any time to ensure orderly and pleasant viewing. Thanks for your understanding and cooperation."
            >
              <span
                style="
                  font-family: arial, helvetica, sans-serif;
                  font-size: 14px;
                "
                >3. Space in the exhibition is limited, so museum may control
                the visitor numbers at any time to ensure orderly and pleasant
                viewing. Thanks for your understanding and&nbsp;</span
              ><br />
            </p>
            <p>
              <span
                style="
                  font-family: arial, helvetica, sans-serif;
                  font-size: 14px;
                "
                >&nbsp; &nbsp; cooperation.</span
              ><br />
            </p>
            <p tabindex="0">
              <span
                style="
                  font-family: arial, helvetica, sans-serif;
                  font-size: 14px;
                "
                >4. The exhibition lasts for three months. Please keep this in
                mind when planning a visit.</span
              ><br />
            </p>
            <p><br /></p>
          </div>
        </li>
        <!-- 第二个内容 -->
        <li class="title title2">
          <div class="showCon" @click="cutFlag('tow')"></div>
          <span tabindex="0">Group Visit</span>
          <span
            class="arrow"
            :class="{ 'arrow-up': flag === 'tow' }"
            @keydown.enter.passive="cutFlag('tow')"
            tabindex="0"
            aria-label="Button"
            aria-description="Show / hide detail"
          ></span>
          <div class="in-sidebar" :class="{ inSidebarTow: flag === 'tow' }">
            <table data-sort="sortDisabled">
              <tbody>
                <tr class="firstRow">
                  <td
                    valign="top"
                    colspan="2"
                    rowspan="1"
                  >
                    <p style="text-align: center">
                      <img
                        src="../../assets/images/Visit/pp4.jpg"
                        style="max-width: 100%"
                      />
                    </p>
                  </td>
                </tr>
                <tr>
                  <td width="430" valign="top">
                    <p><br /></p>
                    <p tabindex="0">
                      <span
                        style="
                          font-family: arial, helvetica, sans-serif;
                          font-size: 14px;
                        "
                        >We encourage groups and travel agencies to make
                        reservations by telephone.</span
                      >
                    </p>
                    <p><br /></p>
                    <p tabindex="0">
                      <span
                        style="
                          font-family: arial, helvetica, sans-serif;
                          font-size: 14px;
                          
                        "
                      >
                        Requirements: Name of the tour group,
                        full name of the person making the reservation,
                        contact information and number of group members.
                      </span>
                    </p>
                    <p><br /></p>
                    <p>
                      <span
                        tabindex="0"
                        style="
                          font-family: arial, helvetica, sans-serif;
                          font-size: 14px;
                        "
                        >Telephone reservation (group visitors):
                        <span
                          tabindex="0"
                          style="
                            font-size: 14px;
                            font-family: arial, helvetica, sans-serif;
                            color: rgb(255, 0, 0);
                          "
                          >+86 (10) 63370458&nbsp;</span
                        ></span
                      >
                    </p>
                    <p><br /><br /></p>
                    <p>
                      <span
                        style="
                          color: rgb(255, 0, 0);
                          font-family: arial, helvetica, sans-serif;
                          font-size: 14px;
                        "
                        ><br
                      /></span>
                    </p>
                    <p style="text-align: center">
                      <img
                        src="../../assets/images/Visit/pp6.jpg"
                        style="max-width: 100%"
                      />
                    </p>
                  </td>
                  <td width="430" valign="top">
                    <p style="text-align: center"><br /></p>
                    <p>
                      <img
                        src="../../assets/images/Visit/pp5.jpg"
                        style="max-width: 100%"
                      /><br />
                    </p>
                  </td>
                </tr>
              </tbody>
            </table>
            <p><br /></p>
          </div>
        </li>
        <!-- 第三个内容 -->
        <li class="title title3">
          <div class="showCon" @click="cutFlag('three')"></div>
          <span tabindex="0">Relevant Information</span>
          <span
            class="arrow"
            :class="{ 'arrow-up': flag === 'three' }"
            @keydown.enter.passive="cutFlag('three')"
            tabindex="0"
            aria-label="Button"
            aria-description="Show / hide detail"
          ></span>
          <div class="in-sidebar" :class="{ inSidebarThree: flag === 'three' }">
            <p><br /></p>
            <p tabindex="0">
              <span
                style="
                  font-family: arial, helvetica, sans-serif;
                  font-size: 14px;
                "
              >
                Ticket-reservation is subject to change when there is a large
                museum event or a special opening ceremony for a new exhibition.
                The Capital Museum will make a public announcement in advance. Please visit the official website or
                inquire by telephone for detailed information.
              </span>
            </p>
            <p><br /></p>
            <p>
              <span
                tabindex="0"
                style="
                  font-family: arial, helvetica, sans-serif;
                  font-size: 14px;
                "
              >
                Official website:
              </span>
              <a
                tabindex="0"
                style="
                  font-size: 14px;
                  font-family: arial, helvetica, sans-serif;
                  color: rgb(255, 0, 0);
                "
              >
                {{$homePageUrl}}
              </a>
              <span
                tabindex="0"
                style="
                  font-family: arial, helvetica, sans-serif;
                  font-size: 14px;
                " 
              >
                &nbsp; &nbsp; &nbsp; &nbsp;Phone:
              </span>
              <span
                tabindex="0"
                style="
                  font-size: 14px;
                  font-family: arial, helvetica, sans-serif;
                  color: rgb(255, 0, 0);
                "
              >
                +86 (10) 63370491
              </span>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Visit2",
  components: {},
  data() {
    //这里存放数据
    return {
      hintShow: false,
      // 3个栏目的显示和隐藏
      flag: null,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    cutFlag(val) {
      if (this.flag && val === this.flag) this.flag = null;
      else this.flag = val;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$eventBus.$emit('request-read', `You have reached the Reservation page of the Visit section. This page comprises one navigation section, six window sections, and one interactive section. To choose a section, please hit the shortcut key.`)
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.Visit2 {
  strong {
    font-weight: 700;
    font-size: 16px;
  }

  .public {
    overflow: hidden;
    transition: all 0.3s;
    height: 39px;
    background-color: rgba(206, 36, 69, 0.97);
    width: 100%;
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 60px;
    & > div {
      width: 1180px;
      margin: 0 auto;
      padding: 5px 0;
      font-size: 18px;
      line-height: 1.6;
      color: #fff;
      & > span {
        float: right;
      }
    }
  }
  .hintShow {
    height: 0px;
  }
  .mm1 {
    width: 1180px;
    margin: auto;
    height: 1%;
    overflow: hidden;
    padding-bottom: 30px;
    .mm1l {
      width: 550px;
      float: left;
      font-size: 18px;
      line-height: 28px;
      & > p {
        font-size: 14px;
      }
    }
    .mm1r {
      width: 590px;
      float: right;
      padding-top: 43px;
      & > p {
        padding: 15px;
        font-size: 14px;
        line-height: 28px;
      }
      & > h2 {
        cursor: pointer;
        clear: both;
        background-color: #c90006;
        text-align: center;
        height: 30px;
        line-height: 30px;
        color: #fff;
        font-weight: normal;
      }
    }
  }
  .sidebar {
    img {
      border: none;
      vertical-align: top;
      max-width: 100%;
    }
    width: 1180px;
    font-family: Arial;
    margin: auto;
    color: #f4f4f4;
    clear: both;
    & > ul {
      .title {
        position: relative;
        font-size: 24px;
        line-height: 50px;
        margin-bottom: 1px;
        background: url("../../assets/images/Visit/m-28.jpg") no-repeat;
        .showCon{
          cursor: pointer;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 50px;
        }
        span {
          margin-left: 10px;
        }
        .arrow {
          float: right;
          cursor: pointer;
          width: 50px;
          height: 50px;
          background: url("../../assets/images/Visit/m-31.png") no-repeat center
            left;
        }
        .arrow-up {
          background: url("../../assets/images/Visit/m-32.png") no-repeat center
            left;
        }
        div {
          font-size: 18px;
          line-height: 28px;
          color: #000;
        }
        .in-sidebar {
          height: 0px;
          overflow: hidden;
          transition: all 0.3s;
          padding: 0 20px;
          background-color: rgb(255, 255, 255);
          display: block;
        }
        .inSidebarOne {
          height: 1495px;
        }
        .firstRow {
           p {
            height: 1px;
          }
        }
      }
      .title2 {
        background: url("../../assets/images/Visit/m-29.jpg") no-repeat;
        .inSidebarTow {
          height: 550px;
        }
      }
      .title3 {
        background: url("../../assets/images/Visit/m-30.jpg") no-repeat;
        .inSidebarThree {
          height: 170px;
        }
      }
    }
  }
}
</style>