图片支持marks

public/data/1.json

@@ -36,19 +36,23 @@
           "type": "matrix",
           "children": [
             {
-              "image": "https://img2.wmnetwork.cc/w/202110/03/0_20211003160107_IdLRhgwt.jpg",
+              "image": "https://ndzx.hqedust.com/file/image/matrix/1.jpg",
+              "marks": "精彩宁德</br>视频",
               "link": "1"
             },
             {
-              "image": "https://img2.wmnetwork.cc/w/202110/03/0_20211003160107_PKQUMRWy.jpg",
+              "image": "https://ndzx.hqedust.com/file/image/matrix/2.jpg",
+              "marks": "宁德风貌</br>图片",
               "link": "2"
             },
             {
-              "image": "http://img2.wmnetwork.cc/w/202110/20/0_20211020131911_71IyBZga.jpg",
+              "image": "https://ndzx.hqedust.com/file/image/matrix/3.jpg",
+              "marks": "考察点</br>简介",
               "link": "3"
             },
             {
-              "image": "http://img2.wmnetwork.cc/w/202110/26/0_20211026155958_0t2qHQCk.png",
+              "image": "https://ndzx.hqedust.com/file/image/matrix/4.jpg",
+              "marks": "人员名单</br>行程安排",
               "link": "4"
             }
           ]

src/components/image.vue

@@ -1,5 +1,10 @@
 <template>
-  <img v-if="!options.desc" class="image mb-6 last:mb-0 mx-auto" :style="options.style" :src="options.image" @click="click" />
+  <div v-if="!options.desc" @click="click" class="image mb-6 last:mb-0 mx-auto">
+    <img :style="options.style" :src="options.image" />
+    <div class="image-marks" v-if="options.marks">
+      <span style="margin: 0 auto" v-html="options.marks"></span>
+    </div>
+  </div>
   <div v-else class="image mb-6 last:mb-0 mx-auto">
     <img class="mb-1" :style="options.style" :src="options.image" @click="handleClick" />
     <v-text :options="descOptions"></v-text>
@@ -34,4 +39,19 @@ export default {
 }
 </script>
 <style lang="less">
+.image-marks {
+  opacity: 1;
+  filter: alpha(opacity=100);
+  width: 60%;
+  text-align: center;
+  height: 100%;
+  color: #fff;
+  font-family: 'Times New Roman', Times, serif;
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: 2px;
+  position: absolute;
+  top: 35px;
+  left: 20%;
+}
 </style>