|
|
@@ -2,7 +2,9 @@
|
|
|
<template>
|
|
|
<div class="EventsInfo">
|
|
|
<div class="conten">
|
|
|
- <img class="topBan aria-theme-independent" :src="`/data/About/Events/${imgInd}Ac.jpg`"
|
|
|
+ <img
|
|
|
+ class="topBan aria-theme-independent"
|
|
|
+ :src="`/data/About/Events/${imgInd}Ac.jpg`"
|
|
|
:alt="info.h3"
|
|
|
tabindex="0"
|
|
|
:aria-description="info.h3"
|
|
|
@@ -37,7 +39,7 @@
|
|
|
tabindex="0"
|
|
|
aria-label="You've reached the content area of the Events sub-page, please use the tab key to go through the content."
|
|
|
>
|
|
|
- <div class="title" >
|
|
|
+ <div class="title">
|
|
|
<div class="left">
|
|
|
<h3 v-html="info.h3" tabindex="0"></h3>
|
|
|
<div class="txt">
|
|
|
@@ -58,18 +60,17 @@
|
|
|
<p tabindex="0">{{ info.i }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="txtMain" v-html="info.main" v-if="info.main" ></div>
|
|
|
+ <div class="txtMain" v-html="info.main" v-if="info.main"></div>
|
|
|
<div
|
|
|
class="txtMain"
|
|
|
v-if="info.mainArr"
|
|
|
v-html="info.mainArr[mainArr]"
|
|
|
-
|
|
|
></div>
|
|
|
<!-- 分页 -->
|
|
|
- <div class="page" v-if="info.mainArr" >
|
|
|
+ <div class="page" v-if="info.mainArr">
|
|
|
<span
|
|
|
- @click="pageCut(i-1)"
|
|
|
- @keydown.enter.passive="pageCut(i-1)"
|
|
|
+ @click="pageCut(i - 1)"
|
|
|
+ @keydown.enter.passive="pageCut(i - 1)"
|
|
|
v-for="i in 5"
|
|
|
:key="i"
|
|
|
:class="{ active: i === mainArr + 1 }"
|
|
|
@@ -145,21 +146,21 @@ export default {
|
|
|
methods: {
|
|
|
requestProcessElementInTxtMain() {
|
|
|
this.$nextTick(() => {
|
|
|
- const txtMainList = document.getElementsByClassName('txtMain')
|
|
|
+ const txtMainList = document.getElementsByClassName("txtMain");
|
|
|
for (const iterator of txtMainList) {
|
|
|
- this.$eventBus.$emit('request-process-text-element', iterator)
|
|
|
- this.$eventBus.$emit('request-process-image-element', iterator)
|
|
|
+ this.$eventBus.$emit("request-process-text-element", iterator);
|
|
|
+ this.$eventBus.$emit("request-process-image-element", iterator);
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
- pageCut(i){
|
|
|
- this.mainArr = i
|
|
|
- this.toTop()
|
|
|
- this.requestProcessElementInTxtMain()
|
|
|
+ pageCut(i) {
|
|
|
+ this.mainArr = i;
|
|
|
+ this.toTop();
|
|
|
+ this.requestProcessElementInTxtMain();
|
|
|
},
|
|
|
skip(id) {
|
|
|
this.$router.push(`/Layout/EventsInfo/${id}`).catch(() => {});
|
|
|
- this.requestProcessElementInTxtMain()
|
|
|
+ this.requestProcessElementInTxtMain();
|
|
|
},
|
|
|
// 点击回到顶部
|
|
|
toTop() {
|
|
|
@@ -199,20 +200,20 @@ export default {
|
|
|
this.other = temp;
|
|
|
},
|
|
|
onAriaShowMagnifyArea() {
|
|
|
- this.needMagnifyAreaSpace = true
|
|
|
+ this.needMagnifyAreaSpace = true;
|
|
|
},
|
|
|
onAriaHideMagnifyArea() {
|
|
|
- this.needMagnifyAreaSpace = false
|
|
|
+ this.needMagnifyAreaSpace = false;
|
|
|
},
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
this.getData();
|
|
|
- if ([...document.body.classList].includes('aria-magnifying')) {
|
|
|
- this.needMagnifyAreaSpace = true
|
|
|
+ if ([...document.body.classList].includes("aria-magnifying")) {
|
|
|
+ this.needMagnifyAreaSpace = true;
|
|
|
}
|
|
|
- this.$eventBus.$on('aria-show-magnify-area', this.onAriaShowMagnifyArea)
|
|
|
- this.$eventBus.$on('aria-hide-magnify-area', this.onAriaHideMagnifyArea)
|
|
|
+ this.$eventBus.$on("aria-show-magnify-area", this.onAriaShowMagnifyArea);
|
|
|
+ this.$eventBus.$on("aria-hide-magnify-area", this.onAriaHideMagnifyArea);
|
|
|
},
|
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
mounted() {
|
|
|
@@ -220,7 +221,7 @@ export default {
|
|
|
"request-read",
|
|
|
`You've reached the sub-page of the Events page.This page contains one navigation section, four window sections, and one interactive section. To choose an section, please hit the shortcut key.`
|
|
|
);
|
|
|
- this.requestProcessElementInTxtMain()
|
|
|
+ this.requestProcessElementInTxtMain();
|
|
|
},
|
|
|
beforeCreate() {}, //生命周期 - 创建之前
|
|
|
beforeMount() {}, //生命周期 - 挂载之前
|
|
|
@@ -228,8 +229,8 @@ export default {
|
|
|
updated() {}, //生命周期 - 更新之后
|
|
|
beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
destroyed() {
|
|
|
- this.$eventBus.$off('aria-show-magnify-area', this.onAriaShowMagnifyArea)
|
|
|
- this.$eventBus.$off('aria-hide-magnify-area', this.onAriaHideMagnifyArea)
|
|
|
+ this.$eventBus.$off("aria-show-magnify-area", this.onAriaShowMagnifyArea);
|
|
|
+ this.$eventBus.$off("aria-hide-magnify-area", this.onAriaHideMagnifyArea);
|
|
|
}, //生命周期 - 销毁完成
|
|
|
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
};
|
|
|
@@ -353,12 +354,20 @@ export default {
|
|
|
bottom: 10px;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
& > span {
|
|
|
- margin-right: 8px;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30px;
|
|
|
+ margin-right: 15px;
|
|
|
+ border-radius: 50%;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.active {
|
|
|
- color: #bf2323;
|
|
|
+ background-color: #bf2323;
|
|
|
+ color: #fff;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
}
|
