mod:拍摄商品 查看大图

frontend/src/views/Photography/shot.vue

@@ -100,20 +100,28 @@
                                :is="src ? 'div' : 'p'"
                     >
                       <el-popover
-                          placement="top-start"
+                          popper-class="shot-image-popper"
+                          placement="left"
                           v-if="src"
                       >
                         <template #reference>
-                          <el-image  :src="src"  fit="fill" >
+                          <el-image  :src="src"  fit="contain" >
                             <template #error>
                               <div class="image-slot"></div>
                             </template>
                           </el-image>
                         </template>
+
+
+                        <el-image  :src="src"  fit="contain" >
+                          <template #error>
+                            <div class="image-slot"></div>
+                          </template>
+                        </el-image>
                       </el-popover>
 
 
-                      <el-image  :src="src"  fit="fill" v-else>
+                      <el-image  :src="src"  fit="contain" v-else>
                         <template #error>
                           <div class="image-slot"></div>
                         </template>
@@ -237,6 +245,29 @@ async function runGoods(data) {
 }
 </script>
 
+<style  lang="scss">
+.shot-image-popper {
+  width: calc(100vw - 370px) !important;
+  left: 20px !important;
+  top: 50px !important;
+  height: calc(100vh - 70px) !important;
+  transform: translate(0px, 0px) !important;
+
+  .el-image {
+    width: 100%;
+    height:100%;
+    display: block;
+
+    .el-image__inner {
+      width: 100%;
+      height:100%;
+      display: block;
+
+    }
+  }
+}
+
+</style>
 <style scoped lang="scss">
 .photography-page {
   background-color: rgba(255, 255, 255, 1);