@nutui/nutui-react-taro 3.0.20 → 3.0.22-cpp

package/dist/es/packages/shortpassword/style/style.harmony.css

@@ -71,7 +71,7 @@
   align-items: center;
   justify-content: center;
   border-bottom: var(--nutui-popup-title-border-bottom, 0);
-  padding: var(--nutui-popup-title-padding, 16px);
+  padding: var(--nutui-popup-title-padding, 11px);
   position: relative;
 }
 .nut-popup-title-wrapper {
@@ -84,7 +84,6 @@
   color: var(--nutui-color-title, #1a1a1a);
   font-weight: var(--nutui-font-weight-bold, 600);
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
-  line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18px));
 }
 .nut-popup-title-description {
   color: var(--nutui-color-text, #505259);
@@ -96,13 +95,13 @@
 }
 .nut-popup-title-left {
   position: absolute;
-  top: var(--nutui-popup-title-padding, 16px);
-  left: var(--nutui-popup-title-padding, 16px);
+  top: var(--nutui-popup-title-padding, 11px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-title-right {
   position: absolute;
-  top: var(--nutui-popup-title-padding, 16px);
-  right: var(--nutui-popup-title-padding, 16px);
+  top: var(--nutui-popup-title-padding, 11px);
+  right: var(--nutui-popup-title-padding, 11px);
   z-index: 1;
   width: var(--nutui-popup-icon-size, 20px);
   height: var(--nutui-popup-icon-size, 20px);
@@ -113,20 +112,22 @@
   opacity: 0.7;
 }
 .nut-popup-title-right-top-left {
-  top: var(--nutui-popup-title-padding, 16px);
-  left: var(--nutui-popup-title-padding, 16px);
+  top: var(--nutui-popup-title-padding, 11px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-title-right-bottom-left {
-  bottom: var(--nutui-popup-title-padding, 16px);
-  left: var(--nutui-popup-title-padding, 16px);
+  bottom: var(--nutui-popup-title-padding, 11px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-title-right-bottom-right {
-  right: var(--nutui-popup-title-padding, 16px);
-  bottom: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
+  bottom: var(--nutui-popup-title-padding, 11px);
 }
 .nut-popup-center {
   top: 50%;
   left: 50%;
+  right: auto;
+  bottom: auto;
   min-height: 10%;
   max-width: 295px;
   transform: translate(-50%, -50%);
@@ -137,6 +138,8 @@
 .nut-popup-bottom {
   bottom: 0;
   left: 0;
+  right: auto;
+  top: auto;
   width: 100%;
 }
 .nut-popup-bottom.nut-popup-round {
@@ -148,6 +151,8 @@
 .nut-popup-right {
   top: 0;
   right: 0;
+  left: auto;
+  bottom: auto;
   width: 100px;
   height: 100%;
 }
@@ -157,6 +162,8 @@
 .nut-popup-left {
   top: 0;
   left: 0;
+  right: auto;
+  bottom: auto;
   width: 100px;
   height: 100%;
 }
@@ -166,6 +173,8 @@
 .nut-popup-top {
   top: 0;
   left: 0;
+  right: auto;
+  bottom: auto;
   width: 100%;
 }
 .nut-popup-top.nut-popup-round {
@@ -242,6 +251,9 @@
   }
 }
 @keyframes popup-slide-top-exit {
+  from {
+    transform: translate3d(0, 0%, 0);
+  }
   to {
     transform: translate3d(0, -100%, 0);
   }
@@ -266,6 +278,9 @@
   }
 }
 @keyframes popup-slide-right-exit {
+  from {
+    transform: translate3d(0%, 0, 0);
+  }
   to {
     transform: translate3d(100%, 0, 0);
   }
@@ -290,6 +305,9 @@
   }
 }
 @keyframes slide-bottom-exit {
+  from {
+    transform: translate3d(0, 0%, 0);
+  }
   to {
     transform: translate3d(0, 100%, 0);
   }
@@ -314,6 +332,9 @@
   }
 }
 @keyframes popup-slide-left-exit {
+  from {
+    transform: translate3d(0%, 0, 0);
+  }
   to {
     transform: translate3d(-100%, 0, 0);
   }
@@ -339,27 +360,27 @@
 [dir=rtl] .nut-popup-title-left,
 .nut-rtl .nut-popup-title-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right,
 .nut-rtl .nut-popup-title-right {
   right: auto;
-  left: var(--nutui-popup-title-padding, 16px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right-top-left,
 .nut-rtl .nut-popup-title-right-top-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right-bottom-left,
 .nut-rtl .nut-popup-title-right-bottom-left {
   left: auto;
-  right: var(--nutui-popup-title-padding, 16px);
+  right: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title-right-bottom-right,
 .nut-rtl .nut-popup-title-right-bottom-right {
   right: auto;
-  left: var(--nutui-popup-title-padding, 16px);
+  left: var(--nutui-popup-title-padding, 11px);
 }
 [dir=rtl] .nut-popup-title .nut-icon-ArrowLeft,
 .nut-rtl .nut-popup-title .nut-icon-ArrowLeft {

package/dist/es/packages/sidebar/sidebar.js

@@ -19,7 +19,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     sidebarDuration: 0
 });
 var classPrefix = 'nut-sidebar';
-export var SideBar = function(props) {
+export var SideBar = function SideBar(props) {
     var _mergeProps = mergeProps(defaultProps, props), contentDuration = _mergeProps.contentDuration, sidebarDuration = _mergeProps.sidebarDuration, children = _mergeProps.children, onClick = _mergeProps.onClick, onChange = _mergeProps.onChange, className = _mergeProps.className, rest = _object_without_properties(_mergeProps, [
         "contentDuration",
         "sidebarDuration",
@@ -37,7 +37,7 @@ export var SideBar = function(props) {
     }), 2), value = _usePropsValue[0], setValue = _usePropsValue[1];
     var titleItemsRef = useRef([]);
     var navRef = useRef(null);
-    var getTitles = function() {
+    var getTitles = function getTitles() {
         var titles = [];
         React.Children.forEach(children, function(child, idx) {
             if (/*#__PURE__*/ React.isValidElement(child)) {
@@ -69,7 +69,7 @@ export var SideBar = function(props) {
     ]);
     var classes = classNames(classPrefix, className);
     var classesTitle = classNames("".concat(classPrefix, "-titles"), "".concat(classPrefix, "-titles-scrollable"));
-    var getRect = function(selector) {
+    var getRect = function getRect(selector) {
         return new Promise(function(resolve) {
             createSelectorQuery().select(selector).boundingClientRect().exec(function() {
                 var rect = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
@@ -77,7 +77,7 @@ export var SideBar = function(props) {
             });
         });
     };
-    var getAllRect = function(selector) {
+    var getAllRect = function getAllRect(selector) {
         return new Promise(function(resolve) {
             createSelectorQuery().selectAll(selector).boundingClientRect().exec(function() {
                 var rect = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
@@ -89,7 +89,7 @@ export var SideBar = function(props) {
     var navRectRef = useRef();
     var titleRectRef = useRef([]);
     var _useState = _sliced_to_array(useState(0), 2), scrollTop = _useState[0], setScrollTop = _useState[1];
-    var scrollDirection = function(to) {
+    var scrollDirection = function scrollDirection(to) {
         if (sidebarDuration === 0) {
             setScrollTop(to);
             return;
@@ -108,7 +108,7 @@ export var SideBar = function(props) {
         }
         animate();
     };
-    var scrollIntoView = function(index) {
+    var scrollIntoView = function scrollIntoView(index) {
         raf(function() {
             Promise.all([
                 getRect("#".concat(classPrefix, "-titles-").concat(uuid, " .").concat(classPrefix, "-list")),
@@ -126,7 +126,7 @@ export var SideBar = function(props) {
             });
         });
     };
-    var getContentStyle = function() {
+    var getContentStyle = function getContentStyle() {
         var index = titles.current.findIndex(function(t) {
             return String(t.value) === String(value);
         });
@@ -145,7 +145,7 @@ export var SideBar = function(props) {
     }, [
         value
     ]);
-    var tabChange = function(item, index) {
+    var tabChange = function tabChange(item, index) {
         if (item.disabled) return;
         onClick === null || onClick === void 0 ? void 0 : onClick(item.value);
         setValue(item.value);
@@ -166,11 +166,11 @@ export var SideBar = function(props) {
         ref: navRef
     }, titles.current.map(function(item, index) {
         return /*#__PURE__*/ React.createElement(View, {
-            ref: function(ref) {
+            ref: function ref(ref) {
                 return titleItemsRef.current.push(ref);
             },
             id: "scrollIntoView".concat(index),
-            onClick: function(e) {
+            onClick: function onClick(e) {
                 tabChange(item, index);
             },
             className: classNames("".concat(classPrefix, "-titles-item"), _define_property({}, "".concat(classPrefix, "-titles-item-active"), !item.disabled && String(item.value) === String(value))),
@@ -184,13 +184,13 @@ export var SideBar = function(props) {
         className: "".concat(classPrefix, "-content"),
         style: getContentStyle()
     }, React.Children.map(children, function(child, idx) {
+        var _child_props_value;
         if (!/*#__PURE__*/ React.isValidElement(child)) {
             return null;
         }
         var childProps = _object_spread_props(_object_spread({}, child.props), {
             active: value === child.props.value
         });
-        var _child_props_value;
         if (String(value) !== String((_child_props_value = child.props.value) !== null && _child_props_value !== void 0 ? _child_props_value : idx)) {
             childProps = _object_spread({}, childProps);
         }

package/dist/es/packages/sidebar/utils.js

@@ -1,4 +1,4 @@
-var handleClick = function(e) {
+var handleClick = function handleClick(e) {
     e.stopPropagation();
     var isIcon = e.target.className.includes('arrow-icon');
     var isTitle = e.target.className.includes('-title') || isIcon;

package/dist/es/packages/sidebaritem/sidebaritem.js

@@ -7,7 +7,7 @@ var defaultProps = {
     value: '',
     disabled: false
 };
-export var SideBarItem = function(props) {
+export var SideBarItem = function SideBarItem(props) {
     var _mergeProps = mergeProps(defaultProps, props), children = _mergeProps.children, className = _mergeProps.className, disabled = _mergeProps.disabled;
     var classPrefix = 'nut-sidebaritem';
     var classes = classNames(classPrefix, {

package/dist/es/packages/signature/signature.js

@@ -1,8 +1,8 @@
-/* eslint-disable react/no-unknown-property */ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
-import React, { useEffect, useImperativeHandle, useRef, useState } from "react";
+/* eslint-disable react/no-unknown-property */ import React, { useEffect, useImperativeHandle, useRef, useState } from "react";
 import { getEnv, nextTick, createSelectorQuery, canvasToTempFilePath } from "@tarojs/taro";
 import { Canvas, View } from "@tarojs/components";
 import { ComponentDefaults } from "../../utils/typings";
@@ -12,8 +12,8 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     lineWidth: 2,
     strokeStyle: '#1A1A1A'
 });
-var InternalSignature = function(props, ref) {
-    var _ref = _object_spread({}, defaultProps, props), canvasId = _ref.canvasId, type = _ref.type, lineWidth = _ref.lineWidth, strokeStyle = _ref.strokeStyle, className = _ref.className, style = _ref.style, onConfirm = _ref.onConfirm, onClear = _ref.onClear, rest = _object_without_properties(_ref, [
+var InternalSignature = function InternalSignature(props, ref) {
+    var _$_object_spread = _object_spread({}, defaultProps, props), canvasId = _$_object_spread.canvasId, type = _$_object_spread.type, lineWidth = _$_object_spread.lineWidth, strokeStyle = _$_object_spread.strokeStyle, className = _$_object_spread.className, style = _$_object_spread.style, onConfirm = _$_object_spread.onConfirm, onClear = _$_object_spread.onClear, rest = _object_without_properties(_$_object_spread, [
         "canvasId",
         "type",
         "lineWidth",
@@ -31,7 +31,7 @@ var InternalSignature = function(props, ref) {
     var ctx = useRef(null);
     var _useState2 = _sliced_to_array(useState('true'), 1), disalbeScroll = _useState2[0];
     var isSignedRef = useRef(false);
-    var startEventHandler = function(event) {
+    var startEventHandler = function startEventHandler(event) {
         isSignedRef.current = true;
         if (ctx.current) {
             ctx.current.beginPath();
@@ -39,7 +39,7 @@ var InternalSignature = function(props, ref) {
             ctx.current.strokeStyle = strokeStyle;
         }
     };
-    var moveEventHandler = function(event) {
+    var moveEventHandler = function moveEventHandler(event) {
         if (ctx.current) {
             var evt = event.changedTouches[0];
             var mouseX = evt.x || evt.clientX;
@@ -56,8 +56,8 @@ var InternalSignature = function(props, ref) {
             });
         }
     };
-    var endEventHandler = function(event) {};
-    var handleClearBtn = function() {
+    var endEventHandler = function endEventHandler(event) {};
+    var handleClearBtn = function handleClearBtn() {
         isSignedRef.current = false;
         if (ctx.current) {
             ctx.current.clearRect(0, 0, canvasWidth, canvasHeight);
@@ -65,7 +65,7 @@ var InternalSignature = function(props, ref) {
         }
         onClear && onClear();
     };
-    var onSave = function() {
+    var onSave = function onSave() {
         if (!isSignedRef.current) {
             onConfirm && onConfirm('', isSignedRef.current);
             return;
@@ -78,16 +78,16 @@ var InternalSignature = function(props, ref) {
                 canvas: res[0].node,
                 fileType: type,
                 canvasId: "".concat(canvasId),
-                success: function(res) {
+                success: function success(res) {
                     onConfirm && onConfirm(res.tempFilePath, isSignedRef.current);
                 },
-                fail: function(res) {
+                fail: function fail(res) {
                     console.warn('保存失败', res);
                 }
             });
         });
     };
-    var canvasSetting = function(canvasDom, width, height) {
+    var canvasSetting = function canvasSetting(canvasDom, width, height) {
         var canvas = canvasDom;
         canvas.current = canvas;
         ctx.current = canvas.getContext('2d');
@@ -104,15 +104,15 @@ var InternalSignature = function(props, ref) {
     };
     useImperativeHandle(ref, function() {
         return {
-            confirm: function() {
+            confirm: function confirm() {
                 onSave();
             },
-            clear: function() {
+            clear: function clear() {
                 handleClearBtn();
             }
         };
     });
-    var initCanvas = function() {
+    var initCanvas = function initCanvas() {
         nextTick(function() {
             setTimeout(function() {
                 if ([

package/dist/es/packages/skeleton/skeleton.js

@@ -14,7 +14,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     shape: 'round',
     duration: 0.6
 });
-export var Skeleton = function(props) {
+export var Skeleton = function Skeleton(props) {
     var shapeStyle = function shapeStyle() {
         if (shape === 'circle') return {
             borderRadius: '50%'
@@ -30,7 +30,7 @@ export var Skeleton = function(props) {
         };
         return {};
     };
-    var _ref = _object_spread({}, defaultProps, props), className = _ref.className, width = _ref.width, height = _ref.height, shape = _ref.shape, animated = _ref.animated, rows = _ref.rows, visible = _ref.visible, size = _ref.size, duration = _ref.duration, children = _ref.children, rest = _object_without_properties(_ref, [
+    var _$_object_spread = _object_spread({}, defaultProps, props), className = _$_object_spread.className, width = _$_object_spread.width, height = _$_object_spread.height, shape = _$_object_spread.shape, animated = _$_object_spread.animated, rows = _$_object_spread.rows, visible = _$_object_spread.visible, size = _$_object_spread.size, duration = _$_object_spread.duration, children = _$_object_spread.children, rest = _object_without_properties(_$_object_spread, [
         "className",
         "width",
         "height",
@@ -44,7 +44,7 @@ export var Skeleton = function(props) {
     ]);
     var classPrefix = 'nut-skeleton';
     var classes = classNames(classPrefix, className);
-    var repeatCount = function(num) {
+    var repeatCount = function repeatCount(num) {
         return Array.from({
             length: num
         }, function(v, i) {
@@ -52,7 +52,7 @@ export var Skeleton = function(props) {
         });
     };
     var _useState = _sliced_to_array(useState(false), 2), animate = _useState[0], setAnimate = _useState[1];
-    var playAnimation = function() {
+    var playAnimation = function playAnimation() {
         setAnimate(false);
         setTimeout(function() {
             setAnimate(true);

package/dist/es/packages/space/space.js

@@ -8,7 +8,7 @@ var prefixCls = 'nut-space';
 var defaultProps = {
     direction: 'horizontal'
 };
-export var Space = function(props) {
+export var Space = function Space(props) {
     var _$_object_spread = _object_spread({}, defaultProps, props), className = _$_object_spread.className, style = _$_object_spread.style, children = _$_object_spread.children, wrap = _$_object_spread.wrap, align = _$_object_spread.align, direction = _$_object_spread.direction, justify = _$_object_spread.justify;
     var rtl = useRtl();
     var _obj;

package/dist/es/packages/step/step.js

@@ -12,7 +12,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     value: 0,
     icon: null
 });
-export var Step = function(props) {
+export var Step = function Step(props) {
     var _$_object_spread = _object_spread({}, defaultProps, props), type = _$_object_spread.type, title = _$_object_spread.title, description = _$_object_spread.description, value = _$_object_spread.value, icon = _$_object_spread.icon, className = _$_object_spread.className, style = _$_object_spread.style;
     var parent = useContext(DataContext);
     var _parent_propSteps = parent.propSteps, parentType = _parent_propSteps.type, parentValue = _parent_propSteps.value, status = _parent_propSteps.status, parentIcon = _parent_propSteps.icon, onStepClick = _parent_propSteps.onStepClick;
@@ -46,8 +46,7 @@ export var Step = function(props) {
         type,
         className,
         description,
-        classPrefix,
-        parentType
+        classPrefix
     ]);
     // 头部渲染
     var renderHeadType = useMemo(function() {
@@ -70,10 +69,7 @@ export var Step = function(props) {
     }, [
         type,
         value,
-        icon,
-        parentIcon,
-        parentType,
-        classPrefix
+        icon
     ]);
     // 内容渲染
     var renderContent = useMemo(function() {
@@ -87,8 +83,7 @@ export var Step = function(props) {
         }, description));
     }, [
         title,
-        description,
-        classPrefix
+        description
     ]);
     return /*#__PURE__*/ React.createElement(View, {
         className: classes,

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

@@ -86,11 +86,9 @@
   }
 
   &-title {
-    height: 14px;
     line-height: 14px;
     font-size: $steps-base-title-font-size;
     color: $steps-base-title-color;
-    overflow: hidden;
     white-space: nowrap;
   }
 

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

@@ -73,11 +73,9 @@
   z-index: 1;
 }
 .nut-step-title {
-  height: 14px;
   line-height: 14px;
   font-size: var(--nutui-steps-base-title-font-size, var(--nutui-font-size-s, 12px));
   color: var(--nutui-steps-base-title-color, var(--nutui-color-title, #1a1a1a));
-  overflow: hidden;
   white-space: nowrap;
 }
 .nut-step-description {

package/dist/es/packages/step/style/style.harmony.css

@@ -73,11 +73,9 @@
   z-index: 1;
 }
 .nut-step-title {
-  height: 14px;
   line-height: 14px;
   font-size: var(--nutui-steps-base-title-font-size, var(--nutui-font-size-s, 12px));
   color: var(--nutui-steps-base-title-color, var(--nutui-color-title, #1a1a1a));
-  overflow: hidden;
   white-space: nowrap;
 }
 .nut-step-description {

package/dist/es/packages/step/style-jmapp/step.scss

@@ -86,11 +86,9 @@
   }
 
   &-title {
-    height: 14px;
     line-height: 14px;
     font-size: $steps-base-title-font-size;
     color: $steps-base-title-color;
-    overflow: hidden;
     white-space: nowrap;
   }
 

package/dist/es/packages/step/style-jmapp/style.css

@@ -73,11 +73,9 @@
   z-index: 1;
 }
 .nut-step-title {
-  height: 14px;
   line-height: 14px;
   font-size: var(--nutui-steps-base-title-font-size, var(--nutui-font-text-small));
   color: var(--nutui-steps-base-title-color, var(--nutui-color-title));
-  overflow: hidden;
   white-space: nowrap;
 }
 .nut-step-description {

package/dist/es/packages/step/style-jrkf/step.scss

@@ -86,11 +86,9 @@
   }
 
   &-title {
-    height: 14px;
     line-height: 14px;
     font-size: $steps-base-title-font-size;
     color: $steps-base-title-color;
-    overflow: hidden;
     white-space: nowrap;
   }
 

package/dist/es/packages/step/style-jrkf/style.css

@@ -73,11 +73,9 @@
   z-index: 1;
 }
 .nut-step-title {
-  height: 14px;
   line-height: 14px;
   font-size: var(--nutui-steps-base-title-font-size, var(--nutui-font-text-small));
   color: var(--nutui-steps-base-title-color, var(--nutui-color-title));
-  overflow: hidden;
   white-space: nowrap;
 }
 .nut-step-description {

package/dist/es/packages/steps/steps.js

@@ -15,7 +15,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     value: 0,
     icon: null
 });
-export var Steps = function(props) {
+export var Steps = function Steps(props) {
     var propSteps = _object_spread({}, defaultProps, props);
     var direction = propSteps.direction, value = propSteps.value, layout = propSteps.layout, status = propSteps.status, type = propSteps.type, className = propSteps.className, children = propSteps.children, onStepClick = propSteps.onStepClick, restProps = _object_without_properties(propSteps, [
         "direction",

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

@@ -128,7 +128,7 @@
 
         &-head {
           justify-content: center;
-          margin-bottom: 6px;
+          margin-bottom: 5px;
 
           &-dot-wrap,
           &-icon-wrap,
@@ -151,7 +151,14 @@
         &-main {
           align-items: center;
           margin-left: 0;
-          margin-top: 2px;
+        }
+
+        &-title {
+          height: auto;
+          line-height: 20px;
+          white-space: normal;
+          overflow-wrap: break-word;
+          text-align: center;
         }
       }
 
@@ -212,7 +219,7 @@
       &-head {
         align-items: center;
         justify-content: center;
-        height: 18px;
+        height: 20px;
 
         &-icon {
           width: $steps-vertical-head-icon-size;

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

@@ -95,7 +95,7 @@
 }
 .nut-steps-horizontal-double .nut-step-head {
   justify-content: center;
-  margin-bottom: 6px;
+  margin-bottom: 5px;
 }
 .nut-steps-horizontal-double .nut-step-head-dot-wrap, .nut-steps-horizontal-double .nut-step-head-icon-wrap, .nut-steps-horizontal-double .nut-step-head-text-wrap {
   background-color: var(--nutui-steps-background-color, #ffffff);
@@ -112,7 +112,13 @@
 .nut-steps-horizontal-double .nut-step-main {
   align-items: center;
   margin-left: 0;
-  margin-top: 2px;
+}
+.nut-steps-horizontal-double .nut-step-title {
+  height: auto;
+  line-height: 20px;
+  white-space: normal;
+  overflow-wrap: break-word;
+  text-align: center;
 }
 .nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-head, .nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-line {
   height: var(--nutui-steps-base-head-icon-size-right, 20px);
@@ -131,7 +137,7 @@
   flex-direction: column;
 }
 .nut-steps-vertical .nut-step {
-  padding-bottom: var(--nutui-steps-vertical-item-padding-bottom, 13px);
+  padding-bottom: var(--nutui-steps-vertical-item-padding-bottom, 12px);
 }
 .nut-steps-vertical .nut-step-last {
   padding-bottom: 0 !important;
@@ -147,7 +153,7 @@
 .nut-steps-vertical .nut-step-head {
   align-items: center;
   justify-content: center;
-  height: 18px;
+  height: 20px;
 }
 .nut-steps-vertical .nut-step-head-icon {
   width: var(--nutui-steps-vertical-item-icon-size, 20px);
@@ -166,18 +172,18 @@
 .nut-steps-vertical .nut-step-title {
   display: flex;
   align-items: center;
-  height: var(--nutui-steps-vertical-line-height, 18px);
+  height: var(--nutui-steps-vertical-line-height, 20px);
   font-size: var(--nutui-steps-vertical-title-font-size, var(--nutui-font-size-l, 15px));
   /* #ifndef dynamic*/
   overflow: auto;
   /* #endif */
   font-weight: 500;
-  margin-bottom: var(--nutui-steps-vertical-title-margin-bottom, 4px);
+  margin-bottom: var(--nutui-steps-vertical-title-margin-bottom, 3px);
 }
 .nut-steps-vertical .nut-step-description {
   margin: var(--nutui-steps-vertical-description-margin, 0 0 1px);
   height: auto;
-  line-height: var(--nutui-steps-vertical-line-height, 18px);
+  line-height: var(--nutui-steps-vertical-line-height, 20px);
   color: var(--nutui-color-title, #1a1a1a);
   font-size: var(--nutui-steps-vertical-description-font-size, var(--nutui-font-size-base, 14px));
   box-sizing: border-box;