feat：竹禽图和桃竹图的查看大图功能改实现方案以提升ui友好度

src/views/PaintingDetailForTaoZhu.vue

@@ -66,20 +66,20 @@
       </p>
     </div>
 
-    <button
+    <div
       class="view-img"
       :style="{
         opacity: isAnimating ? AnimationProgress.value / 100 : 1,
       }"
-      @click="showBigPainting"
     >
-      <img
-        class=""
-        src="@/assets/images/painting-box-img/big-view.png"
-        alt=""
-        draggable="false"
-      >
-    </button>
+      <el-image
+        :src="require('@/assets/images/painting-box-img/big-view.png')"
+        :max-scale="7"
+        :min-scale="0.2"
+        :preview-src-list="[imgUrl]"
+        fit="cover"
+      />
+    </div>
 
     <BtnBack
       @click="router.go(-1)"
@@ -148,6 +148,32 @@ function showBigPainting() {
 </script>
 
 <style lang="less" scoped>
+::v-deep(.el-image-viewer__actions__inner .el-icon:last-child),
+::v-deep(.el-image-viewer__actions__inner .el-icon:nth-last-child(2)){
+  display: none;
+}
+::v-deep(.el-image-viewer__actions__inner){
+  // display: none;
+  justify-content: center;
+}
+::v-deep(.el-image-viewer__actions){
+  // display: none;
+  // justify-content: center;
+  width: calc(252px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+  height: calc(44px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+}
+::v-deep(.el-image-viewer__btn .el-icon){
+  margin: auto 10px;
+  width: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+  height: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+}
+
+::v-deep(.el-image-viewer__close){
+  margin: auto 10px;
+  width: calc(44px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+  height: calc(44px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+}
+
 .painting-detail-for-shuang-gou{
   position: absolute;
   left: 0;
@@ -231,16 +257,12 @@ function showBigPainting() {
       margin-left: calc(12px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     }
   }
-  >button.view-img{
+  >.view-img{
     position: absolute;
     left: calc(35px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     bottom: calc(55px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     width: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     height: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
-    >img{
-      width: 100%;
-      height: 100%;
-    }
   }
 }
 </style>

src/views/PaintingDetailForZhuQin.vue

@@ -67,20 +67,20 @@
       </p>
     </div>
 
-    <button
+    <div
       class="view-img"
       :style="{
         opacity: isAnimating ? AnimationProgress.value / 100 : 1,
       }"
-      @click="showBigPainting"
     >
-      <img
-        class=""
-        src="@/assets/images/painting-box-img/big-view.png"
-        alt=""
-        draggable="false"
-      >
-    </button>
+      <el-image
+        :src="require('@/assets/images/painting-box-img/big-view.png')"
+        :max-scale="7"
+        :min-scale="0.2"
+        :preview-src-list="[imgUrl]"
+        fit="cover"
+      />
+    </div>
 
     <BtnBack
       @click="router.go(-1)"
@@ -140,15 +140,35 @@ onUnmounted(() => {
 const imgUrlSmall = `${$env.BASE_URL}configMultiMedia/paintings/竹禽图卷.jpg`
 const imgUrl = `${$env.BASE_URL}configMultiMedia/paintings-big/竹禽图卷.jpg`
 
-function showBigPainting() {
-  viewerApi({
-    images: [imgUrl],
-  })
-}
-
 </script>
 
 <style lang="less" scoped>
+::v-deep(.el-image-viewer__actions__inner .el-icon:last-child),
+::v-deep(.el-image-viewer__actions__inner .el-icon:nth-last-child(2)){
+  display: none;
+}
+::v-deep(.el-image-viewer__actions__inner){
+  // display: none;
+  justify-content: center;
+}
+::v-deep(.el-image-viewer__actions){
+  // display: none;
+  // justify-content: center;
+  width: calc(252px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+  height: calc(44px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+}
+::v-deep(.el-image-viewer__btn .el-icon){
+  margin: auto 10px;
+  width: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+  height: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+}
+
+::v-deep(.el-image-viewer__close){
+  margin: auto 10px;
+  width: calc(44px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+  height: calc(44px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+}
+
 .painting-detail-for-zhu-qin{
   position: absolute;
   left: 0;
@@ -238,16 +258,12 @@ function showBigPainting() {
       }
     }
   }
-  >button.view-img{
+  >.view-img{
     position: absolute;
     left: calc(35px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     bottom: calc(55px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     width: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     height: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
-    >img{
-      width: 100%;
-      height: 100%;
-    }
   }
 }
 </style>