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

<template>
  <div class="About">
    <div class="ban" ref="ban">
      <img src="@/assets/img/bannerA.png" alt="" />
      <h3>About</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>
      <!-- 1 -->
      <div id="About1">
        <h3 class="title">From the Director</h3>
        <p>Welcome to the website of the Capital Museum of China.</p>
        <p>
          We are looking forward to your visit. The Capital Museum is a palace
          of Beijing culture. Its collections relate to the long development of
          the capital city, showcasing its magnificent living history of 500,000
          years, urban history of 3,000 years and history as the Chinese capital
          for 800 years. The museum also presents cultural and artistic
          exhibitions from different regions and displays the achievements of
          various ethnic groups at home and abroad. You can feel the breadth of
          both Chinese and world civilizations.
        </p>
        <p>
          Historical culture is the soul of a city and in the case of Beijing it
          is a great witness to the long history of Chinese civilization. We are
          looking forward to welcoming you to share with us the full
          interpretation of this glorious civilization while immersing yourself
          in the great wisdom of Beijing.
        </p>
        <div class="more" @click="$router.push('/Layout/AboutDirector')">
          See More
        </div>
      </div>
      <!-- 2 -->
      <div id="About2">
        <h3 class="title">History</h3>
        <p>
          The Capital Museum, located in the Confucius Temple, was prepared in
          1953 and formally opened in 1981.
        </p>
        <p>
          As a major cultural construction project in Beijing in the "10th
          Five-Year Plan", the new complex of the Capital Museum, approved by
          the Beijing Municipal Government in 1999, further approved by the
          State Council after being submitted by the National Development and
          Reform Commission in 2001, commenced its construction in December
          2001.
        </p>
        <p>
          The new Capital Museum had the trial operation in December 2005 and
          was officially opened on May 18, 2006. With its magnificent
          architecture, abundant exhibitions, advanced technology and complete
          functions, the Capital Museum contributes to Beijing's standing as a
          famous historical and cultural city, a cultural centre and an
          international metropolis and ranks among the first class museums both
          at home and abroad and is regarded as one of the first "State
          First-class Museums" in 2008.
        </p>
      </div>
      <!-- 3 -->
      <div id="About3">
        <h3 class="title">Partners & Connections</h3>
        <ul class="row">
          <li v-for="(item, index) in link" :key="index">
            <a :href="item" target="_blank">
              <img
                :src="require(`@/assets/img/Layout/link${index + 1}.jpg`)"
                alt=""
              />
            </a>
          </li>
        </ul>
        <div class="more" @click="$router.push('/Layout/AboutLink')">
          See More
        </div>
      </div>
      <!-- 4 -->
      <div id="About4">
        <h3 class="title">Contact</h3>
        <div class="pp">Official website of Capital Museum:</div>
        <p class="indexUrl">https://zzbbh.4dage.com/shouBoM/index.html</p>
        <div class="pp">Telephone reservation (individual visitors):</div>
        <p>+86 (10) 63393339</p>
        <div class="pp">Telephone reservation (group visitors):</div>
        <p>+86 (10) 63370458</p>
        <div class="pp">Inquiry Hotline:</div>
        <p>+86 (10) 63370491</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "About",
  components: {},
  data() {
    //这里存放数据
    return {
      menaSon: false,
      idMate: 0,
      tabData: [
        { name: "From the Director", path: "/Layout/About/1" },
        { name: "History", path: "/Layout/About/2" },
        { name: "Partners & Connections", path: "/Layout/About/3" },
        { name: "Contact", path: "/Layout/About/4" },
      ],
      link: [
        "http://www.edo-tokyo-museum.or.jp/en/",
        "https://en.shm.ru/",
        "https://www.rom.on.ca/en",
        "https://museum.seoul.go.kr/eng/index.do",
        "https://museumsvictoria.com.au/",
        "https://www.vmfa.museum/",
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    $route() {
      // 获取地址栏参数id
      let id = this.$route.params.id;
      id = Number(id);
      this.pageSrool(id - 1);
      this.erjiTop(id - 1);
    },
  },
  //方法集合
  methods: {
    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(`#About${index + 1}`);
          // 获取主滚动元素
          let domScroll = document.querySelector(".Layout");
          domScroll.scrollTo({ top: dom.offsetTop - 70 });
        }, 100);
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        // 获取顶部元素ban的高度
        let banDom = this.$refs.ban;
        // 获取滚动的总元素
        let scrollDom = document.querySelector(".Layout");
        // 获取顶部固定栏
        let LayoutTop = document.querySelector(".Layout .top");
        // 动态改变idMate高亮效果
        let About1 = document.querySelector("#About1");
        let About2 = document.querySelector("#About2");
        let About3 = document.querySelector("#About3");
        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 < About1.offsetTop + About1.offsetHeight - 70)
            temp = 0;
          else if (
            scrollDom.scrollTop <
            About2.offsetTop + About2.offsetHeight - 70
          )
            temp = 1;
          else if (
            scrollDom.scrollTop <
            About3.offsetTop + About3.offsetHeight - 70
          )
            temp = 2;
          else temp = 3;
          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;
}

.About {
  width: 100%;
  .ban {
    position: relative;
    width: 100%;
    & > img {
      width: 100%;
    }
    & > h3 {
      position: absolute;
      font-size: 24px;
      color: #fff;
      left: 20px;
      bottom: 20px;
      border-bottom: 1px solid #fff;
    }
  }
  .main {
    padding: 0 15px;
    background: url("../../assets/img/bgA.png");
    background-size: 100% 100%;
    .mainBox {
      width: 100%;
      overflow-x: auto;
      z-index: 10;
      .rowAll {
        width: 645px;
        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 {
      font-size: 22px;
      font-weight: 700;
      padding-left: 30px;
      background: url("../../assets/img/Layout/chosen.png") left center
        no-repeat;
      background-size: 22px 18px;
      margin-bottom: 20px;
    }
    p {
      font-size: 14px;
      line-height: 18px;
      color: #6a6a6a;
      margin-bottom: 15px;
    }
    .more {
      margin: 20px auto 10px;
      width: 117px;
      height: 37px;
      background: url("../../assets/img/Layout/see.png");
      background-size: 100% 100%;
      color: #c1aa7b;
      line-height: 40px;
      text-align: center;
    }
    #About1 {
      padding: 20px 10px 30px;
      border-bottom: 1px solid #ccc;
    }
    #About2 {
      padding: 40px 10px;
      border-bottom: 1px solid #ccc;
    }
    #About3 {
      padding: 40px 0;
      border-bottom: 1px solid #ccc;
      .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        & > li {
          width: 168px;
          height: 62px;
          margin-bottom: 10px;
          & > a {
            display: block;
            width: 100%;
            height: 100%;
            & > img {
              width: 100%;
            }
          }
        }
      }
    }
    #About4 {
      padding: 40px 10px;
      .pp {
        font-weight: 18px;
        font-weight: 700;
        line-height: 20px;
        color: #bc1c24;
      }
    }
  }
    .curSorll {
      max-width: 500px;
      z-index: 99;
      position: fixed;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }
}
@media screen and (max-width: 370px) {
  #About3 {
    .row {
      display: block !important;
      & > li {
        margin: 0 auto 10px !important;
      }
    }
  }
}
</style>