From 2f20aeb5d11fb84ce9d2afdf5a117ef4fb50ae25 Mon Sep 17 00:00:00 2001
From: zhangjing1 <zhangjing@shopex.cn>
Date: Mon, 23 Mar 2026 10:23:24 +0800
Subject: [PATCH] fix(decorate): cap slider dialog preview height with
 viewport-based max-height

- Remove fixed inline preview height/background on image and video panels
- Apply max-height calc(72vh - 60px) to preview area and .hz-u-img (object-fit: cover)
- Improves layout on smaller viewports and tall images

Made-with: Cursor
---
 src/view/decorate/wgts/wgt_slider/sliderDialog.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/view/decorate/wgts/wgt_slider/sliderDialog.vue b/src/view/decorate/wgts/wgt_slider/sliderDialog.vue
index ce1f2e4..abab4d2 100644
--- a/src/view/decorate/wgts/wgt_slider/sliderDialog.vue
+++ b/src/view/decorate/wgts/wgt_slider/sliderDialog.vue
@@ -8,7 +8,6 @@
     <div
       class="wgts-slider-dialog-left"
       v-if="sliderForm.media_type === 'img'"
-      :style="`height:${h}px;background:#f5f5f7`"
     >
       <SpImage
         v-if="!sliderForm.imgUrl"
@@ -39,7 +38,7 @@
       />
     </div>
 
-    <div class="wgts-slider-dialog-left" v-else :style="`height:${h}px;background:#f5f5f7`">
+    <div class="wgts-slider-dialog-left" v-else>
       <SpImage v-if="!videoUrlStr" class="sp-image" fit="scale-down" />
       <video-player
         v-if="videoUrlStr"
@@ -470,6 +469,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
+    max-height: calc(72vh - 60px)!important;
 
     .overlay {
       position: absolute;
@@ -573,3 +573,11 @@ export default {
   }
 }
 </style>
+<style lang="scss">
+.wgts-slider-dialog {
+  .hz-u-img {
+    object-fit: cover;
+    max-height: calc(72vh - 60px) !important;
+  }
+}
+</style>