@nutui/nutui-react 3.0.4 → 3.0.6

package/dist/es/packages/fixednav/style/fixednav.scss

@@ -3,7 +3,6 @@
   z-index: $fixednav-index;
   display: inline-block;
   height: 50px;
-  right: 0;
 
   &.active {
     .nut-fixednav-btn {
@@ -16,9 +15,9 @@
       transform: translateX(0%) !important;
     }
 
-    &.left {
+    &.nut-fixednav-left {
       .nut-icon {
-        transform: rotate(0deg) !important;
+        transform: rotate(0deg);
       }
     }
   }
@@ -26,13 +25,10 @@
   &-btn {
     box-sizing: border-box;
     position: absolute;
-    right: 0;
-
     z-index: $fixednav-index;
     width: 70px;
     height: 100%;
     background: $fixednav-button-background;
-    border-radius: 45px 0px 0px 45px;
     box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
     display: flex;
     align-items: center;
@@ -47,33 +43,21 @@
     }
 
     .nut-icon {
-      margin-right: 5px;
-      transition: all 0.3s;
-      transform: rotate(0deg);
       transition: all 0.3s;
     }
   }
 
   &-list {
     position: absolute;
-    right: 0;
-    transform: translateX(100%);
     transition: all 0.5s;
-
     z-index: $fixednav-index;
     flex-shrink: 0;
     height: 100%;
     background: $fixednav-background-color;
     display: flex;
     justify-content: space-between;
-    border-radius: 25px 0px 0px 25px;
     box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
 
-    padding: {
-      left: 20px;
-      right: 80px;
-    }
-
     &-item {
       position: relative;
       flex: 1;
@@ -86,57 +70,77 @@
       flex-shrink: 0;
       color: $fixednav-color;
 
-      img {
-        width: 20px;
-        height: 20px;
-        margin-bottom: 2px;
-      }
-
       .nut-fixednav-list-text {
         font-size: 10px;
       }
     }
+
+    &-image {
+      width: 20px;
+      height: 20px;
+      margin-bottom: 2px;
+    }
   }
 
-  &.left {
-    right: auto;
-    left: 0;
+  &-right {
+    right: 0;
+    .nut-fixednav-btn {
+      right: 0;
+      border-radius: 45px 0px 0px 45px;
+      .nut-icon {
+        margin-right: 5px;
+        transform: rotate(0deg);
+      }
+    }
+    .nut-fixednav-list {
+      right: 0;
+      transform: translateX(100%);
+      border-radius: 25px 0px 0px 25px;
+      padding: {
+        left: 20px;
+        right: 80px;
+      }
+    }
+  }
 
+  &-left {
+    left: 0;
     .nut-fixednav-btn {
       flex-direction: row-reverse;
-      right: auto;
       left: 0;
       border-radius: 0 45px 45px 0;
-
       .nut-icon {
-        transform: rotate(180deg);
-        margin-right: 0px;
         margin-left: 5px;
+        transform: rotate(180deg);
       }
     }
 
     .nut-fixednav-list {
       transform: translateX(-100%);
-      right: auto;
+      left: 0;
       border-radius: 0px 25px 25px 0px;
-
       padding: {
         left: 80px;
         right: 20px;
       }
-
-      margin: 0;
     }
   }
 }
 
 [dir='rtl'] .nut-fixednav,
 .nut-rtl .nut-fixednav {
-  right: auto;
-  left: 0;
+  &-right {
+    right: auto;
+    left: 0;
+  }
   &.active {
     .nut-icon {
-      transform: rotate(-180deg);
+      transform: rotate(0deg);
+    }
+    &.nut-fixednav-left {
+      .nut-icon {
+        transform: rotate(-180deg);
+      }
     }
   }
 
@@ -171,7 +175,7 @@
     }
   }
 
-  &.left {
+  &-left {
     left: auto;
     right: 0;
 

package/dist/es/packages/fixednav/style/style.css

@@ -60,6 +60,8 @@
 .nut-badge {
   position: relative;
   display: inline-flex;
+  vertical-align: middle;
+  box-sizing: content-box;
   width: auto;
 }
 .nut-badge-icon {
@@ -92,13 +94,12 @@
 }
 .nut-badge-sup {
   display: inline-flex;
-  justify-content: center;
-  height: var(--nutui-badge-height, 14px);
+  text-align: center;
   min-width: var(--nutui-badge-min-width, 6px);
   padding: var(--nutui-badge-padding, 1px 4px);
   box-sizing: border-box;
   color: var(--nutui-badge-color, #ffffff);
-  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
+  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxxs, 9px));
   line-height: 12px;
   white-space: nowrap;
   font-weight: normal;
@@ -106,14 +107,11 @@
   background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
   z-index: 1;
 }
+.nut-badge-disabled {
+  background: var(--nutui-badge-background-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+}
 .nut-badge-number {
   font-family: "JD";
-  /* #ifdef harmony */
-  line-height: 12px;
-  /* #endif */
-  /* #ifndef harmony */
-  line-height: 13px;
-  /* #endif */
 }
 .nut-badge-one {
   height: var(--nutui-badge-height, 14px);
@@ -137,14 +135,14 @@
   height: var(--nutui-badge-dot-width, 6px);
 }
 .nut-badge-dot-small {
-  min-width: var(--nutui-badge-dot-width, 4px);
-  width: var(--nutui-badge-dot-width, 4px);
-  height: var(--nutui-badge-dot-width, 4px);
+  min-width: var(--nutui-badge-dot-small-width, 4px);
+  width: var(--nutui-badge-dot-small-width, 4px);
+  height: var(--nutui-badge-dot-small-width, 4px);
 }
 .nut-badge-dot-large {
-  min-width: var(--nutui-badge-dot-width, 8px);
-  width: var(--nutui-badge-dot-width, 8px);
-  height: var(--nutui-badge-dot-width, 8px);
+  min-width: var(--nutui-badge-dot-large-width, 8px);
+  width: var(--nutui-badge-dot-large-width, 8px);
+  height: var(--nutui-badge-dot-large-width, 8px);
 }
 .nut-badge-outline {
   background: #ffffff;
@@ -159,7 +157,6 @@
   z-index: var(--nutui-fixednav-index, 900);
   display: inline-block;
   height: 50px;
-  right: 0;
 }
 .nut-fixednav.active .nut-fixednav-btn .nut-icon {
   transform: rotate(180deg);
@@ -167,18 +164,16 @@
 .nut-fixednav.active .nut-fixednav-list {
   transform: translateX(0%) !important;
 }
-.nut-fixednav.active.left .nut-icon {
-  transform: rotate(0deg) !important;
+.nut-fixednav.active.nut-fixednav-left .nut-icon {
+  transform: rotate(0deg);
 }
 .nut-fixednav-btn {
   box-sizing: border-box;
   position: absolute;
-  right: 0;
   z-index: var(--nutui-fixednav-index, 900);
   width: 70px;
   height: 100%;
   background: var(--nutui-fixednav-button-background, var(--nutui-color-primary, #ff0f23));
-  border-radius: 45px 0px 0px 45px;
   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
   display: flex;
   align-items: center;
@@ -192,15 +187,10 @@
   flex-shrink: 0;
 }
 .nut-fixednav-btn .nut-icon {
-  margin-right: 5px;
-  transition: all 0.3s;
-  transform: rotate(0deg);
   transition: all 0.3s;
 }
 .nut-fixednav-list {
   position: absolute;
-  right: 0;
-  transform: translateX(100%);
   transition: all 0.5s;
   z-index: var(--nutui-fixednav-index, 900);
   flex-shrink: 0;
@@ -208,10 +198,7 @@
   background: var(--nutui-fixednav-background-color, #ffffff);
   display: flex;
   justify-content: space-between;
-  border-radius: 25px 0px 0px 25px;
   box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.2);
-  padding-left: 20px;
-  padding-right: 80px;
 }
 .nut-fixednav-list-item {
   position: relative;
@@ -225,45 +212,63 @@
   flex-shrink: 0;
   color: var(--nutui-fixednav-color, #1a1a1a);
 }
-.nut-fixednav-list-item img {
+.nut-fixednav-list-item .nut-fixednav-list-text {
+  font-size: 10px;
+}
+.nut-fixednav-list-image {
   width: 20px;
   height: 20px;
   margin-bottom: 2px;
 }
-.nut-fixednav-list-item .nut-fixednav-list-text {
-  font-size: 10px;
+.nut-fixednav-right {
+  right: 0;
 }
-.nut-fixednav.left {
-  right: auto;
+.nut-fixednav-right .nut-fixednav-btn {
+  right: 0;
+  border-radius: 45px 0px 0px 45px;
+}
+.nut-fixednav-right .nut-fixednav-btn .nut-icon {
+  margin-right: 5px;
+  transform: rotate(0deg);
+}
+.nut-fixednav-right .nut-fixednav-list {
+  right: 0;
+  transform: translateX(100%);
+  border-radius: 25px 0px 0px 25px;
+  padding-left: 20px;
+  padding-right: 80px;
+}
+.nut-fixednav-left {
   left: 0;
 }
-.nut-fixednav.left .nut-fixednav-btn {
+.nut-fixednav-left .nut-fixednav-btn {
   flex-direction: row-reverse;
-  right: auto;
   left: 0;
   border-radius: 0 45px 45px 0;
 }
-.nut-fixednav.left .nut-fixednav-btn .nut-icon {
-  transform: rotate(180deg);
-  margin-right: 0px;
+.nut-fixednav-left .nut-fixednav-btn .nut-icon {
   margin-left: 5px;
+  transform: rotate(180deg);
 }
-.nut-fixednav.left .nut-fixednav-list {
+.nut-fixednav-left .nut-fixednav-list {
   transform: translateX(-100%);
-  right: auto;
+  left: 0;
   border-radius: 0px 25px 25px 0px;
   padding-left: 80px;
   padding-right: 20px;
-  margin: 0;
 }
 
-[dir=rtl] .nut-fixednav,
-.nut-rtl .nut-fixednav {
+[dir=rtl] .nut-fixednav-right,
+.nut-rtl .nut-fixednav-right {
   right: auto;
   left: 0;
 }
 [dir=rtl] .nut-fixednav.active .nut-icon,
 .nut-rtl .nut-fixednav.active .nut-icon {
+  transform: rotate(0deg);
+}
+[dir=rtl] .nut-fixednav.active.nut-fixednav-left .nut-icon,
+.nut-rtl .nut-fixednav.active.nut-fixednav-left .nut-icon {
   transform: rotate(-180deg);
 }
 [dir=rtl] .nut-fixednav-btn,
@@ -293,25 +298,25 @@
   right: auto;
   left: 0;
 }
-[dir=rtl] .nut-fixednav.left,
-.nut-rtl .nut-fixednav.left {
+[dir=rtl] .nut-fixednav-left,
+.nut-rtl .nut-fixednav-left {
   left: auto;
   right: 0;
 }
-[dir=rtl] .nut-fixednav.left .nut-fixednav-btn,
-.nut-rtl .nut-fixednav.left .nut-fixednav-btn {
+[dir=rtl] .nut-fixednav-left .nut-fixednav-btn,
+.nut-rtl .nut-fixednav-left .nut-fixednav-btn {
   left: auto;
   right: 0;
   border-radius: 45px 0 0 45px;
 }
-[dir=rtl] .nut-fixednav.left .nut-fixednav-btn .nut-icon,
-.nut-rtl .nut-fixednav.left .nut-fixednav-btn .nut-icon {
+[dir=rtl] .nut-fixednav-left .nut-fixednav-btn .nut-icon,
+.nut-rtl .nut-fixednav-left .nut-fixednav-btn .nut-icon {
   transform: rotate(0deg);
   margin-right: 5px;
   margin-left: 0px;
 }
-[dir=rtl] .nut-fixednav.left .nut-fixednav-list,
-.nut-rtl .nut-fixednav.left .nut-fixednav-list {
+[dir=rtl] .nut-fixednav-left .nut-fixednav-list,
+.nut-rtl .nut-fixednav-left .nut-fixednav-list {
   transform: translateX(100%);
   right: auto;
   left: auto;

package/dist/es/packages/imagepreview/imagepreview.js

@@ -1,6 +1,7 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import React, { useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import { Close } from "@nutui/icons-react";
@@ -23,7 +24,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     indicatorColor: '#fff',
     closeIcon: false,
     closeIconPosition: 'top-right',
-    onChange: function(value) {},
+    onChange: function() {},
     onClose: function() {}
 });
 export var ImagePreview = function(props) {
@@ -34,81 +35,59 @@ export var ImagePreview = function(props) {
         value: value,
         defaultValue: defaultValue,
         finalValue: defaultValue,
-        onChange: function(val) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(val);
-        }
+        onChange: onChange
     }), 2), innerNo = _usePropsValue[0], setInnerNo = _usePropsValue[1];
     var _useState = _sliced_to_array(useState(visible), 2), showPop = _useState[0], setShowPop = _useState[1];
     var _useState1 = _sliced_to_array(useState(0), 2), active = _useState1[0], setActive = _useState1[1];
-    var _useState2 = _sliced_to_array(useState((images === null || images === void 0 ? void 0 : images.length) || 0 + ((videos === null || videos === void 0 ? void 0 : videos.length) || 0)), 2), maxNo = _useState2[0], setMaxNo = _useState2[1];
+    var _useState2 = _sliced_to_array(useState(images.length + videos.length), 2), maxNo = _useState2[0], setMaxNo = _useState2[1];
     var _useState3 = _sliced_to_array(useState({
         scale: 1,
-        moveable: false
+        moveable: false,
+        oriDistance: 0,
+        originScale: 1
     }), 2), store = _useState3[0], setStore = _useState3[1];
-    var _useState4 // 用来辅助监听双击
-     = _sliced_to_array(useState(0), 2), lastTouchEndTime = _useState4[0], setLastTouchEndTime = _useState4[1];
+    var lastTouchEndTime = useRef(0) // 用来辅助监听双击
+    ;
     var onTouchStart = function(event) {
         var touches = event.touches;
         var events = touches[0];
         var events2 = touches[1];
-        // 如果已经放大，双击应变回原尺寸；如果是原尺寸，双击应放大
-        var curTouchTime = new Date().getTime();
-        if (curTouchTime - lastTouchEndTime < 300) {
+        // 如果是原尺寸，双击放大；否则回到原尺寸。
+        var curTouchTime = Date.now();
+        if (curTouchTime - lastTouchEndTime.current < 100) {
             var store1 = store;
-            if (store1.scale > 1) {
-                store1.scale = 1;
-            } else if (store1.scale === 1) {
-                store1.scale = 2;
-            }
+            store1.scale = store1.scale === 1 ? 2 : 1;
             scaleNow();
         }
         var store11 = store;
         store11.moveable = true;
         if (events2) {
             // 如果开始两指操作，记录初始时刻两指间的距离
-            store11.oriDistance = getDistance({
-                x: events.pageX,
-                y: events.pageY
-            }, {
-                x: events2.pageX,
-                y: events2.pageY
-            });
+            store11.oriDistance = getDistance(events, events2);
         }
         // 取到开始两指操作时的放大（缩小比例），store.scale 存储的是当前的放缩比（相对于标准大小 scale 为 1 的情况的放大缩小比）
-        store11.originScale = store11.scale || 1;
+        store11.originScale = store11.scale;
     };
     var onTouchMove = function(event) {
+        if (!store.moveable) return;
         var touches = event.touches;
         var events = touches[0];
         var events2 = touches[1];
-        if (!store.moveable) {
-            return;
-        }
         var store1 = store;
         // 双指移动
         if (events2) {
-            // 获得当前两点间的距离
-            var curDistance = getDistance({
-                x: events.pageX,
-                y: events.pageY
-            }, {
-                x: events2.pageX,
-                y: events2.pageY
-            });
+            var curDistance = getDistance(events, events2);
             /** 此处计算倍数，距离放大（缩小） k 倍则 scale 也 扩大（缩小） k 倍。距离放大（缩小）倍数 = 结束时两点距离 除以 开始时两点距离
        * 注意此处的 scale 变化是基于 store.scale 的。
        * store.scale 是一个暂存值，比如第一次放大 2 倍，则 store.scale 为 2。
        * 再次两指触碰的时候，store.originScale 就为 store.scale 的值，基于此时的 store.scale 继续放大缩小。 * */ var curScale = curDistance / store1.oriDistance;
-            store1.scale = store1.originScale * curScale;
             // 最大放大 3 倍，缩小后松手要弹回原比例
-            if (store1.scale > 3) {
-                store1.scale = 3;
-            }
+            store1.scale = Math.min(store1.originScale * curScale, 3);
             scaleNow();
         }
     };
     var onTouchEnd = function() {
-        setLastTouchEndTime(new Date().getTime());
+        lastTouchEndTime.current = Date.now();
         var store1 = store;
         store1.moveable = false;
         if (store1.scale < 1.1 && store1.scale > 1 || store1.scale < 1) {
@@ -123,6 +102,11 @@ export var ImagePreview = function(props) {
         document.addEventListener('touchmove', onTouchMove);
         document.addEventListener('touchend', onTouchEnd);
         document.addEventListener('touchcancel', onTouchEnd);
+        return function() {
+            document.removeEventListener('touchcancel', onTouchEnd);
+            document.removeEventListener('touchmove', onTouchMove);
+            document.removeEventListener('touchend', onTouchEnd);
+        };
     };
     useEffect(function() {
         setShowPop(visible);
@@ -140,22 +124,19 @@ export var ImagePreview = function(props) {
         innerNo
     ]);
     useEffect(function() {
-        setMaxNo((images === null || images === void 0 ? void 0 : images.length) || 0 + ((videos === null || videos === void 0 ? void 0 : videos.length) || 0));
+        setMaxNo(images.length + videos.length);
     }, [
         images,
         videos
     ]);
     var scaleNow = function() {
         if (ref.current) {
-            ;
             ref.current.style.transform = "scale(".concat(store.scale, ")");
         }
     };
-    // 计算两个点的距离
+    // 用于查找给定数字的斜边。起止两点间距离。
     var getDistance = function(first, second) {
-        // 计算两个点起始时刻的距离和终止时刻的距离，终止时刻距离变大了则放大，变小了则缩小
-        // 放大 k 倍则 scale 也 扩大 k 倍
-        return Math.hypot(Math.abs(second.x - first.x), Math.abs(second.y - first.y));
+        return Math.hypot(Math.abs(second.pageX - first.pageX), Math.abs(second.pageY - first.pageY));
     };
     var slideChangeEnd = function(page) {
         setActive(page + 1);
@@ -166,7 +147,7 @@ export var ImagePreview = function(props) {
         setShowPop(false);
         setActive(innerNo);
         scaleNow();
-        onClose && onClose();
+        onClose === null || onClose === void 0 ? void 0 : onClose();
         setStore(_object_spread_props(_object_spread({}, store), {
             scale: 1
         }));
@@ -174,24 +155,19 @@ export var ImagePreview = function(props) {
     var closeOnImg = function(e) {
         e.stopPropagation();
         // 点击内容区域的图片是否可以关闭弹层（视频区域由于nut-video做了限制，无法关闭弹层）
-        if (closeOnContentClick) {
-            onCloseInner(e);
-        }
+        if (closeOnContentClick) onCloseInner(e);
     };
     var duration = typeof autoPlay === 'string' ? parseInt(autoPlay) : autoPlay;
     return /*#__PURE__*/ React.createElement(Popup, {
         visible: showPop,
         className: "".concat(classPrefix, "-pop"),
-        style: {
-            width: '100%'
-        },
         onClick: onCloseInner
     }, /*#__PURE__*/ React.createElement("div", {
         className: classNames(classPrefix, className),
         style: style,
         ref: ref,
         onTouchStart: onTouchStart
-    }, showPop ? /*#__PURE__*/ React.createElement(Swiper, {
+    }, showPop && /*#__PURE__*/ React.createElement(Swiper, {
         autoPlay: !!duration,
         duration: duration,
         className: "".concat(classPrefix, "-swiper"),
@@ -203,49 +179,38 @@ export var ImagePreview = function(props) {
         onChange: function(page) {
             return slideChangeEnd(page);
         },
-        defaultValue: innerNo && (innerNo > maxNo ? maxNo - 1 : innerNo - 1),
+        defaultValue: innerNo > maxNo ? maxNo - 1 : innerNo - 1,
         indicator: indicator
-    }, (videos !== null && videos !== void 0 ? videos : []).map(function(item) {
+    }, _to_consumable_array(videos.map(function(item) {
         return {
             type: 'video',
             data: item
         };
-    }).concat((images !== null && images !== void 0 ? images : []).map(function(item) {
+    })).concat(_to_consumable_array(images.map(function(item) {
         return {
             type: 'image',
             data: item
         };
-    })).sort(function(a, b) {
-        var _a_data, _b_data;
+    }))).sort(function(a, b) {
         var _a_data_index, _b_data_index;
-        return ((_a_data_index = (_a_data = a.data) === null || _a_data === void 0 ? void 0 : _a_data.index) !== null && _a_data_index !== void 0 ? _a_data_index : 0) - ((_b_data_index = (_b_data = b.data) === null || _b_data === void 0 ? void 0 : _b_data.index) !== null && _b_data_index !== void 0 ? _b_data_index : 0);
+        return ((_a_data_index = a.data.index) !== null && _a_data_index !== void 0 ? _a_data_index : 0) - ((_b_data_index = b.data.index) !== null && _b_data_index !== void 0 ? _b_data_index : 0);
     }).map(function(item, index) {
-        if (item.type === 'video') {
-            var _item_data = item.data, source = _item_data.source, options = _item_data.options;
-            return /*#__PURE__*/ React.createElement(SwiperItem, {
-                key: index
-            }, /*#__PURE__*/ React.createElement(Video, {
-                source: source,
-                options: options,
-                onClick: closeOnImg
-            }));
-        }
-        if (item.type === 'image') {
-            var src = item.data.src;
-            return /*#__PURE__*/ React.createElement(SwiperItem, {
-                key: index
-            }, /*#__PURE__*/ React.createElement(Image, {
-                src: src,
-                draggable: false,
-                onClick: closeOnImg
-            }));
-        }
-        return null;
-    })) : null), pagination ? /*#__PURE__*/ React.createElement("div", {
+        return /*#__PURE__*/ React.createElement(SwiperItem, {
+            key: index
+        }, item.type === 'video' ? /*#__PURE__*/ React.createElement(Video, {
+            source: item.data.source,
+            options: item.data.options,
+            onClick: closeOnImg
+        }) : /*#__PURE__*/ React.createElement(Image, {
+            src: item.data.src,
+            draggable: false,
+            onClick: closeOnImg
+        }));
+    }))), pagination && /*#__PURE__*/ React.createElement("div", {
         className: "".concat(classPrefix, "-index")
-    }, active, "/", (images ? images.length : 0) + (videos ? videos.length : 0)) : null, closeIcon !== false ? /*#__PURE__*/ React.createElement("div", {
+    }, active, "/", maxNo), closeIcon !== false && /*#__PURE__*/ React.createElement("div", {
         className: "".concat(classPrefix, "-close ").concat(closeIconPosition),
         onClick: onCloseInner
-    }, closeIcon === true ? /*#__PURE__*/ React.createElement(Close, null) : closeIcon) : null);
+    }, closeIcon === true ? /*#__PURE__*/ React.createElement(Close, null) : closeIcon));
 };
 ImagePreview.displayName = 'NutImagePreview';

package/dist/es/packages/imagepreview/style/imagepreview.scss

@@ -57,11 +57,12 @@
   }
 
   &-pop {
+    width: 100%;
     height: 100%;
+    max-width: 100% !important;
     background: transparent !important;
     display: flex;
     align-items: center;
-    width: 100%;
   }
 
   &-swiper {

package/dist/es/packages/imagepreview/style/style.css

@@ -697,11 +697,12 @@
   text-align: center;
 }
 .nut-imagepreview-pop {
+  width: 100%;
   height: 100%;
+  max-width: 100% !important;
   background: transparent !important;
   display: flex;
   align-items: center;
-  width: 100%;
 }
 .nut-imagepreview-swiper .nut-imagepreview-swiper-item,
 .nut-imagepreview-swiper .nut-swiper-item {