|
|
@@ -1,25 +1,38 @@
|
|
|
<template>
|
|
|
<div class="Layout">
|
|
|
- <Accessibility ref="accessibility" @show="onAccessibilityMenuShow" @hide="onAccessibilityMenuHide"/>
|
|
|
+ <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"
|
|
|
+ <h1
|
|
|
+ class="logo"
|
|
|
+ tabindex="0"
|
|
|
+ aria-label="Image"
|
|
|
aria-description="CAPTIAL MUSEUM.CHINA"
|
|
|
>
|
|
|
- <img src="@/assets/images/logo.png" alt=""
|
|
|
+ <img
|
|
|
+ src="@/assets/images/logo.png"
|
|
|
+ alt=""
|
|
|
v-if="[0, 2, 4].includes(themeIdx)"
|
|
|
/>
|
|
|
- <img src="@/assets/images/logo.webp"
|
|
|
+ <img
|
|
|
+ src="@/assets/images/logo.webp"
|
|
|
alt=""
|
|
|
- style="width: 198px; height: 40px;"
|
|
|
+ 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."
|
|
|
+ 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)"
|
|
|
@@ -43,16 +56,15 @@
|
|
|
aria-label="Link"
|
|
|
:aria-description="val.name"
|
|
|
>
|
|
|
- <span>{{ val.name}}</span>
|
|
|
+ <span>{{ val.name }}</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</li>
|
|
|
<!-- 中文网 -->
|
|
|
- <li class="language"
|
|
|
- tabindex="0"
|
|
|
- aria-description="English"
|
|
|
- >
|
|
|
- <a href="http://www.capitalmuseum.org.cn/" target="_blank"
|
|
|
+ <li class="language" tabindex="0" aria-description="English">
|
|
|
+ <a
|
|
|
+ href="http://www.capitalmuseum.org.cn/"
|
|
|
+ target="_blank"
|
|
|
tabindex="0"
|
|
|
aria-description="Chinese"
|
|
|
>
|
|
|
@@ -61,7 +73,8 @@
|
|
|
</li>
|
|
|
<!-- 爱心模式 -->
|
|
|
<li class="love">
|
|
|
- <label for="caring-mode-switch"
|
|
|
+ <label
|
|
|
+ for="caring-mode-switch"
|
|
|
tabindex="0"
|
|
|
aria-label="Button"
|
|
|
aria-description="Caring Mode"
|
|
|
@@ -88,9 +101,12 @@
|
|
|
</div>
|
|
|
<!-- 右侧的输入框 -->
|
|
|
<div
|
|
|
- class="search" @keyup.enter="search" v-if="!menaInd.includes('Search')"
|
|
|
+ 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."
|
|
|
+ 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">
|
|
|
@@ -102,24 +118,33 @@
|
|
|
tabindex="0"
|
|
|
:aria-description="searchTxt || 'search'"
|
|
|
/>
|
|
|
- <img v-if="themeIdx === 0" :src="require('@/assets/images/search-default-color.svg')" alt=""
|
|
|
+ <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=""
|
|
|
+ />
|
|
|
+ <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=""
|
|
|
+ />
|
|
|
+ <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>
|
|
|
@@ -127,10 +152,13 @@
|
|
|
<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."
|
|
|
+ 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 >
|
|
|
+ <div>
|
|
|
<template v-for="item in footerData">
|
|
|
|
|
|
|
<router-link
|
|
|
@@ -145,35 +173,62 @@
|
|
|
</template>
|
|
|
</div>
|
|
|
<p tabindex="0">
|
|
|
- Capital Museum. China 16 Fuxingmenwai Street, Xicheng District, Beijing
|
|
|
- 100045, P.R.China.
|
|
|
+ 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."
|
|
|
+ <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 title="game">
|
|
|
- <a
|
|
|
- href=""
|
|
|
- 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 href="" 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"/>
|
|
|
+ <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=""
|
|
|
+ <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"
|
|
|
/>
|
|
|
@@ -186,10 +241,10 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import Accessibility from '/src/views/accessibility.vue'
|
|
|
+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"
|
|
|
+import accessibilityMixin from "/src/views/accessibilityMixin.js";
|
|
|
|
|
|
export default {
|
|
|
name: "Layout",
|
|
|
@@ -220,15 +275,15 @@ export default {
|
|
|
watch: {
|
|
|
$route() {
|
|
|
this.menaInd = this.$route.path;
|
|
|
- this.searchTxt=''
|
|
|
+ this.searchTxt = "";
|
|
|
// console.log('------',this.menaInd);
|
|
|
},
|
|
|
loveFlag: {
|
|
|
handler(v) {
|
|
|
if (v) {
|
|
|
- this.$refs.accessibility.requestToShowMenu()
|
|
|
+ this.$refs.accessibility.requestToShowMenu();
|
|
|
} else {
|
|
|
- this.$refs.accessibility.requestToHideMenu()
|
|
|
+ this.$refs.accessibility.requestToHideMenu();
|
|
|
}
|
|
|
},
|
|
|
immediate: false,
|
|
|
@@ -238,17 +293,17 @@ export default {
|
|
|
methods: {
|
|
|
// 无障碍菜单组件内部也能自行控制显隐，此时要响应。
|
|
|
onAccessibilityMenuShow() {
|
|
|
- this.loveFlag = true
|
|
|
+ this.loveFlag = true;
|
|
|
},
|
|
|
onAccessibilityMenuHide() {
|
|
|
- this.loveFlag = false
|
|
|
+ this.loveFlag = false;
|
|
|
},
|
|
|
// 点击搜索
|
|
|
search() {
|
|
|
// if (this.searchTxt.trim() === "" || this.searchTxt.trim().length < 4) return
|
|
|
this.$router.push({
|
|
|
name: "Search",
|
|
|
- params: {txt:this.searchTxt},
|
|
|
+ params: { txt: this.searchTxt },
|
|
|
});
|
|
|
},
|
|
|
// 第一级的跳转
|
|
|
@@ -257,7 +312,7 @@ export default {
|
|
|
},
|
|
|
// 第二级的跳转
|
|
|
skipTow(url, about) {
|
|
|
- document.activeElement.blur()
|
|
|
+ document.activeElement.blur();
|
|
|
// 如果是about页面
|
|
|
if (about === true) {
|
|
|
this.$router.push("/Layout/About").catch(() => {});
|
|
|
@@ -278,8 +333,7 @@ export default {
|
|
|
beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
updated() {}, //生命周期 - 更新之后
|
|
|
beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
- destroyed() {
|
|
|
- }, //生命周期 - 销毁完成
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
};
|
|
|
</script>
|
|
|
@@ -323,7 +377,8 @@ export default {
|
|
|
display: inline;
|
|
|
margin-right: 25px;
|
|
|
position: relative;
|
|
|
- &:hover, &:focus-within {
|
|
|
+ &:hover,
|
|
|
+ &:focus-within {
|
|
|
& > span {
|
|
|
border-bottom: 2px solid #ca000a;
|
|
|
}
|
|
|
@@ -404,14 +459,14 @@ export default {
|
|
|
height: 30px;
|
|
|
input {
|
|
|
font-size: 14px;
|
|
|
- background-color: #FFF;
|
|
|
- border: 1px solid #DCDFE6;
|
|
|
+ background-color: #fff;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
box-sizing: border-box;
|
|
|
color: #606266;
|
|
|
display: inline-block;
|
|
|
outline: 0;
|
|
|
padding: 0 15px;
|
|
|
- transition: border-color .2s cubic-bezier(.645,.045,.355,1);
|
|
|
+ transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
|
width: 100%;
|
|
|
height: 30px;
|
|
|
border-radius: 15px;
|
|
|
@@ -422,7 +477,7 @@ export default {
|
|
|
}
|
|
|
&::placeholder {
|
|
|
color: black;
|
|
|
- }
|
|
|
+ }
|
|
|
}
|
|
|
img {
|
|
|
width: 14px;
|
|
|
@@ -463,7 +518,8 @@ export default {
|
|
|
float: left;
|
|
|
}
|
|
|
}
|
|
|
- &:hover, &:focus-within {
|
|
|
+ &:hover,
|
|
|
+ &:focus-within {
|
|
|
background-color: #c20e11;
|
|
|
& > div {
|
|
|
display: block;
|
|
|
@@ -490,4 +546,57 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+@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>
|
