ShouBo/webM/src/views/Visit/index.vue

<template>
  <div class="Visit">
    <div class="ban" ref="ban">
      <img src="@/assets/img/Visit/ban.png" alt="" />
      <h3>Visit</h3>
    </div>
    <div class="main">
      <div class="mainBox" :class="{ curSorll: menaSon }">
        <div class="rowAll">
          <div
            @click="cutTab(index)"
            class="row"
            v-for="(item, index) in tabData"
            :key="index"
            :class="{ active: idMate === index }"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <!-- 8 -->
      <div id="Visit8">
        <DatePanel />
      </div>
      <!-- 1 -->
      <div id="Visit1">
        <h3>Hours</h3>
        <p>Tuesday - Sunday,9:00 - 17:00</p>
        <p>(No admission after 16:00)</p>
        <p>Closed on Mondays(Except for holidays)</p>
        <h3>Direction</h3>
        <p>16 Fuxingmenwai Street, Xicheng District, Beijing 100045</p>
        <p class="ttb">Subway</p>
        <p>500 meters east to Muxidi Station, Line 1</p>
        <p class="ttb">Bus</p>
        <p>Baiyun Road Station:</p>
        <p>By Bus 26, 45, 80, 114, 308, 843, 844, 937 or 特 19</p>
        <p>Gonghui Dalou Station:</p>
        <p>By Bus 1 or 52</p>
        <h3>Admission</h3>
        <p>Capital Museum offers free admission to visitors.</p>
        <p>you can book a free ticket in advance.</p>
        <img src="@/assets/img/Visit/map.png" alt="" />
      </div>
      <!-- 2 -->
      <div id="Visit2">
        <h2 class="title">Reservation</h2>
        <p class="aa">9:00 to 17:00 every day</p>
        <p class="bb">(Please enter the museum before 16:00.)</p>
        <p class="cc">Individual visitors</p>
        <p class="dd">+86 (10) 63393339</p>
        <p class="cc">Group visitors</p>
        <p class="dd">+86 (10) 63370458</p>
        <div class="more" @click="$router.push('/Layout/VisitInfo')">
          See More
        </div>
      </div>
      <!-- 3 -->
      <div id="Visit3">
        <div class="top3">
          <div class="title">Floor Plans</div>
          <div class="xian">
            <div
              class="xian_son"
              @click="xianInd = item"
              :class="{ active: item === xianInd }"
              v-for="item in xian"
              :key="item"
            >
              <div></div>
              <p>{{ item }}</p>
            </div>
          </div>
        </div>
        <img
          @click="imgLook(index)"
          v-for="(item, index) in xian"
          :key="index"
          v-show="xianInd === item"
          :src="require(`@/assets/img/Visit/v${index + 1}.png`)"
          alt=""
        />
      </div>
      <!-- 4 -->
      <div id="Visit4">
        <div class="title">Audio Guide & Tour</div>
        <Card keyval="card1" :cardData="cardAudio" />
      </div>
      <!-- 5 -->
      <div id="Visit5">
        <div class="title">Accessibility</div>
        <Card keyval="card2" :cardData="cardAcc" />
      </div>
      <!-- 6 -->
      <div id="Visit6">
        <div class="title">Café & Shop</div>
        <Card keyval="card3" :cardData="cardCafe" />
      </div>
      <!-- 7 -->
      <div id="Visit7">
        <div class="title">Visitor Guidelines</div>
        <div class="conten">
          <p><span>01</span>All exhibitions in the museum are free.</p>
          <p>
            <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>
            <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>
            <span>04</span>Please keep your valid ID (passport) available for
            inspection.
          </p>
          <p>
            <span>05</span>Inebriated and improperly-dressed persons will be
            refused entry.
          </p>
          <p>
            <span>06</span>Inflammable and explosive materials, knives subject
            to control and dangerous articles cannot be brought into the museum.
          </p>
          <p>
            <span>07</span>Photography is permitted, but flash and tripod is not
            allowed.
          </p>
          <p>
            <span>08</span>In case of an emergency, please follow the directions
            of our museum staff.
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Card from "@/components/card.vue";
import { ImagePreview } from "vant";
import DatePanel from './datePanel.vue';
export default {
  name: "Visit",
  components: { Card, DatePanel },
  data() {
    //这里存放数据
    return {
      tabData: [
        { name: "Calendar", path: "/Layout/Visit/8" },
        { name: "Hours, Direction & Admission", path: "/Layout/Visit/1" },
        { name: "Reservation", path: "/Layout/Visit/2" },
        { name: "Floor Plans", path: "/Layout/Visit/3" },
        { name: "Audio Guide & Tour", path: "/Layout/Visit/4" },
        { name: "Accessibility", path: "/Layout/Visit/5" },
        { name: "Café & Shop", path: "/Layout/Visit/6" },
        { name: "Visitor Guidelines", path: "/Layout/Visit/7" },
      ],
      xianInd: "B1",
      xian: ["B1", "F1", "F2", "F3", "F4", "F5", "F6"],
      idMate: 0,
      // 二级菜单的固定
      menaSon: false,
      cardAudio: [
        {
          cover: "/data/Visit/Audio1.jpg",
          h3: "Audio Guide",
          p: "The museum offers free audio guide. Visitors can get the devices from the audio guide cabinets with 200 RMB refundable deposit. The cabinets can be found at several locations in the museum, such as the east of the main entrance. The service is available in Chinese and English. For further questions, please visit the information desk for help.",
        },
        {
          cover: "/data/Visit/Audio2.jpg",
          h3: "Free Commentary Service",
          p: "Commentators provide free services on each open day (Tuesday to Sunday). Please check the specific time and exhibition location in the museum on the day of your visit.",
        },
        {
          cover: "/data/Visit/Audio3.jpg",
          h3: "Volunteer Guide",
          p: "Our museum volunteers offer free explanations and help.",
        },
      ],
      cardAcc: [
        {
          cover: "/data/Visit/access1.jpg",
          h3: "Facilities for the Handicapped",
          p: "Wheelchairs are available for visitors with special needs. Professional consultants and guides are on hand to help.<br/>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.",
        },
        {
          cover: "/data/Visit/access2.jpg",
          h3: "Nursery Room",
          p: "Nursery room is available on the 5th floor of the museum. Professional consultants and guides are on hand to help.",
        },
        {
          cover: "/data/Visit/access3.jpg",
          h3: "Lockers",
          p: "Lockers are available on the 1st floor, the right-hand side of the north entrance. Professional consultants and guides are on hand to help.",
        },
      ],
      cardCafe: [
        {
          cover: "/data/Visit/cafe1.jpg",
          h3: "Cafeteria",
          p: "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.",
        },
        {
          cover: "/data/Visit/cafe2.jpg",
          h3: "Shop",
          p: `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.`,
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    $route() {
      // 获取地址栏参数id
      let id = this.$route.params.id;
      id = Number(id);
      this.pageSrool(id - 1);
      this.erjiTop(id - 1);
    },
  },
  //方法集合
  methods: {
    // 点击图片预览
    imgLook(index) {
      ImagePreview({
        images: [
          require(`@/assets/img/Visit/v1.png`),
          require(`@/assets/img/Visit/v2.png`),
          require(`@/assets/img/Visit/v3.png`),
          require(`@/assets/img/Visit/v4.png`),
          require(`@/assets/img/Visit/v5.png`),
          require(`@/assets/img/Visit/v6.png`),
          require(`@/assets/img/Visit/v7.png`),
        ],
        startPosition: index,
      });
    },
    cutTab(index) {
      this.pageSrool(index);
      this.erjiTop(index);
    },
    // 封装一个二级顶部滑动的方法
    erjiTop(index) {
      this.$nextTick(() => {
        setTimeout(() => {
          this.idMate = index;
          // 获取二级选中元素距离左侧的距离
          let sonScroll = document.querySelectorAll(".rowAll .row");
          let sonScrollAll = document.querySelector(".mainBox");
          sonScrollAll.scrollTo({
            left: sonScroll[index].offsetLeft - 100,
            behavior: "smooth",
          });
        }, 100);
      });
    },
    // 封装一个页面的滚动
    pageSrool(index) {
      this.$nextTick(() => {
        setTimeout(() => {
          // 滚动
          // 获取元素距离顶部的距离
          let dom = document.querySelector(`#Visit${index + 1}`);
          // 获取主滚动元素
          let domScroll = document.querySelector(".Layout");
          domScroll.scrollTo({ top: dom.offsetTop - 70 });
        }, 100);
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // if (location.href.indexOf("#reloaded") == -1) {
    //   location.href = location.href + "#reloaded";
    //   window.location.reload();
    // }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        // 获取顶部元素ban的高度
        let banDom = this.$refs.ban;
        // 获取滚动的总元素
        let scrollDom = document.querySelector(".Layout");
        // 获取顶部固定栏
        let LayoutTop = document.querySelector(".Layout .top");
        // 动态改变idMate高亮效果
        let Visit1 = document.querySelector("#Visit1");
        let Visit2 = document.querySelector("#Visit2");
        let Visit3 = document.querySelector("#Visit3");
        let Visit4 = document.querySelector("#Visit4");
        let Visit5 = document.querySelector("#Visit5");
        let Visit6 = document.querySelector("#Visit6");
        let Visit8 = document.querySelector("#Visit8");
        let temp;
        scrollDom.onscroll = () => {
          if (scrollDom.scrollTop > banDom.offsetHeight) {
            LayoutTop.style.display = "none";
            this.menaSon = true;
          } else {
            LayoutTop.style.display = "flex";
            this.menaSon = false;
          }
          if (scrollDom.scrollTop < Visit1.offsetTop + Visit1.offsetHeight - 70)
            temp = 0;
          else if (
            scrollDom.scrollTop <
            Visit2.offsetTop + Visit2.offsetHeight - 70
          )
            temp = 1;
          else if (
            scrollDom.scrollTop <
            Visit3.offsetTop + Visit3.offsetHeight - 70
          )
            temp = 2;
          else if (
            scrollDom.scrollTop <
            Visit4.offsetTop + Visit4.offsetHeight - 70
          )
            temp = 3;
          else if (
            scrollDom.scrollTop <
            Visit5.offsetTop + Visit5.offsetHeight - 70
          )
            temp = 4;
          else if (
            scrollDom.scrollTop <
            Visit6.offsetTop + Visit6.offsetHeight - 70
          )
            temp = 5;
          else if (
            scrollDom.scrollTop <
            Visit8.offsetTop + Visit8.offsetHeight - 70
          )
            temp = 8;
          else temp = 6;
          this.erjiTop(temp);
        };

        // 获取地址栏参数id
        let id = this.$route.params.id;
        id = Number(id);
        this.pageSrool(id - 1);
        this.erjiTop(id - 1);
      }, 200);
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {
    // 获取滚动的总元素,删除滚动事件
    let scrollDom = document.querySelector(".Layout");
    scrollDom.onscroll = null;
    // 获取顶部固定栏
    let LayoutTop = document.querySelector(".Layout .top");
    LayoutTop.style.display = "flex";
  }, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
::-webkit-scrollbar {
  height: 0;
  width: 0;
  color: transparent;
}

.Visit {
  width: 100%;
  .ban {
    position: relative;
    width: 100%;
    & > img {
      width: 100%;
    }
    & > h3 {
      position: absolute;
      font-size: 24px;
      color: #fff;
      left: 30px;
      bottom: 30px;
      border-bottom: 1px solid #fff;
    }
  }
  .main {
    background: url("../../assets/img/Visit/bg.png");
    background-size: 100%, 100%;
    .mainBox {
      width: 100%;
      overflow-x: auto;
      z-index: 10;
      .rowAll {
        width: 1150px;
        padding: 20px;
        background-color: #f7f6f3;
        .row {
          display: inline-block;
          font-size: 16px;
          height: 30px;
          line-height: 30px;
          margin-right: 10px;
          padding: 0 8px;
        }
        .active {
          background-color: #c1aa7b;
          border-radius: 15px;
          color: #fff;
        }
      }
    }
    .title {
      height: 30px;
      line-height: 30px;
      background: url("../../assets/img/Layout/title.png") 20px center no-repeat;
      background-size: 41px 29px;
      color: #c1aa7b;
      font-size: 22px;
      padding-left: 70px;
      margin-bottom: 20px;
      font-weight: 700;
    }
    #Visit1 {
      padding: 0px 0 20px;
      & > h3 {
        padding: 0 30px;
        font-size: 22px;
        font-weight: 700;
        padding-left: 60px;
        background: url("../../assets/img/Layout/chosen.png") 30px center
          no-repeat;
        background-size: 22px 18px;
        margin-bottom: 8px;
        margin-top: 20px;
      }
      & > p {
        padding: 0 30px;
        color: #6a6a6a;
        font-size: 14px;
        line-height: 18px;
      }
      .ttb {
        margin-top: 10px;
        background: url("../../assets/img/Layout/chosen.png") 30px center
          no-repeat;
        background-size: 22px 18px;
        padding-left: 60px;
        font-size: 22px;
        font-weight: 700;
        color: black;
        line-height: 36px;
      }
      & > img {
        width: 100%;
        margin-top: 20px;
      }
    }
    #Visit2 {
      padding: 20px 0px;
      border-bottom: 1px solid #ccc;
      width: calc(100% - 20px);
      margin: 0 auto;
      & > P {
        text-align: center;
      }
      .aa {
        font-weight: 700;
        color: #000000;
        font-size: 18px;
      }
      .bb {
        color: #6a6a6a;
        font-size: 14px;
        margin-bottom: 20px;
      }
      .cc {
        font-weight: 700;
        color: #bc1c24;
        font-size: 18px;
      }
      .dd {
        color: #6a6a6a;
        font-size: 16px;
        margin-bottom: 20px;
      }
      .more {
        margin: 20px auto;
        width: 117px;
        height: 37px;
        background: url("../../assets/img/Layout/see.png");
        background-size: 100% 100%;
        color: #c1aa7b;
        line-height: 40px;
        text-align: center;
      }
    }
    #Visit3 {
      padding: 40px 0;
      .top3 {
        padding: 0 10px;
        .xian {
          margin-top: 40px;
          position: relative;
          width: 100%;
          height: 2px;
          background-color: #c1aa7b;
          margin-bottom: 30px;
          .xian_son {
            position: absolute;
            top: -8px;
            left: 5%;
            & > div {
              width: 17px;
              height: 17px;
              border-radius: 50%;
              border: 2px solid #c1aa7b;
              background-color: #fff;
            }
            & > p {
              color: #1f1f1f;
              font-size: 16px;
              font-weight: 700;
              margin-top: 5px;
            }
            &:nth-of-type(2) {
              left: 18%;
            }
            &:nth-of-type(3) {
              left: 33%;
            }
            &:nth-of-type(4) {
              left: 48%;
            }
            &:nth-of-type(5) {
              left: 63%;
            }
            &:nth-of-type(6) {
              left: 77%;
            }
            &:nth-of-type(7) {
              left: 90%;
            }
          }
          .active {
            & > div {
              background-color: #c1aa7b;
            }
            & > p {
              color: #bc1c24;
            }
          }
        }
      }
      & > img {
        width: 100%;
        margin-top: 20px;
      }
    }
    #Visit4 {
      padding: 40px 0px;
      width: calc(100% - 20px);
      margin: 0 auto;
      border-bottom: 1px solid #ccc;
      border-top: 1px solid #ccc;
    }
    #Visit5 {
      padding: 40px 0px;
      width: calc(100% - 20px);
      margin: 0 auto;
      border-bottom: 1px solid #ccc;
    }
    #Visit6 {
      padding: 40px 0px;
      width: calc(100% - 20px);
      margin: 0 auto;
      border-bottom: 1px solid #ccc;
    }
    #Visit7 {
      padding: 40px 30px;
      .conten {
        & > p {
          color: #6a6a6a;
          font-size: 16px;
          margin-bottom: 15px;
          & > span {
            font-weight: 700;
            font-size: 18px;
            color: #bc1c24;
            margin-right: 15px;
          }
        }
      }
    }
    .curSorll {
      max-width: 500px;
      z-index: 99;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
    }
  }
}
</style>