ShouBo/web/src/views/Collections/index.vue

<template>
  <div class="Collections">
    <div
      class="banWrapper"
      data-aria-viewport-area
      tabindex="0"
      aria-label
      aria-description="You've reached the banner area of the Collections section; this section has one image; please use the tab key to go through the content."
    >
      <div
        class="ban aria-theme-independent"
        tabindex="0"
        aria-label="Image"
        aria-description="Colections"
      ></div>
    </div>
    <!-- 面包屑 -->
    <div
      class="pos"
      data-aria-viewport-area
      tabindex="0"
      aria-label
      aria-description="You've reached the path area; this area has three URLs; use the tab key to go through the content."
    >
      <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
      <Router-link replace to="/Layout/Home" tabindex="0" aria-description="Home">
        Home>
      </Router-link>
      <Router-link
        replace
        to="/Layout/Collections/Bronzes"
        tabindex="0"
        aria-description="Collections"
      >
        Collections>
      </Router-link>
      <Router-link replace to="" tabindex="0" :aria-description="mbTxt">
        {{ mbTxt }}>
      </Router-link>
    </div>
    <!-- 内容 -->
    <div class="conten" :class="mbTxt">
      <ul
        data-aria-viewport-area
        tabindex="0"
        aria-label
        aria-description="You've reached the collection category menu, please use the tab key to navigate through the menu."
      >
        <li
          @click="cutTab(item.url)"
          @keydown.enter.passive="cutTab(item.url)"
          :class="{
            active: mbTxt === item.url,
          }"
          v-for="(item, index) in tabData"
          :key="item.name"
          :style="`background-image:url(/data/Collections/tab/${
            index + 1
          }.png)`"
          tabindex="0"
          aria-label="Link"
        >
          <div
            class="bac"
            :class="{
              'aria-inverse-theme': mbTxt === item.url,
            }"
          >
            {{ item.name }}
          </div>
        </li>
      </ul>
      <!-- 右侧内容 -->
      <div
        class="right"
        data-aria-viewport-area
        tabindex="0"
        aria-label
        aria-description="You've reached the tiles of ${keyword}, please use the tab key to go through the tiles."
      >
        <div
          class="row"
          v-for="(item, index) in data"
          :key="item.id"
          @click="lookBig(item)"
          @keydown.enter.passive="lookBig(item)"
        >
          <img
            class="rowImg"
            :src="`/data/Collections/${mbTxt}/${index + 1}.png`"
            :alt="item.h3.replace(/(<([^>]+)>)/gi, '')"
            tabindex="0"
            aria-label="Image link"
            :aria-description="item.h3.replace(/(<([^>]+)>)/gi, '')"
          />
          <div class="info">
            <!-- 箭头 -->
            <img v-if="themeIdx === 0" src="/data/Collections/arrow.png" alt="" />
            <img v-if="themeIdx === 1" src="/data/Collections/arrow-white.svg" alt="" />
            <img v-if="themeIdx === 2" src="/data/Collections/arrow-blue.svg" alt="" />
            <img v-if="themeIdx === 3" src="/data/Collections/arrow-yellow.svg" alt="" />
            <img v-if="themeIdx === 4" src="/data/Collections/arrow-black.svg" alt="" />
            <h3
              v-html="item.h3"
              tabindex="0"
              aria-label="Link"
              :aria-description="item.h3.replace(/(<([^>]+)>)/gi, '')"
            ></h3>
            <p
              v-html="item.p"
              tabindex="0"
              aria-label="Link"
              :aria-description="item.p.replace(/(<([^>]+)>)/gi, '')"
            ></p>
          </div>
        </div>
      </div>
    </div>
    <!-- 查看详情组件 -->
    <CollectionsInfo v-if="isShow" :isShow.sync="isShow" :infoObj="infoObj" />
  </div>
</template>

<script>
import CollectionsInfo from "./component/info.vue";
import { Collections } from "@/views/dataAll.js";
import accessibilityMixin from "/src/views/accessibilityMixin.js"

export default {
  name: "Collections",
  components: { CollectionsInfo },
  mixins: [accessibilityMixin],
  data() {
    //这里存放数据
    return {
      // 点击单个查看图片
      isShow: false,
      infoObj: {},
      // ---------
      data: [],
      mbTxt: "Bronzes",
      tabData: [
        { name: "Bronzes", url: "Bronzes" },
        { name: "Ceramics", url: "Ceramics" },
        { name: "Buddhist Statues", url: "Buddhist" },
        { name: "Jadewares", url: "Jadewares" },
        { name: "Calligraphies", url: "Calligraphies" },
        { name: "Paintings", url: "Paintings" },
        { name: "Gold & Silverwares", url: "Gold" },
        { name: "Coins & Banknotes", url: "Coins" },
        { name: "Brocades & Embroideries", url: "Brocades" },
        { name: "Cultural Supplies", url: "Cultural" },
        { name: "Miscellaneous", url: "Miscellaneous" },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    // 监听地址栏参数变化
    $route: {
      handler() {
        // 拿到路由参数id
        let temp = this.$route.params.id;
        this.mbTxt = temp;
        this.data = Collections[this.mbTxt];

        let keyword = "";
        switch (this.mbTxt) {
          case "Bronzes":
            keyword = "Bronzes";
            break;
          case "Ceramics":
            keyword = "Ceramics";
            break;
          case "Buddhist":
            keyword = "buddhist statues";
            break;
          case "Jadewares":
            keyword = "Jadewares";
            break;
          case "Calligraphies":
            keyword = "Calligraphies";
            break;
          case "Paintings":
            keyword = "Paintings";
            break;
          case "Gold":
            keyword = "gold & silverwares";
            break;
          case "Coins":
            keyword = "coins & banknotes";
            break;
          case "Brocades":
            keyword = "brocades & embroideries";
            break;
          case "Cultural":
            keyword = "cultural supplies";
            break;
          case "Miscellaneous":
            keyword = "miscellaneous arts";
            break;
          default:
            break;
        }
        this.$eventBus.$emit(
          "request-read",
          `You've reached the page contains tiles of ${keyword} of the Collections section. This page contains one navigation section, six window sections, and one interactive section. To choose a section, please hit the shortcut key.`
        );
      },
      immediate: true,
    },
  },
  //方法集合
  methods: {
    // 点击单个查看图片
    lookBig(item) {
      this.infoObj = item;
      this.isShow = true;
      this.$nextTick(() => {
        // 获取body，防止滚动
        let body = document.querySelector("body");
        body.style.overflow = "hidden";
      });
    },
    cutTab(path) {
      this.$router.push(`/Layout/Collections/${path}`).catch(() => {});
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.Collections {
  background-color: #fff;
  .ban {
    width: 100%;
    margin: auto;
    background: url("/data/Collections/banner.jpg") no-repeat center top #000000;
    height: 300px;
  }
  .pos {
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    margin: 0 auto 10px auto;
    width: 1180px;
    .pos1 {
      color: #c20e11;
    }
  }
  .conten {
    display: flex;
    width: 1200px;
    overflow: hidden;
    margin: 0 auto;
    padding-bottom: 20px;
    zoom: 1;
    & > ul {
      width: 210px;
      & > li {
        cursor: pointer;
        width: 210px;
        height: 48px;
        position: relative;
        background: #181818 no-repeat right center;
        border-bottom: 1px solid #fff;
        .bac {
          text-indent: 10px;
          font-size: 14px;
          color: #fff;
          line-height: 48px;
          z-index: 10;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
        &:hover {
          .bac {
            background-color: rgba(254, 24, 24, 0.7);
          }
        }
      }
      .active {
        .bac {
          background-color: rgba(254, 24, 24, 0.7);
        }
      }
    }
    .right {
      border-left: 1px solid #d8d8d8;
      flex: 1;
      margin-left: 10px;
      padding-left: 10px;
      position: relative;
      .row {
        top: 10px;
        left: 10px;
        position: absolute;
        width: 310px;
        .rowImg {
          width: 310px;
          // height: 400px;
          vertical-align: middle;
        }
        .info {
          position: relative;
          padding: 20px 15px;
          & > img {
            opacity: 0;
            position: absolute;
            top: -30px;
            left: 30px;
          }
          h3 {
            font-size: 18px;
            color: #262626;
            line-height: 22px;
            padding-bottom: 5px;
            font-weight: 700;
            /deep/i {
              font-style: italic;
            }
            /deep/.smImg {
              width: 41px;
              height: 32px;
            }
          }
          p {
            font-size: 14px;
            color: #626262;
            /deep/ i {
              font-style: italic;
            }
          }
        }
        &:hover {
          box-shadow: 0 0 10px #000;
          .info {
            background-color: #ca000a;
            & > img {
              opacity: 1;
            }
            h3 {
              color: #fff;
            }
            p {
              color: #fff;
              /deep/ i {
                font-style: italic;
              }
            }
          }
        }
      }
    }
  }
  // 第一个页面
  .conten {
    height: 5291px;
    .row {
      &:nth-of-type(2) {
        left: 330px;
      }
      &:nth-of-type(3) {
        left: 650px;
      }
      &:nth-of-type(4) {
        left: 330px;
        top: 369px;
      }
      &:nth-of-type(5) {
        left: 650px;
        top: 589px;
      }
      &:nth-of-type(6) {
        top: 609px;
      }
      &:nth-of-type(7) {
        left: 330px;
        top: 948px;
      }
      &:nth-of-type(8) {
        left: 650px;
        top: 968px;
      }
      &:nth-of-type(9) {
        top: 1166px;
      }
      &:nth-of-type(10) {
        left: 650px;
        top: 1325px;
      }
      &:nth-of-type(11) {
        left: 330px;
        top: 1507px;
      }
      &:nth-of-type(12) {
        left: 650px;
        top: 1724px;
      }
      &:nth-of-type(13) {
        top: 1747px;
      }
      &:nth-of-type(14) {
        left: 330px;
        top: 1846px;
      }
      &:nth-of-type(15) {
        left: 330px;
        top: 2183px;
      }
      &:nth-of-type(16) {
        left: 650px;
        top: 2269px;
      }
      &:nth-of-type(17) {
        top: 2328px;
      }
      &:nth-of-type(18) {
        left: 330px;
        top: 2762px;
      }
      &:nth-of-type(19) {
        left: 650px;
        top: 2848px;
      }
      &:nth-of-type(20) {
        top: 2887px;
      }
      &:nth-of-type(21) {
        top: 3242px;
      }
      &:nth-of-type(22) {
        left: 330px;
        top: 3321px;
      }
      &:nth-of-type(23) {
        left: 650px;
        top: 3427px;
      }
      &:nth-of-type(24) {
        top: 3601px;
      }
      &:nth-of-type(25) {
        left: 330px;
        top: 3680px;
      }
      &:nth-of-type(26) {
        left: 650px;
        top: 3966px;
      }
      &:nth-of-type(27) {
        top: 3980px;
      }
      &:nth-of-type(28) {
        left: 330px;
        top: 4101px;
      }
      &:nth-of-type(29) {
        left: 650px;
        top: 4365px;
      }
      &:nth-of-type(30) {
        top: 4559px;
      }
      &:nth-of-type(31) {
        left: 330px;
        top: 4680px;
      }
      &:nth-of-type(32) {
        left: 650px;
        top: 4742px;
      }
    }
  }
  .Ceramics {
    height: 1603px;
    .row {
      &:nth-of-type(4) {
        top: 411px;
      }
      &:nth-of-type(7) {
        left: 650px;
        top: 990px;
      }
      &:nth-of-type(8) {
        left: 330px;
        top: 1054px;
      }
    }
  }
  .Buddhist {
    height: 1870px;
    .row {
      &:nth-of-type(4) {
        top: 347px;
      }
      &:nth-of-type(5) {
        top: 587px;
      }
      &:nth-of-type(6) {
        top: 653px;
      }
      &:nth-of-type(7) {
        top: 944px;
      }
      &:nth-of-type(8) {
        top: 1146px;
      }
      &:nth-of-type(9) {
        top: 1252px;
      }
    }
  }
  .Jadewares {
    height: 1405px;
    .row {
      &:nth-of-type(4) {
        left: 650px;
        top: 382px;
      }
      &:nth-of-type(5) {
        left: 10px;
        top: 422px;
      }
      &:nth-of-type(6) {
        left: 330px;
        top: 582px;
      }
      &:nth-of-type(7) {
        left: 650px;
        top: 732px;
      }
      &:nth-of-type(8) {
        left: 10px;
        top: 996px;
      }
    }
  }
  .Calligraphies {
    height: 2314px;
    .row {
      &:nth-of-type(4) {
        left: 650px;
        top: 367px;
      }
      &:nth-of-type(5) {
        left: 10px;
        top: 429px;
      }
      &:nth-of-type(6) {
        left: 330px;
        top: 609px;
      }
      &:nth-of-type(7) {
        left: 650px;
        top: 744px;
      }
      &:nth-of-type(8) {
        left: 10px;
        top: 808px;
      }
      &:nth-of-type(9) {
        left: 650px;
        top: 1123px;
      }
      &:nth-of-type(10) {
        left: 330px;
        top: 1228px;
      }
      &:nth-of-type(11) {
        left: 10px;
        top: 1458px;
      }
      &:nth-of-type(12) {
        left: 650px;
        top: 1779px;
      }
      &:nth-of-type(13) {
        left: 330px;
        top: 1807px;
      }
    }
  }
  .Paintings {
    height: 2448px;
    .row {
      &:nth-of-type(4) {
        left: 330px;
        top: 367px;
      }
      &:nth-of-type(5) {
        left: 10px;
        top: 567px;
      }
      &:nth-of-type(6) {
        left: 650px;
        top: 589px;
      }
      &:nth-of-type(7) {
        left: 10px;
        top: 889px;
      }
      &:nth-of-type(8) {
        left: 650px;
        top: 926px;
      }
      &:nth-of-type(9) {
        left: 330px;
        top: 966px;
      }
      &:nth-of-type(10) {
        left: 330px;
        top: 1323px;
      }
      &:nth-of-type(11) {
        left: 10px;
        top: 1486px;
      }
      &:nth-of-type(12) {
        left: 650px;
        top: 1503px;
      }
      &:nth-of-type(13) {
        left: 330px;
        top: 1829px;
      }
      &:nth-of-type(14) {
        left: 10px;
        top: 1845px;
      }
    }
  }
  .Gold {
    height: 1652px;
    .row {
      &:nth-of-type(4) {
        left: 330px;
        top: 367px;
      }
      &:nth-of-type(5) {
        left: 650px;
        top: 369px;
      }
      &:nth-of-type(6) {
        left: 10px;
        top: 598px;
      }
      &:nth-of-type(7) {
        left: 330px;
        top: 746px;
      }
      &:nth-of-type(8) {
        left: 650px;
        top: 769px;
      }
      &:nth-of-type(9) {
        left: 650px;
        top: 1109px;
      }
      &:nth-of-type(10) {
        left: 330px;
        top: 1128px;
      }
    }
  }
  .Coins {
    height: 2093px;
    .row {
      &:nth-of-type(4) {
        left: 330px;
        top: 411px;
      }
      &:nth-of-type(5) {
        left: 10px;
        top: 569px;
      }
      &:nth-of-type(6) {
        left: 650px;
        top: 611px;
      }
      &:nth-of-type(7) {
        left: 330px;
        top: 839px;
      }
      &:nth-of-type(8) {
        left: 10px;
        top: 1128px;
      }
      &:nth-of-type(9) {
        left: 650px;
        top: 1221px;
      }
      &:nth-of-type(10) {
        left: 330px;
        top: 1396px;
      }
      &:nth-of-type(11) {
        left: 10px;
        top: 1527px;
      }
      &:nth-of-type(12) {
        left: 650px;
        top: 1607px;
      }
    }
  }
  .Brocades {
    height: 1512px;
    .row {
      &:nth-of-type(4) {
        left: 10px;
        top: 409px;
      }
      &:nth-of-type(5) {
        left: 330px;
        top: 409px;
      }
      &:nth-of-type(6) {
        left: 650px;
        top: 568px;
      }
      &:nth-of-type(7) {
        left: 650px;
        top: 945px;
      }
      &:nth-of-type(8) {
        left: 10px;
        top: 1027px;
      }
    }
  }
  .Cultural {
    height: 1451px;
    .row {
      &:nth-of-type(4) {
        left: 650px;
        top: 414px;
      }
      &:nth-of-type(5) {
        left: 330px;
        top: 563px;
      }
      &:nth-of-type(6) {
        left: 10px;
        top: 578px;
      }
      &:nth-of-type(7) {
        left: 650px;
        top: 875px;
      }
      &:nth-of-type(8) {
        left: 330px;
        top: 930px;
      }
    }
  }
  .Miscellaneous {
    height: 641px;
  }
}
</style>