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

<template>
  <div class="Layout" ref="Layout" @scroll="scrollEvent">
    <!-- 顶部top -->
    <div class="top" :style="`background-color:${$route.meta.topColor}`">
      <div class="left">
        <img
          src="@/assets/img/Layout/mean.png"
          alt=""
          @click="meanPage = true"
        />
      </div>
      <div class="right">
        <img
          src="@/assets/img/Layout/logo.png"
          alt=""
          @click="$router.push('/').catch(() => {})"
        />
        <img src="@/assets/img/Layout/zhong.png" alt="" @click="toZhong" />
        <img src="@/assets/img/Layout/search.png" alt="" @click="searcShow=true"/>
      </div>
    </div>
    <!-- 子页面 -->
    <Router-view />
    <!-- 点击菜单 -->
    <div class="meanPage" v-show="meanPage">
      <div class="conten">
        <div class="searchTop">
          <div class="back">
            <van-icon name="arrow-left" @click="meanPage = false" />
          </div>
          <img
            src="@/assets/img/Layout/logo2.png"
            alt=""
            @click="$router.push('/').catch(() => {})"
          />
          <img src="@/assets/img/Layout/zhong2.png" alt="" @click="toZhong" />
          <img src="@/assets/img/Layout/search2.png" alt="" @click="searcShow=true"/>
        </div>
        <div class="rowAll">
          <div
            :class="{
              active: index === 4 || index === 6,
              accOne: $route.meta.myTitle === item.acc,
            }"
            @click="menaSonFu(index)"
            class="row"
            v-for="(item, index) in menaData"
            :key="index"
          >
            <span>{{ item.name }}</span>
            <template
              v-if="menaSon === index || $route.meta.myTitle === item.acc"
            >
              <div
                class="rowSon"
                v-for="(val, valInd) in item.son"
                :key="valInd"
                :class="{ acc: menaInd === val.path }"
                @click="skip(val.path)"
              >
                {{ val.name }}
              </div>
            </template>
          </div>
        </div>
        <div class="erwei">
          <img src="@/assets/img/Layout/erwei1.png" alt="" />
          <img src="@/assets/img/Layout/erwei2.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 点击搜索 -->
    <div class="searchBox" v-if="searcShow">
      <div class="searcTop" @keyup.enter="searcBtn">
        <div class="inco" @click="searcBtn"></div>
        <input type="text" v-model="txt" placeholder="search......" />
        <div class="Cancel" @click="searcShow=false">Cancel</div>
      </div>
    </div>
    <!-- 回到顶部 -->
    <div class="toTop" v-show="srocllShow" @click="toTop">
      <van-icon name="back-top" />
    </div>
    <!-- 底部 -->
    <div class="bottom">
      <div class="logo">
        <img src="@/assets/img/Layout/logo.png" alt="" />
      </div>
      <div class="erwei">
        <img src="@/assets/img/Layout/erwei1.png" alt="" />
        <img src="@/assets/img/Layout/erwei2.png" alt="" />
      </div>
      <div class="txt">
        <p>
          Capital Museum. China 16 Fuxingmenwai Street, Xicheng District,
          Beijing 100045, P.R.China.
        </p>
      </div>
      <div class="link">
        <span>Terms of Use</span>
        <span>Events</span>
        <span>Employmen</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Layout",
  components: {},
  data() {
    //这里存放数据
    return {
      // 搜索的变量
      searcShow: false,
      txt: "",
      // 控制二级菜单的高亮
      menaInd: null,
      // 控制二级菜单的显示
      menaSon: null,
      srocllShow: false,
      meanPage: true,
      menaData: [
        {
          acc: "Visit",
          name: "Visit",
          path: "",
          son: [
            { 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" },
          ],
        },
        {
          name: "Exhibitions",
          path: "",
          son: [
            { name: "Current Exhibitions", path: "" },
            { name: "Permanent Exhibitions", path: "" },
            { name: "Past Exhibitions", path: "" },
            { name: "Overseas Exhibitions", path: "" },
          ],
        },
        {
          name: "Collections",
          path: "",
          son: [
            { name: "Bronzes", path: "" },
            { name: "Ceramics", path: "" },
            { name: "Buddhist Statues", path: "" },
            { name: "Jadewares", path: "" },
            { name: "Calligraphies", path: "" },
            { name: "Paintings", path: "" },
            { name: "Gold & Silverwares", path: "" },
            { name: "Coins & Banknotes", path: "" },
            { name: "Brocades & Embroideries", path: "" },
            { name: "Cultural Supplies", path: "" },
            { name: "Miscellaneous", path: "" },
          ],
        },
        {
          name: "Learn & Engage",
          path: "",
          son: [
            { name: "For Students", path: "" },
            { name: "For Adults", path: "" },
            { name: "For Families & Children", path: "" },
          ],
        },
        {
          name: "Publications",
          path: "",
          son: [
            { name: "Magazines", path: "" },
            { name: "Exhibition Catalogues", path: "" },
            { name: "Research", path: "" },
          ],
        },
        {
          name: "Join & Support",
          path: "",
          son: [
            { name: "Ways to Volunteer", path: "" },
            { name: "Ways to Give", path: "" },
          ],
        },
        {
          name: "About",
          path: "",
          son: [
            { name: "From the Director", path: "" },
            { name: "History", path: "" },
            { name: "Partners & Connections", path: "" },
            { name: "Contact", path: "" },
          ],
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    $route() {
      this.menaInd = this.$route.path;
      this.meanPage = false;
    },
    searcShow(){
      this.txt=''
    }
  },
  //方法集合
  methods: {
    searcBtn(){
      console.log('搜索~');
    },
    menaSonFu(index) {
      if (this.menaSon === index) this.menaSon = null;
      else this.menaSon = index;
    },
    skip(path) {
      this.$router.push(path).catch(() => {});
    },
    toTop() {
      let dom = this.$refs.Layout;
      dom.scrollTo({ top: 0, behavior: "smooth" });
    },
    toZhong() {
      window.open("https://www.capitalmuseum.org.cn/", "_blank");
    },
    // 监听主元素滚动
    scrollEvent() {
      let dom = this.$refs.Layout;
      if (dom.scrollTop > 400) this.srocllShow = true;
      else this.srocllShow = false;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.menaInd = this.$route.path;
    this.meanPage = false;
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
::-webkit-scrollbar {
  height: 0;
  width: 0;
  color: transparent;
}

.Layout {
  position: relative;
  padding-top: 50px;
  height: 100vh;
  overflow-y: auto;
  .top {
    z-index: 990;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    align-items: center;
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
    height: 50px;
    .left {
      width: 20px;
      height: 20px;
      & > img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      display: flex;
      align-items: center;
      & > img {
        width: 20px;
        height: 20px;
        &:nth-of-type(1) {
          margin-right: 20px;
          width: 160px;
          height: 32px;
        }
        &:nth-of-type(2) {
          margin-right: 15px;
        }
      }
    }
  }
  .erwei {
    margin-top: 30px;
    margin-bottom: 20px;
    display: flex;
    padding: 0 10px;
    justify-content: space-between;
    & > img {
      width: 40%;
    }
  }

  .bottom {
    padding: 20px;
    padding-bottom: 0;
    width: 100%;
    background-color: #c1aa7b;
    .txt {
      padding: 0 10px 20px;
      font-size: 14px;
      color: #fff;
      border-bottom: 1px solid #d1d1d1;
    }
    .link {
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 10px;
      font-size: 14px;
      color: #fff;
      & > span {
        padding-right: 15px;
        border-right: 1px solid #fff;
        margin-right: 15px;
        &:last-child {
          border-right: none;
          margin-right: 0;
        }
      }
    }
  }
  .toTop {
    position: fixed;
    width: 48px;
    height: 48px;
    text-align: center;
    line-height: 48px;
    border-radius: 50%;
    background-color: rgba(193, 170, 123, 0.5);
    color: #fff;
    font-size: 30px;
    right: 10px;
    bottom: 200px;
  }
  // 搜索页面
  .searchBox {
    padding: 10px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 992;
    width: 100vw;
    height: 100vh;
    background-color: #f9f8f5;
    .searcTop {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 40px;
      .inco {
        position: absolute;
        z-index: 10;
        content: "";
        display: block;
        position: absolute;
        top: 9px;
        left: 10px;
        background: url("../../assets/img/Layout/search2.png");
        background-size: 20px, 20px;
        width: 20px;
        height: 20px;
      }
      & > input {
        width: 80%;
        height: 38px;
        border-radius: 19px;
        padding-left: 40px;
        border: 1px solid #d2b986;
        background-color: transparent;
      }
      .Cancel {
        font-weight: 700;
        min-width: 50px;
        width: 15%;
      }
    }
  }
  // 菜单页面
  .meanPage {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 991;
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.9);
    .conten {
      width: 90%;
      background-color: #f6f4f1;
      .searchTop {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 50px;
        .back {
          margin-right: 15px;
          font-size: 28px;
        }
        & > img {
          width: 20px;
          height: 20px;
          &:nth-of-type(1) {
            margin-right: 15px;
            width: 160px;
            height: 32px;
          }
        }
      }
      .rowAll {
        margin-top: 20px;
        padding: 0 30px;
        .row {
          font-weight: 700;
          color: #c1aa7b;
          font-size: 20px;
          padding-bottom: 20px;
          .rowSon {
            padding-left: 30px;
            font-size: 16px;
            margin-top: 20px;
            color: #c1aa7b;
            font-weight: 400;
          }
          .acc {
            color: #bc1c24;
            background: url("../../assets/img/Layout/chosen.png") no-repeat left
              top;
            background-size: 22px 18px;
          }
        }
        .active {
          border-bottom: 1px solid #c1aa7b;
          margin-bottom: 20px;
        }
        .accOne {
          color: #bc1c24;
        }
      }
    }
    .erwei {
      margin-bottom: 0;
      padding-bottom: 20px;
      padding-left: 30px;
      padding-right: 30px;
    }
  }
}
</style>