@nutui/nutui-react-taro 3.0.0 → 3.0.2

package/dist/cjs/packages/nutui.react.scss.d.ts

@@ -10,20 +10,17 @@ import "./griditem/griditem.scss";
 import "./layout/layout.scss";
 import "./col/col.scss";
 import "./row/row.scss";
+import "./safearea/safearea.scss";
 import "./space/space.scss";
 import "./sticky/sticky.scss";
-import "./safearea/safearea.scss";
 import "./backtop/backtop.scss";
 import "./elevator/elevator.scss";
 import "./fixednav/fixednav.scss";
 import "./hoverbutton/hoverbutton.scss";
 import "./hoverbuttonitem/hoverbuttonitem.scss";
 import "./navbar/navbar.scss";
-import "./sidenavbar/sidenavbar.scss";
 import "./sidebar/sidebar.scss";
 import "./sidebaritem/sidebaritem.scss";
-import "./sidenavbaritem/sidenavbaritem.scss";
-import "./subsidenavbar/subsidenavbar.scss";
 import "./tabbar/tabbar.scss";
 import "./tabbaritem/tabbaritem.scss";
 import "./tabpane/tabpane.scss";
@@ -36,6 +33,7 @@ import "./cascader/cascader.scss";
 import "./checkbox/checkbox.scss";
 import "./checkboxgroup/checkboxgroup.scss";
 import "./datepicker/datepicker.scss";
+import "./datepickerview/datepickerview.scss";
 import "./form/form.scss";
 import "./formitem/formitem.scss";
 import "./input/input.scss";
@@ -60,7 +58,6 @@ import "./badge/badge.scss";
 import "./dialog/dialog.scss";
 import "./drag/drag.scss";
 import "./empty/empty.scss";
-import "./resultpage/resultpage.scss";
 import "./infiniteloading/infiniteloading.scss";
 import "./loading/loading.scss";
 import "./noticebar/noticebar.scss";
@@ -68,6 +65,7 @@ import "./notify/notify.scss";
 import "./popover/popover.scss";
 import "./popup/popup.scss";
 import "./pulltorefresh/pulltorefresh.scss";
+import "./resultpage/resultpage.scss";
 import "./skeleton/skeleton.scss";
 import "./swipe/swipe.scss";
 import "./toast/toast.scss";
@@ -85,9 +83,9 @@ import "./imagepreview/imagepreview.scss";
 import "./indicator/indicator.scss";
 import "./lottie/lottie.scss";
 import "./pagination/pagination.scss";
-import "./segmented/segmented.scss";
 import "./price/price.scss";
 import "./progress/progress.scss";
+import "./segmented/segmented.scss";
 import "./step/step.scss";
 import "./steps/steps.scss";
 import "./swiper/swiper.scss";
@@ -97,13 +95,13 @@ import "./tag/tag.scss";
 import "./tour/tour.scss";
 import "./video/video.scss";
 import "./virtuallist/virtuallist.scss";
+import "./avatarcropper/avatarcropper.scss";
 import "./barrage/barrage.scss";
 import "./card/card.scss";
 import "./timedetail/timedetail.scss";
 import "./timeselect/timeselect.scss";
 import "./trendarrow/trendarrow.scss";
 import "./watermark/watermark.scss";
-import "./avatarcropper/avatarcropper.scss";
 declare const _default: {
     NutUI: string;
 };

package/dist/cjs/packages/nutui.react.scss.js

@@ -20,20 +20,17 @@ require("./griditem/griditem.scss");
 require("./layout/layout.scss");
 require("./col/col.scss");
 require("./row/row.scss");
+require("./safearea/safearea.scss");
 require("./space/space.scss");
 require("./sticky/sticky.scss");
-require("./safearea/safearea.scss");
 require("./backtop/backtop.scss");
 require("./elevator/elevator.scss");
 require("./fixednav/fixednav.scss");
 require("./hoverbutton/hoverbutton.scss");
 require("./hoverbuttonitem/hoverbuttonitem.scss");
 require("./navbar/navbar.scss");
-require("./sidenavbar/sidenavbar.scss");
 require("./sidebar/sidebar.scss");
 require("./sidebaritem/sidebaritem.scss");
-require("./sidenavbaritem/sidenavbaritem.scss");
-require("./subsidenavbar/subsidenavbar.scss");
 require("./tabbar/tabbar.scss");
 require("./tabbaritem/tabbaritem.scss");
 require("./tabpane/tabpane.scss");
@@ -46,6 +43,7 @@ require("./cascader/cascader.scss");
 require("./checkbox/checkbox.scss");
 require("./checkboxgroup/checkboxgroup.scss");
 require("./datepicker/datepicker.scss");
+require("./datepickerview/datepickerview.scss");
 require("./form/form.scss");
 require("./formitem/formitem.scss");
 require("./input/input.scss");
@@ -70,7 +68,6 @@ require("./badge/badge.scss");
 require("./dialog/dialog.scss");
 require("./drag/drag.scss");
 require("./empty/empty.scss");
-require("./resultpage/resultpage.scss");
 require("./infiniteloading/infiniteloading.scss");
 require("./loading/loading.scss");
 require("./noticebar/noticebar.scss");
@@ -78,6 +75,7 @@ require("./notify/notify.scss");
 require("./popover/popover.scss");
 require("./popup/popup.scss");
 require("./pulltorefresh/pulltorefresh.scss");
+require("./resultpage/resultpage.scss");
 require("./skeleton/skeleton.scss");
 require("./swipe/swipe.scss");
 require("./toast/toast.scss");
@@ -95,9 +93,9 @@ require("./imagepreview/imagepreview.scss");
 require("./indicator/indicator.scss");
 require("./lottie/lottie.scss");
 require("./pagination/pagination.scss");
-require("./segmented/segmented.scss");
 require("./price/price.scss");
 require("./progress/progress.scss");
+require("./segmented/segmented.scss");
 require("./step/step.scss");
 require("./steps/steps.scss");
 require("./swiper/swiper.scss");
@@ -107,13 +105,13 @@ require("./tag/tag.scss");
 require("./tour/tour.scss");
 require("./video/video.scss");
 require("./virtuallist/virtuallist.scss");
+require("./avatarcropper/avatarcropper.scss");
 require("./barrage/barrage.scss");
 require("./card/card.scss");
 require("./timedetail/timedetail.scss");
 require("./timeselect/timeselect.scss");
 require("./trendarrow/trendarrow.scss");
 require("./watermark/watermark.scss");
-require("./avatarcropper/avatarcropper.scss");
 var _default = {
     "NutUI": "NutUI-Taro"
 };

package/dist/cjs/packages/overlay/overlay.js

@@ -28,7 +28,6 @@ var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames")
 var _components = require("@tarojs/components");
 var _typings = require("../../utils/typings");
 var _uselockscolltaro = require("../../hooks/use-lock-scoll-taro");
-var _platformtaro = require("../../utils/platform-taro");
 var defaultOverlayProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     zIndex: 1000,
     duration: 300,
@@ -62,9 +61,9 @@ var Overlay = function Overlay(props) {
         visible
     ]);
     var classes = (0, _classnames.default)(classPrefix, className);
-    var styles = (0, _object_spread_props._)((0, _object_spread._)({}, style), {
+    var styles = (0, _object_spread._)({
         zIndex: zIndex
-    });
+    }, style);
     var handleClick = function handleClick(e) {
         if (closeOnOverlayClick) {
             onClick && onClick(e);
@@ -80,7 +79,7 @@ var Overlay = function Overlay(props) {
             onClick: handleClick
         }), children);
     };
-    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, !(0, _platformtaro.harmony)() ? /*#__PURE__*/ _react.default.createElement(_reacttransitiongroup.CSSTransition, {
+    return /*#__PURE__*/ _react.default.createElement(_reacttransitiongroup.CSSTransition, {
         nodeRef: nodeRef,
         classNames: "".concat(classPrefix, "-slide"),
         unmountOnExit: true,
@@ -88,6 +87,6 @@ var Overlay = function Overlay(props) {
         in: innerVisible,
         onEntered: afterShow,
         onExited: afterClose
-    }, renderOverlay()) : innerVisible && renderOverlay());
+    }, renderOverlay());
 };
 Overlay.displayName = 'NutOverlay';

package/dist/cjs/packages/overlay/style/overlay.scss

@@ -19,11 +19,9 @@
     0% {
       opacity: 0;
     }
-
     1% {
       opacity: 0;
     }
-
     100% {
       opacity: 1;
     }
@@ -33,11 +31,9 @@
     0% {
       opacity: 1;
     }
-
     1% {
       opacity: 1;
     }
-
     100% {
       opacity: 0;
     }

package/dist/cjs/packages/picker/style/index.js

@@ -1,2 +1,3 @@
 import '../../popup/style';
+import '../../pickerview/style';
 import './picker.scss';

package/dist/cjs/packages/picker/style/style.css

@@ -238,6 +238,9 @@
   from {
     transform: translate3d(0, -100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes popup-slide-top-exit {
   to {
@@ -259,6 +262,9 @@
   from {
     transform: translate3d(100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-right-exit {
   to {
@@ -280,6 +286,9 @@
   from {
     transform: translate3d(0, 100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes slide-bottom-exit {
   to {
@@ -301,6 +310,9 @@
   from {
     transform: translate3d(-100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-left-exit {
   to {
@@ -371,6 +383,76 @@
   right: 0;
 }
 
+.nut-pickerview {
+  --nutui-picker-item-height: 36px;
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: calc(var(--nutui-picker-item-height, 36px) * 7);
+  overflow: hidden;
+}
+.nut-pickerview-mask, .nut-pickerview-indicator {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 3;
+  pointer-events: none;
+}
+.nut-pickerview-mask {
+  top: 0;
+  bottom: 0;
+  background-image: var(--picker-mask-background, linear-gradient(180deg, var(--nutui-white-12), var(--nutui-white-7)), linear-gradient(0deg, var(--nutui-white-12), var(--nutui-white-7)));
+  background-position: top, bottom;
+  background-size: 100% calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  background-repeat: no-repeat;
+  transform: translateZ(0);
+}
+.nut-pickerview-indicator {
+  top: calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  height: var(--nutui-picker-item-height, 36px);
+  border: var(--nutui-picker-item-active-line-border, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-left: 0;
+  border-right: 0;
+  box-sizing: border-box;
+}
+.nut-pickerview-list {
+  position: relative;
+  flex: 1;
+  height: calc(var(--nutui-picker-item-height, 36px) * 7);
+  overflow: hidden;
+  touch-action: none;
+}
+.nut-pickerview-roller {
+  position: absolute;
+  top: calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  width: 100%;
+  height: var(--nutui-picker-item-height, 36px);
+  z-index: 1;
+  transform-style: preserve-3d;
+}
+.nut-pickerview-roller-item {
+  position: absolute;
+  top: 0;
+  backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+.nut-pickerview-roller-item-hidden {
+  visibility: hidden;
+  opacity: 0;
+}
+.nut-pickerview-roller-item, .nut-pickerview-roller-item-tiled {
+  width: 100%;
+  height: var(--nutui-picker-item-height, 36px);
+  line-height: var(--nutui-picker-item-height, 36px);
+  color: var(--nutui-picker-item-text-color, var(--nutui-color-title, #1a1a1a));
+  font-size: var(--nutui-picker-item-text-font-size, var(--nutui-font-size-base, 14px));
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .nut-picker {
   background-color: var(--nutui-color-background-overlay, #ffffff);
   width: 100%;

package/dist/cjs/packages/popover/style/style.css

@@ -238,6 +238,9 @@
   from {
     transform: translate3d(0, -100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes popup-slide-top-exit {
   to {
@@ -259,6 +262,9 @@
   from {
     transform: translate3d(100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-right-exit {
   to {
@@ -280,6 +286,9 @@
   from {
     transform: translate3d(0, 100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes slide-bottom-exit {
   to {
@@ -301,6 +310,9 @@
   from {
     transform: translate3d(-100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-left-exit {
   to {

package/dist/cjs/packages/popup/popup.js

@@ -23,6 +23,7 @@ var _components = require("@tarojs/components");
 var _overlay = require("../overlay/overlay");
 var _index = /*#__PURE__*/ _interop_require_default._(require("../overlay/index"));
 var _uselockscolltaro = require("../../hooks/use-lock-scoll-taro");
+var _platformtaro = require("../../utils/platform-taro");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _overlay.defaultOverlayProps), {
     position: 'center',
     transition: '',
@@ -56,9 +57,11 @@ var Popup = function Popup(props) {
     var refObject = (0, _uselockscolltaro.useLockScrollTaro)(innerVisible && lockScroll);
     var classPrefix = 'nut-popup';
     var overlayStyles = (0, _object_spread._)({}, overlayStyle);
-    var popStyles = (0, _object_spread_props._)((0, _object_spread._)({}, style), {
-        zIndex: index
-    });
+    var contentZIndex = (0, _platformtaro.harmony)() ? index + 1 : index // 解决harmony层级问题
+    ;
+    var popStyles = (0, _object_spread._)({
+        zIndex: contentZIndex
+    }, style);
     var _obj;
     var popClassName = (0, _classnames.default)(classPrefix, (_obj = {}, (0, _define_property._)(_obj, "".concat(classPrefix, "-round"), round || position === 'bottom'), (0, _define_property._)(_obj, "".concat(classPrefix, "-").concat(position), true), _obj), className);
     var open = function open() {
@@ -116,6 +119,15 @@ var Popup = function Popup(props) {
             return renderCloseIcon();
         }
     };
+    var renderContent = function renderContent() {
+        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement(_components.View, {
+            ref: refObject,
+            style: popStyles,
+            className: popClassName,
+            onClick: onClick,
+            catchMove: lockScroll
+        }, renderTitle(), showChildren ? children : null));
+    };
     var renderPop = function renderPop() {
         return /*#__PURE__*/ _react.default.createElement(_reacttransitiongroup.CSSTransition, {
             nodeRef: refObject,
@@ -126,13 +138,7 @@ var Popup = function Popup(props) {
             in: innerVisible,
             onEntered: afterShow,
             onExited: afterClose
-        }, /*#__PURE__*/ _react.default.createElement(_components.View, {
-            ref: refObject,
-            style: popStyles,
-            className: popClassName,
-            onClick: onClick,
-            catchMove: lockScroll
-        }, renderTitle(), showChildren ? children : null));
+        }, renderContent());
     };
     var renderNode = function renderNode() {
         return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, overlay ? /*#__PURE__*/ _react.default.createElement(_index.default, {
@@ -144,7 +150,7 @@ var Popup = function Popup(props) {
             lockScroll: lockScroll,
             duration: duration,
             onClick: handleOverlayClick
-        }, renderPop()) : renderPop());
+        }) : null, renderPop());
     };
     (0, _react.useEffect)(function() {
         visible ? open() : close();

package/dist/cjs/packages/popup/style/popup.scss

@@ -141,7 +141,6 @@
         opacity: 0;
         transform: scale(0.8);
       }
-
       to {
         opacity: 1;
         transform: scale(1);
@@ -153,7 +152,6 @@
         opacity: 1;
         transform: scale(1);
       }
-
       to {
         opacity: 0;
         transform: scale(0.8);
@@ -176,7 +174,6 @@
       from {
         opacity: 0;
       }
-
       to {
         opacity: 1;
       }
@@ -186,7 +183,6 @@
       from {
         opacity: 1;
       }
-
       to {
         opacity: 0;
       }
@@ -209,6 +205,9 @@
       from {
         transform: translate3d(0, -100%, 0);
       }
+      to {
+        transform: translate3d(0, 0%, 0);
+      }
     }
 
     @keyframes popup-slide-top-exit {
@@ -236,6 +235,9 @@
       from {
         transform: translate3d(100%, 0, 0);
       }
+      to {
+        transform: translate3d(0%, 0, 0);
+      }
     }
 
     @keyframes popup-slide-right-exit {
@@ -263,6 +265,9 @@
       from {
         transform: translate3d(0, 100%, 0);
       }
+      to {
+        transform: translate3d(0, 0%, 0);
+      }
     }
 
     @keyframes slide-bottom-exit {
@@ -290,6 +295,9 @@
       from {
         transform: translate3d(-100%, 0, 0);
       }
+      to {
+        transform: translate3d(0%, 0, 0);
+      }
     }
 
     @keyframes popup-slide-left-exit {

package/dist/cjs/packages/popup/style/style.css

@@ -238,6 +238,9 @@
   from {
     transform: translate3d(0, -100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes popup-slide-top-exit {
   to {
@@ -259,6 +262,9 @@
   from {
     transform: translate3d(100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-right-exit {
   to {
@@ -280,6 +286,9 @@
   from {
     transform: translate3d(0, 100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes slide-bottom-exit {
   to {
@@ -301,6 +310,9 @@
   from {
     transform: translate3d(-100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-left-exit {
   to {

package/dist/cjs/packages/popup/style/style.harmony.css

@@ -184,6 +184,9 @@
   from {
     transform: translate3d(0, -100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes popup-slide-top-exit {
   to {
@@ -211,6 +214,9 @@
   from {
     transform: translate3d(100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-right-exit {
   to {
@@ -238,6 +244,9 @@
   from {
     transform: translate3d(0, 100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes slide-bottom-exit {
   to {
@@ -265,6 +274,9 @@
   from {
     transform: translate3d(-100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-left-exit {
   to {

package/dist/cjs/packages/shortpassword/shortpassword.js

@@ -41,7 +41,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
 });
 var InternalShortPassword = function InternalShortPassword(props, ref) {
     var locale = (0, _index1.useConfig)().locale;
-    var _ref = (0, _object_spread._)({}, defaultProps, props), title = _ref.title, description = _ref.description, tips = _ref.tips, outerVisible = _ref.visible, value = _ref.value, error = _ref.error, hideFooter = _ref.hideFooter, length = _ref.length, plain = _ref.plain, style = _ref.style, className = _ref.className, closeable = _ref.closeable, autoFocus = _ref.autoFocus, onFocus = _ref.onFocus, onChange = _ref.onChange, onConfirm = _ref.onConfirm, onTips = _ref.onTips, onCancel = _ref.onCancel, onClose = _ref.onClose, onComplete = _ref.onComplete, onOverlayClick = _ref.onOverlayClick, onCloseIconClick = _ref.onCloseIconClick, rest = (0, _object_without_properties._)(_ref, [
+    var _ref = (0, _object_spread._)({}, defaultProps, props), title = _ref.title, description = _ref.description, tips = _ref.tips, outerVisible = _ref.visible, value = _ref.value, error = _ref.error, hideFooter = _ref.hideFooter, length = _ref.length, plain = _ref.plain, style = _ref.style, className = _ref.className, closeable = _ref.closeable, autoFocus = _ref.autoFocus, round = _ref.round, onFocus = _ref.onFocus, onChange = _ref.onChange, onConfirm = _ref.onConfirm, onTips = _ref.onTips, onCancel = _ref.onCancel, onClose = _ref.onClose, onComplete = _ref.onComplete, onOverlayClick = _ref.onOverlayClick, onCloseIconClick = _ref.onCloseIconClick, rest = (0, _object_without_properties._)(_ref, [
         "title",
         "description",
         "tips",
@@ -55,6 +55,7 @@ var InternalShortPassword = function InternalShortPassword(props, ref) {
         "className",
         "closeable",
         "autoFocus",
+        "round",
         "onFocus",
         "onChange",
         "onConfirm",
@@ -118,15 +119,12 @@ var InternalShortPassword = function InternalShortPassword(props, ref) {
         onConfirm && onConfirm(inputValue);
     };
     return /*#__PURE__*/ _react.default.createElement(_index.default, (0, _object_spread._)({
-        style: {
-            padding: '32px 24px 28px 24px',
-            borderRadius: '12px',
-            textAlign: 'center'
-        },
+        className: "".concat(classPrefix, "-popup"),
         visible: visible,
         closeable: true,
         onOverlayClick: onClose,
-        onCloseIconClick: onClose
+        onCloseIconClick: onClose,
+        round: round
     }, rest), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: (0, _classnames.default)(classPrefix, className),
         style: style

package/dist/cjs/packages/shortpassword/style/shortpassword.scss

@@ -1,11 +1,21 @@
 .nut-shortpassword {
+  &-popup {
+    padding: 32px 24px 28px 24px;
+    border-radius: 12px;
+    text-align: center;
+  }
+
   &-title {
+    display: flex;
+    justify-content: center;
     line-height: 1;
     font-size: $font-size-l;
     color: $color-title;
   }
 
   &-description {
+    display: flex;
+    justify-content: center;
     margin-top: 12px;
     margin-bottom: 24px;
     line-height: 1;

package/dist/cjs/packages/shortpassword/style/style.css

@@ -238,6 +238,9 @@
   from {
     transform: translate3d(0, -100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes popup-slide-top-exit {
   to {
@@ -259,6 +262,9 @@
   from {
     transform: translate3d(100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-right-exit {
   to {
@@ -280,6 +286,9 @@
   from {
     transform: translate3d(0, 100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes slide-bottom-exit {
   to {
@@ -301,6 +310,9 @@
   from {
     transform: translate3d(-100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-left-exit {
   to {
@@ -371,12 +383,21 @@
   right: 0;
 }
 
+.nut-shortpassword-popup {
+  padding: 32px 24px 28px 24px;
+  border-radius: 12px;
+  text-align: center;
+}
 .nut-shortpassword-title {
+  display: flex;
+  justify-content: center;
   line-height: 1;
   font-size: var(--nutui-font-size-l, 16px);
   color: var(--nutui-color-title, #1a1a1a);
 }
 .nut-shortpassword-description {
+  display: flex;
+  justify-content: center;
   margin-top: 12px;
   margin-bottom: 24px;
   line-height: 1;