style: --

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

@@ -7,14 +7,13 @@
       <h3 v-html="infoObj.h3" tabindex="0"
         :aria-description="infoObj.h3.replace(/(<([^>]+)>)/ig, '')"
       ></h3>
-      <div class="mark" ref="markBox" @click="lookBig"
-        @keydown.enter.passive="lookBig"
-      >
-        <img :src="`/data/Collections/${infoObj.url}/big${infoObj.id}.png`"
+      <div class="mark" ref="markBox">
+        <el-image :src="`/data/Collections/${infoObj.url}/big${infoObj.id}.png`"
           :alt="infoObj.h3.replace(/(<([^>]+)>)/ig, '')"
           tabindex="0"
           aria-label="Image"
           :aria-description="infoObj.h3.replace(/(<([^>]+)>)/ig, '')"
+          :preview-src-list="[`/data/Collections/${infoObj.url}/big${infoObj.id}.png`]"
         />
         <span class="aria-theme-independent" :style="{ opacity: smallImageLogoOpacity, left: numLeft, top: numTop }"></span>
       </div>
@@ -39,37 +38,23 @@
       &nbsp;
     </div>
     <!-- 看大图的遮造盒子 -->
-    <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"
-        ref="lookBox"
-        title="Click here to return to the previous page"
-      >
-        <img :src="`/data/Collections/${infoObj.url}/big${infoObj.id}.png`"
-          alt=""
-          tabindex="0"
-          aria-label="Image"
-          :aria-description="infoObj.h3.replace(/(<([^>]+)>)/ig, '')"
-        />
-        <span
-          class="aria-theme-independent"
-          :style="{ opacity: bigImageLogoOpacity, left: bigNumLeft, top: bigNumTop }"
-        ></span>
-      </div>
-    </div>
+    <image-viewer v-if="showViewer"
+      :z-index="2000"
+      :initial-index="0"
+      :on-close="bigimgHide"
+      :url-list="[`/data/Collections/${infoObj.url}/big${infoObj.id}.png`]"
+    />
   </div>
 </template>
 
 <script>
+import ImageViewer from 'element-ui/packages/image/src/image-viewer.vue'
+
 export default {
   name: "CollectionsInfo",
-  components: {},
+  components: {
+    ImageViewer
+  },
   props: {
     isShow: {
       type: Boolean,
@@ -84,6 +69,7 @@ export default {
     //这里存放数据
     return {
       bigShow: false,
+      showViewer: false,
       // 从0到1的随机小数
       smallImageLogoOpacity: 1,
       bigImageLogoOpacity: 1,
@@ -114,31 +100,11 @@ export default {
     },
     // 点击小图查看大图
     lookBig() {
-      this.bigShow = true;
-      this.$nextTick(() => {
-        this.$refs.cover.focus()
-        setTimeout(() => {
-          // -----------------大图的logo随机
-          let bDom = this.$refs.lookBox;
-          let maxLeft = bDom.offsetWidth - 64;
-          let maxTop = bDom.offsetHeight - 133;
-          this.timeIdBig = setInterval(() => {
-            this.bigImageLogoOpacity = 0;
-            setTimeout(() => {
-              this.bigImageLogoOpacity = 1;
-              // 控制位移
-              this.bigNumLeft = Math.ceil(Math.random() * maxLeft) + "px";
-              this.bigNumTop = Math.ceil(Math.random() * maxTop) + "px";
-            }, 500);
-          }, 3000);
-        }, 100);
-      });
+      this.showViewer = true
     },
     // 隐藏大图
     bigimgHide() {
-      this.bigShow = false;
-      clearInterval(this.timeIdBig);
-      this.$el.focus()
+      this.showViewer = false
     },
     onAriaShow() {
       this.needPaddingTop = true

web/src/views/Collections/index.vue

@@ -87,7 +87,7 @@
         >
           <img
             class="rowImg"
-            :src="`/data/Collections/${mbTxt}/${index + 1}.png`"
+            :src="`/data/Collections/${mbTxt}/${item.id}.png`"
             :alt="item.h3.replace(/(<([^>]+)>)/gi, '')"
             tabindex="0"
             aria-label="Image link"
@@ -566,7 +566,7 @@ export default {
     }
   }
   .Calligraphies {
-    height: 9000px;
+    height: 7500px;
     .row2 {
       // &:nth-of-type(4) {
       //   left: 650px;
@@ -661,7 +661,7 @@ export default {
     }
   }
   .Paintings {
-    height: 2448px;
+    height: 4448px;
     .row {
       &:nth-of-type(4) {
         left: 330px;

webM/src/views/Collections/info.vue

@@ -11,7 +11,7 @@
         v-for="(item, index) in data"
         :key="index"
       >
-        <img v-lazy="`/data/Collections/${img}/${index + 1}.png`" alt="" />
+        <img v-lazy="`/data/Collections/${img}/${item.id}.png`" alt="" />
         <p  class="titP" v-html="item.h3"></p>
       </div>
     </div>

webM/src/views/Search/dataAll.js

@@ -942,30 +942,6 @@ export const dataAll = [
     path: "#/Layout/CollectionsDetail?id=13&k=Calligraphies",
   },
   {
-    id: 14,
-    url: 'Calligraphies',
-    path: "#/Layout/CollectionsDetail?id=14&k=Calligraphies",
-    cover: "/data/Collections/Calligraphies/14.png",
-    h3: 'A Scroll of Riverside in Late Autumn Imitating Wen Tong by Wang Hui (Qing Dynasty)',
-    p: 'Adopting the composition of scenery of both sides of the same river, this painting depicts a miniaturized view of the riverside in the late autumn. ',
-  },
-  {
-    id: 15,
-    url: 'Calligraphies',
-    path: "#/Layout/CollectionsDetail?id=15&k=Calligraphies",
-    cover: "/data/Collections/Calligraphies/15.png",
-    h3: 'Bamboo and Stone on Scroll by Yao Shou (Ming Dynasty)',
-    p: 'This painting of bamboo and rocks is beautifully stylized with ink brush strokes. A simple composition incorporates poetry, calligraphy, and painting, making it extremely literati-like. ',
-  },
-  {
-    id: 16,
-    url: 'Calligraphies',
-    path: "#/Layout/CollectionsDetail?id=16&k=Calligraphies",
-    cover: "/data/Collections/Calligraphies/16.png",
-    h3: 'A Fan Leaf of A Fisherman by Cui Zizhong (Ming Dynasty)',
-    p: 'Cui Zizhong (1594-1644) was a painter of Ming Dynasty, a local Beihai (now Laiyang city, Shandong Province). ',
-  },
-  {
     id: 17,
     url: 'Calligraphies',
     path: "#/Layout/CollectionsDetail?id=17&k=Calligraphies",
@@ -974,46 +950,6 @@ export const dataAll = [
     p: 'Xie Bin (1601-1681) a native of Shangyu (now in Zhejiang Province). After, he migrates to Qiantang (now Hangzhou City) with his father. ',
   },
   {
-    id: 18,
-    url: 'Calligraphies',
-    path: "#/Layout/CollectionsDetail?id=18&k=Calligraphies",
-    cover: "/data/Collections/Calligraphies/18.png",
-    h3: 'Ink Plum Blossom Painting on Scroll by Hu Zongyun (Ming Dynasty)',
-    p: 'Hu Zongyun was a native of Yuzhang village in Yongjia and a decedent of Hu Xiang. He was good at painting and calligraphy.',
-  },
-  {
-    id: 19,
-    url: 'Calligraphies',
-    path: "#/Layout/CollectionsDetail?id=19&k=Calligraphies",
-    cover: "/data/Collections/Calligraphies/19.png",
-    h3: 'Scroll of Landscape Imitating Ni Zan’s Work by Shen Zhou (Ming Dynasty)',
-    p: 'Shen uses the classic and simple composition called “scenery of both sides of the same river” with a calligraphic style. As the scroll unfolds, nearshore and distant mountains are presented. ',
-  },
-  {
-    id: 20,
-    url: 'Calligraphies',
-    path: "#/Layout/CollectionsDetail?id=20&k=Calligraphies",
-    cover: "/data/Collections/Calligraphies/20.png",
-    h3: 'Album of Landscape by Yun Shouping (Qing Dynasty)',
-    p: 'This 12-leaf album contains (in order of content) the following works: Waterside Pavilion Surrounded by Lotus in Imitation of Zhao Danian, Autumn Water with waterfowl in Imitation of Zhang Sengyao.',
-  },
-  {
-    id: 21,
-    url: 'Calligraphies',
-    path: "#/Layout/CollectionsDetail?id=21&k=Calligraphies",
-    cover: "/data/Collections/Calligraphies/21.png",
-    h3: 'Scroll of Autumn Waves in Wuxia Gorge by Yuan Yao (Qing Dynasty)',
-    p: 'This painting depicts the scenery of the Wuxia with Gongbi(careful realist technique) ink brushwork. The mountains are majestic and have supernatural craftsmanship. ',
-  },
-  {
-    id: 22,
-    url: 'Calligraphies',
-    path: "#/Layout/CollectionsDetail?id=22&k=Calligraphies",
-    cover: "/data/Collections/Calligraphies/22.png",
-    h3: 'Plum Blossom on Scroll by Wang Shishen (Qing Dynasty)',
-    p: 'This painting depicts the white plum, with the stem of the plum tree depicted in light ink. Thick ink was used to draw moss dots horizontally, which added a unique charm. ',
-  },
-  {
     id: 23,
     url: 'Calligraphies',
     path: "#/Layout/CollectionsDetail?id=23&k=Calligraphies",
@@ -1190,14 +1126,6 @@ export const dataAll = [
     p: 'The scroll is titled with Zheng Yi’s (Director of the Board of Rites in the Ming Dynasty) writing “Rucijiangshan Pavilion” in seal script.',
   },
   {
-    id: 45,
-    url: 'Calligraphies',
-    path: "#/Layout/CollectionsDetail?id=45&k=Calligraphies",
-    cover: "/data/Collections/Calligraphies/45.png",
-    h3: 'Fan Leaf of a Gibbon by Wang Yimin (Song Dynasty)',
-    p: 'Wang Yimin, whose life history is unknown, was born in the Northern Song Dynasty. He was a monk at first and was a native of Yongkang (now the east area of Gouxian County, Sichuan Province). ',
-  },
-  {
     id: 46,
     url: 'Calligraphies',
     path: "#/Layout/CollectionsDetail?id=46&k=Calligraphies",
@@ -1214,14 +1142,6 @@ export const dataAll = [
     p: 'This scroll is named The Mahayana Sutra-The Lotus of The True Law, Volume 5 written in small regular script, with a total of 521 lines and 22 characters in a full line',
   },
   {
-    id: 48,
-    url: 'Calligraphies',
-    path: "#/Layout/CollectionsDetail?id=48&k=Calligraphies",
-    cover: "/data/Collections/Calligraphies/48.png",
-    h3: 'Scroll of Landscape with Banana Tree by Qi Baishi (Republic of China Period)',
-    p: 'Qi Baishi (1864-1957) was a native from Xiangtan, Hunan Province. He excelled in painting flowers, birds, insects and fish, as well as landscapes and figures with his unique styles.',
-  },
-  {
     id: 1,
     url: "Paintings",
     cover: "/data/Collections/Paintings/1.png",
@@ -1334,6 +1254,86 @@ export const dataAll = [
     path: "#/Layout/CollectionsDetail?id=14&k=Paintings",
   },
   {
+    id: 15,
+    url: 'Paintings',
+    path: "#/Layout/CollectionsDetail?id=15&k=Paintings",
+    cover: "/data/Collections/Paintings/15.png",
+    h3: 'A Scroll of Riverside in Late Autumn Imitating Wen Tong by Wang Hui (Qing Dynasty)',
+    p: 'Adopting the composition of scenery of both sides of the same river, this painting depicts a miniaturized view of the riverside in the late autumn. ',
+  },
+  {
+    id: 16,
+    url: 'Paintings',
+    path: "#/Layout/CollectionsDetail?id=16&k=Paintings",
+    cover: "/data/Collections/Paintings/16.png",
+    h3: 'Bamboo and Stone on Scroll by Yao Shou (Ming Dynasty)',
+    p: 'This painting of bamboo and rocks is beautifully stylized with ink brush strokes. A simple composition incorporates poetry, calligraphy, and painting, making it extremely literati-like. ',
+  },
+  {
+    id: 17,
+    url: 'Paintings',
+    path: "#/Layout/CollectionsDetail?id=17&k=Paintings",
+    cover: "/data/Collections/Paintings/17.png",
+    h3: 'A Fan Leaf of A Fisherman by Cui Zizhong (Ming Dynasty)',
+    p: 'Cui Zizhong (1594-1644) was a painter of Ming Dynasty, a local Beihai (now Laiyang city, Shandong Province). ',
+  },
+  {
+    id: 18,
+    url: 'Paintings',
+    path: "#/Layout/CollectionsDetail?id=18&k=Paintings",
+    cover: "/data/Collections/Paintings/18.png",
+    h3: 'Ink Plum Blossom Painting on Scroll by Hu Zongyun (Ming Dynasty)',
+    p: 'Hu Zongyun was a native of Yuzhang village in Yongjia and a decedent of Hu Xiang. He was good at painting and calligraphy.',
+  },
+  {
+    id: 19,
+    url: 'Paintings',
+    path: "#/Layout/CollectionsDetail?id=19&k=Paintings",
+    cover: "/data/Collections/Paintings/19.png",
+    h3: 'Scroll of Landscape Imitating Ni Zan’s Work by Shen Zhou (Ming Dynasty)',
+    p: 'Shen uses the classic and simple composition called “scenery of both sides of the same river” with a calligraphic style. As the scroll unfolds, nearshore and distant mountains are presented. ',
+  },
+  {
+    id: 20,
+    url: 'Paintings',
+    path: "#/Layout/CollectionsDetail?id=20&k=Paintings",
+    cover: "/data/Collections/Paintings/20.png",
+    h3: 'Album of Landscape by Yun Shouping (Qing Dynasty)',
+    p: 'This 12-leaf album contains (in order of content) the following works: Waterside Pavilion Surrounded by Lotus in Imitation of Zhao Danian, Autumn Water with waterfowl in Imitation of Zhang Sengyao.',
+  },
+  {
+    id: 21,
+    url: 'Paintings',
+    path: "#/Layout/CollectionsDetail?id=21&k=Paintings",
+    cover: "/data/Collections/Paintings/21.png",
+    h3: 'Scroll of Autumn Waves in Wuxia Gorge by Yuan Yao (Qing Dynasty)',
+    p: 'This painting depicts the scenery of the Wuxia with Gongbi(careful realist technique) ink brushwork. The mountains are majestic and have supernatural craftsmanship. ',
+  },
+  {
+    id: 22,
+    url: 'Paintings',
+    path: "#/Layout/CollectionsDetail?id=22&k=Paintings",
+    cover: "/data/Collections/Paintings/22.png",
+    h3: 'Plum Blossom on Scroll by Wang Shishen (Qing Dynasty)',
+    p: 'This painting depicts the white plum, with the stem of the plum tree depicted in light ink. Thick ink was used to draw moss dots horizontally, which added a unique charm. ',
+  },
+  {
+    id: 45,
+    url: 'Paintings',
+    path: "#/Layout/CollectionsDetail?id=45&k=Paintings",
+    cover: "/data/Collections/Paintings/45.png",
+    h3: 'Fan Leaf of a Gibbon by Wang Yimin (Song Dynasty)',
+    p: 'Wang Yimin, whose life history is unknown, was born in the Northern Song Dynasty. He was a monk at first and was a native of Yongkang (now the east area of Gouxian County, Sichuan Province). ',
+  },
+  {
+    id: 48,
+    url: 'Paintings',
+    path: "#/Layout/CollectionsDetail?id=48&k=Paintings",
+    cover: "/data/Collections/Paintings/48.png",
+    h3: 'Scroll of Landscape with Banana Tree by Qi Baishi (Republic of China Period)',
+    p: 'Qi Baishi (1864-1957) was a native from Xiangtan, Hunan Province. He excelled in painting flowers, birds, insects and fish, as well as landscapes and figures with his unique styles.',
+  },
+  {
     id: 1,
     url: "Gold",
     cover: "/data/Collections/Gold/1.png",