文物鉴赏列表项 图片与标题

src/components/RelicItem.vue

@@ -17,6 +17,18 @@
         class="node-point-bottom"
       />
     </div>
+    <div
+      v-if="relicImage && relicTitle"
+      class="relic-info"
+    >
+      <img
+        class="relic-image"
+        :src="relicImage"
+        alt=""
+        draggable="false"
+      >
+      <span class="relic-title">{{ relicTitle }}</span>
+    </div>
   </div>
 </template>
 
@@ -35,6 +47,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    relicImage: {
+      type: String,
+      default: ''
+    },
+    relicTitle: {
+      type: String,
+      default: ''
+    },
   },
 }
 </script>
@@ -74,6 +94,26 @@ export default {
       background-color: #BC945B;
     }
   }
+  .relic-info {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-120%, 61.8%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .relic-image {
+      width: 11.88rem;
+    }
+    .relic-title {
+      margin-top: 1.76rem;
+      display: block;
+      line-height: 1.76rem;
+      color: #666666;
+      font-size: 1.5rem;
+      max-width: 18rem;
+    }
+  }
 }
 
 .needFlip {
@@ -82,5 +122,10 @@ export default {
     .curvy-line {
     }
   }
+  .relic-info {
+    left: initial;
+    right: 50%;
+    transform: translate(120%, 61.8%);
+  }
 }
 </style>

src/views/RelicsAppr.vue

@@ -94,6 +94,8 @@
         :is-odd="!!(index % 2)"
         :is-first="index === 1"
         :is-last="index === 10"
+        :relic-image="require('@/assets/images/button-to-panos.png')"
+        :relic-title="'我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题'"
         class="relic-item"
       />
     </div>
@@ -167,9 +169,9 @@ export default {
       gap: 0.83rem;
       > button {
         height: 100%;
-        width: 9.58rem;
         border-radius: 2.08rem;
         border: 0.08rem solid #930909;
+        padding: 0 1.46rem;
         background-color: #fff;
         color: #666666;
         &.choosen {