图片展示

src/components/ImageView.vue

@@ -5,25 +5,39 @@
     @mouseover="(ev) => mouseoverImg(ev, src)"
     @mouseleave="mouseleaveImg"
   >
-    <img :src="src" style="width: 30; height: 30px" />
+    <img :src="src" :style="imageStyle" />
   </div>
 </template>
 <script setup lang="ts">
 import useImagePreview from '@/utils/hooks/useImagePreview.'
-defineProps({
+import { computed, defineProps } from 'vue'
+const props = defineProps({
   src: {
     type: String,
     default: () => '',
   },
+  width: {
+    type: String,
+    default: () => '30px',
+  },
+  height: {
+    type: String,
+    default: () => '30px',
+  },
+})
+const imageStyle = computed(() => {
+  return {
+    width: props.width,
+    height: props.height,
+  }
 })
-
 const { mouseoverImg, mouseleaveImg } = useImagePreview()
 </script>
 <style lang="scss" scoped>
-.image-view { 
+.image-view {
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer
+  cursor: pointer;
 }
- </style>
+</style>

src/views/order/ProductInfo.vue

@@ -8,7 +8,8 @@
     class="order-list-expand_item"
   >
     <div class="order-list-expand_item_img">
-      <img :src="item.variantImage" style="width: 100%; height: 100%" />
+      <!-- <img :src="item.variantImage" style="width: 100%; height: 100%" /> -->
+      <ImageView :src="item.variantImage" width="98px" height="98px" />
     </div>
     <div class="order-list-expand_item_info">
       <div
@@ -124,7 +125,6 @@
         v-if="!isPod"
         :title="item.material || ''"
         class="order-list-expand_item_info_title"
-        
       >
         <span class="order-list-expand_item_label">材质:</span>
         <span class="order-list-expand_item_value"
@@ -214,6 +214,7 @@
   </div>
 </template>
 <script setup lang="ts">
+import ImageView from '@/components/ImageView.vue'
 import { DocumentCopy, EditPen } from '@element-plus/icons-vue'
 import { filePath } from '@/api/axios'
 import { downloadOrder } from '@/api/order'