完善tab1查看图片没有封面显示

houtai/src/views/tab1/tab1Add2.vue

@@ -318,6 +318,7 @@ export default {
           right: 5px;
         }
         .cover{
+          pointer-events: none;
           font-size: 16px;
           display: flex;
           justify-content: center;

houtai/src/views/tab1/tab1Look.vue

@@ -4,9 +4,7 @@
     <div class="insideTop">
       文物典藏管理 > 查看文物典藏
       <div class="add">
-        <el-button type="primary" @click="goBack"
-          >返 回</el-button
-        >
+        <el-button type="primary" @click="goBack">返 回</el-button>
       </div>
     </div>
     <div class="obstruct"></div>
@@ -15,7 +13,7 @@
       <div class="con_top">基本信息</div>
       <div class="row">
         <div>标题：</div>
-        <span>{{myObj.name}}</span>
+        <span>{{ myObj.name }}</span>
       </div>
       <div class="row">
         <div>精品类型：</div>
@@ -23,19 +21,28 @@
       </div>
       <div class="row">
         <div>显示设置：</div>
-        <el-switch disabled v-model="myObj.display" active-color="#b9412e" :active-value='1' :inactive-value='0'> </el-switch>
+        <el-switch
+          disabled
+          v-model="myObj.display"
+          active-color="#b9412e"
+          :active-value="1"
+          :inactive-value="0"
+        >
+        </el-switch>
       </div>
       <div class="row">
         <div>图片：</div>
         <div class="imgList">
-        <el-image
-          v-for="(item,index) in srcList2"
-          :key="index"
-          style="width: 200px; height: 200px"
-          :src="item"
-          :preview-src-list="srcList2"
-        >
-        </el-image>
+          <div class="imgParcel" v-for="(item, index) in srcList2" :key="index">
+            <el-image
+              style="width: 200px; height: 200px"
+              :src="item"
+              :preview-src-list="srcList2"
+            >
+            </el-image>
+            <!-- 封面显示 -->
+            <div class="cover" v-if="imgActive === index">封面图片</div>
+          </div>
         </div>
       </div>
     </div>
@@ -44,16 +51,16 @@
       <div class="con_top">基本信息</div>
       <div class="row">
         <div>标题：</div>
-        <span>{{myObj.name}}</span>
+        <span>{{ myObj.name }}</span>
       </div>
       <div class="row">
         <div>精品类型：</div>
-        <span>{{myObj.type==='model'?'实物模型':'视频档案'}}</span>
+        <span>{{ myObj.type === "model" ? "实物模型" : "视频档案" }}</span>
       </div>
       <div class="row">
         <div>{{ conLeftId === "model" ? "实物图片" : "封面图片" }}：</div>
         <el-image
-          v-if="srcList.length!==0"
+          v-if="srcList.length !== 0"
           style="width: 200px; height: 200px"
           :src="srcList[0]"
           :preview-src-list="srcList"
@@ -62,11 +69,18 @@
       </div>
       <div class="row">
         <div>{{ conLeftId === "model" ? "模型文件" : "视频文件" }}：</div>
-        <a :href="baseURL+myObj.filePath" download>{{myObj.fileName}}</a>
+        <a :href="baseURL + myObj.filePath" download>{{ myObj.fileName }}</a>
       </div>
       <div class="row">
         <div>显示设置：</div>
-        <el-switch disabled v-model="myObj.display" active-color="#b9412e" :active-value='1' :inactive-value='0'> </el-switch>
+        <el-switch
+          disabled
+          v-model="myObj.display"
+          active-color="#b9412e"
+          :active-value="1"
+          :inactive-value="0"
+        >
+        </el-switch>
       </div>
     </div>
   </div>
@@ -81,6 +95,7 @@ export default {
   data () {
     // 这里存放数据
     return {
+      imgActive: null,
       myArr: [],
       // 服务器前缀地址
       baseURL: '',
@@ -117,8 +132,9 @@ export default {
       this.srcList = [this.baseURL + this.myObj.thumb]
       console.log(998, this.myObj)
       this.myArr = res.data.file
-      this.myArr.forEach(v => {
+      this.myArr.forEach((v, i) => {
         this.srcList2.push(this.baseURL + v.filePath)
+        if (v.isIndex === 1) this.imgActive = i
       })
     }
   },
@@ -154,15 +170,33 @@ export default {
         width: 120px;
         text-align: right;
       }
-    .imgList{
-      width: 1500px;
-      display: flex;
-      flex-wrap: wrap;
-      /deep/.el-image{
+      .imgList {
+        width: 1500px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+      .imgParcel {
+        position: relative;
+        width: 200px;
+        height: 200px;
         margin-right: 30px;
         margin-bottom: 30px;
       }
-    }
+      .cover {
+        pointer-events: none;
+        font-size: 16px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        z-index: 999;
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        height: 40px;
+        background-color: rgba(255, 255, 255, 0.4);
+      }
     }
   }
 }