我的证书

src/project/qujing/AppMine/myCertificate.vue

@@ -1,7 +1,15 @@
 <template>
   <div class="page">
     <div class="list" v-if="files.length">
-      <img v-for="(item, index) in files" :key="index" :src="item.imageUrl" alt="" @click="previewImage(index)">
+      <div class="item" v-for="(item, index) in files" :key="index">
+        <div class="top">
+          <img :src="item.imageUrl" alt="" @click="previewImage(index)">
+        </div>
+        <div class="bottom">
+          <h3>{{item.certificateName}}</h3>
+          <p>获取时间：{{item.createTime.substring(0, 10)}}</p>
+        </div>
+      </div>
     </div>
     <AiEmpty :description="`暂无数据`" class="emptyWrap" v-else/>
   </div>
@@ -62,14 +70,40 @@ export default {
   background-color: #F4F5FA;
   .list {
     padding: 50px 0 0 32px;
-    img {
+    .item {
       width: calc(100%/2 - 13px);
-      height: 462px;
       margin: 0 26px 24px 0;
+      box-sizing: border-box;
+      background-color: #fff;
+      .top {
+        padding: 24px;
+        border-bottom: 1px solid #eee;
       }
-    img:nth-of-type(2n) {
+      .bottom {
+        padding: 24px;
+      }
+      img {
+        width: 100%;
+        height: 308px;
+      }
+      h3 {
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        font-size: 32px;
+        color: #333;
+        word-break: break-all;
+        margin-bottom: 8px;
+      }
+      p {
+        font-family: PingFangSC-Regular;
+        font-size: 24px;
+        color: #999;
+      }
+    }
+    .item:nth-of-type(2n) {
       margin-right: 0;
     }
+    
   }
 }
 </style>