无障碍：无障碍组件显示时，调整fixed定位元素的位置以避免遮挡

web/src/views/Collections/component/info.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="CollectionsInfo" tabindex="0">
+  <div class="CollectionsInfo" tabindex="0" :style="{
+    top: needPaddingTop ? '105px' : '0',
+    bottom: needPaddingBottom ? '219px' : '0',
+  }">
     <div class="pic">
       <h3 v-html="infoObj.h3" tabindex="0"
         :aria-description="infoObj.h3.replace(/(<([^>]+)>)/ig, '')"
@@ -38,6 +41,10 @@
     <!-- 看大图的遮造盒子 -->
     <div ref="cover" class="cover" v-show="bigShow" tabindex="0"
       @click="bigimgHide" @keydown.enter.passive="bigimgHide"
+      :style="{
+        top: needPaddingTop ? '105px' : '0',
+        bottom: needPaddingBottom ? '219px' : '0',
+      }"
     >
       <div
         class="lookBox"
@@ -85,6 +92,9 @@ export default {
       bigNumLeft: "0px",
       timeId: null,
       timeIdBig: null,
+
+      needPaddingTop: false,
+      needPaddingBottom: false,
     };
   },
   //监听属性 类似于data概念
@@ -125,9 +135,33 @@ export default {
       clearInterval(this.timeIdBig);
       this.$el.focus()
     },
+    onAriaShow() {
+      this.needPaddingTop = true
+    },
+    onAriaHide() {
+      this.needPaddingTop = false
+    },
+    onAriaShowMagnifyArea() {
+      this.needPaddingBottom = true
+    },
+    onAriaHideMagnifyArea() {
+      this.needPaddingBottom = false
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+    if ([...document.body.classList].includes('aria-active')) {
+      this.needPaddingTop = true
+    }
+    if ([...document.body.classList].includes('aria-magnifying')) {
+      this.needPaddingBottom = true
+    }
+
+    this.$eventBus.$on('aria-show', this.onAriaShow)
+    this.$eventBus.$on('aria-hide', this.onAriaHide)
+    this.$eventBus.$on('aria-show-magnify-area', this.onAriaShowMagnifyArea)
+    this.$eventBus.$on('aria-hide-magnify-area', this.onAriaHideMagnifyArea)
+  },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     this.$el.focus()
@@ -161,6 +195,10 @@ export default {
   destroyed() {
     // 清除定时器
     clearInterval(this.timeId);
+    this.$eventBus.$off('aria-show', this.onAriaShow)
+    this.$eventBus.$off('aria-hide', this.onAriaHide)
+    this.$eventBus.$off('aria-show-magnify-area', this.onAriaShowMagnifyArea)
+    this.$eventBus.$off('aria-hide-magnify-area', this.onAriaHideMagnifyArea)
   }, //生命周期 - 销毁完成
   activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
@@ -169,10 +207,8 @@ export default {
 .CollectionsInfo {
   z-index: 991;
   position: fixed;
-  top: 0;
   left: 0;
-  min-width: 100vw;
-  min-height: 100vh;
+  right: 0;
   background-color: rgba(17, 16, 16, 0.5);
   overflow-y: auto;
   .pic {
@@ -265,11 +301,9 @@ export default {
   // 看大图
   .cover {
     position: fixed;
-    top: 0;
     left: 0;
+    right: 0;
     z-index: 999;
-    width: 100vw;
-    height: 100vh;
     background-color: #000;
     text-align: center;
     .lookBox {

web/src/views/Events/info.vue

@@ -97,7 +97,9 @@
       </ul>
     </div>
     <!-- 回到顶部 -->
-    <div class="topBtn" @click="toTop">
+    <div class="topBtn" @click="toTop" :style="{
+      bottom: needMagnifyAreaSpace ? '220px' : '100px',
+    }">
       <img src="/data/About/Events/toTop.jpg" alt="" />
     </div>
   </div>
@@ -119,6 +121,8 @@ export default {
       // 控制顶部的图片
       imgInd: 1,
       mainArr: 0,
+
+      needMagnifyAreaSpace: false,
     };
   },
   //监听属性 类似于data概念
@@ -175,10 +179,21 @@ export default {
 
       this.other = temp;
     },
+    onAriaShowMagnifyArea() {
+      this.needMagnifyAreaSpace = true
+    },
+    onAriaHideMagnifyArea() {
+      this.needMagnifyAreaSpace = false
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
     this.getData();
+    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)
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
@@ -196,7 +211,10 @@ export default {
   beforeUpdate() {}, //生命周期 - 更新之前
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
+  destroyed() {
+    this.$eventBus.$off('aria-show-magnify-area', this.onAriaShowMagnifyArea)
+    this.$eventBus.$off('aria-hide-magnify-area', this.onAriaHideMagnifyArea)
+  }, //生命周期 - 销毁完成
   activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
@@ -206,7 +224,6 @@ export default {
     margin-left: 450px;
     position: fixed;
     left: 50%;
-    bottom: 100px;
     z-index: 9999;
     cursor: pointer;
   }

web/src/views/layout/index.vue

@@ -355,15 +355,17 @@ export default {
   }
 }
 .rightNav {
-  width: 60px;
-  height: 164px;
   position: fixed;
-  bottom: 150px;
+  width: 60px;
+  top: 0;
+  bottom: 0;
   right: 0;
   z-index: 990;
   .rightIco {
     width: 100%;
-    height: 100%;
+    height: 164px;
+    position: absolute;
+    top: 50%;
     & > li {
       background-color: rgba(0, 0, 0, 0.8);
       text-align: center;