ShouBo/web/src/views/bottom/Index.vue

<template>
  <div
    class="bottomIndex"
    data-aria-viewport-area
    tabindex="0"
    aria-label
    aria-description="You've reached the content area of the Site Index, please use the tab key to navigate through the content."
  >
    <img
      src="/data/Index/1.jpg"
      alt=""
      tabindex="0"
      aria-label=""
      aria-description="Site Index"
    />
    <div class="home" title="Home" tabindex="-1">
      <img
        src="/data/Index/home.jpg"
        alt=""
        @click="skip('/')"
        @keydown.enter.passive="skip('/')"
        tabindex="0"
        aria-label=""
        aria-description="Home"
      />
    </div>
    <div class="main" tabindex="-1">
      <img src="/data/Index/main.jpg" alt="" />
      <!-- 定位的盒子 -->
      <div class="loc">
        <div class="one">
          <div
            :class="{ active: item.path !== '' }"
            @click="skip(item.path, item.sroll)"
            @keydown.enter.passive="skip(item.path, item.sroll)"
            :title="item.title"
            v-for="(item, index) in data1"
            :key="index"
            :style="`width:${item.width};top:${item.top * 45}px;left:${
              item.left
            }`"
            tabindex="0"
            aria-label="Link"
            :aria-description="item.title"
          ></div>
        </div>
        <div class="tow">
          <div
            :class="{ active: item.path !== '' }"
            @click="skip(item.path, item.sroll)"
            @keydown.enter.passive="skip(item.path, item.sroll)"
            :title="item.title"
            v-for="(item, index) in data2"
            :key="index"
            :style="`width:${item.width};top:${item.top * 45}px;left:${
              item.left
            }`"
            tabindex="0"
            aria-label="Link"
            :aria-description="item.title"
          ></div>
        </div>
        <div class="three">
          <div
            :class="{ active: item.path !== '' }"
            @click="skip(item.path, item.sroll)"
            @keydown.enter.passive="skip(item.path, item.sroll)"
            :title="item.title"
            v-for="(item, index) in data3"
            :key="index"
            :style="`width:${item.width};top:${item.top * 45}px;left:${
              item.left
            }`"
            tabindex="0"
            aria-label="Link"
            :aria-description="item.title"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "bottomIndex",
  components: {},
  data() {
    //这里存放数据
    return {
      data1: [
        {
          title: "Visit",
          width: "110px",
          top: 0,
          left: "0px",
          path: "/Layout/Visit/1",
        },
        {
          title: "Hours,Direction & Admission",
          width: "250px",
          top: 1,
          left: "0px",
          path: "/Layout/Visit/1",
        },
        {
          title: "Reservation",
          width: "110px",
          top: 2,
          left: "0px",
          path: "/Layout/Visit/2",
        },
        // {
        //   title: "Reservation System",
        //   width: "180px",
        //   top: 3,
        //   left: "0px",
        //   path: "",
        // },
        {
          title: "Floor Plans",
          width: "110px",
          top: 3,
          left: "0px",
          path: "/Layout/Visit/3",
        },
        {
          title: "Audio Guide & Tour",
          width: "175px",
          top: 4,
          left: "0px",
          path: "/Layout/Visit/4",
        },
        {
          title: "Accessibility",
          width: "120px",
          top: 5,
          left: "0px",
          path: "/Layout/Visit/5",
        },
        {
          title: "Café & Shop",
          width: "120px",
          top: 6,
          left: "0px",
          path: "/Layout/Visit/6",
        },
        {
          title: "Visitor Guidelines",
          width: "160px",
          top: 7,
          left: "0px",
          path: "/Layout/Visit/7",
        },
        //
        {
          title: "Exhibitions",
          width: "200px",
          top: 0,
          left: "290px",
          path: "/Layout/Exhibitions/1",
        },
        {
          title: "Current Exhibitions",
          width: "170px",
          top: 1,
          left: "290px",
          path: "/Layout/Exhibitions/1",
        },
        {
          title: "Permanent Exhibitions",
          width: "200px",
          top: 2,
          left: "290px",
          path: "/Layout/Exhibitions/2",
        },
        {
          title: "Past Exhibitions",
          width: "155px",
          top: 3,
          left: "290px",
          path: "/Layout/Exhibitions/3",
        },
        {
          title: "Overseas Exhibitions",
          width: "200px",
          top: 4,
          left: "290px",
          path: "/Layout/Exhibitions/4",
        },
        //
        {
          title: "Collections",
          width: "200px",
          top: 0,
          left: "588px",
          path: "/Layout/Collections/Bronzes",
        },
        {
          title: "Bronzes",
          width: "95px",
          top: 1,
          left: "588px",
          path: "/Layout/Collections/Bronzes",
        },
        {
          title: "Ceramics",
          width: "95px",
          top: 2,
          left: "588px",
          path: "/Layout/Collections/Ceramics",
        },
        {
          title: "Buddhist Statues",
          width: "155px",
          top: 3,
          left: "588px",
          path: "/Layout/Collections/Buddhist",
        },
        {
          title: "Jadewares",
          width: "115px",
          top: 4,
          left: "588px",
          path: "/Layout/Collections/Jadewares",
        },
        {
          title: "Calligraphies",
          width: "120px",
          top: 5,
          left: "588px",
          path: "/Layout/Collections/Calligraphies",
        },
        {
          title: "Paintings",
          width: "95px",
          top: 6,
          left: "588px",
          path: "/Layout/Collections/Paintings",
        },
        {
          title: "Gold & Silverwares",
          width: "170px",
          top: 7,
          left: "588px",
          path: "/Layout/Collections/Gold",
        },
        {
          title: "Coins & Banknotes",
          width: "170px",
          top: 8,
          left: "588px",
          path: "/Layout/Collections/Coins",
        },
        {
          title: "Brocades & Embroideries",
          width: "210px",
          top: 8.9,
          left: "588px",
          path: "/Layout/Collections/Brocades",
        },
        {
          title: "Cultural Supplies",
          width: "150px",
          top: 9.8,
          left: "588px",
          path: "/Layout/Collections/Cultural",
        },
        {
          title: "Miscellaneous",
          width: "140px",
          top: 10.8,
          left: "588px",
          path: "/Layout/Collections/Miscellaneous",
        },
        //
        {
          title: "Learn & Engage",
          width: "265px",
          top: 0,
          left: "880px",
          path: "/Layout/LearnEngage/Students",
        },
        {
          title: "For Students",
          width: "130px",
          top: 1,
          left: "880px",
          path: "/Layout/LearnEngage/Students",
        },
        {
          title: "For Adults",
          width: "120px",
          top: 2,
          left: "880px",
          path: "/Layout/LearnEngage/Adults",
        },
        {
          title: "For Families & Children",
          width: "210px",
          top: 3,
          left: "880px",
          path: "/Layout/LearnEngage/Families",
        },
      ],
      data2: [
        {
          title: "Preservation & Publications",
          width: "430px",
          top: 0,
          left: "0px",
          path: "/Layout/Publications/2",
        },
        {
          title: "Preservation",
          width: "118px",
          top: 1,
          left: "0px",
          path: "/Layout/Publications/3",
        },
        {
          title: "Publications",
          width: "118px",
          top: 2,
          left: "0px",
          path: "/Layout/Publications/1",
        },
        //
        {
          title: "Join & Support",
          width: "250px",
          top: 0,
          left: "588px",
          path: "/Layout/JoinSupport/Volunteer",
        },
        {
          title: "Ways to Volunteer",
          width: "160px",
          top: 1,
          left: "588px",
          path: "/Layout/JoinSupport/Volunteer",
        },
        {
          title: "Volunteer Team Introduction",
          width: "270px",
          top: 2,
          left: "588px",
          path: "/Layout/JoinSupport/VolunteerInfo?id=1",
        },
        {
          title: "Volunteer Apply",
          width: "160px",
          top: 3,
          left: "588px",
          path: "/Layout/JoinSupport/VolunteerInfo?id=2",
        },
        {
          title: "Volunteer Program",
          width: "205px",
          top: 4,
          left: "588px",
          path: "/Layout/JoinSupport/VolunteerInfo?id=3",
        },
        {
          title: "Feedbacks",
          width: "120px",
          top: 5,
          left: "588px",
          path: "/Layout/JoinSupport/VolunteerInfo?id=4",
        },
        {
          title: "Ways to Give",
          width: "120px",
          top: 6,
          left: "588px",
          path: "/Layout/JoinSupport/Give",
        },
        {
          title: "Individuals",
          width: "120px",
          top: 7,
          left: "588px",
          path: "/Layout/JoinSupport/GiveInfo?id=4",
        },
        {
          title: "Corporations & Institutions",
          width: "250px",
          top: 8,
          left: "588px",
          path: "/Layout/JoinSupport/GiveInfo?id=5",
        },
        //
        {
          title: "About",
          width: "130px",
          top: 0,
          left: "880px",
          path: "/Layout/About",
        },
        {
          title: "From the Director",
          width: "175px",
          top: 1,
          left: "880px",
          path: "/Layout/About",
          sroll: 338,
        },
        {
          title: "History",
          width: "75px",
          top: 2,
          left: "880px",
          path: "/Layout/About",
          sroll: 805,
        },
        {
          title: "Partners & Connections",
          width: "210px",
          top: 3,
          left: "880px",
          path: "/Layout/About",
          sroll: 1307,
        },
        {
          title: "Contact",
          width: "75px",
          top: 4,
          left: "880px",
          path: "/Layout/About",
          sroll: 1515,
        },
      ],
      data3: [
        {
          title: "Auxiliary Functions",
          width: "310px",
          top: 0,
          left: "0px",
          path: "",
        },
        {
          title: "Moblie Site",
          width: "105px",
          top: 1,
          left: "0px",
          path: "https://zzbbh.4dage.com/shouBoM/index.html#/Layout/Home",
        },
        {
          title: "Terms of Use",
          width: "120px",
          top: 2,
          left: "0px",
          path: "/Layout/Use",
        },
        // { title: "News", width: "55px", top: 3, left: "0px", path: "" },
        // {
        //   title: "Upcoming Events",
        //   width: "155px",
        //   top: 4,
        //   left: "0px",
        //   path: "/Layout/Events",
        // },
        {
          title: "Employment",
          width: "110px",
          top: 3,
          left: "0px",
          path: "/Layout/Employment",
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    skip(url, sroll) {
      if(url==='https://zzbbh.4dage.com/shouBoM/index.html#/Layout/Home') {
        window.open(url)
        return
      }
      this.$router.replace(url).catch(() => {});
      if (sroll) {
        setTimeout(() => {
          window.scrollTo({ top: sroll, behavior: "smooth" });
        }, 100);
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$eventBus.$emit(
      "request-read",
      ` You've reached the Site Index page. This page contains one navigation section, three 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>
.bottomIndex {
  clear: both;
  width: 1186px;
  margin: 0 auto 55px;
  font-size: 18px;
  color: #333;
  line-height: 30px;
  padding-top: 75px;
  .home {
    padding: 30px 0;
    border-bottom: solid 1px #000;
    & > img {
      cursor: pointer;
    }
  }
  .main {
    position: relative;
    padding-top: 30px;
    .loc {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 30px;
      left: 0;
      & > div {
        width: 100%;
        position: absolute;
        opacity: 0.3;
        top: 0;
        left: 0;
        & > div {
          width: 110px;
          height: 35px;
          position: absolute;
        }
      }
      .active {
        cursor: pointer;
      }
      .one {
        height: 520px;
      }
      .tow {
        height: 400px;
        top: 570px;
      }
      .three {
        height: 260px;
        top: 1025px;
      }
    }
  }
}
</style>