更新展览图片title名字

web/src/views/Exhibitions/info.vue

@@ -2,7 +2,8 @@
   <div class="ExhibitionsInfo">
     <!-- 滚动 -->
     <ul class="navBarItem" :class="{ gunShow: gunShow }">
-      <li :class="{ cur: gunInd === 1 }"
+      <li
+        :class="{ cur: gunInd === 1 }"
         @click="cutGun(1)"
         @keydown.enter.passive="cutGun(1)"
         tabindex="0"
@@ -10,7 +11,8 @@
       >
         <span class="aria-inverse-theme"></span> Exhibition Overview
       </li>
-      <li :class="{ cur: gunInd === 2 }"
+      <li
+        :class="{ cur: gunInd === 2 }"
         @click="cutGun(2)"
         @keydown.enter.passive="cutGun(2)"
         tabindex="0"
@@ -18,7 +20,8 @@
       >
         <span></span> Exhibition Objects
       </li>
-      <li :class="{ cur: gunInd === 3 }"
+      <li
+        :class="{ cur: gunInd === 3 }"
         @click="cutGun(3)"
         @keydown.enter.passive="cutGun(3)"
         tabindex="0"
@@ -27,8 +30,12 @@
         <span></span> Exhibition Galleries
       </li>
     </ul>
-    <div class="topImg" data-aria-viewport-area tabindex="0"
-      aria-label aria-description="You've reached the banner area of the tertiary exhibition page; this area has one image; please use the tab key to go through the content."
+    <div
+      class="topImg"
+      data-aria-viewport-area
+      tabindex="0"
+      aria-label
+      aria-description="You've reached the banner area of the tertiary exhibition page; this area has one image; please use the tab key to go through the content."
     >
       <img
         :src="`/data/Exhibitions/${dataUrl}/infoTop${data.topImg}.jpg`"
@@ -38,19 +45,25 @@
       />
     </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; please 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; please use the tab key to go through the content."
     >
-      <div >
+      <div>
         <span class="pos1" tabindex="0">Your Position:&nbsp;</span>
-        <Router-link to="/Layout/Home"
+        <Router-link
+          to="/Layout/Home"
           replace
-         tabindex="0"
-         aria-description="Home"
+          tabindex="0"
+          aria-description="Home"
         >
           Home>
         </Router-link>
-        <Router-link to="/Layout/Exhibitions/1"
+        <Router-link
+          to="/Layout/Exhibitions/1"
           replace
           tabindex="0"
           aria-description="Exhibitions"
@@ -72,32 +85,54 @@
     <div class="conten">
       <!-- Exhibition Overview -->
       <div class="y_box" ref="Overview">
-        <div class="title_area" data-aria-viewport-area tabindex="0"
-          aria-label aria-description="You've reached the section of exhibition title, please use the tab key to navigate through the content."
+        <div
+          class="title_area"
+          data-aria-viewport-area
+          tabindex="0"
+          aria-label
+          aria-description="You've reached the section of exhibition title, please use the tab key to navigate through the content."
         >
           <div class="title_2" tabindex="0">{{ data.title }}</div>
-          <div class="info" >
-            <span v-if="data.date" class="info_1" tabindex="0">{{ data.date }}</span>
-            <span v-if="data.time" class="info_2 aria-theme-independent" tabindex="0">{{ data.time }}</span>
-            <span v-if="data.loc" class="info_3 aria-theme-independent" tabindex="0">{{ data.loc }}</span>
+          <div class="info">
+            <span v-if="data.date" class="info_1" tabindex="0">{{
+              data.date
+            }}</span>
+            <span
+              v-if="data.time"
+              class="info_2 aria-theme-independent"
+              tabindex="0"
+              >{{ data.time }}</span
+            >
+            <span
+              v-if="data.loc"
+              class="info_3 aria-theme-independent"
+              tabindex="0"
+              >{{ data.loc }}</span
+            >
           </div>
         </div>
-        <div class="content_2" data-aria-viewport-area tabindex="0"
-          aria-label aria-description="You've reached the section of exhibition overview, please use the tab key to go through the content."
+        <div
+          class="content_2"
+          data-aria-viewport-area
+          tabindex="0"
+          aria-label
+          aria-description="You've reached the section of exhibition overview, please use the tab key to go through the content."
         >
-          <div class="title_3" tabindex="0">——<span>Exhibition Overview</span>——</div>
+          <div class="title_3" tabindex="0">
+            ——<span>Exhibition Overview</span>——
+          </div>
           <div
             v-show="index === pageInd"
             v-for="(item, index) in data.page"
             :key="index"
-            
           >
             <p class="one" v-html="item.tit" tabindex="0"></p>
             <div class="fuTxt" v-html="item.article" tabindex="0"></div>
           </div>
           <!-- 分页 -->
-          <div class="paging" >
-            <span v-show="pageInd !== 0"
+          <div class="paging">
+            <span
+              v-show="pageInd !== 0"
               @click="pageCut(pageInd - 1)"
               @keydown.enter.passive="pageCut(pageInd - 1)"
               tabindex="0"
@@ -132,14 +167,28 @@
         </div>
       </div>
       <!-- Exhibition Objects -->
-      <div class="picpart" ref="Objects" v-if="data.objects !== 0" data-aria-viewport-area tabindex="0"
-        aria-label aria-description="You've reached the section of exhibition objects, please use the tab key to go through the content."
+      <div
+        class="picpart"
+        ref="Objects"
+        v-if="data.objects !== 0"
+        data-aria-viewport-area
+        tabindex="0"
+        aria-label
+        aria-description="You've reached the section of exhibition objects, please use the tab key to go through the content."
       >
-        <div class="title_3" tabindex="0">——<span>Exhibition Objects</span>——</div>
+        <div class="title_3" tabindex="0">
+          ——<span>Exhibition Objects</span>——
+        </div>
         <!-- 图片 -->
-        <div class="row" :class="{ show: showObjects }" >
-          <div class="rowOne" :title="i" v-for="i in data.objects" :key="i"
-            tabindex="0" aria-label="" aria-description=""
+        <div class="row" :class="{ show: showObjects }">
+          <div
+            class="rowOne"
+            :title="tempArr[i - 1]"
+            v-for="i in data.objects"
+            :key="i"
+            tabindex="0"
+            aria-label=""
+            aria-description=""
           >
             <img
               :src="`/data/Exhibitions/${dataUrl}/objects${data.topImg}/objects${i}${data.imgLast}`"
@@ -154,27 +203,26 @@
               >
                 <i> Download</i>
               </a>
-              <span class="el-icon-search"
+              <span
+                class="el-icon-search"
                 @click="imgBig(i)"
                 @keydown.enter.passive="imgBig(i)"
                 tabindex="0"
                 aria-label="Button"
               >
-                <i>
-                  Enlarge
-                </i>
+                <i> Enlarge </i>
               </span>
             </div>
           </div>
         </div>
-        <div class="more" >
+        <div class="more">
           <span
             @click="showObjects = !showObjects"
             @keydown.enter.passive="showObjects = !showObjects"
             tabindex="0"
             aria-label="Button"
           >
-            {{showObjects ? "Hide" : "See More"}}
+            {{ showObjects ? "Hide" : "See More" }}
           </span>
         </div>
       </div>
@@ -184,14 +232,16 @@
         ref="Galleries"
         data-aria-viewport-area
         tabindex="0"
-        aria-label aria-description="You've reached the section of exhibition galleries, please use the tab key to go through the content."
+        aria-label
+        aria-description="You've reached the section of exhibition galleries, please use the tab key to go through the content."
         v-if="data.galleries !== 0"
       >
-        <div class="title_3" tabindex="0">——<span>Exhibition Galleries</span>——</div>
+        <div class="title_3" tabindex="0">
+          ——<span>Exhibition Galleries</span>——
+        </div>
         <!-- 图片 -->
-        <div class="box" :class="{ show: showGalleries }" >
+        <div class="box" :class="{ show: showGalleries }">
           <img
-            :title="i"
             :src="`/data/Exhibitions/${dataUrl}/galleries${data.topImg}/galleries${i}${data.imgLast}`"
             alt=""
             v-for="i in data.galleries"
@@ -200,20 +250,21 @@
             aria-description=""
           />
         </div>
-        <div class="more" v-show="data.galleries>3" >
+        <div class="more" v-show="data.galleries > 3">
           <span
             @click="showGalleries = !showGalleries"
             @keydown.enter.passive="showGalleries = !showGalleries"
             tabindex="0"
             aria-label="Button"
           >
-            {{showGalleries ? "Hide" : "See More"}}
+            {{ showGalleries ? "Hide" : "See More" }}
           </span>
         </div>
       </div>
     </div>
     <!-- 回到顶部 -->
-    <button class="back_btn"
+    <button
+      class="back_btn"
       @click="backTop"
       @keydown.enter.passive="backTop"
       tabindex="0"
@@ -230,6 +281,8 @@
 </template>
 
 <script>
+import { nameSet } from "./name.js";
+// 引入图片名js文件
 import { dataAll } from "@/views/dataAll.js";
 import ElImageViewer from "element-ui/packages/image/src/image-viewer";
 export default {
@@ -249,7 +302,9 @@ export default {
       topTxt: "", //最后的一个面包屑文字
       pageInd: 0, //分页的切换
       // 数据的路径
-      dataUrl:''
+      dataUrl: "",
+      // 名字数据
+      nameArr: {},
     };
   },
   //监听属性 类似于data概念
@@ -313,17 +368,22 @@ export default {
     // 返回顶部
     backTop() {
       window.scrollTo({ top: 0, behavior: "smooth" });
-      document.activeElement.blur()
-    }
+      document.activeElement.blur();
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     setTimeout(() => {
-      this.$eventBus.$emit('request-read', `You've reached the tertiary exhibition page. There is one navigation section, ${document.querySelectorAll('*[data-aria-viewport-area]').length} window sections, and one interactive section on this page. To choose a section, please hit the shortcut key.`)
+      this.$eventBus.$emit(
+        "request-read",
+        `You've reached the tertiary exhibition page. There is one navigation section, ${
+          document.querySelectorAll("*[data-aria-viewport-area]").length
+        } window sections, and one interactive section on this page. To choose a section, please hit the shortcut key.`
+      );
     }, 100);
-    
+
     let { id, k } = this.$route.query;
     id = Number(id);
     k = Number(k);
@@ -337,18 +397,30 @@ export default {
     } else if (k === 4) {
       (temp = dataAll.Exhibitions.Overseas), (this.topTxt = "Overseas");
     }
-  // 对重复的展览的处理
-    if(k===4) this.dataUrl ='Past'
-    else this.dataUrl =this.topTxt
+    // 对重复的展览的处理
+    if (k === 4) this.dataUrl = "Past";
+    else this.dataUrl = this.topTxt;
     temp.forEach((v) => {
       if (v.id === id) this.data = v.info;
-      
     });
+
+    // 获取对应名字的数据
+    let tempObj = nameSet.find((v) => v.id === id);
+    if (tempObj) this.tempArr = tempObj.arr;
+    else {
+      let tempArr = [];
+      for (let i = 1; i < this.data.objects; i++) {
+        tempArr.push("picture");
+      }
+      this.tempArr = [...tempArr];
+    }
+
     // console.log("--------", this.data);
     // 监听滚动
     window.onscroll = () => {
       // console.log(window.scrollY, window.pageYOffset)
-      if (scrollY > 400 - 105) this.gunShow = true; // 105是无障碍菜单栏的高度
+      if (scrollY > 400 - 105) this.gunShow = true;
+      // 105是无障碍菜单栏的高度
       else this.gunShow = false;
       // 切换固定滚动的高亮状态
       // let Overview = this.$refs.Overview;
@@ -560,7 +632,8 @@ export default {
               font-size: 18px;
             }
           }
-          &:hover, &:focus-within {
+          &:hover,
+          &:focus-within {
             .mask {
               display: block;
             }