en-shoubo-pc/src/components/Layout/index.vue

<template>
  <div :class="['layout', THEME_MAP[themeIdx]]">
    <Accessibility
      ref="accessibility"
      @show="loveSwitch = true"
      @hide="loveSwitch = false"
    />

    <div class="aria-control-target layout-main">
      <!-- 顶部top -->
      <div class="topnav-wrap">
        <div class="topnav">
          <div class="topnav-container">
            <img
              :src="
                [
                  THEME_COLOR.DEFAULT,
                  THEME_COLOR.BLUE,
                  THEME_COLOR.BLACK,
                ].includes(themeIdx)
                  ? Logo
                  : Logo2
              "
              aria-label="Image"
              aria-description="CAPTIAL MUSEUM.CHINA"
            />

            <ul
              class="topnav-list"
              data-aria-navigation-area
              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
                v-for="item in topData.filter((i) => !i.hideNav)"
                :key="item.id"
                tabindex="0"
                aria-label="Link"
                :aria-description="item.name"
                :class="{
                  active:
                    $route.path
                      .toLowerCase()
                      .indexOf(((item.routeParams as RouteLocationNamedRaw)!.name as string).toLowerCase()) > -1,
                }"
                @click="$router.push(item.routeParams!)"
                @keydown.enter.passive="$router.push(item.routeParams!)"
              >
                <span>{{ item.name }}</span>
                <ul class="main_nav_sub">
                  <li
                    v-for="(val, index) in item.children"
                    :key="index"
                    tabindex="0"
                    :class="{ active2: $route.path === val.routeParams }"
                    aria-label="Link"
                    :aria-description="val.name"
                    @click.stop="$router.push(val.routeParams!)"
                    @keydown.enter.passive.stop="$router.push(val.routeParams!)"
                  >
                    <span>{{ val.name }}</span>
                  </li>
                </ul>
              </li>

              <!-- 中文网 -->
              <li class="language" aria-description="English">
                <a
                  href="http://www.capitalmuseum.org.cn/"
                  target="_blank"
                  aria-description="Chinese"
                >
                  中文
                </a>
              </li>

              <!-- 爱心模式 -->
              <li class="love">
                <p @click="loveSwitch = !loveSwitch">Assistive Mode</p>
                <van-switch
                  v-model="loveSwitch"
                  active-color="var(--van-primary-color)"
                  inactive-color="#dcdfe6"
                  aria-label="Button"
                  aria-description="Assistive Mode"
                />
              </li>
            </ul>

            <!-- 搜索 -->
            <div
              class="search"
              data-aria-interaction-area
              aria-description="You've reached the search field, please use the tab key to browse the content."
            >
              <template v-if="$route.name !== 'Search'">
                <input
                  v-model="searchTxt"
                  placeholder="search..."
                  @keyup.enter="handleSearch(searchTxt)"
                />
                <svg-icon
                  name="search"
                  color="var(--van-primary-color)"
                  @click="handleSearch(searchTxt)"
                />
              </template>
            </div>
          </div>
        </div>
      </div>

      <RouterView />

      <!-- 固定的二维码和游戏 -->
      <div class="rightNav">
        <ul
          class="rightIco"
          data-aria-viewport-area
          aria-description="You've reached the pop-up window section, which has one search field, one URL and one image. Please use the tab key to go through the information."
        >
          <li
            class="searchLi"
            v-if="$route.name !== 'Search'"
            aria-description="You've reached the search field, please use the tab key to browse the content."
          >
            <div class="searchHover">
              <div class="ll" @click="handleSearch(searchTxt2)">
                <img src="@/assets/images/LayoutSearch2.jpg" alt="" />
              </div>
              <div class="rr">
                <input
                  type="text"
                  placeholder="search"
                  v-model="searchTxt2"
                  :aria-description="searchTxt2 || 'search'"
                  @keyup.enter="handleSearch(searchTxt2)"
                />
              </div>
            </div>
            <svg-icon name="search2" color="var(--van-white)" size="32" />
          </li>
          <li title="game">
            <a
              href="/game/index.html#/?lang=en-us"
              target="_blank"
              tabindex="0"
              aria-description="shadow art game"
            >
              <svg-icon name="game" color="var(--van-white)" size="50" />
            </a>
          </li>
          <li>
            <svg-icon name="code" color="var(--van-white)" size="50" />
            <div>
              <img src="@/assets/images/index_ewm1.png" alt="" />
              <img
                src="@/assets/images/index_ewm.jpg"
                aria-description="Official microblog and wechat QR code"
              />
            </div>
          </li>
        </ul>
      </div>

      <!-- 底部固定栏 -->
      <div
        class="footer"
        data-aria-viewport-area
        aria-label="Footer"
        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" :key="item.name">
            |
            <RouterLink
              class="router-link"
              replace
              :to="item.path"
              v-html="item.name"
              :aria-description="item.name"
            />
          </template>
        </div>

        <p>
          Capital Museum. China 16 Fuxingmenwai Street, Xicheng District,
          Beijing 100045, P.R.China.
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { useRoute, useRouter, type RouteLocationNamedRaw } from "vue-router";
import Accessibility from "@/components/Accessibility/index.vue";
import { useTheme, THEME_COLOR } from "@/components/Accessibility/hooks";
import { topData, footerData } from "./data";
import Logo from "@/assets/images/logo.png";
import Logo2 from "@/assets/images/logo2.png";

const THEME_MAP: Record<THEME_COLOR, string> = {
  [THEME_COLOR.DEFAULT]: "",
  [THEME_COLOR.WHITE]: "white",
  [THEME_COLOR.BLUE]: "blue",
  [THEME_COLOR.YELLOW]: "yellow",
  [THEME_COLOR.BLACK]: "black",
};

const themeIdx = useTheme();
const route = useRoute();
const router = useRouter();
/** 是否开启爱心模式 */
const loveSwitch = ref(false);
const accessibility = ref();
const searchTxt = ref("");
const searchTxt2 = ref("");

watch(loveSwitch, (v) => {
  if (v) {
    accessibility.value?.requestToShowMenu();
  } else {
    accessibility.value?.requestToHideMenu();
  }
});

watch(
  route,
  () => {
    searchTxt.value = "";
  },
  {
    immediate: true,
  }
);

const handleSearch = (txt: string) => {
  router.push({
    name: "Search",
    query: { keyword: encodeURIComponent(txt) },
  });
  searchTxt2.value = "";
  searchTxt.value = "";
};
</script>

<style lang="scss">
.layout {
  --van-primary-color: #ca000a;
  --topnav-bg-color: rgba(0, 0, 0, 0.8);
  --primary-hover-bg: rgba(204, 0, 3, 0.8);
  --black-text-color: black;
  --black2-text-color: #101010;
  --gray-text-color: #666;
  --gray2-text-color: #a6a6a6;
  --white-bg: white;
  --white-text-color: white;
  --page-bg-color: #f1f1f1;

  font-family: "SourceHanSans-Regular";
  min-width: 1200px;
  background-color: var(--page-bg-color);

  &.white {
    --topnav-bg-color: white;
    --van-white: black;
    --primary-hover-bg: white;
    --black-text-color: black;
    --black2-text-color: black;
    --gray-text-color: #666;
    --gray2-text-color: #a6a6a6;
    --white-bg: white;
    --white-text-color: black;
    --page-bg-color: white;
  }
  &.blue {
    --topnav-bg-color: #00f;
    --van-white: #ff0;
    --primary-hover-bg: #00f;
    --black-text-color: #ff0;
    --black2-text-color: #ff0;
    --gray-text-color: #ff0;
    --gray2-text-color: #ff0;
    --white-bg: #00f;
    --white-text-color: #ff0;
    --page-bg-color: #00f;
  }
  &.yellow {
    --topnav-bg-color: #ff0;
    --van-white: black;
    --primary-hover-bg: #ff0;
    --black-text-color: black;
    --black2-text-color: black;
    --gray-text-color: black;
    --gray2-text-color: black;
    --white-bg: #ff0;
    --white-text-color: black;
    --page-bg-color: #ff0;
  }
  &.black {
    --topnav-bg-color: black;
    --van-white: #ff0;
    --primary-hover-bg: black;
    --black-text-color: #ff0;
    --black2-text-color: #ff0;
    --gray-text-color: #ff0;
    --gray2-text-color: #ff0;
    --white-bg: black;
    --white-text-color: #ff0;
    --page-bg-color: black;
  }
  &-main {
    position: relative;
    min-height: 100vh;
    padding-bottom: 45px;
  }
}

.topnav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 40px 0 5px;
  height: inherit;
  background: var(--topnav-bg-color);
  z-index: 2;

  &-wrap {
    position: relative;
    height: 60px;
  }
  &-container {
    display: flex;
    align-items: center;
    flex: 1;
    max-width: calc(1300px + 240px + 30px);
    height: inherit;
  }
  &-list {
    flex: 1;
    display: flex;
    justify-content: space-between;
    padding: 0 70px;
    height: inherit;
    line-height: 60px;
    font-size: 14px;
    color: var(--van-white);

    > li {
      position: relative;
      cursor: pointer;
      user-select: none;

      > span {
        white-space: nowrap;
      }
      &:hover,
      &:focus-within {
        & > span {
          border-bottom: 2px solid var(--van-primary-color);
        }
        .main_nav_sub {
          display: block;
        }
      }
      &.active {
        & > span {
          border-bottom: 2px solid var(--van-primary-color);
        }
      }
      .main_nav_sub {
        display: none;
        position: absolute;
        z-index: 1;

        span {
          border-left: 2px solid #660005;
          font-size: 14px;
          color: inherit;
          height: 40px;
          line-height: 40px;
          background-color: var(--topnav-bg-color);
          white-space: nowrap;
          display: block;
          padding: 0 20px 0 10px;

          &:hover {
            background-color: var(--primary-hover-bg);
            border-left: 2px solid var(--van-primary-color);
          }
        }
        .active2 {
          background-color: var(--primary-hover-bg);
          border-left: 2px solid var(--van-primary-color);
        }
      }
    }
  }

  .language {
    width: 73px;
    background: url("@/assets/images/dh1.png") no-repeat 0 18px;

    & > a {
      color: #fff;
      text-decoration: none;
      display: inline-block;
      margin-left: 40px;
      padding-right: 5px;

      &:hover {
        border-bottom: 2px solid var(--van-primary-color);
      }
    }
  }

  .love {
    --van-switch-width: 40px;
    --van-switch-height: 20px;
    --van-switch-node-size: calc(var(--van-switch-height) - 4px);

    display: flex;
    align-items: center;
    gap: 8px;
  }

  .search {
    margin-left: 40px;
    position: relative;
    width: 240px;
    height: 30px;

    .svg-icon {
      position: absolute;
      top: 50%;
      right: 8px;
      transform: translateY(-50%);
    }
    input {
      font-size: 14px;
      background-color: #fff;
      border: 1px solid #dcdfe6;
      box-sizing: border-box;
      color: #606266;
      display: inline-block;
      outline: 0;
      padding: 0 30px 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;
      &:focus {
        border-color: var(--van-primary-color);
      }
      &::placeholder {
        color: black;
      }
    }
  }
}

.footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 100px;
  font-size: 14px;
  color: var(--van-white);
  line-height: 45px;
  background: var(--topnav-bg-color);

  .router-link {
    color: inherit;
    margin: 0 10px;
  }
}

.rightNav {
  position: fixed;
  top: 60%;
  right: 0;
  height: 164px;
  width: 60px;
  z-index: var(--el-index-popper);
  .rightIco {
    width: 100%;
    height: 100%;
    & > li {
      background: var(--topnav-bg-color);
      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: var(--primary-hover-bg);
        & > 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: var(--van-primary-color);
          padding: 8px;
          input {
            padding: 0 5px;
            width: 200px;
            height: 38px;
            line-height: 44px;
            &:focus {
              border-color: #000 !important;
              outline: 2px solid #000 !important;
            }
          }
        }
      }
      &:hover,
      &:focus-within {
        .searchHover {
          opacity: 1;
          pointer-events: auto;
        }
      }
    }
  }
}

@media screen and (max-width: 1430px) {
  .topnav {
    padding-right: 5px;

    &-list {
      padding: 0 20px;
      font-size: 12px;
    }
    .search {
      margin-left: 0;
    }
  }
}
</style>