|
@@ -1,24 +1,29 @@
|
|
|
<template>
|
|
|
<div class="Collections">
|
|
|
- <div class="banWrapper"
|
|
|
+ <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."
|
|
|
+ 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" tabindex="0" aria-label="Image"
|
|
|
+ <div
|
|
|
+ class="ban"
|
|
|
+ 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."
|
|
|
+ <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: </span>
|
|
|
- <Router-link
|
|
|
- to="/Layout/Home"
|
|
|
- tabindex="0"
|
|
|
- aria-description="Home"
|
|
|
- >
|
|
|
+ <Router-link to="/Layout/Home" tabindex="0" aria-description="Home">
|
|
|
Home>
|
|
|
</Router-link>
|
|
|
<Router-link
|
|
@@ -28,18 +33,17 @@
|
|
|
>
|
|
|
Collections>
|
|
|
</Router-link>
|
|
|
- <Router-link
|
|
|
- to=""
|
|
|
- tabindex="0"
|
|
|
- :aria-description="mbTxt"
|
|
|
- >
|
|
|
+ <Router-link 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."
|
|
|
+ <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)"
|
|
@@ -57,8 +61,12 @@
|
|
|
</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="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"
|
|
@@ -70,20 +78,22 @@
|
|
|
<img
|
|
|
class="rowImg"
|
|
|
:src="`/data/Collections/${mbTxt}/${index + 1}.png`"
|
|
|
- :alt="item.h3.replace(/(<([^>]+)>)/ig, '')"
|
|
|
+ :alt="item.h3.replace(/(<([^>]+)>)/gi, '')"
|
|
|
tabindex="0"
|
|
|
- :aria-description="item.h3.replace(/(<([^>]+)>)/ig, '')"
|
|
|
+ :aria-description="item.h3.replace(/(<([^>]+)>)/gi, '')"
|
|
|
/>
|
|
|
<div class="info">
|
|
|
<!-- 箭头 -->
|
|
|
<img src="/data/Collections/arrow.png" alt="" />
|
|
|
- <h3 v-html="item.h3"
|
|
|
+ <h3
|
|
|
+ v-html="item.h3"
|
|
|
tabindex="0"
|
|
|
- :aria-description="item.h3.replace(/(<([^>]+)>)/ig, '')"
|
|
|
+ :aria-description="item.h3.replace(/(<([^>]+)>)/gi, '')"
|
|
|
></h3>
|
|
|
- <p v-html="item.p"
|
|
|
+ <p
|
|
|
+ v-html="item.p"
|
|
|
tabindex="0"
|
|
|
- :aria-description="item.p.replace(/(<([^>]+)>)/ig, '')"
|
|
|
+ :aria-description="item.p.replace(/(<([^>]+)>)/gi, '')"
|
|
|
></p>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -136,45 +146,48 @@ export default {
|
|
|
this.mbTxt = temp;
|
|
|
this.data = Collections[this.mbTxt];
|
|
|
|
|
|
- let keyword = ''
|
|
|
+ let keyword = "";
|
|
|
switch (this.mbTxt) {
|
|
|
- case 'Bronzes':
|
|
|
- keyword = 'Bronzes'
|
|
|
+ case "Bronzes":
|
|
|
+ keyword = "Bronzes";
|
|
|
break;
|
|
|
- case 'Ceramics':
|
|
|
- keyword = 'Ceramics'
|
|
|
+ case "Ceramics":
|
|
|
+ keyword = "Ceramics";
|
|
|
break;
|
|
|
- case 'Buddhist':
|
|
|
- keyword = 'buddhist statues'
|
|
|
+ case "Buddhist":
|
|
|
+ keyword = "buddhist statues";
|
|
|
break;
|
|
|
- case 'Jadewares':
|
|
|
- keyword = 'Jadewares'
|
|
|
+ case "Jadewares":
|
|
|
+ keyword = "Jadewares";
|
|
|
break;
|
|
|
- case 'Calligraphies':
|
|
|
- keyword = 'Calligraphies'
|
|
|
+ case "Calligraphies":
|
|
|
+ keyword = "Calligraphies";
|
|
|
break;
|
|
|
- case 'Paintings':
|
|
|
- keyword = 'Paintings'
|
|
|
+ case "Paintings":
|
|
|
+ keyword = "Paintings";
|
|
|
break;
|
|
|
- case 'Gold':
|
|
|
- keyword = 'gold & silverwares'
|
|
|
+ case "Gold":
|
|
|
+ keyword = "gold & silverwares";
|
|
|
break;
|
|
|
- case 'Coins':
|
|
|
- keyword = 'coins & banknotes'
|
|
|
+ case "Coins":
|
|
|
+ keyword = "coins & banknotes";
|
|
|
break;
|
|
|
- case 'Brocades':
|
|
|
- keyword = 'brocades & embroideries'
|
|
|
+ case "Brocades":
|
|
|
+ keyword = "brocades & embroideries";
|
|
|
break;
|
|
|
- case 'Cultural':
|
|
|
- keyword = 'cultural supplies'
|
|
|
+ case "Cultural":
|
|
|
+ keyword = "cultural supplies";
|
|
|
break;
|
|
|
- case 'Miscellaneous':
|
|
|
- keyword = 'miscellaneous arts'
|
|
|
+ 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.`)
|
|
|
+ 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,
|
|
|
},
|
|
@@ -196,8 +209,7 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
//生命周期 - 创建完成(可以访问当前this实例)
|
|
|
- created() {
|
|
|
- },
|
|
|
+ created() {},
|
|
|
//生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
mounted() {},
|
|
|
beforeCreate() {}, //生命周期 - 创建之前
|
|
@@ -299,7 +311,7 @@ export default {
|
|
|
line-height: 22px;
|
|
|
padding-bottom: 5px;
|
|
|
font-weight: 700;
|
|
|
- /deep/& > i {
|
|
|
+ /deep/i {
|
|
|
font-style: italic;
|
|
|
}
|
|
|
/deep/.smImg {
|
|
@@ -310,6 +322,9 @@ export default {
|
|
|
p {
|
|
|
font-size: 14px;
|
|
|
color: #626262;
|
|
|
+ /deep/ i {
|
|
|
+ font-style: italic;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
&:hover {
|
|
@@ -324,6 +339,9 @@ export default {
|
|
|
}
|
|
|
p {
|
|
|
color: #fff;
|
|
|
+ /deep/ i {
|
|
|
+ font-style: italic;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -731,9 +749,8 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .Miscellaneous{
|
|
|
+ .Miscellaneous {
|
|
|
height: 641px;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
</style>
|