Merge branch 'next' of https://github.com/jdf2e/nutui into next

257e82d3 · Drjnigfubo · 64bb67e8 · ecd8fcc1 · 257e82d3 · 257e82d3
50 changed file
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
    "checked": "npm run generate:file && tsc",
    "checked:taro:vue": "npm run generate:file:taro:vue",
    "dev": "npm run checked && vite --open --force",
+    "dev:jdt": "npm run checked && vite --open --force --config vite.config.jdt.ts",
    "dev:taro:weapp": "npm run createTaroConfig && npm run checked:taro:vue && cd src/sites/mobile-taro/vue/ && npm run dev:weapp",
    "dev:taro:alipay": "npm run createTaroConfig && npm run checked:taro:vue && cd src/sites/mobile-taro/vue/ && npm run dev:alipay",
    "dev:taro:jd": "npm run createTaroConfig && npm run checked:taro:vue && cd src/sites/mobile-taro/vue/ && npm run dev:jd",

--- a/src/packages/__VUE/actionsheet/index.scss
+++ b/src/packages/__VUE/actionsheet/index.scss
@@ -53,8 +53,9 @@
  .nut-actionsheet-item {
    display: block;
    //   height: 24px;
-    padding: 10px;
+    padding: $actionsheet-item-padding;
    line-height: $actionsheet-item-line-height;
+    font-weight: $actionsheet-item-font-weight;
    font-size: $actionsheet-item-font-size;
    color: $actionsheet-item-font-color;
    text-align: center;
@@ -64,19 +65,22 @@
  }

  .desc {
-    font-size: $actionsheet-item-font-size;
-    color: #999;
+    font-weight: normal;
+    font-size: $actionsheet-item-desc-font-size;
+    color: $actionsheet-item-desc-font-color;
    cursor: default;
  }

  .subdesc {
    display: block;
+    line-height: $actionsheet-item-subdesc-line-height;
+    font-weight: normal;
    font-size: $actionsheet-item-subdesc-font-size;
-    color: #999;
+    color: $actionsheet-item-subdesc-font-color;
  }

  .nut-actionsheet-item-disabled {
-    color: #e1e1e1 !important;
+    color: $actionsheet-item-disabled-font-color !important;
    cursor: not-allowed;
  }
  .nut-actionsheet-item-loading {

--- a/src/packages/__VUE/badge/demo.vue
+++ b/src/packages/__VUE/badge/demo.vue
@@ -11,6 +11,9 @@
      <nut-badge value="NEW">
        <nut-avatar icon="my" shape="square"></nut-avatar>
      </nut-badge>
+      <nut-badge value="NEW" bubble>
+        <nut-avatar icon="my" shape="square"></nut-avatar>
+      </nut-badge>
      <nut-badge dot>
        <nut-avatar icon="my" shape="square"></nut-avatar>
      </nut-badge>

--- a/src/packages/__VUE/badge/doc.en-US.md
+++ b/src/packages/__VUE/badge/doc.en-US.md
@@ -218,6 +218,7 @@ app.use(Badge);
 | max     | When value is a numeric value, the maximum value                     | Number  | `10000`   |
 | z-index | badge z-index                          | Number  | `10`      |
 | dot     | whether to dot                                 | Boolean | `false`   |
+| bubble  | whether to bubble                                 | Boolean | `false`   |
 | hidden  | whether to hide                                   | Boolean | `false`   |
 | top     | Up and down offset, support unit setting, for example: 5px | Number  | `0`       |
 | right   | Left and right offset, support unit setting, for example: 5px | Number  | `0`       |

--- a/src/packages/__VUE/badge/doc.md
+++ b/src/packages/__VUE/badge/doc.md
@@ -218,6 +218,7 @@ app.use(Badge);
 | max     | value 为数值时，最大值                     | Number  | `10000`   |
 | z-index | 徽标的 z-index 值                          | Number  | `10`      |
 | dot     | 是否为小点                                 | Boolean | `false`   |
+| bubble  | 是否为气泡形状                                 | Boolean | `false`   |
 | hidden  | 是否隐藏                                   | Boolean | `false`   |
 | top     | 上下偏移量，支持单位设置，可设置为：5px 等 | Number  | `0`       |
 | right   | 左右偏移量，支持单位设置，可设置为：5px 等 | Number  | `0`       |

--- a/src/packages/__VUE/badge/index.scss
+++ b/src/packages/__VUE/badge/index.scss
@@ -24,6 +24,8 @@
    background: $badge-background-color;
    padding: $badge-padding;
    text-align: center;
+    line-height: $badge-line-height;
+    border: $badge-border;
    border-radius: $badge-border-radius;
    font-size: $badge-font-size;
    font-weight: normal;
@@ -38,4 +40,8 @@
    border-radius: $badge-dot-border-radius;
    padding: $badge-dot-padding;
  }
+
+  .is-bubble {
+    border-bottom-left-radius: 0;
+  }
 }
--- a/src/packages/__VUE/badge/index.taro.vue
+++ b/src/packages/__VUE/badge/index.taro.vue
@@ -8,7 +8,7 @@
      v-show="!hidden && (content || dot)"
      v-text="content"
      class="nut-badge__content sup"
-      :class="{ 'is-dot': dot }"
+      :class="{ 'is-dot': dot, 'is-bubble': !dot && bubble }"
      :style="stl"
    >
    </view>
@@ -32,6 +32,10 @@ export default create({
      type: Boolean,
      default: false
    },
+    bubble: {
+      type: Boolean,
+      default: false
+    },
    hidden: {
      type: Boolean,
      default: false

--- a/src/packages/__VUE/badge/index.vue
+++ b/src/packages/__VUE/badge/index.vue
@@ -8,7 +8,7 @@
      v-show="!hidden && (content || dot)"
      v-text="content"
      class="nut-badge__content sup"
-      :class="{ 'is-dot': dot }"
+      :class="{ 'is-dot': dot, 'is-bubble': !dot && bubble }"
      :style="stl"
    >
    </view>
@@ -32,6 +32,10 @@ export default create({
      type: Boolean,
      default: false
    },
+    bubble: {
+      type: Boolean,
+      default: false
+    },
    hidden: {
      type: Boolean,
      default: false

--- a/src/packages/__VUE/calendar/doc.en-US.md
+++ b/src/packages/__VUE/calendar/doc.en-US.md
@@ -643,3 +643,4 @@ Through [ref](https://vuejs.org/guide/essentials/template-refs.html), you can ge
 | Name | Description             | Arguments          |
 |--------|------------------|---------------|
 | scrollToDate   | Scroll to the month of the specified date | string:'2021-12-30' |
+| initPosition`v3.3.4`   | Initialize scroll position |  |
--- a/src/packages/__VUE/calendar/doc.md
+++ b/src/packages/__VUE/calendar/doc.md
@@ -636,3 +636,4 @@ export default {
 | 方法名 | 说明             | 参数          |
 |--------|------------------|---------------|
 | scrollToDate   | 滚动到指定日期所在月 | string:'2021-12-30' |
+| initPosition`v3.3.4`   | 初始化滚动位置 | 无 |
--- a/src/packages/__VUE/calendar/index.taro.vue
+++ b/src/packages/__VUE/calendar/index.taro.vue
@@ -184,8 +184,12 @@ export default create({
    const scrollToDate = (date: string) => {
      calendarRef.value?.scrollToDate(date);
    };
+    const initPosition = () => {
+      calendarRef.value?.initPosition();
+    };
    useExpose({
-      scrollToDate
+      scrollToDate,
+      initPosition
    });
    // methods
    const update = () => {

--- a/src/packages/__VUE/calendar/index.vue
+++ b/src/packages/__VUE/calendar/index.vue
@@ -183,8 +183,12 @@ export default create({
    const scrollToDate = (date: string) => {
      calendarRef.value?.scrollToDate(date);
    };
+    const initPosition = () => {
+      calendarRef.value?.initPosition();
+    };
    useExpose({
-      scrollToDate
+      scrollToDate,
+      initPosition
    });
    // methods
    const update = () => {

--- a/src/packages/__VUE/calendaritem/index.taro.vue
+++ b/src/packages/__VUE/calendaritem/index.taro.vue
@@ -623,9 +623,8 @@ export default create({
      let containerHeight = lastItem.cssHeight + lastItem.cssScrollHeight;

      state.containerHeight = `${containerHeight}px`;
-      state.scrollTop = Math.ceil(state.monthsData[state.currentIndex].cssScrollHeight);
+      initPosition();
      state.avgHeight = Math.floor(containerHeight / (monthsNum + 1));
-
      if (months?.value) {
        viewHeight.value = months.value.clientHeight;
      }
@@ -691,8 +690,12 @@ export default create({
        }
      });
    };
+    const initPosition = () => {
+      state.scrollTop = Math.ceil(state.monthsData[state.currentIndex].cssScrollHeight);
+    };
    useExpose({
-      scrollToDate
+      scrollToDate,
+      initPosition
    });
    const setDefaultRange = (monthsNum: number, current: number) => {
      let rangeArr: any[] = [];

--- a/src/packages/__VUE/calendaritem/index.vue
+++ b/src/packages/__VUE/calendaritem/index.vue
@@ -632,7 +632,7 @@ export default create({
        if (months?.value && monthsPanel?.value && viewArea?.value) {
          viewHeight.value = months.value.clientHeight;
          monthsPanel.value.style.height = `${containerHeight}px`;
-          months.value.scrollTop = state.monthsData[state.currentIndex].cssScrollHeight;
+          initPosition();
        }
      });
      state.avgHeight = Math.floor(containerHeight / (monthsNum + 1));
@@ -671,8 +671,14 @@ export default create({
        }
      });
    };
+    const initPosition = () => {
+      if (months?.value) {
+        months.value.scrollTop = state.monthsData[state.currentIndex].cssScrollHeight;
+      }
+    };
    useExpose({
-      scrollToDate
+      scrollToDate,
+      initPosition
    });
    // 设置当前可见月份
    const setDefaultRange = (monthsNum: number, current: number) => {

--- a/src/packages/__VUE/cell/demo.vue
+++ b/src/packages/__VUE/cell/demo.vue
@@ -52,10 +52,16 @@
          />
        </template>
      </nut-cell>
+      <nut-cell :title="translate('image')" :sub-title="translate('title1')">
+        <template v-slot:icon>
+          <div style="height: 40px; width: 40px; border-radius: 50%; background: #e5e5e5"></div>
+        </template>
+      </nut-cell>
    </nut-cell-group>

    <h2>{{ translate('displayIcon') }}</h2>
    <nut-cell :title="translate('name')" icon="my" :desc="translate('desc')" isLink> </nut-cell>
+    <nut-cell :title="translate('name')" icon="my" :desc="translate('desc')" isLink size="large"> </nut-cell>
    <h2>{{ translate('title6') }}</h2>
    <nut-cell desc-text-align="left" :desc="translate('desc')"></nut-cell>


--- a/src/packages/__VUE/cell/index.scss
+++ b/src/packages/__VUE/cell/index.scss
@@ -26,8 +26,29 @@
  &--large {
    font-size: $cell-large-title-font;
    padding: $cell-large-padding;
+    line-height: $cell-large-line-height;
    .nut-cell__title-desc {
      font-size: $cell-large-title-desc-font;
+      line-height: $cell-large-title-desc-line-height;
+    }
+
+    .nut-cell__icon {
+      margin: $cell-default-large-icon-margin;
+
+      .nut-icon {
+        width: $cell-default-large-icon-size;
+        height: $cell-default-large-icon-size;
+        line-height: $cell-default-large-icon-size;
+      }
+
+      .nutui-iconfont {
+        font-size: $cell-default-large-icon-font-size;
+      }
+    }
+
+    .nut-cell__link.nut-icon {
+      height: $cell-large-icon-link-height;
+      line-height: $cell-large-icon-link-height;
    }
  }

@@ -72,7 +93,17 @@
  &__icon {
    display: flex;
    flex-direction: row;
-    margin-right: $cell-default-icon-margin;
+    margin: $cell-default-icon-margin;
+
+    .nut-icon {
+      width: $cell-default-icon-size;
+      height: $cell-default-icon-size;
+      line-height: $cell-default-icon-size;
+    }
+
+    .nutui-iconfont {
+      font-size: $cell-default-icon-font-size;
+    }
  }

  &__title {
@@ -80,7 +111,9 @@
    flex-direction: column;
    flex: 1;
    &-desc {
+      line-height: $cell-title-desc-line-height;
      font-size: $cell-title-desc-font;
+      color: $cell-title-desc-color;
    }
  }
  &__value {
@@ -93,7 +126,13 @@
      color: $cell-color;
    }
  }
-  &__link {
-    color: #979797;
+  &__link.nut-icon {
+    color: $cell-icon-link-color;
+    margin: $cell-icon-link-margin;
+    width: $cell-icon-link-width;
+    min-width: 1em;
+    height: $cell-icon-link-height;
+    line-height: $cell-icon-link-height;
+    font-size: $cell-icon-link-font-size;
  }
 }
--- a/src/packages/__VUE/cellgroup/index.scss
+++ b/src/packages/__VUE/cellgroup/index.scss
@@ -5,9 +5,9 @@
    padding: $cell-group-title-padding;
    color: $cell-group-title-color;
    font-size: $cell-group-title-font-size;
+    font-weight: $cell-group-title-font-weight;
    line-height: $cell-group-title-line-height;
-    margin-top: 30px;
-    margin-bottom: 10px;
+    margin: $cell-group-title-margin;
  }
  &__desc {
    display: inherit;
@@ -15,8 +15,7 @@
    color: $cell-group-desc-color;
    font-size: $cell-group-desc-font-size;
    line-height: $cell-group-desc-line-height;
-    margin-top: 10px;
-    margin-bottom: 10px;
+    margin: $cell-group-desc-margin;
  }
  &__warp {
    display: inherit;

--- a/src/packages/__VUE/collapseitem/index.scss
+++ b/src/packages/__VUE/collapseitem/index.scss
@@ -73,7 +73,7 @@
    .subTitle {
      position: absolute;
      top: 50%;
-      right: 60px;
+      right: $collapse-item-sub-title-right;
      margin-top: -12px;
      color: $collapse-item-sub-title-color;
    }

--- a/src/packages/__VUE/collapseitem/index.taro.vue
+++ b/src/packages/__VUE/collapseitem/index.taro.vue
@@ -120,8 +120,8 @@ export default create({
      openExpanded: false,
      // classDirection: 'right',
      iconStyle: {
-        transform: 'rotate(0deg)',
-        marginTop: parent.props.iconHeght ? '-' + parent.props.iconHeght / 2 + 'px' : '-10px'
+        transform: 'translateY(-50%) rotate(0deg)'
+        // marginTop: parent.props.iconHeght ? '-' + parent.props.iconHeght / 2 + 'px' : '-10px'
      }
    });

@@ -157,9 +157,9 @@ export default create({
    // 手风琴模式
    const animation = () => {
      if (parent.props.icon && !proxyData.openExpanded) {
-        proxyData.iconStyle['transform'] = 'rotate(0deg)';
+        proxyData.iconStyle['transform'] = 'translateY(-50%) rotate(0deg)';
      } else {
-        proxyData.iconStyle['transform'] = 'rotate(' + parent.props.rotate + 'deg)';
+        proxyData.iconStyle['transform'] = 'translateY(-50%) rotate(' + parent.props.rotate + 'deg)';
      }
      nextTick(() => {
        // const query = Taro.createSelectorQuery();
@@ -191,7 +191,7 @@ export default create({
    const defaultOpen = () => {
      open();
      if (parent.props.icon) {
-        proxyData['iconStyle']['transform'] = 'rotate(' + parent.props.rotate + 'deg)';
+        proxyData['iconStyle']['transform'] = 'translateY(-50%) rotate(' + parent.props.rotate + 'deg)';
      }
    };


--- a/src/packages/__VUE/collapseitem/index.vue
+++ b/src/packages/__VUE/collapseitem/index.vue
@@ -112,8 +112,8 @@ export default create({
      openExpanded: false,
      // classDirection: 'right',
      iconStyle: {
-        transform: 'rotate(0deg)',
-        marginTop: parent.props.iconHeght ? '-' + parent.props.iconHeght / 2 + 'px' : '-10px'
+        transform: 'translateY(-50%) rotate(0deg)'
+        // marginTop: parent.props.iconHeght ? '-' + parent.props.iconHeght / 2 + 'px' : '-10px'
      }
    });

@@ -157,9 +157,9 @@ export default create({
        wrapperRefEle.style.willChange = 'height';
        wrapperRefEle.style.height = !proxyData.openExpanded ? 0 : contentHeight;
        if (parent.props.icon && !proxyData.openExpanded) {
-          proxyData.iconStyle['transform'] = 'rotate(0deg)';
+          proxyData.iconStyle['transform'] = 'translateY(-50%) rotate(0deg)';
        } else {
-          proxyData.iconStyle['transform'] = 'rotate(' + parent.props.rotate + 'deg)';
+          proxyData.iconStyle['transform'] = 'translateY(-50%) rotate(' + parent.props.rotate + 'deg)';
        }
      }
      if (!proxyData.openExpanded) {
@@ -175,7 +175,7 @@ export default create({
    const defaultOpen = () => {
      open();
      if (parent.props.icon) {
-        proxyData['iconStyle']['transform'] = 'rotate(' + parent.props.rotate + 'deg)';
+        proxyData['iconStyle']['transform'] = 'translateY(-50%) rotate(' + parent.props.rotate + 'deg)';
      }
    };


--- a/src/packages/__VUE/dialog/index.vue
+++ b/src/packages/__VUE/dialog/index.vue
@@ -6,6 +6,8 @@
    :lock-scroll="lockScroll"
    :pop-class="popClass"
    :style="popStyle"
+    :overlay-class="overlayClass"
+    :overlay-style="overlayStyle"
    round
    @click-overlay="closed"
    @click-close-icon="closed"

--- a/src/packages/__VUE/divider/index.scss
+++ b/src/packages/__VUE/divider/index.scss
@@ -8,7 +8,7 @@
  &::before,
  &::after {
    content: '';
-    border: $divider-line-height solid currentColor;
+    border: $divider-line-height solid $divider-border-color;
    border-width: $divider-line-height 0 0;
    height: $divider-line-height;
    flex: 1;

--- a/src/packages/__VUE/input/demo.vue
+++ b/src/packages/__VUE/input/demo.vue
@@ -25,8 +25,18 @@
    />
    <nut-input :label="translate('tel')" :placeholder="translate('telPlaceholder')" v-model="state.tel" type="tel" />
    <h2>{{ translate('title2') }}</h2>
-    <nut-input :label="translate('text')" :placeholder="translate('readonly')" v-model="state.readonly" readonly />
-    <nut-input :label="translate('text')" :placeholder="translate('disabled')" v-model="state.disabled" disabled />
+    <nut-input
+      :label="translate('text')"
+      :placeholder="translate('readonly')"
+      :modelValue="translate('readonly')"
+      readonly
+    />
+    <nut-input
+      :label="translate('text')"
+      :placeholder="translate('disabled')"
+      :modelValue="translate('disabled')"
+      disabled
+    />

    <h2>{{ translate('title3') }}</h2>
    <nut-input

--- a/src/packages/__VUE/input/index.scss
+++ b/src/packages/__VUE/input/index.scss
@@ -26,9 +26,9 @@ textarea {
 .nut-input {
  position: relative;
  width: 100%;
-  padding: 10px 25px;
+  padding: $input-padding;
  display: flex;
-  line-height: 24px;
+  line-height: $input-line-height;
  background: $white;
  font-size: $input-font-size;
  box-sizing: border-box;
@@ -39,6 +39,10 @@ textarea {
    border-bottom: 1px solid $input-border-bottom;
  }

+  .input-text::placeholder {
+    color: $input-placeholder-color;
+  }
+
  .input-text,
  &__text--readonly {
    width: 90%;
@@ -58,6 +62,7 @@ textarea {
    overflow: hidden;
    margin-right: 6px;
    text-align: left;
+    color: $input-label-color;
    .label-string {
      // overflow: hidden;
      // white-space: nowrap;
@@ -143,6 +148,11 @@ textarea {
      -webkit-text-fill-color: $input-disabled-color;
    }
  }
+  &-readonly {
+    input {
+      color: $input-readonly-color;
+    }
+  }
  &-error,
  &-error::placeholder {
    color: $input-required-color;

--- a/src/packages/__VUE/input/index.taro.vue
+++ b/src/packages/__VUE/input/index.taro.vue
@@ -297,6 +297,7 @@ export default create({
      return {
        [prefixCls]: true,
        center: props.center,
+        [`${prefixCls}-readonly`]: props.readonly,
        [`${prefixCls}-disabled`]: props.disabled,
        [`${prefixCls}-required`]: props.required,
        [`${prefixCls}-error`]: props.error,

--- a/src/packages/__VUE/input/index.vue
+++ b/src/packages/__VUE/input/index.vue
@@ -270,6 +270,7 @@ export default create({
      return {
        [prefixCls]: true,
        center: props.center,
+        [`${prefixCls}-readonly`]: props.readonly,
        [`${prefixCls}-disabled`]: props.disabled,
        [`${prefixCls}-required`]: props.required,
        [`${prefixCls}-error`]: props.error,

--- a/src/packages/__VUE/list/index.taro.vue
+++ b/src/packages/__VUE/list/index.taro.vue
@@ -29,7 +29,7 @@ export default create({
  props: {
    height: {
      type: [Number],
-      default: 0
+      default: 50
    },
    listData: {
      type: Array,
@@ -84,7 +84,7 @@ export default create({
    });

    const handleScrollEvent = async (e: any) => {
-      const scrollTop = e.detail ? e.detail.scrollTop : e.target.scrollTop;
+      const scrollTop = Math.max(e.detail ? e.detail.scrollTop : e.target.scrollTop, 0.1);
      state.start = Math.floor(scrollTop / props.height);
      if (end.value > state.list.length) {
        emit('scroll');

--- a/src/packages/__VUE/noticebar/demo.vue
+++ b/src/packages/__VUE/noticebar/demo.vue
@@ -2,6 +2,8 @@
  <div class="demo full">
    <h2>{{ translate('basic') }}</h2>
    <nut-noticebar :text="translate('text')"></nut-noticebar>
+    <p />
+    <nut-noticebar left-icon="close" :text="translate('text')"></nut-noticebar>

    <h2>{{ translate('scrollable') }}</h2>
    <nut-noticebar :text="translate('textShort')" :scrollable="true"> </nut-noticebar>

--- a/src/packages/__VUE/numberkeyboard/index.scss
+++ b/src/packages/__VUE/numberkeyboard/index.scss
@@ -44,7 +44,7 @@

  .number-board-body {
    display: flex;
-    padding: 6px 0 0 6px;
+    padding: $numberkeyboard-body-padding;

    .number-board {
      display: flex;
@@ -57,7 +57,7 @@
      flex: 1;
      flex-basis: 33%;
      box-sizing: border-box;
-      padding: 0 6px 6px 0;
+      padding: $numberkeyboard-wrapper-padding;

      .key {
        display: flex;
@@ -69,6 +69,7 @@
        background-color: $numberkeyboard-key-background-color;
        color: $numberkeyboard-key-font-size-color;
        border-radius: $numberkeyboard-key-border-radius;
+        box-shadow: $numberkeyboard-key-box-shadow;
        cursor: pointer;
      }


--- a/src/packages/__VUE/signature/index.vue
+++ b/src/packages/__VUE/signature/index.vue
@@ -142,10 +142,8 @@ export default create({
      }
      const _canvas = isCanvasBlank(canvas) ? '请绘制签名' : canvas;
      const _filePath = isCanvasBlank(canvas) ? '' : dataurl;
-      clear();
      emit('confirm', _canvas, _filePath);
-      // clear();
-      // emit('confirm', canvas, dataurl);
+      clear();
    };

    onMounted(() => {

--- a/src/packages/__VUE/step/index.scss
+++ b/src/packages/__VUE/step/index.scss
@@ -54,11 +54,13 @@
  &-title {
    display: block;
    margin-bottom: $steps-base-title-margin-bottom;
+    line-height: $steps-base-title-line-height;
    font-size: $steps-base-title-font-size;
    color: $steps-base-title-color;
  }
  &-content {
    display: block;
+    line-height: $steps-base-content-line-height;
    font-size: $steps-base-content-font-size;
    color: $steps-base-content-color;
  }
@@ -114,12 +116,16 @@
        color: $steps-wait-icon-color;
      }
    }
+    .nut-step-title {
+      color: $steps-wait-title-color;
+    }
    .nut-step-content {
      color: $steps-wait-content-color;
    }
  }
 }
 .nut-steps-horizontal {
+  padding: $steps-horizontal-padding;
  &.nut-steps-dot {
    .nut-step-head {
      margin-top: 7px;
@@ -172,6 +178,7 @@
  }
 }
 .nut-steps-vertical {
+  padding: $steps-vertical-padding;
  .nut-step {
    display: flex;
    height: 33.34%;
@@ -181,13 +188,23 @@
    display: inline-block;
    width: 1px;
    height: 100%;
-    background: #909ca4;
+    background: $steps-base-line-color;
  }
  .nut-step-main {
    display: inline-block;
-    padding-left: 6%;
+    padding: $steps-vertical-main-padding;
    text-align: left;
  }
+  .nut-step-title {
+    line-height: $steps-vertical-title-line-height;
+    font-size: $steps-vertical-title-font-size;
+  }
+  .nut-step-icon {
+    width: $steps-vertical-icon-width;
+    height: $steps-vertical-icon-height;
+    line-height: $steps-vertical-icon-line-height;
+    font-size: $steps-vertical-icon-font-size;
+  }
  &.nut-steps-dot {
    .nut-step-head {
      margin-top: 7px;

--- a/src/packages/__VUE/steps/demo.vue
+++ b/src/packages/__VUE/steps/demo.vue
@@ -167,6 +167,7 @@ export default createDemo({
  }
 }
 .steps-wrapper {
+  box-sizing: border-box;
  width: 100%;
  padding: 15px 0;
  background-color: #fff;

--- a/src/packages/__VUE/swiper/index.scss
+++ b/src/packages/__VUE/swiper/index.scss
@@ -20,7 +20,7 @@
    display: flex;
    position: absolute;
    left: 50%;
-    bottom: 12px;
+    bottom: $swiper-pagination-item-position;
    transform: translateX(-50%);
    i {
      width: $swiper-pagination-item-width;
@@ -34,7 +34,7 @@
  }
  &-pagination-vertical {
    top: 50%;
-    left: 12px;
+    left: $swiper-pagination-item-position;
    bottom: auto;
    flex-direction: column;
    -webkit-box-orient: vertical;

--- a/src/packages/__VUE/switch/index.scss
+++ b/src/packages/__VUE/switch/index.scss
@@ -26,10 +26,10 @@
      color: $white;
      font-size: $font-size-1;
      &.open {
-        transform: translateX(-16px);
+        transform: $switch-label-open-transform;
      }
      &.close {
-        transform: translateX(16px);
+        transform: $switch-label-close-transform;
      }
    }
  }

--- a/src/packages/__VUE/tabbar/demo.vue
+++ b/src/packages/__VUE/tabbar/demo.vue
@@ -9,6 +9,15 @@
      <nut-tabbar-item :tab-title="translate('title')" icon="cart"></nut-tabbar-item>
      <nut-tabbar-item :tab-title="translate('title')" icon="my"></nut-tabbar-item>
    </nut-tabbar>
+    <p></p>
+    <nut-tabbar @tab-switch="tabSwitch" size="24">
+      <nut-tabbar-item :tab-title="translate('title')" icon="home"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="category"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="find"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="cart"></nut-tabbar-item>
+      <nut-tabbar-item :tab-title="translate('title')" icon="my"></nut-tabbar-item>
+    </nut-tabbar>
+
    <h2>{{ translate('byName') }}</h2>

    <nut-tabbar @tab-switch="tabSwitch" v-model:visible="activeName">

--- a/src/packages/__VUE/tabbaritem/index.scss
+++ b/src/packages/__VUE/tabbaritem/index.scss
@@ -16,7 +16,7 @@
  align-items: center;

  &__icon--unactive {
-    color: $black;
+    color: $tabbar-unactive-color;
  }

  &_icon-box {
@@ -32,8 +32,9 @@
      border: 1px solid $white;
      border-radius: 7px;
      text-align: center;
-      top: -2px;
-      right: -7px;
+      top: $tabbar-tips-nums-top;
+      right: $tabbar-tips-nums-right;
+      left: $tabbar-tips-nums-left;
      box-shadow: 0 0 0 1px $white;
      font-size: $font-size-1;
      color: $white;
@@ -52,7 +53,7 @@
      color: #fff;
      top: 0;
      right: 0;
-      transform: translate(50%, -50%);
+      transform: $tabbar-tips-dot-transform;
    }

    &_num {

--- a/src/packages/__VUE/tabpane/index.scss
+++ b/src/packages/__VUE/tabpane/index.scss
@@ -8,7 +8,7 @@
  flex-shrink: 0;
  display: block;
  background-color: #fff;
-  padding: 24px 20px;
+  padding: $tabs-tabpane-padding;
  box-sizing: border-box;
  overflow: auto;
  height: 100%;

--- a/src/packages/__VUE/toast/index.scss
+++ b/src/packages/__VUE/toast/index.scss
@@ -37,7 +37,7 @@
  &-inner {
    display: inline-block;
    font-size: $toast-text-font-size;
-    min-width: 40%;
+    min-width: $toast-min-width;
    max-width: 65%;
    text-align: center;
    padding: $toast-inner-padding;
@@ -47,13 +47,19 @@
    color: $toast-font-color;
  }
  &-text {
+    display: block;
    font-size: $toast-text-font-size;
+    line-height: $toast-text-line-height;
    &:empty {
      margin-bottom: -8px;
    }
  }
  &-title {
    font-size: $toast-title-font-size;
+    line-height: $toast-title-line-height;
+    & + .nut-toast-text {
+      margin-top: $toast-title-margin-bottom;
+    }
    &:empty {
      margin-bottom: -8px;
    }

--- a/src/packages/styles/font/demo_index.html
+++ b/src/packages/styles/font/demo_index.html
@@ -822,9 +822,9 @@
 <pre><code class="language-css"
 >@font-face {
  font-family: 'nutui-iconfont';
-  src: url('iconfont.woff2?t=1668762221765') format('woff2'),
-       url('iconfont.woff?t=1668762221765') format('woff'),
-       url('iconfont.ttf?t=1668762221765') format('truetype');
+  src: url('https://storage.360buyimg.com/nutui/3x/static/iconfont.woff2?t=1668762221765') format('woff2'),
+       url('https://storage.360buyimg.com/nutui/3x/static/iconfont.woff?t=1668762221765') format('woff'),
+       url('https://storage.360buyimg.com/nutui/3x/static/iconfont.ttf?t=1668762221765') format('truetype');
 }
 </code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>

--- a/src/packages/styles/font/iconfont.css
+++ b/src/packages/styles/font/iconfont.css
 @font-face {
  font-family: "nutui-iconfont"; /* Project id 2166874 */
-  src: url('iconfont.woff2?t=1668762221765') format('woff2'),
-       url('iconfont.woff?t=1668762221765') format('woff'),
-       url('iconfont.ttf?t=1668762221765') format('truetype');
+  src: url('https://storage.360buyimg.com/nutui/3x/static/iconfont.woff2?t=1668762221765') format('woff2'),
+       url('https://storage.360buyimg.com/nutui/3x/static/iconfont.woff?t=1668762221765') format('woff'),
+       url('https://storage.360buyimg.com/nutui/3x/static/iconfont.ttf?t=1668762221765') format('truetype');
 }

 .nutui-iconfont {

--- a/src/packages/styles/variables-jdb.scss
+++ b/src/packages/styles/variables-jdb.scss
@@ -178,7 +178,9 @@ $button-small-round-border-radius: $button-border-radius !default;

 $cell-color: $title-color2 !default;
 $cell-title-font: $font-size-2 !default;
+$cell-title-desc-line-height: inherit !default;
 $cell-title-desc-font: $font-size-1 !default;
+$cell-title-desc-color: inherit !default;
 $cell-desc-font: $font-size-2 !default;
 $cell-desc-color: $disable-color !default;
 $cell-border-radius: 6px !default;
@@ -187,28 +189,45 @@ $cell-line-height: 20px !default;
 $cell-after-right: 16px !default;
 $cell-after-border-bottom: 1px solid #f5f6f7 !default;
 $cell-default-icon-margin: 0 4px 0 0px !default;
+$cell-default-icon-size: 20px !default;
+$cell-default-icon-font-size: 16px !default;
+$cell-icon-link-margin: 0 !default;
+$cell-icon-link-width: 20px !default;
+$cell-icon-link-height: 20px !default;
+$cell-icon-link-color: #979797 !default;
+$cell-icon-link-font-size: 16px !default;
+$cell-large-line-height: 20px !default;
+$cell-large-title-font: $font-size-large !default;
+$cell-large-title-desc-line-height: inherit !default;
+$cell-large-title-desc-font: $font-size-base !default;
+$cell-large-padding: 15px 16px !default;
+$cell-default-large-icon-margin: 0 4px 0 0px !default;
+$cell-default-large-icon-size: 20px !default;
+$cell-default-large-icon-font-size: 20px !default;
+$cell-large-icon-link-height: 20px !default;
 $cell-background: $white !default;

 // cell-group

 $cell-group-title-padding: 0 10px !default;
+$cell-group-title-margin: 30px 0 10px 0 !default;
 $cell-group-title-color: #909ca4 !default;
 $cell-group-title-font-size: $font-size-2 !default;
+$cell-group-title-font-weight: normal !default;
 $cell-group-title-line-height: 20px !default;
 $cell-group-desc-padding: 0 10px !default;
+$cell-group-desc-margin: 10px 0 10px 0 !default;
 $cell-group-desc-color: #909ca4 !default;
 $cell-group-desc-font-size: $font-size-1 !default;
 $cell-group-desc-line-height: 16px !default;
 $cell-group-background-color: $white !default;
-$cell-large-title-font: $font-size-large !default;
-$cell-large-title-desc-font: $font-size-base !default;
-$cell-large-padding: 15px 16px !default;

 // divider

 $divider-margin: 16px 0 !default;
 $divider-text-font-size: $font-size-2 !default;
 $divider-text-color: #909ca4 !default;
+$divider-border-color: currentColor !default;
 $divider-line-height: 2px !default;
 $divider-before-margin-right: 16px !default;
 $divider-after-margin-left: 16px !default;
@@ -246,7 +265,12 @@ $picker-item-active-line-border: 1px solid #d8d8d8 !default;
 $picker-columns-item-color: $title-color !default;

 //input
+$input-padding: 10px 25px;
+$input-label-color: unset !default;
+$input-line-height: 24px;
 $input-border-bottom: #eaf0fb !default;
+$input-placeholder-color: unset !default;
+$input-readonly-color: unset !default;
 $input-disabled-color: #c8c9cc !default;
 $input-required-color: $required-color !default;
 $input-font-size: $font-size-2 !default;
@@ -281,11 +305,18 @@ $inputnumber-display: flex !default;
 // actionsheet
 $actionsheet-light-color: #f6f6f6 !default;
 $actionsheet-item-border-bottom: none !default;
+$actionsheet-item-font-weight: unset !default;
 $actionsheet-item-font-size: $font-size-2 !default;
+$actionsheet-item-desc-font-size: $font-size-2 !default;
+$actionsheet-item-desc-font-color: #999 !default;
+$actionsheet-item-subdesc-line-height: unset !default;
 $actionsheet-item-subdesc-font-size: $font-size-1 !default;
+$actionsheet-item-subdesc-font-color: #999 !default;
 $actionsheet-item-cancel-border-top: 1px solid $actionsheet-light-color !default;
+$actionsheet-item-padding: 10px !default;
 $actionsheet-item-line-height: 24px !default;
 $actionsheet-item-font-color: $title-color !default;
+$actionsheet-item-disabled-font-color: #e1e1e1 !default;

 //shortpassword
 $shortpassword-background-color: rgba(245, 245, 245, 1) !default;
@@ -305,11 +336,14 @@ $numberkeyboard-header-close-padding: 0 16px !default;
 $numberkeyboard-header-close-color: #576b95 !default;
 $numberkeyboard-header-close-font-size: 14px !default;
 $numberkeyboard-header-close-background-color: transparent !default;
+$numberkeyboard-body-padding: 6px 0 0 6px !default;
+$numberkeyboard-wrapper-padding: 0 6px 6px 0 !default;
 $numberkeyboard-key-background-color: #fff !default;
 $numberkeyboard-key-active-background-color: #ebedf0 !default;
 $numberkeyboard-key-height: 48px !default;
 $numberkeyboard-key-line-height: 1.5 !default;
 $numberkeyboard-key-border-radius: 8px !default;
+$numberkeyboard-key-box-shadow: unset !default;
 $numberkeyboard-key-font-size: 28px !default;
 $numberkeyboard-key-font-size-color: #333 !default;
 $numberkeyboard-key-finish-font-size: 16px !default;
@@ -357,10 +391,16 @@ $switch-inside-width: 13px !default;
 $switch-inside-height: 13px !default;
 $switch-inside-open-transform: translateX(146%) !default;
 $switch-inside-close-transform: translateX(30%) !default;
+$switch-label-open-transform: translateX(-16px) !default;
+$switch-label-close-transform: translateX(16px) !default;

 // toast
+$toast-min-width: 40%;
 $toast-title-font-size: 16px !default;
+$toast-title-line-height: inherit !default;
+$toast-title-margin-bottom: 0 !default;
 $toast-text-font-size: $tdd-font-size-6 !default;
+$toast-text-line-height: inherit !default;
 $toast-font-color: $white !default;
 $toast-inner-padding: 24px 30px !default;
 $toast-inner-bg-color: $tdd-color-black-80 !default;
@@ -424,7 +464,7 @@ $rate-icon-void-color: $disable-color !default;

 // tabbar
 $tabbar-active-color: $primary-color !default;
-$tabbar-unactive-color: $primary-color !default;
+$tabbar-unactive-color: $dark-color-gray !default;
 $tabbar-border-top: 1px solid #eee !default;
 $tabbar-border-bottom: 1px solid #eee !default;
 $tabbar-box-shadow: none !default;
@@ -432,6 +472,10 @@ $tabbar-item-text-font-size: $font-size-0 !default;
 $tabbar-item-text-line-height: initial !default;
 $tabbar-height: 50px !default;
 $tabbar-word-margin-top: auto !default;
+$tabbar-tips-nums-top: -2px !default;
+$tabbar-tips-nums-right: -7px !default;
+$tabbar-tips-nums-left: initial !default;
+$tabbar-tips-dot-transform: translate(50%, -50%) !default;

 //infiniteloading
 $infiniteloading-bottom-color: #c8c8c8 !default;
@@ -447,6 +491,7 @@ $range-bar-btn-height: 24px !default;
 $range-bar-btn-border: 1px solid $primary-color !default;

 //swiper
+$swiper-pagination-item-position: 12px !default;
 $swiper-pagination-item-width: 8px !default;
 $swiper-pagination-item-height: 3px !default;
 $swiper-pagination-item-margin-right: 7px !default;
@@ -471,17 +516,29 @@ $steps-base-icon-width: 25px !default;
 $steps-base-icon-height: 25px !default;
 $steps-base-icon-line-height: 25px !default;
 $steps-base-icon-font-size: 13px !default;
+$steps-base-title-line-height: unset !default;
 $steps-base-title-font-size: 14px !default;
 $steps-base-line-color: #909ca4 !default;
 $steps-base-title-color: #909ca4 !default;
 $steps-base-title-margin-bottom: 10px !default;
+$steps-base-content-line-height: unset !default;
 $steps-base-content-font-size: 14px !default;
 $steps-base-content-color: #666 !default;
+$steps-horizontal-padding: 0 !default;
+$steps-vertical-padding: 0 !default;
+$steps-vertical-main-padding: 0 0 0 6% !default;
+$steps-vertical-title-line-height: unset !default;
+$steps-vertical-title-font-size: $steps-base-title-font-size !default;
+$steps-vertical-icon-width: $steps-base-icon-width !default;
+$steps-vertical-icon-height: $steps-base-icon-height !default;
+$steps-vertical-icon-line-height: $steps-base-icon-line-height !default;
+$steps-vertical-icon-font-size: $steps-base-icon-font-size !default;

 $steps-wait-icon-bg-color: #959fb1 !default;
 $steps-wait-icon-color: $white !default;
 $steps-wait-head-color: #909ca4 !default;
 $steps-wait-head-border-color: #909ca4 !default;
+$steps-wait-title-color: inherit !default;
 $steps-wait-content-color: #909ca4 !default;

 $steps-finish-head-color: $primary-color !default;
@@ -609,7 +666,9 @@ $tag-height: auto !default;
 $badge-background-color: linear-gradient(135deg, $primary-color-start 0%, $primary-color-end 100%) !default;
 $badge-color: #fff !default;
 $badge-font-size: $font-size-1 !default;
+$badge-border: none !default;
 $badge-border-radius: 14px !default;
+$badge-line-height: inherit !default;
 $badge-padding: 0 5px !default;
 $badge-content-transform: translateY(-50%) translateX(100%) !default;
 $badge-z-index: 1 !default;
@@ -665,6 +724,7 @@ $pagination-prev-next-padding: 0 11px !default;

 // tabs
 $tabs-tab-smile-color: $primary-color !default;
+$tabs-tabpane-padding: 24px 20px !default;
 $tabs-titles-border-radius: 0 !default;
 $tabs-titles-item-large-font-size: $font-size-3 !default;
 $tabs-titles-item-font-size: $font-size-2 !default;
@@ -720,6 +780,7 @@ $collapse-item-icon-color: #666666 !default;
 $collapse-item-font-size: $font-size-2 !default;
 $collapse-item-line-height: 24px !default;
 $collapse-item-sub-title-color: #666666 !default;
+$collapse-item-sub-title-right: 60px !default;
 $collapse-wrapper-content-padding: 12px 26px !default;
 $collapse-wrapper-empty-content-padding: 0 26px !default;
 $collapse-wrapper-content-color: #666666 !default;

--- a/src/packages/styles/variables-jddkh.scss
+++ b/src/packages/styles/variables-jddkh.scss
@@ -109,7 +109,9 @@ $button-small-round-border-radius: 15px !default;

 $cell-color: $title-color2 !default;
 $cell-title-font: $font-size-2 !default;
+$cell-title-desc-line-height: inherit !default;
 $cell-title-desc-font: $font-size-1 !default;
+$cell-title-desc-color: inherit !default;
 $cell-desc-font: $font-size-2 !default;
 $cell-desc-color: $disable-color !default;
 $cell-border-radius: 6px !default;
@@ -118,18 +120,34 @@ $cell-line-height: 20px !default;
 $cell-after-right: 16px !default;
 $cell-after-border-bottom: 1px solid #f5f6f7 !default;
 $cell-default-icon-margin: 0 4px 0 0px !default;
+$cell-default-icon-size: 20px !default;
+$cell-default-icon-font-size: 16px !default;
+$cell-icon-link-margin: 0 !default;
+$cell-icon-link-width: 20px !default;
+$cell-icon-link-height: 20px !default;
+$cell-icon-link-color: #979797 !default;
+$cell-icon-link-font-size: 16px !default;
+$cell-large-line-height: 20px !default;
 $cell-large-title-font: $font-size-large !default;
+$cell-large-title-desc-line-height: inherit !default;
 $cell-large-title-desc-font: $font-size-base !default;
 $cell-large-padding: 15px 16px !default;
+$cell-default-large-icon-margin: 0 4px 0 0px !default;
+$cell-default-large-icon-size: 20px !default;
+$cell-default-large-icon-font-size: 20px !default;
+$cell-large-icon-link-height: 20px !default;
 $cell-background: $white !default;

 // cell-group

 $cell-group-title-padding: 0 10px !default;
+$cell-group-title-margin: 30px 0 10px 0 !default;
 $cell-group-title-color: #909ca4 !default;
 $cell-group-title-font-size: $font-size-2 !default;
+$cell-group-title-font-weight: normal !default;
 $cell-group-title-line-height: 20px !default;
 $cell-group-desc-padding: 0 10px !default;
+$cell-group-desc-margin: 10px 0 10px 0 !default;
 $cell-group-desc-color: #909ca4 !default;
 $cell-group-desc-font-size: $font-size-1 !default;
 $cell-group-desc-line-height: 16px !default;
@@ -140,6 +158,7 @@ $cell-group-background-color: $white !default;
 $divider-margin: 16px 0 !default;
 $divider-text-font-size: $font-size-2 !default;
 $divider-text-color: #909ca4 !default;
+$divider-border-color: currentColor !default;
 $divider-line-height: 2px !default;
 $divider-before-margin-right: 16px !default;
 $divider-after-margin-left: 16px !default;
@@ -177,7 +196,12 @@ $picker-item-active-line-border: 1px solid #d8d8d8 !default;
 $picker-columns-item-color: $title-color !default;

 //input
+$input-padding: 10px 25px;
+$input-label-color: unset !default;
+$input-line-height: 24px;
 $input-border-bottom: #eaf0fb !default;
+$input-placeholder-color: unset !default;
+$input-readonly-color: unset !default;
 $input-disabled-color: #c8c9cc !default;
 $input-required-color: $required-color !default;
 $input-font-size: $font-size-2 !default;
@@ -212,11 +236,18 @@ $inputnumber-display: inline-flex !default;
 // actionsheet
 $actionsheet-light-color: #f6f6f6 !default;
 $actionsheet-item-border-bottom: none !default;
+$actionsheet-item-font-weight: unset !default;
 $actionsheet-item-font-size: $font-size-2 !default;
+$actionsheet-item-desc-font-size: $font-size-2 !default;
+$actionsheet-item-desc-font-color: #999 !default;
+$actionsheet-item-subdesc-line-height: unset !default;
 $actionsheet-item-subdesc-font-size: $font-size-1 !default;
+$actionsheet-item-subdesc-font-color: #999 !default;
 $actionsheet-item-cancel-border-top: 1px solid $actionsheet-light-color !default;
+$actionsheet-item-padding: 10px !default;
 $actionsheet-item-line-height: 24px !default;
 $actionsheet-item-font-color: $title-color !default;
+$actionsheet-item-disabled-font-color: #e1e1e1 !default;

 //shortpassword
 $shortpassword-background-color: rgba(245, 245, 245, 1) !default;
@@ -236,11 +267,14 @@ $numberkeyboard-header-close-padding: 0 16px !default;
 $numberkeyboard-header-close-color: #576b95 !default;
 $numberkeyboard-header-close-font-size: 14px !default;
 $numberkeyboard-header-close-background-color: transparent !default;
+$numberkeyboard-body-padding: 6px 0 0 6px !default;
+$numberkeyboard-wrapper-padding: 0 6px 6px 0 !default;
 $numberkeyboard-key-background-color: #fff !default;
 $numberkeyboard-key-active-background-color: #ebedf0 !default;
 $numberkeyboard-key-height: 48px !default;
 $numberkeyboard-key-line-height: 1.5 !default;
 $numberkeyboard-key-border-radius: 8px !default;
+$numberkeyboard-key-box-shadow: unset !default;
 $numberkeyboard-key-font-size: 28px !default;
 $numberkeyboard-key-font-size-color: #333 !default;
 $numberkeyboard-key-finish-font-size: 16px !default;
@@ -288,10 +322,16 @@ $switch-inside-width: 13px !default;
 $switch-inside-height: 13px !default;
 $switch-inside-open-transform: translateX(146%) !default;
 $switch-inside-close-transform: translateX(30%) !default;
+$switch-label-open-transform: translateX(-16px) !default;
+$switch-label-close-transform: translateX(16px) !default;

 // toast
+$toast-min-width: 40%;
 $toast-title-font-size: 16px !default;
+$toast-title-line-height: inherit !default;
+$toast-title-margin-bottom: 0 !default;
 $toast-text-font-size: 14px !default;
+$toast-text-line-height: inherit !default;
 $toast-font-color: $white !default;
 $toast-inner-padding: 24px 30px !default;
 $toast-inner-bg-color: rgba(0, 0, 0, 0.85) !default;
@@ -355,7 +395,7 @@ $rate-icon-void-color: $disable-color !default;

 // tabbar
 $tabbar-active-color: $primary-color !default;
-$tabbar-unactive-color: $primary-color !default;
+$tabbar-unactive-color: $dark-color-gray !default;
 $tabbar-border-top: 1px solid #eee !default;
 $tabbar-border-bottom: 1px solid #eee !default;
 $tabbar-box-shadow: none !default;
@@ -363,6 +403,10 @@ $tabbar-item-text-font-size: $font-size-0 !default;
 $tabbar-item-text-line-height: initial !default;
 $tabbar-height: 54px !default;
 $tabbar-word-margin-top: 6px !default;
+$tabbar-tips-nums-top: -2px !default;
+$tabbar-tips-nums-right: -7px !default;
+$tabbar-tips-nums-left: initial !default;
+$tabbar-tips-dot-transform: translate(50%, -50%) !default;

 //infiniteloading
 $infiniteloading-bottom-color: #c8c8c8 !default;
@@ -378,6 +422,7 @@ $range-bar-btn-height: 24px !default;
 $range-bar-btn-border: 1px solid $primary-color !default;

 //swiper
+$swiper-pagination-item-position: 12px !default;
 $swiper-pagination-item-width: 8px !default;
 $swiper-pagination-item-height: 3px !default;
 $swiper-pagination-item-margin-right: 7px !default;
@@ -402,17 +447,29 @@ $steps-base-icon-width: 25px !default;
 $steps-base-icon-height: 25px !default;
 $steps-base-icon-line-height: 25px !default;
 $steps-base-icon-font-size: 13px !default;
+$steps-base-title-line-height: unset !default;
 $steps-base-title-font-size: 14px !default;
 $steps-base-line-color: #909ca4 !default;
 $steps-base-title-color: #909ca4 !default;
 $steps-base-title-margin-bottom: 10px !default;
+$steps-base-content-line-height: unset !default;
 $steps-base-content-font-size: 14px !default;
 $steps-base-content-color: #666 !default;
+$steps-horizontal-padding: 0 !default;
+$steps-vertical-padding: 0 !default;
+$steps-vertical-main-padding: 0 0 0 6% !default;
+$steps-vertical-title-line-height: unset !default;
+$steps-vertical-title-font-size: $steps-base-title-font-size !default;
+$steps-vertical-icon-width: $steps-base-icon-width !default;
+$steps-vertical-icon-height: $steps-base-icon-height !default;
+$steps-vertical-icon-line-height: $steps-base-icon-line-height !default;
+$steps-vertical-icon-font-size: $steps-base-icon-font-size !default;

 $steps-wait-icon-bg-color: #959fb1 !default;
 $steps-wait-icon-color: $white !default;
 $steps-wait-head-color: #909ca4 !default;
 $steps-wait-head-border-color: #909ca4 !default;
+$steps-wait-title-color: inherit !default;
 $steps-wait-content-color: #909ca4 !default;

 $steps-finish-head-color: $primary-color !default;
@@ -540,7 +597,9 @@ $tag-height: 11px !default;
 $badge-background-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
 $badge-color: #fff !default;
 $badge-font-size: $font-size-1 !default;
+$badge-border: none !default;
 $badge-border-radius: 8px !default;
+$badge-line-height: inherit !default;
 $badge-padding: 0 5px !default;
 $badge-content-transform: translateY(-50%) translateX(100%) !default;
 $badge-z-index: 1 !default;
@@ -596,6 +655,7 @@ $pagination-prev-next-padding: 0 11px !default;

 // tabs
 $tabs-tab-smile-color: $primary-color !default;
+$tabs-tabpane-padding: 24px 20px !default;
 $tabs-titles-border-radius: 0 !default;
 $tabs-titles-item-large-font-size: $font-size-3 !default;
 $tabs-titles-item-font-size: $font-size-2 !default;
@@ -651,6 +711,7 @@ $collapse-item-icon-color: #666666 !default;
 $collapse-item-font-size: $font-size-2 !default;
 $collapse-item-line-height: 24px !default;
 $collapse-item-sub-title-color: #666666 !default;
+$collapse-item-sub-title-right: 60px !default;
 $collapse-wrapper-content-padding: 12px 26px !default;
 $collapse-wrapper-empty-content-padding: 0 26px !default;
 $collapse-wrapper-content-color: #666666 !default;

--- a/src/packages/styles/variables-jdt.scss
+++ b/src/packages/styles/variables-jdt.scss
@@ -15,7 +15,7 @@ $text-color: #808080 !default;
 $disable-color: #cccccc !default;
 $white: #fff !default;
 $black: #000 !default;
-$required-color: #fa2c19 !default;
+$required-color: #f52f3e !default;

 $dark-background: #131313 !default;
 $dark-background2: #1b1b1b !default;
@@ -96,7 +96,9 @@ $button-small-round-border-radius: $button-border-radius !default;

 $cell-color: rgba(0, 0, 0, 0.85) !default;
 $cell-title-font: $font-size-2 !default;
+$cell-title-desc-line-height: 18px !default;
 $cell-title-desc-font: $font-size-1 !default;
+$cell-title-desc-color: rgba(0, 0, 0, 0.45) !default;
 $cell-desc-font: $font-size-2 !default;
 $cell-desc-color: rgba(0, 0, 0, 0.25) !default;
 $cell-border-radius: 0px !default;
@@ -105,19 +107,35 @@ $cell-line-height: 22px !default;
 $cell-after-right: 0 !default;
 $cell-after-border-bottom: 1px solid rgba(0, 0, 0, 0.1) !default;
 $cell-default-icon-margin: 0 4px 0 0px !default;
+$cell-default-icon-size: $cell-line-height !default;
+$cell-default-icon-font-size: $cell-line-height !default;
+$cell-icon-link-margin: 0 0 0 4px !default;
+$cell-icon-link-width: initial !default;
+$cell-icon-link-height: $cell-line-height !default;
+$cell-icon-link-color: rgba(0, 0, 0, 0.45) !default;
+$cell-icon-link-font-size: 16px !default;
+$cell-large-line-height: 24px !default;
 $cell-large-title-font: $font-size-large !default;
-$cell-large-title-desc-font: $font-size-base !default;
-$cell-large-padding: 15px 16px !default;
+$cell-large-title-desc-line-height: 18px !default;
+$cell-large-title-desc-font: $font-size-1 !default;
+$cell-large-padding: 16px 16px !default;
+$cell-default-large-icon-margin: 0 8px 0 0px !default;
+$cell-default-large-icon-size: $cell-large-line-height !default;
+$cell-default-large-icon-font-size: $cell-large-line-height !default;
+$cell-large-icon-link-height: $cell-large-line-height !default;
 $cell-background: $white !default;

 // cell-group

-$cell-group-title-padding: 0 10px !default;
-$cell-group-title-color: rgba(69, 90, 100, 0.6) !default;
-$cell-group-title-font-size: $font-size-2 !default;
-$cell-group-title-line-height: 20px !default;
-$cell-group-desc-padding: 0 10px !default;
-$cell-group-desc-color: #909ca4 !default;
+$cell-group-title-padding: 18px 16px 8px !default;
+$cell-group-title-margin: 0 !default;
+$cell-group-title-color: rgba(0, 0, 0, 0.85) !default;
+$cell-group-title-font-size: 16px !default;
+$cell-group-title-font-weight: 600 !default;
+$cell-group-title-line-height: 24px !default;
+$cell-group-desc-padding: 0 16px !default;
+$cell-group-desc-margin: 2px 0 0 !default;
+$cell-group-desc-color: rgba(0, 0, 0, 0.45) !default;
 $cell-group-desc-font-size: $font-size-1 !default;
 $cell-group-desc-line-height: 16px !default;
 $cell-group-background-color: $white !default;
@@ -126,10 +144,11 @@ $cell-group-background-color: $white !default;

 $divider-margin: 16px 0 !default;
 $divider-text-font-size: 16px !default;
-$divider-text-color: rgba(0, 0, 0, 0.3) !default;
-$divider-line-height: 2px !default;
-$divider-before-margin-right: 16px !default;
-$divider-after-margin-left: 16px !default;
+$divider-text-color: rgba(0, 0, 0, 0.85) !default;
+$divider-border-color: rgba(0, 0, 0, 0.1) !default;
+$divider-line-height: 1px !default;
+$divider-before-margin-right: 10px !default;
+$divider-after-margin-left: 10px !default;
 $divider-vertical-height: 12px !default;
 $divider-vertical-top: 2px !default;
 $divider-vertical-border-left: rgba(0, 0, 0, 0.06) !default;
@@ -164,8 +183,13 @@ $picker-item-active-line-border: 1px solid rgba(0, 0, 0, 0.06) !default;
 $picker-columns-item-color: $title-color !default;

 //input
+$input-padding: 14px 16px;
+$input-label-color: rgba(0, 0, 0, 0.65) !default;
+$input-line-height: 22px;
 $input-border-bottom: #eaf0fb !default;
-$input-disabled-color: #c8c9cc !default;
+$input-placeholder-color: rgba(0, 0, 0, 0.25) !default;
+$input-readonly-color: rgba(0, 0, 0, 0.85) !default;
+$input-disabled-color: rgba(0, 0, 0, 0.45) !default;
 $input-required-color: $required-color !default;
 $input-font-size: $font-size-2 !default;

@@ -198,11 +222,18 @@ $inputnumber-display: flex !default;
 // actionsheet
 $actionsheet-light-color: #f6f6f6 !default;
 $actionsheet-item-border-bottom: 1px solid rgba(0, 0, 0, 0.1) !default;
+$actionsheet-item-font-weight: bold !default;
 $actionsheet-item-font-size: $font-size-4 !default;
+$actionsheet-item-desc-font-size: 16px !default;
+$actionsheet-item-desc-font-color: rgba(0, 0, 0, 0.45) !default;
+$actionsheet-item-subdesc-line-height: 18px !default;
 $actionsheet-item-subdesc-font-size: $font-size-1 !default;
+$actionsheet-item-subdesc-font-color: rgba(0, 0, 0, 0.45) !default;
 $actionsheet-item-cancel-border-top: none !default;
+$actionsheet-item-padding: 11px !default;
 $actionsheet-item-line-height: 28px !default;
-$actionsheet-item-font-color: #4e5969 !default;
+$actionsheet-item-font-color: rgba(0, 0, 0, 0.65) !default;
+$actionsheet-item-disabled-font-color: rgba(0, 0, 0, 0.25) !default;

 //shortpassword
 $shortpassword-background-color: rgba(245, 245, 245, 1) !default;
@@ -222,13 +253,16 @@ $numberkeyboard-header-close-padding: 0 16px !default;
 $numberkeyboard-header-close-color: #576b95 !default;
 $numberkeyboard-header-close-font-size: 14px !default;
 $numberkeyboard-header-close-background-color: transparent !default;
+$numberkeyboard-body-padding: 10px 5px 0 10px !default;
+$numberkeyboard-wrapper-padding: 0 5px 5px 0 !default;
 $numberkeyboard-key-background-color: #fff !default;
 $numberkeyboard-key-active-background-color: #ebedf0 !default;
-$numberkeyboard-key-height: 48px !default;
+$numberkeyboard-key-height: 50px !default;
 $numberkeyboard-key-line-height: 1.5 !default;
-$numberkeyboard-key-border-radius: 8px !default;
-$numberkeyboard-key-font-size: 28px !default;
-$numberkeyboard-key-font-size-color: #333 !default;
+$numberkeyboard-key-border-radius: 4px !default;
+$numberkeyboard-key-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.15) !default;
+$numberkeyboard-key-font-size: 24px !default;
+$numberkeyboard-key-font-size-color: #262626 !default;
 $numberkeyboard-key-finish-font-size: 16px !default;
 $numberkeyboard-key-finish-font-size-color: #fff !default;
 $numberkeyboard-key-finish-background-color: #1989fa !default;
@@ -264,7 +298,7 @@ $avatar-normal-width: 40px !default;
 $avatar-normal-height: 40px !default;

 //switch
-$switch-close-bg-color: #ebebeb !default;
+$switch-close-bg-color: rgba(0, 0, 0, 0.25) !default;
 $switch-close--cline-bg-color: #f0f0f0 !default;
 $switch-width: 50px !default;
 $switch-height: 27px !default;
@@ -272,12 +306,18 @@ $switch-line-height: 27px !default;
 $switch-border-radius: 27px !default;
 $switch-inside-width: 23px !default;
 $switch-inside-height: 23px !default;
-$switch-inside-open-transform: translateX(100%) !default;
-$switch-inside-close-transform: translateX(10%) !default;
+$switch-inside-open-transform: translateX(25px) !default;
+$switch-inside-close-transform: translateX(2px) !default;
+$switch-label-open-transform: translateX(-22px) !default;
+$switch-label-close-transform: translateX(22px) !default;

 // toast
+$toast-min-width: 120px;
 $toast-title-font-size: 18px !default;
+$toast-title-line-height: 28px !default;
+$toast-title-margin-bottom: 6px !default;
 $toast-text-font-size: 14px !default;
+$toast-text-line-height: 22px !default;
 $toast-font-color: $white !default;
 $toast-inner-padding: 12px 20px !default;
 $toast-inner-bg-color: rgba(0, 0, 0, 0.65) !default;
@@ -331,14 +371,18 @@ $rate-icon-void-color: $disable-color !default;

 // tabbar
 $tabbar-active-color: $primary-color !default;
-$tabbar-unactive-color: $primary-color !default;
+$tabbar-unactive-color: rgba(0, 0, 0, 0.65) !default;
 $tabbar-border-top: 0 !default;
 $tabbar-border-bottom: 0 !default;
 $tabbar-box-shadow: 0 -1.5px 5px rgba(0, 0, 0, 0.04) !default;
 $tabbar-item-text-font-size: 12px !default;
 $tabbar-item-text-line-height: 18px !default;
 $tabbar-height: 50px !default;
-$tabbar-word-margin-top: auto !default;
+$tabbar-word-margin-top: 2px !default;
+$tabbar-tips-nums-top: -3px !default;
+$tabbar-tips-nums-right: initial !default;
+$tabbar-tips-nums-left: calc(50% + 4px) !default;
+$tabbar-tips-dot-transform: translate(50%, -3px) !default;

 //infiniteloading
 $infiniteloading-bottom-color: #c8c8c8 !default;
@@ -354,6 +398,7 @@ $range-bar-btn-height: 22px !default;
 $range-bar-btn-border: none !default;

 //swiper
+$swiper-pagination-item-position: 6px !default;
 $swiper-pagination-item-width: 5px !default;
 $swiper-pagination-item-height: 5px !default;
 $swiper-pagination-item-margin-right: 6px !default;
@@ -374,32 +419,44 @@ $address-region-item-font-size: $font-size-1 !default;
 $address-item-margin-right: 9px !default;

 //steps
-$steps-base-icon-width: 18px !default;
-$steps-base-icon-height: 18px !default;
-$steps-base-icon-line-height: 18px !default;
+$steps-base-icon-width: 20px !default;
+$steps-base-icon-height: 20px !default;
+$steps-base-icon-line-height: 20px !default;
 $steps-base-icon-font-size: 12px !default;
+$steps-base-title-line-height: 18px !default;
 $steps-base-title-font-size: 12px !default;
-$steps-base-line-color: #e1e1e1 !default;
+$steps-base-line-color: #d9d9d9 !default;
 $steps-base-title-color: rgba(0, 0, 0, 0.85) !default;
-$steps-base-title-margin-bottom: 10px !default;
+$steps-base-title-margin-bottom: 6px !default;
+$steps-base-content-line-height: 16px !default;
 $steps-base-content-font-size: 10px !default;
 $steps-base-content-color: rgba(0, 0, 0, 0.65) !default;
-
-$steps-wait-icon-bg-color: #e1e1e1 !default;
+$steps-horizontal-padding: 8px 0 !default;
+$steps-vertical-padding: 0 16px !default;
+$steps-vertical-main-padding: 0 0 0 19px !default;
+$steps-vertical-title-line-height: 24px !default;
+$steps-vertical-title-font-size: 16px !default;
+$steps-vertical-icon-width: 22px !default;
+$steps-vertical-icon-height: 22px !default;
+$steps-vertical-icon-line-height: 22px !default;
+$steps-vertical-icon-font-size: 12px !default;
+
+$steps-wait-icon-bg-color: #d9d9d9 !default;
 $steps-wait-icon-color: $white !default;
-$steps-wait-head-color: #909ca4 !default;
-$steps-wait-head-border-color: #909ca4 !default;
-$steps-wait-content-color: #909ca4 !default;
+$steps-wait-head-color: $white !default;
+$steps-wait-head-border-color: #d9d9d9 !default;
+$steps-wait-title-color: rgba(0, 0, 0, 0.45) !default;
+$steps-wait-content-color: rgba(0, 0, 0, 0.45) !default;

-$steps-finish-head-color: $primary-color !default;
+$steps-finish-head-color: $white !default;
 $steps-finish-head-border-color: $primary-color !default;
-$steps-finish-title-color: $primary-color !default;
+$steps-finish-title-color: rgba(0, 0, 0, 0.65) !default;
 $steps-finish-line-background: $primary-color !default;
-$steps-finish-icon-text-color: $white !default;
+$steps-finish-icon-text-color: $primary-color !default;

 $steps-process-head-color: $white !default;
 $steps-process-head-border-color: $primary-color !default;
-$steps-process-title-color: $primary-color !default;
+$steps-process-title-color: rgba(0, 0, 0, 0.85) !default;
 $steps-process-icon-text-color: $primary-color !default;

 // dialog
@@ -451,14 +508,14 @@ $fixednav-item-active-color: $primary-color !default;
 $noticebar-background: #f2f8ff !default;
 $noticebar-color: #2c68ff !default;
 $noticebar-font-size: 14px !default;
-$noticebar-height: 40px !default;
-$noticebar-line-height: 24px !default;
+$noticebar-height: 36px !default;
+$noticebar-line-height: 20px !default;
 $noticebar-left-icon-width: 16px !default;
 $noticebar-right-icon-width: 16px !default;
-$noticebar-box-padding: 0 16px !default;
+$noticebar-box-padding: 0 8px !default;
 $noticebar-wrapable-padding: 16px !default;
-$noticebar-lefticon-margin: 0px 10px !default;
-$noticebar-righticon-margin: 0px 10px !default;
+$noticebar-lefticon-margin: 0px 8px 0 0 !default;
+$noticebar-righticon-margin: 0px 0 0 8px !default;

 // TimeSelect
 $timeselect-title-font-size: $font-size-2 !default;
@@ -515,8 +572,10 @@ $tag-height: auto !default;
 //badge
 $badge-background-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
 $badge-color: #fff !default;
-$badge-font-size: $font-size-1 !default;
+$badge-font-size: 10px !default;
+$badge-border: 1px solid $white !default;
 $badge-border-radius: 14px !default;
+$badge-line-height: 16px !default;
 $badge-padding: 0 5px !default;
 $badge-content-transform: translateY(-50%) translateX(100%) !default;
 $badge-z-index: 1 !default;
@@ -572,15 +631,16 @@ $pagination-prev-next-padding: 0 11px !default;

 // tabs
 $tabs-tab-smile-color: $primary-color !default;
+$tabs-tabpane-padding: 12px 16px !default;
 $tabs-titles-border-radius: 0 !default;
 $tabs-titles-item-large-font-size: $font-size-4 !default;
 $tabs-titles-item-font-size: $font-size-3 !default;
 $tabs-titles-item-small-font-size: $font-size-2 !default;
-$tabs-titles-item-color: rgba(0, 0, 0, 0.45) !default;
-$tabs-titles-item-active-color: $title-color !default;
+$tabs-titles-item-color: rgba(0, 0, 0, 0.25) !default;
+$tabs-titles-item-active-color: rgba(0, 0, 0, 0.85) !default;
 $tabs-titles-background-color: #fff !default;
 $tabs-horizontal-tab-line-color: $primary-color !default;
-$tabs-horizontal-titles-height: 46px !default;
+$tabs-horizontal-titles-height: 50px !default;
 $tabs-horizontal-titles-item-min-width: 50px !default;
 $tabs-horizontal-titles-item-active-line-width: 14px !default;
 $tabs-vertical-tab-line-color: linear-gradient(180deg, $primary-color 0%, rgba($primary-color, 0.15) 100%) !default;
@@ -620,15 +680,16 @@ $menu-scroll-fixed-z-index: 1000 !default;
 $menu-active-item-font-weight: 500 !default;

 // collapse
-$collapse-item-padding: 13px 36px 13px 26px !default;
+$collapse-item-padding: 14px 16px !default;
 $collapse-item-color: rgba(0, 0, 0, 0.85) !default;
 $collapse-item-disabled-color: #bfbfbf !default;
 $collapse-item-icon-color: #666666 !default;
 $collapse-item-font-size: $font-size-2 !default;
 $collapse-item-line-height: 24px !default;
-$collapse-item-sub-title-color: #666666 !default;
-$collapse-wrapper-content-padding: 12px 26px !default;
-$collapse-wrapper-empty-content-padding: 0 26px !default;
+$collapse-item-sub-title-color: rgba(0, 0, 0, 0.25) !default;
+$collapse-item-sub-title-right: 42px !default;
+$collapse-wrapper-content-padding: 12px 16px !default;
+$collapse-wrapper-empty-content-padding: 0 16px !default;
 $collapse-wrapper-content-color: #8c8c8c !default;
 $collapse-wrapper-content-font-size: $font-size-2 !default;
 $collapse-wrapper-content-line-height: 1.5 !default;
@@ -665,7 +726,7 @@ $cascader-bar-padding: 24px 20px 17px !default;
 $cascader-bar-font-size: $font-size-4 !default;
 $cascader-bar-line-height: 20px !default;
 $cascader-bar-color: $title-color !default;
-$cascader-item-padding: 10px 20px !default;
+$cascader-item-padding: 14px 20px !default;
 $cascader-item-color: $title-color !default;
 $cascader-item-font-size: $font-size-2 !default;
 $cascader-item-active-color: $primary-color !default;
@@ -752,7 +813,7 @@ $table-tr-odd-bg-color: $white !default;
 // navbar
 $navbar-height: 46px !default;
 $navbar-margin-bottom: 20px !default;
-$navbar-padding: 0 16px !default;
+$navbar-padding: 0 !default;
 $navbar-background: $white !default;
 $navbar-box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1) !default;
 $navbar-color: $title-color2 !default;

--- a/src/packages/styles/variables.scss
+++ b/src/packages/styles/variables.scss
@@ -109,7 +109,9 @@ $button-small-round-border-radius: $button-border-radius !default;

 $cell-color: $title-color2 !default;
 $cell-title-font: $font-size-2 !default;
+$cell-title-desc-line-height: inherit !default;
 $cell-title-desc-font: $font-size-1 !default;
+$cell-title-desc-color: inherit !default;
 $cell-desc-font: $font-size-2 !default;
 $cell-desc-color: $disable-color !default;
 $cell-border-radius: 6px !default;
@@ -118,18 +120,34 @@ $cell-line-height: 20px !default;
 $cell-after-right: 16px !default;
 $cell-after-border-bottom: 1px solid #f5f6f7 !default;
 $cell-default-icon-margin: 0 4px 0 0px !default;
+$cell-default-icon-size: 20px !default;
+$cell-default-icon-font-size: 16px !default;
+$cell-icon-link-margin: 0 !default;
+$cell-icon-link-width: 20px !default;
+$cell-icon-link-height: 20px !default;
+$cell-icon-link-color: #979797 !default;
+$cell-icon-link-font-size: 16px !default;
+$cell-large-line-height: 20px !default;
 $cell-large-title-font: $font-size-large !default;
+$cell-large-title-desc-line-height: inherit !default;
 $cell-large-title-desc-font: $font-size-base !default;
 $cell-large-padding: 15px 16px !default;
+$cell-default-large-icon-margin: 0 4px 0 0px !default;
+$cell-default-large-icon-size: 20px !default;
+$cell-default-large-icon-font-size: 20px !default;
+$cell-large-icon-link-height: 20px !default;
 $cell-background: $white !default;

 // cell-group

 $cell-group-title-padding: 0 10px !default;
+$cell-group-title-margin: 30px 0 10px 0 !default;
 $cell-group-title-color: #909ca4 !default;
 $cell-group-title-font-size: $font-size-2 !default;
+$cell-group-title-font-weight: normal !default;
 $cell-group-title-line-height: 20px !default;
 $cell-group-desc-padding: 0 10px !default;
+$cell-group-desc-margin: 10px 0 10px 0 !default;
 $cell-group-desc-color: #909ca4 !default;
 $cell-group-desc-font-size: $font-size-1 !default;
 $cell-group-desc-line-height: 16px !default;
@@ -140,6 +158,7 @@ $cell-group-background-color: $white !default;
 $divider-margin: 16px 0 !default;
 $divider-text-font-size: $font-size-2 !default;
 $divider-text-color: #909ca4 !default;
+$divider-border-color: currentColor !default;
 $divider-line-height: 2px !default;
 $divider-before-margin-right: 16px !default;
 $divider-after-margin-left: 16px !default;
@@ -177,7 +196,12 @@ $picker-item-active-line-border: 1px solid #d8d8d8 !default;
 $picker-columns-item-color: $title-color !default;

 //input
+$input-padding: 10px 25px;
+$input-label-color: unset !default;
+$input-line-height: 24px;
 $input-border-bottom: #eaf0fb !default;
+$input-placeholder-color: unset !default;
+$input-readonly-color: unset !default;
 $input-disabled-color: #c8c9cc !default;
 $input-required-color: $required-color !default;
 $input-font-size: $font-size-2 !default;
@@ -212,11 +236,18 @@ $inputnumber-display: flex !default;
 // actionsheet
 $actionsheet-light-color: #f6f6f6 !default;
 $actionsheet-item-border-bottom: none !default;
+$actionsheet-item-font-weight: unset !default;
 $actionsheet-item-font-size: $font-size-2 !default;
+$actionsheet-item-desc-font-size: $font-size-2 !default;
+$actionsheet-item-desc-font-color: #999 !default;
+$actionsheet-item-subdesc-line-height: unset !default;
 $actionsheet-item-subdesc-font-size: $font-size-1 !default;
+$actionsheet-item-subdesc-font-color: #999 !default;
 $actionsheet-item-cancel-border-top: 1px solid $actionsheet-light-color !default;
+$actionsheet-item-padding: 10px !default;
 $actionsheet-item-line-height: 24px !default;
 $actionsheet-item-font-color: $title-color !default;
+$actionsheet-item-disabled-font-color: #e1e1e1 !default;

 //shortpassword
 $shortpassword-background-color: rgba(245, 245, 245, 1) !default;
@@ -236,11 +267,14 @@ $numberkeyboard-header-close-padding: 0 16px !default;
 $numberkeyboard-header-close-color: #576b95 !default;
 $numberkeyboard-header-close-font-size: 14px !default;
 $numberkeyboard-header-close-background-color: transparent !default;
+$numberkeyboard-body-padding: 6px 0 0 6px !default;
+$numberkeyboard-wrapper-padding: 0 6px 6px 0 !default;
 $numberkeyboard-key-background-color: #fff !default;
 $numberkeyboard-key-active-background-color: #ebedf0 !default;
 $numberkeyboard-key-height: 48px !default;
 $numberkeyboard-key-line-height: 1.5 !default;
 $numberkeyboard-key-border-radius: 8px !default;
+$numberkeyboard-key-box-shadow: unset !default;
 $numberkeyboard-key-font-size: 28px !default;
 $numberkeyboard-key-font-size-color: #333 !default;
 $numberkeyboard-key-finish-font-size: 16px !default;
@@ -288,10 +322,16 @@ $switch-inside-width: 13px !default;
 $switch-inside-height: 13px !default;
 $switch-inside-open-transform: translateX(146%) !default;
 $switch-inside-close-transform: translateX(30%) !default;
+$switch-label-open-transform: translateX(-16px) !default;
+$switch-label-close-transform: translateX(16px) !default;

 // toast
+$toast-min-width: 40%;
 $toast-title-font-size: 16px !default;
+$toast-title-line-height: inherit !default;
+$toast-title-margin-bottom: 0 !default;
 $toast-text-font-size: 14px !default;
+$toast-text-line-height: inherit !default;
 $toast-font-color: $white !default;
 $toast-inner-padding: 24px 30px !default;
 $toast-inner-bg-color: rgba(0, 0, 0, 0.8) !default;
@@ -355,7 +395,7 @@ $rate-icon-void-color: $disable-color !default;

 // tabbar
 $tabbar-active-color: $primary-color !default;
-$tabbar-unactive-color: $primary-color !default;
+$tabbar-unactive-color: $dark-color-gray !default;
 $tabbar-border-top: 1px solid #eee !default;
 $tabbar-border-bottom: 1px solid #eee !default;
 $tabbar-box-shadow: none !default;
@@ -363,6 +403,10 @@ $tabbar-item-text-font-size: $font-size-0 !default;
 $tabbar-item-text-line-height: initial !default;
 $tabbar-height: 50px !default;
 $tabbar-word-margin-top: auto !default;
+$tabbar-tips-nums-top: -2px !default;
+$tabbar-tips-nums-right: -7px !default;
+$tabbar-tips-nums-left: initial !default;
+$tabbar-tips-dot-transform: translate(50%, -50%) !default;

 //infiniteloading
 $infiniteloading-bottom-color: #c8c8c8 !default;
@@ -378,6 +422,7 @@ $range-bar-btn-height: 24px !default;
 $range-bar-btn-border: 1px solid $primary-color !default;

 //swiper
+$swiper-pagination-item-position: 12px !default;
 $swiper-pagination-item-width: 8px !default;
 $swiper-pagination-item-height: 3px !default;
 $swiper-pagination-item-margin-right: 7px !default;
@@ -402,17 +447,29 @@ $steps-base-icon-width: 25px !default;
 $steps-base-icon-height: 25px !default;
 $steps-base-icon-line-height: 25px !default;
 $steps-base-icon-font-size: 13px !default;
+$steps-base-title-line-height: unset !default;
 $steps-base-title-font-size: 14px !default;
 $steps-base-line-color: #909ca4 !default;
 $steps-base-title-color: #909ca4 !default;
 $steps-base-title-margin-bottom: 10px !default;
+$steps-base-content-line-height: unset !default;
 $steps-base-content-font-size: 14px !default;
 $steps-base-content-color: #666 !default;
+$steps-horizontal-padding: 0 !default;
+$steps-vertical-padding: 0 !default;
+$steps-vertical-main-padding: 0 0 0 6% !default;
+$steps-vertical-title-line-height: unset !default;
+$steps-vertical-title-font-size: $steps-base-title-font-size !default;
+$steps-vertical-icon-width: $steps-base-icon-width !default;
+$steps-vertical-icon-height: $steps-base-icon-height !default;
+$steps-vertical-icon-line-height: $steps-base-icon-line-height !default;
+$steps-vertical-icon-font-size: $steps-base-icon-font-size !default;

 $steps-wait-icon-bg-color: #959fb1 !default;
 $steps-wait-icon-color: $white !default;
 $steps-wait-head-color: #909ca4 !default;
 $steps-wait-head-border-color: #909ca4 !default;
+$steps-wait-title-color: inherit !default;
 $steps-wait-content-color: #909ca4 !default;

 $steps-finish-head-color: $primary-color !default;
@@ -540,7 +597,9 @@ $tag-height: auto !default;
 $badge-background-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
 $badge-color: #fff !default;
 $badge-font-size: $font-size-1 !default;
+$badge-border: none !default;
 $badge-border-radius: 14px !default;
+$badge-line-height: inherit !default;
 $badge-padding: 0 5px !default;
 $badge-content-transform: translateY(-50%) translateX(100%) !default;
 $badge-z-index: 1 !default;
@@ -605,6 +664,7 @@ $pagination-prev-next-padding: 0 11px !default;

 // tabs
 $tabs-tab-smile-color: $primary-color !default;
+$tabs-tabpane-padding: 24px 20px !default;
 $tabs-titles-border-radius: 0 !default;
 $tabs-titles-item-large-font-size: $font-size-3 !default;
 $tabs-titles-item-font-size: $font-size-2 !default;
@@ -660,6 +720,7 @@ $collapse-item-icon-color: #666666 !default;
 $collapse-item-font-size: $font-size-2 !default;
 $collapse-item-line-height: 24px !default;
 $collapse-item-sub-title-color: #666666 !default;
+$collapse-item-sub-title-right: 60px !default;
 $collapse-wrapper-content-padding: 12px 26px !default;
 $collapse-wrapper-empty-content-padding: 0 26px !default;
 $collapse-wrapper-content-color: #666666 !default;

--- a/src/sites/mobile-taro/vue/config/index.js
+++ b/src/sites/mobile-taro/vue/config/index.js
 const path = require('path');
+// npm run dev:taro:weapp [jdt|jddkh|jdt]
+const themeMap = {
+  jdb: 'variables-jdb.scss',
+  jddkh: 'variables-jddkh.scss',
+  jdt: 'variables-jdt.scss'
+};
+const lastArg = process.argv[process.argv.length - 1];
+const theme = themeMap[lastArg] || 'variables.scss';
+
 const config = {
  projectName: '@nutui/nutui-taro-mobile',
  date: '2021-5-29',
@@ -17,7 +26,7 @@ const config = {
    '@/packages': path.resolve(__dirname, '../../../../../src/packages')
  },
  sass: {
-    resource: path.resolve(__dirname, '../../../../', 'packages/styles/variables.scss')
+    resource: path.resolve(__dirname, '../../../../', 'packages/styles', theme)
  },
  defineConstants: {},
  copy: {

--- a/src/sites/mobile-taro/vue/src/app.scss
+++ b/src/sites/mobile-taro/vue/src/app.scss
@@ -8,7 +8,7 @@ page,
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 17px 17px 17px;
-
+    box-sizing: border-box;
    &.full {
      padding: 0 0 0 0;
      h2 {

--- a/src/sites/mobile-taro/vue/src/basic/pages/cell/index.vue
+++ b/src/sites/mobile-taro/vue/src/basic/pages/cell/index.vue
@@ -50,10 +50,16 @@
          />
        </template>
      </nut-cell>
+      <nut-cell title="图片" sub-title="副标题描述">
+        <template v-slot:icon>
+          <div style="height: 40px; width: 40px; border-radius: 50%; background: #e5e5e5"></div>
+        </template>
+      </nut-cell>
    </nut-cell-group>

    <h2>展示图标</h2>
    <nut-cell title="姓名" icon="my" desc="张三" isLink> </nut-cell>
+    <nut-cell title="姓名" icon="my" desc="张三" isLink size="large"> </nut-cell>
    <h2>只展示 desc ，可通过 desc-text-align 调整内容位置</h2>
    <nut-cell desc-text-align="left" desc="张三"></nut-cell>
    <h2>垂直居中</h2>

--- a/src/sites/mobile-taro/vue/src/exhibition/pages/badge/index.vue
+++ b/src/sites/mobile-taro/vue/src/exhibition/pages/badge/index.vue
@@ -11,6 +11,9 @@
      <nut-badge value="NEW">
        <nut-avatar icon="my" shape="square"></nut-avatar>
      </nut-badge>
+      <nut-badge value="NEW" bubble>
+        <nut-avatar icon="my" shape="square"></nut-avatar>
+      </nut-badge>
      <nut-badge dot>
        <nut-avatar icon="my" shape="square"></nut-avatar>
      </nut-badge>

--- a/src/sites/mobile/App.vue
+++ b/src/sites/mobile/App.vue
@@ -59,7 +59,10 @@ export default defineComponent({
      }
    };

-    useThemeEditor();
+    // 本地调试时通过preprocessorOptions注入
+    if (!import.meta.env.DEV) {
+      useThemeEditor();
+    }

    //返回demo页
    const goBack = () => {

--- a/vite.config.jdt.ts
+++ b/vite.config.jdt.ts
@@ -92,6 +92,7 @@ export default defineConfig({
    outDir: './dist/jdt/',
    // assetsDir: config.version,
    cssCodeSplit: true,
+    cssTarget: ['chrome61'],
    rollupOptions: {
      input: {
        // doc: resolve(__dirname, 'index.html'),