增加放大功能

src/components/PaintingDetailBox.vue

@@ -97,10 +97,17 @@ onMounted(() => {
         class="addIcon"
         @click="lookBigImg"
       >
-        <img
+        <el-image
+          :src="require('@/assets/images/painting-box-img/big-view.png')"
+          :max-scale="7"
+          :min-scale="0.2"
+          :preview-src-list="[props.url]"
+          fit="cover"
+        />
+        <!-- <img
           src="@/assets/images/painting-box-img/big-view.png"
           alt=""
-        >
+        > -->
       </div>
 
       <!--  ---------竖------- 大盒子 -->
@@ -200,6 +207,19 @@ onMounted(() => {
 </template>
 
 <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__btn .el-icon){
+  margin: auto 10px;
+}
+::deep(.el-image-viewer__actions){
+  width: 200px;
+}
+::deep(.el-image-viewer__actions__inner){
+  justify-content: center;
+}
 .box {
   width: 100vw;
   height: 100vh;