@nutui/nutui-react-taro 4.0.0-beta.2 → 4.0.0-beta.3

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-elevator {
   position: relative;
   display: flex;
@@ -90,7 +86,7 @@ page {
   width: var(--nutui-elevator-list-item-code-current-width, calc(45px * var(--nut-scale-f, 1)));
   height: var(--nutui-elevator-list-item-code-current-height, calc(45px * var(--nut-scale-f, 1)));
   border-radius: var(--nutui-elevator-list-item-code-current-border-radius, 50%);
-  background: var(--nutui-elevator-list-item-code-current-bg-color, var(--nutui-color-text-disabled, #c2c4cc));
+  background: var(--nutui-elevator-list-item-code-current-bg-color, var(--nutui-color-text-disabled, #b4b8bf));
   box-shadow: 0 calc(3px * var(--nut-scale-f, 1)) calc(3px * var(--nut-scale-f, 1)) calc(1px * var(--nut-scale-f, 1)) rgb(240, 240, 240);
   color: var(--nutui-elevator-list-item-code-current-color, #ffffff);
 }

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-elevator {
   position: relative;
   display: flex;
@@ -90,7 +86,7 @@ page {
   width: var(--nutui-elevator-list-item-code-current-width, calc(45px * var(--nut-scale-f, 1)));
   height: var(--nutui-elevator-list-item-code-current-height, calc(45px * var(--nut-scale-f, 1)));
   border-radius: var(--nutui-elevator-list-item-code-current-border-radius, 50%);
-  background: var(--nutui-elevator-list-item-code-current-bg-color, var(--nutui-color-text-disabled, #c2c4cc));
+  background: var(--nutui-elevator-list-item-code-current-bg-color, var(--nutui-color-text-disabled, #b4b8bf));
   box-shadow: 0 calc(3px * var(--nut-scale-f, 1)) calc(3px * var(--nut-scale-f, 1)) calc(1px * var(--nut-scale-f, 1)) rgb(240, 240, 240);
   color: var(--nutui-elevator-list-item-code-current-color, #ffffff);
 }

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-ellipsis {
   display: flex;
 }

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-ellipsis {
   display: flex;
 }

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-empty {
   box-sizing: border-box;
   width: 100%;

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-button {
   position: relative;
   display: flex;
@@ -121,20 +117,20 @@ page {
 .nut-button-default {
   padding: var(--nutui-button-default-padding, 0px calc(12px * var(--nut-scale-f, 1)));
   border-style: solid;
-  border-color: var(--nutui-button-default-border-color, var(--nutui-color-text-disabled, #c2c4cc));
+  border-color: var(--nutui-button-default-border-color, var(--nutui-color-text-disabled, #b4b8bf));
 }
 .nut-button-default-disabled, .nut-button-default-solid-disabled {
-  color: var(--nutui-button-primary-color, #ffffff);
-  background: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
-  border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
+  background: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #b4b8bf));
+  border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #b4b8bf));
 }
 .nut-button-default-none-disabled {
   color: var(--nutui-button-default-disabled-color, var(--nutui-color-text-help, #888b94));
 }
 .nut-button-default-outline-disabled, .nut-button-default-dashed-disabled {
   background: transparent;
-  color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
-  border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #b4b8bf));
+  border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #b4b8bf));
 }
 .nut-button-default:active:not(.nut-button-disabled):not(.nut-button-loading) {
   background: var(--nutui-button-default-pressed, var(--nutui-color-default-pressed, #e6e6e6));
@@ -278,16 +274,16 @@ page {
   font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-button-primary {
-  color: var(--nutui-button-primary-color, #ffffff);
+  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
   background: var(--nutui-button-primary-background-color, var(--nutui-color-primary, #ff0f23));
   background-origin: border-box;
   border-color: transparent;
 }
 .nut-button-primary-children {
-  color: var(--nutui-button-primary-color, #ffffff);
+  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
 }
 .nut-button-primary-disabled, .nut-button-primary-solid-disabled {
-  color: var(--nutui-button-primary-color, #ffffff);
+  color: var(--nutui-button-primary-color, var(--nutui-color-primary-text, #ffffff));
   background: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ff91a5));
   border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ff91a5));
 }
@@ -347,16 +343,16 @@ page {
   background: var(--nutui-color-primary-light-pressed, #ffe8ee);
 }
 .nut-button-success {
-  color: var(--nutui-button-success-color, #ffffff);
+  color: var(--nutui-button-success-color, var(--nutui-color-primary-text, #ffffff));
   background: var(--nutui-button-success-background-color, var(--nutui-color-success, #0acc2a));
   background-origin: border-box;
   border-color: transparent;
 }
 .nut-button-success-children {
-  color: var(--nutui-button-success-color, #ffffff);
+  color: var(--nutui-button-success-color, var(--nutui-color-primary-text, #ffffff));
 }
 .nut-button-success-disabled, .nut-button-success-solid-disabled {
-  color: var(--nutui-button-success-color, #ffffff);
+  color: var(--nutui-button-success-color, var(--nutui-color-primary-text, #ffffff));
   background: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
   border-color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae));
 }
@@ -390,16 +386,16 @@ page {
   background: var(--nutui-button-success-pressed, var(--nutui-color-success-pressed, #00801e));
 }
 .nut-button-info {
-  color: var(--nutui-button-info-color, #ffffff);
+  color: var(--nutui-button-info-color, var(--nutui-color-primary-text, #ffffff));
   background: var(--nutui-button-info-background-color, var(--nutui-color-info-background, #0c82f7));
   background-origin: border-box;
   border-color: transparent;
 }
 .nut-button-info-children {
-  color: var(--nutui-button-info-color, #ffffff);
+  color: var(--nutui-button-info-color, var(--nutui-color-primary-text, #ffffff));
 }
 .nut-button-info-disabled, .nut-button-info-solid-disabled {
-  color: var(--nutui-button-info-color, #ffffff);
+  color: var(--nutui-button-info-color, var(--nutui-color-primary-text, #ffffff));
   background: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
   border-color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8));
 }
@@ -433,16 +429,16 @@ page {
   background: var(--nutui-button-info-pressed, var(--nutui-color-info-pressed, #496af2));
 }
 .nut-button-danger {
-  color: var(--nutui-button-danger-color, #ffffff);
+  color: var(--nutui-button-danger-color, var(--nutui-color-primary-text, #ffffff));
   background: var(--nutui-button-danger-background-color, var(--nutui-color-danger, #ff0f23));
   background-origin: border-box;
   border-color: transparent;
 }
 .nut-button-danger-children {
-  color: var(--nutui-button-danger-color, #ffffff);
+  color: var(--nutui-button-danger-color, var(--nutui-color-primary-text, #ffffff));
 }
 .nut-button-danger-disabled, .nut-button-danger-solid-disabled {
-  color: var(--nutui-button-danger-color, #ffffff);
+  color: var(--nutui-button-danger-color, var(--nutui-color-primary-text, #ffffff));
   background: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ff91a5)));
   border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ff91a5)));
 }
@@ -476,16 +472,16 @@ page {
   background: var(--nutui-button-danger-pressed, var(--nutui-color-danger-pressed, #ff3333));
 }
 .nut-button-warning {
-  color: var(--nutui-button-warning-color, #ffffff);
+  color: var(--nutui-button-warning-color, var(--nutui-color-primary-text, #ffffff));
   background: var(--nutui-button-warning-background-color, var(--nutui-color-warning, #ffaa00));
   background-origin: border-box;
   border-color: transparent;
 }
 .nut-button-warning-children {
-  color: var(--nutui-button-warning-color, #ffffff);
+  color: var(--nutui-button-warning-color, var(--nutui-color-primary-text, #ffffff));
 }
 .nut-button-warning-disabled, .nut-button-warning-solid-disabled {
-  color: var(--nutui-button-warning-color, #ffffff);
+  color: var(--nutui-button-warning-color, var(--nutui-color-primary-text, #ffffff));
   background: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
   border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9));
 }

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-fixednav {
   position: fixed;
   z-index: var(--nutui-fixednav-index, 900);

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-overlay {
   position: fixed;
   top: 0;
@@ -103,7 +99,7 @@ page {
   left: -50%;
   right: -50%;
   transform: scale(0.5);
-  border: var(--nutui-badge-border, calc(1px * var(--nut-scale-f, 1)) solid #ffffff);
+  border: var(--nutui-badge-border, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary-text, #ffffff));
   border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, calc(14px * var(--nut-scale-f, 1))));
 }
 .nut-badge-sup {
@@ -117,7 +113,7 @@ page {
   min-width: var(--nutui-badge-min-width, calc(6px * var(--nut-scale-f, 1)));
   padding: var(--nutui-badge-padding, calc(1px * var(--nut-scale-f, 1)) calc(4px * var(--nut-scale-f, 1)));
   box-sizing: border-box;
-  color: var(--nutui-badge-color, #ffffff);
+  color: var(--nutui-badge-color, var(--nutui-color-primary-text, #ffffff));
   font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxxs, calc(9px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
   line-height: 12px;
   white-space: nowrap;
@@ -127,7 +123,7 @@ page {
   z-index: 1;
 }
 .nut-badge-disabled {
-  background: var(--nutui-badge-background-disabled-color, var(--nutui-color-text-disabled, #c2c4cc));
+  background: var(--nutui-badge-background-disabled-color, var(--nutui-color-text-disabled, #b4b8bf));
 }
 .nut-badge-number {
   font-family: "JDZH-Regular";
@@ -145,7 +141,7 @@ page {
   border-radius: 50%;
 }
 .nut-badge-dot::after {
-  border: var(--nutui-badge-dot-border, calc(1px * var(--nut-scale-f, 1)) solid #ffffff);
+  border: var(--nutui-badge-dot-border, calc(1px * var(--nut-scale-f, 1)) solid var(--nutui-color-primary-text, #ffffff));
   border-radius: 50%;
 }
 .nut-badge-dot-normal {
@@ -164,7 +160,7 @@ page {
   height: var(--nutui-badge-dot-large-width, calc(8px * var(--nut-scale-f, 1)));
 }
 .nut-badge-outline {
-  background: #ffffff;
+  background: var(--nutui-color-primary-text, #ffffff);
   color: var(--nutui-badge-outline-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-badge-outline::after {

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

@@ -6,9 +6,4 @@ page {
   --nut-icon-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
   --nut-icon-width: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
-}
-
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
+}

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-cell-group {
   display: block;
 }

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-form-item {
   display: flex;
   line-height: unset;

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-form-item {
   display: flex;
   line-height: unset;

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-grid {
   display: flex;
   flex-direction: row;

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-grid-item {
   display: flex;
   flex-direction: column;

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-grid-item {
   display: flex;
   flex-direction: column;

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-grid-item {
   display: flex;
   flex-direction: column;

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-hoverbutton {
   display: flex;
   flex-direction: column;

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-hoverbutton-item-container {
   width: var(--nutui-hoverbutton-item-size, calc(40px * var(--nut-scale-f, 1)));
   height: var(--nutui-hoverbutton-item-size, calc(40px * var(--nut-scale-f, 1)));

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-hoverbutton-item-container {
   width: var(--nutui-hoverbutton-item-size, calc(40px * var(--nut-scale-f, 1)));
   height: var(--nutui-hoverbutton-item-size, calc(40px * var(--nut-scale-f, 1)));

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-hoverbutton-item-container {
   width: var(--nutui-hoverbutton-item-size, calc(40px * var(--nut-scale-f, 1)));
   height: var(--nutui-hoverbutton-item-size, calc(40px * var(--nut-scale-f, 1)));

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-image {
   display: block;
   position: relative;

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-image {
   display: block;
   position: relative;

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

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-imagepreview {
   width: 100%;
   height: 100%;

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

@@ -9,10 +9,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-overlay {
   position: fixed;
   top: 0;
@@ -424,59 +420,87 @@ page {
   align-items: center;
 }
 .nut-indicator-fixed-width {
-  width: 21px;
+  width: var(--nutui-indicator-track-width, calc(24px * var(--nut-scale-f, 1)));
 }
 .nut-indicator-dot, .nut-indicator-line {
   display: inline-block;
   vertical-align: middle;
-  width: var(--nutui-indicator-dot-size, calc(3px * var(--nut-scale-f, 1)));
-  height: var(--nutui-indicator-dot-size, calc(3px * var(--nut-scale-f, 1)));
+  width: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
   border-radius: 50%;
-  background-color: var(--nutui-color-border-disabled, #c2c4cc);
+  background-color: var(--nutui-indicator-dot-inactive-color, var(--nutui-color-background-component, #f0f2f7));
+  border: var(--nutui-indicator-dot-border, calc(0.33px * var(--nut-scale-f, 1)) solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  box-sizing: border-box;
   margin-left: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1))));
-  opacity: 0.4;
 }
 .nut-indicator-dot-0, .nut-indicator-line-0 {
   margin-left: 0px;
 }
 .nut-indicator-dot-active, .nut-indicator-line-active {
-  width: var(--nutui-indicator-dot-active-size, calc(6px * var(--nut-scale-f, 1)));
+  width: var(--nutui-indicator-dot-active-size, calc(8px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
   border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
   background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23));
-  opacity: 1;
+  border: var(--nutui-indicator-dot-border, calc(0.33px * var(--nut-scale-f, 1)) solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 .nut-indicator-fixed-width .nut-indicator-dot {
-  width: 12px;
+  width: var(--nutui-indicator-dual-screen-inactive-width, calc(16px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
   border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
 }
 .nut-indicator-fixed-width .nut-indicator-dot-active {
-  width: 6px;
+  width: var(--nutui-indicator-dot-active-size, calc(8px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-indicator-vertical.nut-indicator-fixed-width {
   justify-content: flex-start;
-  height: 21px;
+  height: var(--nutui-indicator-track-width, calc(24px * var(--nut-scale-f, 1)));
   width: auto;
 }
 .nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot {
-  width: 3px;
-  height: 12px;
+  width: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dual-screen-inactive-width, calc(16px * var(--nut-scale-f, 1)));
   border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
 }
 .nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot-active {
-  height: 6px;
-}
-.nut-indicator-vertical.nut-indicator-fixed-width.nut-indicator-fixed-width.nut-indicator-white .nut-indicator-dot-active {
-  height: 6px;
+  width: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-active-size, calc(8px * var(--nut-scale-f, 1)));
 }
 .nut-indicator-line {
-  width: var(--nutui-indicator-dot-active-size, calc(6px * var(--nut-scale-f, 1)));
+  width: var(--nutui-indicator-slider-width, calc(8px * var(--nut-scale-f, 1)));
   margin: 0;
   border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
   background-color: transparent;
+  border: none;
 }
 .nut-indicator-line-active {
+  position: relative;
+  z-index: 1;
   transition: transform 0.3s ease-in-out;
   background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23));
+  border: var(--nutui-indicator-dot-border, calc(0.33px * var(--nut-scale-f, 1)) solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  transform: translateX(calc(var(--nutui-indicator-current, 0) / (var(--nutui-indicator-total, 2) - 1) * (var(--nutui-indicator-track-width, calc(24px * var(--nut-scale-f, 1))) - var(--nutui-indicator-slider-width, calc(8px * var(--nut-scale-f, 1))))));
+}
+.nut-indicator-outside {
+  margin-top: var(--nutui-indicator-placement-gap, calc(8px * var(--nut-scale-f, 1)));
+  margin-bottom: var(--nutui-indicator-placement-safe-gap, calc(12px * var(--nut-scale-f, 1)));
+  justify-content: center;
+}
+.nut-indicator-inside-top-right {
+  position: absolute;
+  top: var(--nutui-indicator-placement-gap, calc(8px * var(--nut-scale-f, 1)));
+  right: var(--nutui-indicator-placement-gap, calc(8px * var(--nut-scale-f, 1)));
+}
+.nut-indicator-inside-bottom-center {
+  position: absolute;
+  bottom: var(--nutui-indicator-placement-gap, calc(8px * var(--nut-scale-f, 1)));
+  left: 50%;
+  transform: translateX(-50%);
+}
+.nut-indicator-inside-bottom-left {
+  position: absolute;
+  bottom: var(--nutui-indicator-placement-gap, calc(8px * var(--nut-scale-f, 1)));
+  left: var(--nutui-indicator-placement-gap, calc(8px * var(--nut-scale-f, 1)));
 }
 
 .nut-indicator-track {
@@ -490,32 +514,30 @@ page {
   height: 100%;
   box-sizing: border-box;
   border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
-  background-color: var(--nutui-color-border-disabled, #c2c4cc);
-  opacity: 0.4;
+  background-color: var(--nutui-indicator-dot-inactive-color, var(--nutui-color-background-component, #f0f2f7));
+  border: var(--nutui-indicator-dot-border, calc(0.33px * var(--nut-scale-f, 1)) solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 
 .nut-indicator-white .nut-indicator-dot, .nut-indicator-white .nut-indicator-line {
   position: relative;
-  /* #ifndef dynamic*/
-  box-sizing: content-box;
-  /* #endif */
-  background: rgba(255, 255, 255, 0.4);
-  opacity: 1;
+  background: var(--nutui-color-primary-text, #ffffff);
+  opacity: 0.4;
 }
 .nut-indicator-white .nut-indicator-line {
   opacity: 0;
 }
 .nut-indicator-white .nut-indicator-line-active {
   opacity: 1;
-  background: rgb(255, 255, 255);
+  background: var(--nutui-color-primary-text, #ffffff);
 }
 .nut-indicator-white .nut-indicator-dot-active {
-  background: rgb(255, 255, 255);
+  background: var(--nutui-color-primary-text, #ffffff);
+  opacity: 1;
 }
 
 .nut-indicator-track.nut-indicator-white:after {
-  border: 1px solid rgba(0, 0, 0, 0.06);
-  background: rgba(255, 255, 255, 0.4);
+  background: var(--nutui-color-primary-text, #ffffff);
+  opacity: 0.4;
 }
 
 .nut-indicator-vertical {
@@ -532,12 +554,15 @@ page {
   margin-top: 0px;
 }
 .nut-indicator-vertical .nut-indicator-dot-active {
-  width: var(--nutui-indicator-dot-size, calc(3px * var(--nut-scale-f, 1)));
-  height: var(--nutui-indicator-dot-active-size, calc(6px * var(--nut-scale-f, 1)));
+  width: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-active-size, calc(8px * var(--nut-scale-f, 1)));
 }
 .nut-indicator-vertical.nut-indicator-track .nut-indicator-line {
-  width: var(--nutui-indicator-dot-size, calc(3px * var(--nut-scale-f, 1)));
-  height: var(--nutui-indicator-dot-active-size, calc(6px * var(--nut-scale-f, 1)));
+  width: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-slider-width, calc(8px * var(--nut-scale-f, 1)));
+}
+.nut-indicator-vertical.nut-indicator-track .nut-indicator-line-active {
+  transform: translateY(calc(var(--nutui-indicator-current, 0) / (var(--nutui-indicator-total, 2) - 1) * (var(--nutui-indicator-track-width, calc(24px * var(--nut-scale-f, 1))) - var(--nutui-indicator-slider-width, calc(8px * var(--nut-scale-f, 1))))));
 }
 
 [dir=rtl] .nut-indicator-dot-0,
@@ -545,6 +570,16 @@ page {
   margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1))));
   margin-left: 0px;
 }
+[dir=rtl] .nut-indicator-inside-top-right,
+.nut-rtl .nut-indicator-inside-top-right {
+  right: auto;
+  left: var(--nutui-indicator-placement-gap, calc(8px * var(--nut-scale-f, 1)));
+}
+[dir=rtl] .nut-indicator-inside-bottom-left,
+.nut-rtl .nut-indicator-inside-bottom-left {
+  left: auto;
+  right: var(--nutui-indicator-placement-gap, calc(8px * var(--nut-scale-f, 1)));
+}
 
 .nut-swiper {
   width: 100%;