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

<template>
  <div class="Layout">
    <Accessibility
      ref="accessibility"
      @show="onAccessibilityMenuShow"
      @hide="onAccessibilityMenuHide"
    />
    <div class="aria-control-target">
      <!-- 公共头部 -->
      <div class="topNav">
        <div class="main_nav_wrap">
          <h1
            class="logo"
            tabindex="0"
            aria-label="Image"
            aria-description="CAPTIAL MUSEUM.CHINA"
          >
            <img
              src="@/assets/images/logo.png"
              alt=""
              v-if="[0, 2, 4].includes(themeIdx)"
            />
            <img
              src="@/assets/images/logo.webp"
              alt=""
              style="width: 198px; height: 40px"
              v-if="[1, 3].includes(themeIdx)"
            />
          </h1>
          <ul
            class="main_nav"
            tabindex="0"
            data-aria-navigation-area
            aria-label
            aria-description="You have reached the horizontal menu at the top of the website. There are eight dropdown menus and 34 options in this section. To browse the content, please use the tab key."
          >
            <li
              @click="skipOne(item.url)"
              @keydown.enter.passive="skipOne(item.url)"
              :class="{ active: $route.meta.myName === item.name }"
              v-for="item in topData"
              :key="item.id"
              tabindex="0"
              aria-label="Link"
              :aria-description="item.name"
            >
              <span>{{ item.name }}</span>
              <ul class="main_nav_sub">
                <li
                  :class="{ active2: menaInd === val.url }"
                  v-for="(val, index) in item.children"
                  :key="index"
                  @click.stop="skipTow(val.url, item.about)"
                  @keydown.enter.passive.stop="skipTow(val.url, item.about)"
                  tabindex="0"
                  aria-label="Link"
                  :aria-description="val.name"
                >
                  <span>{{ val.name }}</span>
                </li>
              </ul>
            </li>
            <!-- 中文网 -->
            <li class="language" tabindex="0" aria-description="English">
              <a
                href="http://www.capitalmuseum.org.cn/"
                target="_blank"
                tabindex="0"
                aria-description="Chinese"
              >
                中文
              </a>
            </li>
            <!-- 爱心模式 -->
            <li class="love">
              <label
                for="caring-mode-switch"
                tabindex="0"
                aria-label="Button"
                aria-description="Caring Mode"
              >
                Caring Mode
              </label>
              &nbsp;
              <MySwitch
                v-model="loveFlag"
                id="caring-mode-switch"
                tabindex="0"
                aria-label="Button"
                aria-description="Caring Mode"
              ></MySwitch>
              <!-- 为了让组件内部也能更换主题色，所以不再使用第三方组件 -->
              <!-- <el-switch v-model="loveFlag" active-color="#AB3434"
                id="caring-mode-switch"
                tabindex="0"
                aria-label="Button"
                aria-description="Caring Mode"
              /> -->
            </li>
          </ul>
        </div>
        <!-- 右侧的输入框 -->
        <div
          class="search"
          @keyup.enter="search"
          v-if="!menaInd.includes('Search')"
          data-aria-interaction-area
          aria-label
          aria-description="You've reached the search field, please use the tab key to browse the content."
          tabindex="0"
        >
          <div class="input-wrapper">
            <input
              type="text"
              autocomplete="off"
              placeholder="search..."
              v-model="searchTxt"
              tabindex="0"
              :aria-description="searchTxt || 'search'"
            />
            <img
              v-if="themeIdx === 0"
              :src="require('@/assets/images/search-default-color.svg')"
              alt=""
              @click="search"
              tabindex="0"
              aria-label="Link"
              aria-description="search"
            />
            <img
              v-if="[1, 3].includes(themeIdx)"
              :src="require('@/assets/images/search-black.svg')"
              alt=""
              @click="search"
              tabindex="0"
              aria-label="Link"
              aria-description="search"
            />
            <img
              v-if="[2, 4].includes(themeIdx)"
              :src="require('@/assets/images/search-yellow.svg')"
              alt=""
              @click="search"
              tabindex="0"
              aria-label="Link"
              aria-description="search"
            />
          </div>
        </div>
      </div>
      <!-- 嵌套路由 -->
      <Router-view />
      <!-- 底部固定栏 -->
      <div
        class="footer"
        data-aria-viewport-area
        tabindex="0"
        aria-label
        aria-description="You've reached footer section at the bottom of the website. This section contains four URLs. To browse the content, please use the tab key."
      >
        <div>
          <template v-for="item in footerData">
            |
            <router-link
              replace
              class="router-link"
              :to="item.path"
              :key="item.name"
              v-html="item.name"
              tabindex="0"
              :aria-description="item.name"
            />
          </template>
        </div>
        <p tabindex="0">
          Capital Museum. China 16 Fuxingmenwai Street, Xicheng District,
          Beijing 100045, P.R.China.
        </p>
      </div>
      <!-- 固定的二维码和游戏 -->
      <div class="rightNav aria-theme-independent">
        <ul
          class="rightIco aria-outline-out"
          data-aria-viewport-area
          tabindex="0"
          aria-label
          aria-description="You've reached the pop-up window section, which has one URL and one image. Please use the tab key to go through the information."
        >
          <li class="searchLi" v-if="!menaInd.includes('Search')">
            <div class="searchHover">
              <div class="ll" @click="search2">
                <img src="@/assets/images/LayoutSearch2.jpg" alt="" />
              </div>
              <div class="rr" @keyup.enter="search2">
                <input type="text" placeholder="search" v-model="searchTxt2" />
              </div>
            </div>
            <img src="@/assets/images/LayoutSearch.png" alt="" />
          </li>
          <li title="game">
            <a
              href="/game/index.html"
              target="_blank"
              tabindex="0"
              aria-description="shadow art game"
            >
              <img
                v-if="themeIdx === 0"
                src="@/assets/images/game-default-color.svg"
                alt=""
              />
              <img
                v-if="[1, 3].includes(themeIdx)"
                src="@/assets/images/game-black.svg"
                alt=""
              />
              <img
                v-if="[2, 4].includes(themeIdx)"
                src="@/assets/images/game-yellow.svg"
                alt=""
              />
            </a>
          </li>
          <li>
            <img
              v-if="themeIdx === 0"
              src="@/assets/images/code-default-color.svg"
              alt=""
              tabindex="0"
            />
            <img
              v-if="[1, 3].includes(themeIdx)"
              src="@/assets/images/code-black.svg"
              alt=""
              tabindex="0"
            />
            <img
              v-if="[2, 4].includes(themeIdx)"
              src="@/assets/images/code-yellow.svg"
              alt=""
              tabindex="0"
            />
            <div>
              <img src="@/assets/images/index_ewm1.png" alt="" />
              <img
                src="@/assets/images/index_ewm.jpg"
                alt=""
                tabindex="0"
                aria-description="Official microblog and wechat QR code"
              />
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Accessibility from "/src/views/accessibility.vue";
import { topData } from "./data";
import MySwitch from "/src/components/Switch.vue";
import accessibilityMixin from "/src/views/accessibilityMixin.js";

export default {
  name: "Layout",
  components: {
    Accessibility,
    MySwitch,
  },
  mixins: [accessibilityMixin],
  data() {
    //这里存放数据
    return {
      topData,
      loveFlag: false,
      searchTxt: "",
      searchTxt2: "",
      footerData: [
        { name: "Site Index", path: "/Layout/Index" },
        { name: "Terms of Use", path: "/Layout/Use" },
        { name: "Events", path: "/Layout/Events" },
        { name: "Employment", path: "/Layout/Employment" },
      ],
      // 控制二级菜单的高亮
      menaInd: null,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    $route() {
      this.menaInd = this.$route.path;
      this.searchTxt = "";
      // console.log('------',this.menaInd);
    },
    loveFlag: {
      handler(v) {
        if (v) {
          this.$refs.accessibility.requestToShowMenu();
        } else {
          this.$refs.accessibility.requestToHideMenu();
        }
      },
      immediate: false,
    },
  },
  //方法集合
  methods: {
    // 无障碍菜单组件内部也能自行控制显隐，此时要响应。
    onAccessibilityMenuShow() {
      this.loveFlag = true;
    },
    onAccessibilityMenuHide() {
      this.loveFlag = false;
    },
    // 点击搜索
    search() {
      // if (this.searchTxt.trim() === "" || this.searchTxt.trim().length < 4) return
      this.$router.push({
        name: "Search",
        params: { txt: this.searchTxt },
      });
    },
    // 点击搜索
    search2() {
      // if (this.searchTxt.trim() === "" || this.searchTxt.trim().length < 4) return
      this.$router.push({
        name: "Search",
        params: { txt: this.searchTxt2 },
      });
      this.searchTxt2 = "";
    },
    // 第一级的跳转
    skipOne(url) {
      this.$router.push("/Layout/" + url).catch(() => {});
    },
    // 第二级的跳转
    skipTow(url, about) {
      document.activeElement.blur();
      // 如果是about页面
      if (about === true) {
        this.$router.push("/Layout/About").catch(() => {});
        setTimeout(() => {
          window.scrollTo({ top: url, behavior: "smooth" });
        }, 100);
      } else this.$router.push(url).catch(() => {});
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.menaInd = this.$route.path;
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.Layout {
  position: relative;
  width: 100%;
}
.topNav {
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 60px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  .main_nav_wrap {
    width: 1300px;
    margin: 0 auto;
    & > h1 {
      float: left;
      display: inherit;
      margin: 10px 70px 0 0;
      & > img {
        border: none;
        vertical-align: top;
      }
    }
    .main_nav {
      font-size: 14px;
      color: #fff;
      line-height: 60px;
      &::after {
        content: ""; //伪元素必须有content属性，哪怕其实只是个空字符串。
        display: block; //伪元素默认是inline，需要改为block。
        clear: both;
      }
      & > li {
        cursor: pointer;
        float: left;
        display: inline;
        margin-right: 25px;
        position: relative;
        &:hover,
        &:focus-within {
          & > span {
            border-bottom: 2px solid #ca000a;
          }
          .main_nav_sub {
            display: block;
          }
        }
        .main_nav_sub {
          display: none;
          position: absolute;
          span {
            border-left: 2px solid #660005;
            font-size: 14px;
            color: #fff;
            line-height: 40px;
            background-color: rgba(0, 0, 0, 0.8);
            white-space: nowrap;
            float: none;
            display: block;
            margin: 0;
            padding: 0 20px 0 10px;
            &:hover {
              background-color: rgba(204, 0, 3, 0.8);
              border-left: 2px solid #cc0003;
            }
          }
          .active2 {
            background-color: rgba(204, 0, 3, 0.8);
            border-left: 2px solid #cc0003;
          }
        }
      }
      .language {
        background: url("../../assets/images/dh1.png") no-repeat 0 18px;
        width: 73px;
        & > a {
          color: #fff;
          text-decoration: none;
          display: inline-block;
          margin-left: 40px;
          padding-right: 5px;
          &:hover {
            border-bottom: 2px solid #ca000a;
          }
        }
      }
      .love {
        margin-right: 0;
        cursor: default;
        label {
          cursor: pointer;
        }
        &:hover {
          & > label {
            border-bottom: none;
          }
        }
      }
      .active {
        & > span {
          border-bottom: 2px solid #ca000a;
        }
      }
    }
  }
  .search {
    width: 240px;
    height: 30px;
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    .input-wrapper {
      box-sizing: border-box;
      position: relative;
      display: inline-block;
      width: 100%;
      height: 30px;
      input {
        font-size: 14px;
        background-color: #fff;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        outline: 0;
        padding: 0 15px;
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        width: 100%;
        height: 30px;
        border-radius: 15px;
        line-height: 30px;
        padding-right: 30px;
        &:focus {
          border-color: #ca000a;
        }
        &::placeholder {
          color: black;
        }
      }
      img {
        width: 14px;
        height: 14px;
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
      }
    }
  }
}
.rightNav {
  position: fixed;
  top: 60%;
  right: 0;
  height: 164px;
  width: 60px;
  z-index: 990;
  .rightIco {
    width: 100%;
    height: 100%;
    & > li {
      background-color: rgba(0, 0, 0, 0.8);
      text-align: center;
      width: 60px;
      padding: 10px 0;
      position: relative;
      cursor: pointer;
      & > div {
        display: none;
        width: 252px;
        position: absolute;
        top: 0;
        right: 0;
        & > img {
          float: left;
        }
      }
      &:hover,
      &:focus-within {
        background-color: #c20e11;
        & > div {
          display: block;
        }
      }
    }
    .searchLi {
      padding-top: 18px;
      position: relative;
      .searchHover {
        position: absolute;
        top: 0;
        right: 0;
        width: 300px;
        height: 60px;
        display: flex !important;
        opacity: 0;
        pointer-events: none;
        .ll {
          width: 60px;
          height: 60px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #fff;
          border: 1px solid #a3a3a3;
        }
        .rr {
          width: 240px;
          background-color: #c20e11;
          padding: 8px;
          input {
            padding: 0 5px;
            width: 200px;
            height: 38px;
            line-height: 44px;
          }
        }
      }
      &:hover {
        .searchHover {
          opacity: 1;
          pointer-events: auto;
        }
      }
    }
  }
}
.footer {
  padding: 0 100px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 45px;
  font-size: 14px;
  color: #fff;
  line-height: 45px;
  background: url(../../assets/images/footer_bg.png) center top;
  div {
    .router-link {
      color: inherit;
      margin-right: 10px;
      margin-left: 10px;
    }
  }
}
@media screen and (max-width: 1700px) {
  .Layout {
    .topNav {
      .main_nav_wrap {
        margin-left: 100px;
      }
    }
  }
}
@media screen and (max-width: 1610px) {
  .Layout {
    .topNav {
      .main_nav_wrap {
        margin-left: 5px;
      }
    }
  }
}
@media screen and (max-width: 1510px) {
  .Layout {
    .topNav {
      .main_nav_wrap {
        width: auto;
        & > h1 {
          margin: 10px 20px 0 0;
        }
        .main_nav {
          font-size: 14px;
          & > li {
            margin-right: 20px;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 1430px) {
  .Layout {
    .topNav {
      .main_nav_wrap {
        .main_nav {
          font-size: 12px;
          & > li {
            margin-right: 15px;
          }
        }
      }
      .search {
        right: 20px;
      }
    }
  }
}
</style>