up

web/src/views/Events/info.vue

@@ -8,14 +8,20 @@
     <div class="conten">
       <img class="topBan" :src="`/data/About/Events/${imgInd}Ac.jpg`" alt="" />
       <div class="main">
-        <div class="pos" data-aria-viewport-area tabindex="0"
+        <div
+          class="pos"
+          data-aria-viewport-area
+          tabindex="0"
           aria-label="You've reached the path area; this area has two URLs; please use the tab key to go through the content."
         >
           <span>Your Position:&nbsp;</span>
           <Router-link to="/Layout/Home">Home></Router-link>
           <Router-link to="/Layout/Events">Events></Router-link>
         </div>
-        <div class="mainContent" data-aria-viewport-area tabindex="0"
+        <div
+          class="mainContent"
+          data-aria-viewport-area
+          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">
@@ -36,21 +42,35 @@
               <p>{{ info.i }}</p>
             </div>
           </div>
-          <div class="txtMain" v-html="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">
+            <span
+              @click="pageCut(i-1)"
+              v-for="i in 5"
+              :key="i"
+              :class="{ active: i === mainArr + 1 }"
+              >{{ i }}</span
+            >
+          </div>
         </div>
       </div>
     </div>
     <!-- 底部的更多 -->
-    <div class="other" data-aria-viewport-area tabindex="0"
+    <div
+      class="other"
+      data-aria-viewport-area
+      tabindex="0"
       aria-label="You've reached the View other events section of the Events sub-page; please use the tab key to go through the content."
     >
       <h2>View Other Events</h2>
       <ul>
-        <li
-          v-for="(item, index) in other"
-          :key="index"
-          @click="skip(item.id)"
-        >
+        <li v-for="(item, index) in other" :key="index" @click="skip(item.id)">
           <img :src="`/data/About/Events/${item.id}.jpg`" alt="" />
           <div class="txt" v-html="item.h3"></div>
         </li>
@@ -60,7 +80,7 @@
 </template>
 
 <script>
-// <p class='xx'>111111111</p> <p>111111111</p> <img src='/data/About/Events/in/00.png'/>
+// <p class='xx'>111111111</p> <p>111111111</p> <img src='/data/About/Events/in2/00.png'/>
 // <p><i>111111111</i></p>
 import { About, AboutOne } from "../dataAll";
 
@@ -74,6 +94,7 @@ export default {
       other: [],
       // 控制顶部的图片
       imgInd: 1,
+      mainArr: 0,
     };
   },
   //监听属性 类似于data概念
@@ -86,8 +107,12 @@ export default {
   },
   //方法集合
   methods: {
+    pageCut(i){
+      this.mainArr = i
+      this.toTop()
+    },
     skip(id) {
-      this.$router.push(`/Layout/EventsInfo/${id}`).catch(()=>{});
+      this.$router.push(`/Layout/EventsInfo/${id}`).catch(() => {});
     },
     // 点击回到顶部
     toTop() {
@@ -121,7 +146,7 @@ export default {
       } else if (id < 4) {
         temp.push(AboutOne[3]);
         temp.push(AboutOne[4]);
-      } else if(id<5) temp.push(AboutOne[4])
+      } else if (id < 5) temp.push(AboutOne[4]);
       else temp.push(AboutOne[3]);
 
       this.other = temp;
@@ -133,7 +158,10 @@ export default {
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-      this.$eventBus.$emit('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.$eventBus.$emit(
+      "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.`
+    );
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
@@ -256,6 +284,23 @@ export default {
           text-decoration: underline;
         }
       }
+      .mainContent {
+        position: relative;
+        .page {
+          position: absolute;
+          bottom: 10px;
+          left: 50%;
+          transform: translateX(-50%);
+          & > span {
+            margin-right: 8px;
+            cursor: pointer;
+          }
+          .active {
+            color: #bf2323;
+            pointer-events: none;
+          }
+        }
+      }
     }
   }
   .other {