feat: add jddkh theme (#1763)

* feat: add jddkh theme

* feat: 修改sass文件

* feat: add new sass variables in components

Co-authored-by: yangjinjun3 <475473228@qq.coom>

README.md

@@ -117,7 +117,7 @@ createApp(App).use(NutUI).mount("#app");
 * <a href="https://nutui.jd.com/#/zh-CN/component/button" target="_blank">京东APP视觉（Vue3，默认）</a>
 * <a href="https://nutui.jd.com/jdt/#/zh-CN/component/button" target="_blank">京东科技视觉（Vue3）</a>
 * <a href="https://nutui.jd.com/?jdb#/zh-CN/component/button" target="_blank">京东零售B商城主题（Vue3）</a>
-* <a href="https://nutui.jd.com/?jddkh#" target="_blank">京东企业业务主题（Vue3，即将发布）</a>
+* <a href="https://nutui.jd.com/?jddkh#/zh-CN/component/button" target="_blank">京东企业业务主题（Vue3）</a>
 * <a href="https://nutui.jd.com/jdl/#/cell" target="_blank">京东物流视觉（Vue2）</a>
 
 

jd/generate-themes.js

@@ -26,7 +26,8 @@ Promise.all(tasks).then((res) => {
   let themes = [
     { file: 'default.scss', sourcePath: `@import '../variables.scss';` },
     { file: 'jdt.scss', sourcePath: `@import '../variables-jdt.scss';` },
-    { file: 'jdb.scss', sourcePath: `@import '../variables-jdb.scss';` }
+    { file: 'jdb.scss', sourcePath: `@import '../variables-jdb.scss';` },
+    { file: 'jddkh.scss', sourcePath: `@import '../variables-jddkh.scss';` }
   ];
 
   themes.forEach((item) => {

src/packages/__VUE/address/index.scss

@@ -55,8 +55,8 @@
     line-height: 20px;
     &__title {
       display: block;
-      color: #262626;
-      font-size: 18px;
+      color: $address-header-title-color;
+      font-size: $address-header-title-font-size;
     }
   }
 
@@ -68,8 +68,8 @@
       margin-top: 32px;
       padding: 0 20px;
       display: flex;
-      font-size: 13px;
-      color: #1d1e1e;
+      font-size: $address-region-tab-font-size;
+      color: $address-region-tab-color;
 
       .tab-item {
         position: relative;
@@ -77,7 +77,7 @@
         margin-right: 30px;
         display: block;
         &.active {
-          font-weight: bold;
+          font-weight: $address-region-tab-active-item-font-weight;
         }
 
         view {
@@ -123,6 +123,8 @@
         height: 3px;
         background: $address-region-tab-line;
         transition: 0.2s all linear;
+        border-radius: $address-region-tab-line-border-radius;
+        opacity: $address-region-tab-line-opacity;
       }
     }
 
@@ -139,8 +141,8 @@
           display: flex;
           align-items: center;
           margin-bottom: 20px;
-          font-size: $font-size-1;
-          color: #333;
+          font-size: $address-region-item-font-size;
+          color: $address-region-item-color;
           &.active {
             font-weight: bold;
           }
@@ -182,7 +184,7 @@
             font-weight: bold;
           }
           .exist-item-icon {
-            margin-right: 9px;
+            margin-right: $address-item-margin-right;
             color: $address-icon-color !important;
           }
           span {

src/packages/__VUE/button/index.scss

@@ -138,6 +138,10 @@
     line-height: $button-small-line-height;
     padding: $button-small-padding;
     font-size: $button-small-font-size;
+
+    &.nut-button--round {
+      border-radius: $button-small-round-border-radius;
+    }
   }
   &--mini {
     height: $button-mini-height;

src/packages/__VUE/calendar/index.scss

@@ -135,6 +135,7 @@
         height: 23px;
         line-height: 23px;
         margin: 8px 0;
+        font-size: $calendar-month-title-font-size;
       }
 
       .calendar-month-con {

src/packages/__VUE/card/index.scss

@@ -13,6 +13,8 @@
   .nut-card__left {
     width: 120px;
     flex-shrink: 0;
+    background-color: $card-left-background-color;
+    border-radius: $card-left-border-radius;
 
     > img {
       display: block;

src/packages/__VUE/checkbox/index.scss

@@ -41,7 +41,7 @@
     font-size: $checkbox-icon-font-size;
   }
   &__icon--disable {
-    color: $help-color;
+    color: $checkbox-icon-disable-color2;
     font-size: $checkbox-icon-font-size;
   }
 }

src/packages/__VUE/dialog/index.scss

@@ -12,7 +12,8 @@
     text-align: center;
     height: 20px;
     font-size: 16px;
-    color: rgba(38, 38, 38, 1);
+    color: $dialog-header-color;
+    font-weight: $dialog-header-font-weight;
     @include oneline-ellipsis();
   }
   &__content {
@@ -32,7 +33,7 @@
     display: flex;
     align-items: center;
     width: 100%;
-    justify-content: space-around;
+    justify-content: $dialog-footer-justify-content;
 
     &.vertical {
       flex-direction: column;

src/packages/__VUE/inputnumber/index.scss

@@ -20,8 +20,13 @@
   }
 }
 .nut-inputnumber {
-  display: flex;
+  display: $inputnumber-display;
   align-items: center;
+  border: $inputnumber-border;
+  border-radius: $inputnumber-border-radius;
+  height: $inputnumber-height;
+  line-height: $inputnumber-line-height;
+  box-sizing: $inputnumber-border-box;
 
   &--disabled {
     input {
@@ -39,6 +44,11 @@
     }
   }
 
+  input {
+    border-left: $inputnumber-border;
+    border-right: $inputnumber-border;
+  }
+
   input,
   &__text--readonly {
     width: $inputnumber-input-width;

src/packages/__VUE/menuitem/index.scss

@@ -8,7 +8,7 @@
 
 .nut-menu-item {
   .active {
-    font-weight: 500;
+    font-weight: $menu-active-item-font-weight;
     color: $menu-item-active-text-color !important;
   }
 }

src/packages/__VUE/popover/index.scss

@@ -156,8 +156,8 @@
       display: flex;
       align-items: center;
       padding-bottom: 8px;
-      padding: 8px 0;
-      margin: 0 8px;
+      padding: $popover-menu-item-padding;
+      margin: $popover-menu-item-margin;
       border-bottom: 1px solid $popover-border-bottom-color;
 
       &:last-child {
@@ -167,6 +167,7 @@
         display: block;
         margin-right: 12px;
         margin-left: 8px;
+        line-height: $popover-menu-name-line-height;
       }
     }
   }

src/packages/__VUE/radio/index.scss

@@ -74,6 +74,6 @@
     color: $radio-icon-disable-color;
   }
   &__icon--disable {
-    color: $help-color;
+    color: $radio-icon-disable-color2;
   }
 }

src/packages/__VUE/searchbar/index.scss

@@ -26,6 +26,11 @@
   padding: $searchbar-padding;
   background: $searchbar-background;
   box-sizing: border-box;
+  color: $searchbar-input-bar-color;
+
+  &::placeholder {
+    color: $searchbar-input-bar-placeholder-color;
+  }
 
   &__search-label {
     padding: 0 5px;

src/packages/__VUE/skeleton/index.scss

@@ -30,7 +30,7 @@
       .title {
         width: 30%;
         height: 15px;
-        background: #efefef;
+        background: $skeleton-content-line-title-background-color;
       }
     }
   }

src/packages/__VUE/sku/index.scss

@@ -51,10 +51,11 @@
     margin-top: 18px;
     padding: 0 18px;
     > img {
-      width: 100px;
-      height: 100px;
+      width: $sku-product-img-width;
+      height: $sku-product-img-height;
       flex-shrink: 0;
       margin-right: 12px;
+      border-radius: $sku-product-img-border-radius;
     }
     &-right {
       flex: 1;
@@ -83,25 +84,25 @@
       flex-direction: column;
       &-title {
         height: 13px;
-        font-weight: bold;
-        font-size: 13px;
-        color: $black;
-        margin-bottom: 18px;
+        font-weight: $sku-spec-title-font-weight;
+        font-size: $sku-spec-title-font-size;
+        color: $sku-spec-title-color;
+        margin-bottom: $sku-spec-title-margin-bottom;
       }
       &-skus {
         display: flex;
         flex-wrap: wrap;
         &-sku {
-          margin-right: 12px;
-          height: 30px;
-          line-height: 30px;
-          padding: 0 18px;
+          margin-right: $sku-spec-margin-right;
+          height: $sku-spec-height;
+          line-height: $sku-spec-line-height;
+          padding: $sku-spec-padding;
           border-radius: 15px;
-          font-size: 11px;
-          color: $black;
+          font-size: $sku-spec-font-size;
+          color: $sku-spec-color;
           flex-shrink: 0;
           margin-bottom: 12px;
-          background: rgba(242, 242, 242, 1);
+          background: $sku-spec-background;
           border: 1px solid rgba(242, 242, 242, 1);
 
           &.active {
@@ -156,7 +157,7 @@
       font-size: 12px;
     }
     &-btn {
-      height: 54px;
+      height: $sku-operate-btn-height;
       width: 100%;
       display: flex;
       justify-content: space-between;
@@ -165,14 +166,16 @@
       text-align: center;
       padding: 0 18px;
       box-sizing: border-box;
+      border-top: $sku-operate-btn-border-top;
       &-item {
         width: 100%;
-        height: 40px;
-        line-height: 40px;
+        height: $sku-operate-btn-item-height;
+        line-height: $sku-operate-btn-item-line-height;
         margin-right: 18px;
         background: $sku-opetate-bg-default;
         border-radius: 21px;
-        font-size: 15px;
+        font-size: $sku-operate-btn-item-font-size;
+        font-weight: $sku-operate-btn-item-font-weight;
         color: $white;
         &:last-child {
           margin-right: 0;

src/packages/__VUE/tabbar/index.scss

@@ -11,9 +11,9 @@
   width: 100%;
   display: flex;
   align-items: center;
-  height: 50px;
   box-sizing: content-box;
   background: $white;
+  height: $tabbar-height;
 
   &:last-child {
     border-right: 0;
@@ -30,4 +30,13 @@
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
   }
+
+  &-item_icon-box_nav-word {
+    line-height: $tabbar-word-line-height;
+    margin-top: $tabbar-word-margin-top;
+  }
+
+  &-item__icon--unactive {
+    color: $tabbar-unactive-color;
+  }
 }

src/packages/__VUE/tabs/index.scss

@@ -157,6 +157,8 @@
         left: 50%;
         transform: translate(-50%, 0);
         overflow: hidden;
+        border-radius: $tabs-titles-item-line-border-radius;
+        opacity: $tabs-titles-item-line-opacity;
       }
 
       &__smile {

src/packages/__VUE/tag/index.scss

@@ -4,6 +4,7 @@
   align-items: center;
   font-size: $tag-font-size;
   border-radius: $tag-default-border-radius;
+  height: $tag-height;
   &--default {
     color: $tag-default-color;
     background: $tag-default-background-color;

src/packages/styles/variables-jdb.scss

@@ -172,6 +172,7 @@ $button-warning-background-color: linear-gradient(
   rgba(255, 190, 13, 1) 100%
 ) !default;
 $button-plain-background-color: $white !default;
+$button-small-round-border-radius: $button-border-radius !default;
 
 // cell
 
@@ -270,6 +271,14 @@ $inputnumber-input-border-radius: 4px !default;
 $inputnumber-input-width: 40px !default;
 $inputnumber-input-margin: 0 6px !default;
 $inputnumber-input-border: 0 !default;
+$inputnumber-border: 0 !default;
+$inputnumber-border-radius: 0 !default;
+$inputnumber-height: auto !default;
+$inputnumber-line-height: normal !default;
+$inputnumber-input-border-left: 0 !default;
+$inputnumber-input-border-right: 0 !default;
+$inputnumber-border-box: content-box !default;
+$inputnumber-display: flex !default;
 
 // actionsheet
 $actionsheet-light-color: #f6f6f6 !default;
@@ -380,6 +389,7 @@ $calendar-day-width: 14.28% !default;
 $calendar-day-height: 64px !default;
 $calendar-day-font-weight: 500 !default;
 $calendar-day67-font-color: $primary-color !default;
+$calendar-month-title-font-size: inherit !default;
 
 //overlay
 $overlay-bg-color: rgba(0, 0, 0, 0.7) !default;
@@ -422,6 +432,9 @@ $tabbar-border-bottom: 1px solid #eee !default;
 $tabbar-box-shadow: none !default;
 $tabbar-item-text-font-size: $font-size-0 !default;
 $tabbar-item-text-line-height: initial !default;
+$tabbar-height: auto !default;
+$tabbar-word-margin-top: auto !default;
+$tabbar-word-line-height: normal !default;
 
 //infiniteloading
 $infiniteloading-bottom-color: #c8c8c8 !default;
@@ -445,6 +458,16 @@ $swiper-pagination-item-border-radius: 2px !default;
 //address
 $address-region-tab-line: linear-gradient(90deg, $primary-color-start 0%, rgba($primary-color, 0.15) 100%) !default;
 $address-icon-color: $primary-color !default;
+$address-header-title-font-size: 18px !default;
+$address-header-title-color: #262626 !default;
+$address-region-tab-font-size: 13px !default;
+$address-region-tab-color: #1d1e1e !default;
+$address-region-tab-active-item-font-weight: bold !default;
+$address-region-tab-line-border-radius: 0 !default;
+$address-region-tab-line-opacity: 1 !default;
+$address-region-item-color: #333 !default;
+$address-region-item-font-size: $font-size-1 !default;
+$address-item-margin-right: 9px !default;
 
 //steps
 $steps-base-icon-width: 25px !default;
@@ -477,6 +500,9 @@ $steps-process-icon-text-color: $primary-color !default;
 
 // dialog
 $dialog-width: 296px !default;
+$dialog-header-font-weight: normal !default;
+$dialog-header-color: rgba(38, 38, 38, 1) !default;
+$dialog-footer-justify-content: space-around !default;
 
 // checkbox
 $checkbox-label-color: #1d1e1e !default;
@@ -485,6 +511,7 @@ $checkbox-icon-disable-color: #d6d6d6 !default;
 $checkbox-label-margin-left: 15px !default;
 $checkbox-label-font-size: 14px !default;
 $checkbox-icon-font-size: 18px !default;
+$checkbox-icon-disable-color2: $help-color !default;
 
 //radio
 $radio-label-font-color: #1d1e1e !default;
@@ -499,6 +526,7 @@ $radio-label-font-size: 14px !default;
 $radio-button-font-size: 12px !default;
 $radio-button-padding: 5px 18px !default;
 $radio-icon-font-size: 18px !default;
+$radio-icon-disable-color2: $help-color !default;
 
 //fixednav
 $fixednav-bg-color: $white !default;
@@ -570,6 +598,7 @@ $tag-warning-background-color: #f3812e !default;
 $tag-default-color: #ffffff !default;
 $tag-border-width: 1px !default;
 $tag-plain-background-color: #fff !default;
+$tag-height: auto !default;
 
 //badge
 $badge-background-color: linear-gradient(135deg, $primary-color-start 0%, $primary-color-end 100%) !default;
@@ -590,6 +619,9 @@ $popover-dark-background-color: rgba(75, 76, 77, 1) !default;
 $popover-border-bottom-color: rgba(229, 229, 229, 1) !default;
 $popover-primary-text-color: rgba(51, 51, 51, 1) !default;
 $popover-disable-color: rgba(154, 155, 157, 1) !default;
+$popover-menu-item-padding: 8px 0 !default;
+$popover-menu-item-margin: 0 8px !default;
+$popover-menu-name-line-height: normal !default;
 
 //progress
 $progress-inner-background-color: linear-gradient(135deg, $primary-color-start 0%, $primary-color-end 100%) !default;
@@ -643,6 +675,8 @@ $tabs-vertical-tab-line-color: linear-gradient(180deg, $primary-color 0%, rgba($
 $tabs-vertical-titles-item-height: 40px !default;
 $tabs-vertical-titles-item-active-line-height: 14px !default;
 $tabs-vertical-titles-width: 100px !default;
+$tabs-titles-item-line-border-radius: 0 !default;
+$tabs-titles-item-line-opacity: 1 !default;
 
 // indicator
 $indicator-color: $primary-color !default;
@@ -671,6 +705,7 @@ $menu-item-option-i-margin-right: 6px !default;
 $menu-bar-box-shadow: 0 2px 12px rgba(89, 89, 89, 0.12) !default;
 $menu-scroll-fixed-top: 0 !default;
 $menu-scroll-fixed-z-index: 1000 !default;
+$menu-active-item-font-weight: 500 !default;
 
 // collapse
 $collapse-item-padding: 13px 36px 13px 26px !default;
@@ -698,6 +733,8 @@ $searchbar-input-height: 32px !default;
 $searchbar-input-width: 100% !default;
 $searchbar-input-border-radius: 16px !default;
 $searchbar-input-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04) !default;
+$searchbar-input-bar-color: inherit !default;
+$searchbar-input-bar-placeholder-color: inherit !default;
 
 // empty
 $empty-padding: 32px 0 !default;
@@ -736,6 +773,9 @@ $form-item-body-input-text-align: left !default;
 $form-item-tip-font-size: 10px !default;
 $form-item-tip-text-align: left !default;
 
+// skeleton
+$skeleton-content-line-title-background-color: #efefef !default;
+
 // sku
 $sku-item-border: 1px solid $primary-color !default;
 $sku-item-disable-line: line-through !default;
@@ -753,6 +793,26 @@ $card-font-size-0: $font-size-0 !default;
 $card-font-size-1: $font-size-1 !default;
 $card-font-size-2: $font-size-2 !default;
 $card-font-size-3: $font-size-3 !default;
+$sku-spec-height: 30px !default;
+$sku-spec-line-height: $sku-spec-height !default;
+$sku-spec-font-size: 11px !default;
+$sku-spec-background: rgba(242, 242, 242, 1) !default;
+$sku-spec-color: $black !default;
+$sku-spec-margin-right: 12px !default;
+$sku-spec-padding: 0 18px !default;
+$sku-spec-title-font-weight: bold !default;
+$sku-spec-title-font-size: 13px !default;
+$sku-spec-title-color: $black !default;
+$sku-spec-title-margin-bottom: 18px !default;
+$sku-operate-btn-height: 54px !default;
+$sku-operate-btn-border-top: 0 !default;
+$sku-operate-btn-item-height: 40px !default;
+$sku-operate-btn-item-line-height: $sku-operate-btn-item-height;
+$sku-operate-btn-item-font-size: 15px !default;
+$sku-operate-btn-item-font-weight: normal !default;
+$sku-product-img-width: 100px !default;
+$sku-product-img-height: $sku-product-img-width !default;
+$sku-product-img-border-radius: 0 !default;
 
 // grid
 $grid-border-color: #f5f6f7 !default;
@@ -761,6 +821,8 @@ $grid-item-content-bg-color: $white !default;
 $grid-item-text-margin: 8px !default;
 $grid-item-text-color: $title-color2 !default;
 $grid-item-text-font-size: $font-size-1 !default;
+$card-left-border-radius: 0 !default;
+$card-left-background-color: inherit !default;
 
 // table
 $table-border-color: #ececec !default;

src/packages/styles/variables-jddkh.scss

@@ -0,0 +1,894 @@
+// color
+
+// 主色调
+$primary-color: #fa2c19 !default;
+$primary-color-start: $primary-color !default;
+$primary-color-end: #fa6419 !default;
+
+// 辅助色
+$help-color: #f5f5f5 !default;
+// 标题常规文字
+$title-color: #1a1a1a !default;
+// 副标题
+$title-color2: #666666 !default;
+// 次内容
+$text-color: #808080 !default;
+// 特殊禁用色
+$disable-color: #cccccc !default;
+$white: #fff !default;
+$black: #000 !default;
+$required-color: #fa2c19 !default;
+
+$dark-background: #131313 !default;
+$dark-background2: #1b1b1b !default;
+$dark-background3: #141414 !default;
+$dark-background4: #323233 !default;
+$dark-background5: #646566 !default;
+$dark-background6: #380e08 !default;
+$dark-background7: #707070 !default;
+$dark-color: $white !default;
+$dark-color2: #f2270c !default;
+$dark-color3: rgba(232, 230, 227, 0.8) !default;
+$dark-color-gray: $text-color !default;
+$dark-calendar-choose-color: rgba(227, 227, 227, 0.2) !default;
+
+$font-family: PingFang SC, Microsoft YaHei, Helvetica, Hiragino Sans GB, SimSun, sans-serif !default;
+
+// ---- Animation ----
+$animation-duration: 0.25s !default;
+$animation-timing-fun: cubic-bezier(0.55, 0.085, 0.68, 0.53) !default;
+
+// Font
+$font-size-0: 10px !default;
+$font-size-1: 12px !default;
+$font-size-2: 14px !default;
+$font-size-3: 16px !default;
+$font-size-4: 18px !default;
+$font-weight-bold: 400 !default;
+
+$font-size-small: $font-size-1 !default;
+$font-size-base: $font-size-2 !default;
+$font-size-large: $font-size-3 !default;
+$line-height-base: 1.5 !default;
+
+// button
+$button-border-radius: 21px !default;
+$button-border-width: 1px !default;
+$button-default-bg-color: $white !default;
+$button-default-border-color: rgba(204, 204, 204, 1) !default;
+$button-default-color: rgba(102, 102, 102, 1) !default;
+$button-default-padding: 0 16px !default;
+$button-mini-padding: 0 12px !default;
+$button-small-padding: 0 15px !default;
+$button-small-height: 29px !default;
+$button-mini-height: 24px !default;
+$button-default-height: 37px !default;
+$button-large-height: 48px !default;
+$button-large-line-height: 46px !default;
+$button-small-line-height: 29px !default;
+$button-block-height: 48px !default;
+$button-default-line-height: 37px !default;
+$button-block-line-height: 46px !default;
+$button-default-font-size: $font-size-2 !default;
+$button-large-font-size: $button-default-font-size !default;
+$button-small-font-size: $font-size-1 !default;
+$button-mini-font-size: $font-size-1 !default;
+$button-mini-line-height: 1.2 !default;
+$button-disabled-opacity: 0.68 !default;
+$button-primary-color: $white !default;
+$button-primary-border-color: $primary-color !default;
+$button-primary-background-color: linear-gradient(135deg, rgba(255, 64, 79, 1) 0%, rgba(250, 44, 25, 1) 100%) !default;
+$button-info-color: $white !default;
+$button-info-border-color: rgba(73, 106, 242, 1) !default;
+$button-info-background-color: linear-gradient(315deg, rgba(73, 143, 242, 1) 0%, rgba(73, 101, 242, 1) 100%) !default;
+$button-success-color: $white !default;
+$button-success-border-color: rgba(38, 191, 38, 1) !default;
+$button-success-background-color: linear-gradient(
+  135deg,
+  rgba(38, 191, 38, 1) 0%,
+  rgba(39, 197, 48, 1) 45%,
+  rgba(40, 207, 63, 1) 83%,
+  rgba(41, 212, 70, 1) 100%
+) !default;
+
+$button-danger-color: $white !default;
+$button-danger-border-color: rgba(250, 44, 25, 1) !default;
+$button-danger-background-color: rgba(250, 44, 25, 1) !default;
+$button-warning-color: $white !default;
+$button-warning-border-color: rgba(255, 158, 13, 1) !default;
+$button-warning-background-color: linear-gradient(
+  135deg,
+  rgba(255, 158, 13, 1) 0%,
+  rgba(255, 167, 13, 1) 45%,
+  rgba(255, 182, 13, 1) 83%,
+  rgba(255, 190, 13, 1) 100%
+) !default;
+$button-plain-background-color: $white !default;
+$button-small-round-border-radius: 15px !default;
+
+// cell
+
+$cell-color: $title-color2 !default;
+$cell-title-font: $font-size-2 !default;
+$cell-title-desc-font: $font-size-1 !default;
+$cell-desc-font: $font-size-2 !default;
+$cell-desc-color: $disable-color !default;
+$cell-border-radius: 6px !default;
+$cell-padding: 13px 16px !default;
+$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-large-title-font: $font-size-large !default;
+$cell-large-title-desc-font: $font-size-base !default;
+$cell-large-padding: 15px 16px !default;
+$cell-background: $white !default;
+
+// cell-group
+
+$cell-group-title-padding: 0 10px !default;
+$cell-group-title-color: #909ca4 !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-desc-font-size: $font-size-1 !default;
+$cell-group-desc-line-height: 16px !default;
+$cell-group-background-color: $white !default;
+
+// divider
+
+$divider-margin: 16px 0 !default;
+$divider-text-font-size: $font-size-2 !default;
+$divider-text-color: #909ca4 !default;
+$divider-line-height: 2px !default;
+$divider-before-margin-right: 16px !default;
+$divider-after-margin-left: 16px !default;
+$divider-vertical-height: 12px !default;
+$divider-vertical-top: 2px !default;
+$divider-vertical-border-left: rgba(0, 0, 0, 0.06) !default;
+$divider-vertical-margin: 0 8px !default;
+
+// icon
+
+$icon-height: 20px !default;
+$icon-width: 20px !default;
+$icon-line-height: 20px !default;
+
+// uploader
+
+$uploader-picture-width: 100px !default;
+$uploader-picture-height: 100px !default;
+$uploader-background: #f7f8fa !default;
+
+// picker
+$picker-cancel-color: #808080 !default;
+$picker-ok-color: $primary-color !default;
+$picker-bar-cancel-font-size: 14px !default;
+$picker-bar-ok-font-size: 14px !default;
+$picker-bar-button-padding: 0 15px !default;
+$picker-bar-title-font-size: 16px !default;
+$picker-bar-title-color: $title-color !default;
+$picker-bar-title-font-weight: normal !default;
+$picker-item-height: 36px !default;
+$picker-item-text-color: $title-color !default;
+$picker-item-active-text-color: inherit !default;
+$picker-item-text-font-size: 14px !default;
+$picker-item-active-line-border: 1px solid #d8d8d8 !default;
+$picker-columns-item-color: $title-color !default;
+
+//input
+$input-border-bottom: #eaf0fb !default;
+$input-disabled-color: #c8c9cc !default;
+$input-required-color: $required-color !default;
+$input-font-size: $font-size-2 !default;
+
+// textarea
+
+$textarea-font: $font-size-2 !default;
+$textarea-height: 100px !default;
+$textarea-limit-color: $text-color !default;
+$textarea-text-color: $title-color !default;
+$textarea-disabled-color: $disable-color !default;
+
+// inputnumber
+
+$inputnumber-icon-color: $title-color !default;
+$inputnumber-icon-void-color: $disable-color !default;
+$inputnumber-icon-size: 20px !default;
+$inputnumber-input-font-size: 12px !default;
+$inputnumber-input-font-color: $title-color !default;
+$inputnumber-input-background-color: transparent !default;
+$inputnumber-input-border-radius: 0 !default;
+$inputnumber-input-width: 31px !default;
+$inputnumber-input-margin: 0 !default;
+$inputnumber-input-border: 1 !default;
+$inputnumber-border: 1px solid $disable-color !default;
+$inputnumber-border-radius: 2px !default;
+$inputnumber-height: 18px !default;
+$inputnumber-line-height: 18px !default;
+$inputnumber-input-border-left: $inputnumber-border !default;
+$inputnumber-input-border-right: $inputnumber-border !default;
+$inputnumber-border-box: border-box !default;
+$inputnumber-display: inline-flex !default;
+
+// actionsheet
+$actionsheet-light-color: #f6f6f6 !default;
+$actionsheet-item-border-bottom: none !default;
+$actionsheet-item-font-size: $font-size-2 !default;
+$actionsheet-item-subdesc-font-size: $font-size-1 !default;
+$actionsheet-item-cancel-border-top: 1px solid $actionsheet-light-color !default;
+$actionsheet-item-line-height: 24px !default;
+$actionsheet-item-font-color: $title-color !default;
+
+//shortpassword
+$shortpassword-background-color: rgba(245, 245, 245, 1) !default;
+$shortpassword-border-color: #ddd !default;
+$shortpassword-error: $primary-color !default;
+$shortpassword-forget: rgba(128, 128, 128, 1) !default;
+
+//numberkeyboard
+$numberkeyboard-width: 100% !default;
+$numberkeyboard-padding: 0 0 22px 0 !default;
+$numberkeyboard-background-color: #f2f3f5 !default;
+$numberkeyboard-header-height: 34px !default;
+$numberkeyboard-header-padding: 6px 0 0 0 !default;
+$numberkeyboard-header-color: #646566 !default;
+$numberkeyboard-header-font-size: 16px !default;
+$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-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-font-size: 28px !default;
+$numberkeyboard-key-font-size-color: #333 !default;
+$numberkeyboard-key-finish-font-size: 16px !default;
+$numberkeyboard-key-finish-font-size-color: #fff !default;
+$numberkeyboard-key-finish-background-color: #1989fa !default;
+$numberkeyboard-key-activeFinsh-background-color: #0570db !default;
+
+// countdown
+$countdown-display: flex !default;
+$countdown-color: inherit !default;
+$countdown-font-size: initial !default;
+
+//large price
+$price-symbol-big-size: $font-size-2 !default;
+$price-big-size: 24px !default;
+$price-decimal-big-size: $font-size-2 !default;
+
+//normal price
+$price-symbol-medium-size: 14px !default;
+$price-medium-size: 16px !default;
+$price-decimal-medium-size: 14px !default;
+
+// small price
+$price-symbol-small-size: 10px !default;
+$price-small-size: 12px !default;
+$price-decimal-small-size: 10px !default;
+
+//avatar
+$avatar-square: 5px !default;
+$avatar-large-width: 60px !default;
+$avatar-large-height: 60px !default;
+$avatar-small-width: 32px !default;
+$avatar-small-height: 32px !default;
+$avatar-normal-width: 40px !default;
+$avatar-normal-height: 40px !default;
+
+//switch
+$switch-close-bg-color: #ebebeb !default;
+$switch-close--cline-bg-color: #f0f0f0 !default;
+$switch-width: 35px !default;
+$switch-height: 21px !default;
+$switch-line-height: 21px !default;
+$switch-border-radius: 12px !default;
+$switch-inside-width: 13px !default;
+$switch-inside-height: 13px !default;
+$switch-inside-open-transform: translateX(146%) !default;
+$switch-inside-close-transform: translateX(30%) !default;
+
+// toast
+$toast-title-font-size: 16px !default;
+$toast-text-font-size: 14px !default;
+$toast-font-color: $white !default;
+$toast-inner-padding: 24px 30px !default;
+$toast-inner-bg-color: rgba(0, 0, 0, 0.85) !default;
+$toast-inner-border-radius: 12px !default;
+$toast-cover-bg-color: rgba(0, 0, 0, 0) !default;
+
+//backtop
+$backtop-border-color: #e0e0e0 !default;
+
+// calendar
+$calendar-primary-color: $primary-color !default;
+$calendar-choose-color: rgba(250, 44, 25, 0.12) !default;
+$calendar-choose-font-color: $title-color !default;
+$calendar-base-color: $title-color !default;
+$calendar-disable-color: #d1d0d0 !default;
+$calendar-base-font: $font-size-3 !default;
+$calendar-title-font: $font-size-4 !default;
+$calendar-title-font-weight: normal !default;
+$calendar-sub-title-font: $font-size-2 !default;
+$calendar-text-font: $font-size-1 !default;
+$calendar-day-font: 16px !default;
+$calendar-day-active-border-radius: 0px !default;
+$calendar-day-width: 14.28% !default;
+$calendar-day-height: 54px !default;
+$calendar-day-font-weight: 500 !default;
+$calendar-day67-font-color: $primary-color !default;
+$calendar-month-title-font-size: $font-size-2 !default;
+
+//overlay
+$overlay-bg-color: rgba(0, 0, 0, 0.65) !default;
+
+//popup
+$popup-close-icon-margin: 16px !default;
+$popup-border-radius: 12px !default;
+
+// Notify
+$notify-text-color: $white !default;
+$notify-padding: 12px 0 !default;
+$notify-font-size: 14px !default;
+$notify-height: 44px !default;
+$notify-line-height: auto !default;
+$notify-base-background-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
+$notify-primary-background-color: linear-gradient(
+  315deg,
+  rgba(73, 143, 242, 1) 0%,
+  rgba(73, 101, 242, 1) 100%
+) !default;
+$notify-success-background-color: linear-gradient(
+  135deg,
+  rgba(38, 191, 38, 1) 0%,
+  rgba(39, 197, 48, 1) 45%,
+  rgba(40, 207, 63, 1) 83%,
+  rgba(41, 212, 70, 1) 100%
+) !default;
+$notify-danger-background-color: rgba(250, 50, 25, 1) !default;
+$notify-warning-background-color: linear-gradient(135deg, rgba(255, 93, 13, 1) 0%, rgba(255, 154, 13, 1) 100%) !default;
+
+// rate
+$rate-icon-color: $primary-color !default;
+$rate-icon-void-color: $disable-color !default;
+
+// tabbar
+$tabbar-active-color: $primary-color !default;
+$tabbar-unactive-color: $primary-color !default;
+$tabbar-border-top: 1px solid #eee !default;
+$tabbar-border-bottom: 1px solid #eee !default;
+$tabbar-box-shadow: none !default;
+$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-word-line-height: 1 !default;
+
+//infiniteloading
+$infiniteloading-bottom-color: #c8c8c8 !default;
+
+//range
+$range-tip-font-color: #333333 !default;
+$range-bg-color: rgba($primary-color, 0.5) !default;
+$range-bg-color-tick: #fa958c !default;
+$range-bar-bg-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
+$range-bar-btn-bg-color: $white !default;
+$range-bar-btn-width: 24px !default;
+$range-bar-btn-height: 24px !default;
+$range-bar-btn-border: 1px solid $primary-color !default;
+
+//swiper
+$swiper-pagination-item-width: 8px !default;
+$swiper-pagination-item-height: 3px !default;
+$swiper-pagination-item-margin-right: 7px !default;
+$swiper-pagination-item-border-radius: 2px !default;
+
+//address
+$address-region-tab-line: linear-gradient(90deg, $primary-color 0%, rgba($primary-color, 0.15) 100%) !default;
+$address-icon-color: $primary-color !default;
+$address-header-title-font-size: $font-size-3 !default;
+$address-header-title-color: $title-color !default;
+$address-region-tab-font-size: $font-size-3 !default;
+$address-region-tab-color: $title-color !default;
+$address-region-tab-active-item-font-weight: 600 !default;
+$address-region-tab-line-border-radius: 2px !default;
+$address-region-tab-line-opacity: 0.8 !default;
+$address-region-item-color: $title-color !default;
+$address-region-item-font-size: $font-size-2 !default;
+$address-item-margin-right: 10px !default;
+
+//steps
+$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-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-font-size: 14px !default;
+$steps-base-content-color: #666 !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-content-color: #909ca4 !default;
+
+$steps-finish-head-color: $primary-color !default;
+$steps-finish-head-border-color: $primary-color !default;
+$steps-finish-title-color: $primary-color !default;
+$steps-finish-line-background: $primary-color !default;
+$steps-finish-icon-text-color: $white !default;
+
+$steps-process-head-color: $white !default;
+$steps-process-head-border-color: $primary-color !default;
+$steps-process-title-color: $primary-color !default;
+$steps-process-icon-text-color: $primary-color !default;
+
+// dialog
+$dialog-width: 290px !default;
+$dialog-header-font-weight: 600 !default;
+$dialog-header-color: $title-color !default;
+$dialog-footer-justify-content: center !default;
+
+// checkbox
+$checkbox-label-color: #1d1e1e !default;
+$checkbox-label-disable-color: #999 !default;
+$checkbox-icon-disable-color: #d6d6d6 !default;
+$checkbox-label-margin-left: 15px !default;
+$checkbox-label-font-size: 14px !default;
+$checkbox-icon-font-size: 18px !default;
+$checkbox-icon-disable-color2: $checkbox-icon-disable-color !default;
+
+//radio
+$radio-label-font-color: #1d1e1e !default;
+$radio-label-font-active-color: $primary-color !default;
+$radio-label-disable-color: #999 !default;
+$radio-icon-disable-color: #d6d6d6 !default;
+$radio-label-button-border-color: $primary-color !default;
+$radio-label-button-background: rgba($primary-color, 0.05) !default;
+$radio-label-margin-left: 15px !default;
+$radio-button-border-radius: 15px !default;
+$radio-label-font-size: 14px !default;
+$radio-button-font-size: 12px !default;
+$radio-button-padding: 5px 18px !default;
+$radio-icon-font-size: 18px !default;
+$radio-icon-disable-color2: $radio-icon-disable-color !default;
+
+//fixednav
+$fixednav-bg-color: $white !default;
+$fixednav-font-color: $black !default;
+$fixednav-index: 201 !default;
+$fixednav-btn-bg: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
+$fixednav-item-active-color: $primary-color !default;
+
+// NoticeBar
+$noticebar-background: rgba(255, 252, 217, 1) !default;
+$noticebar-color: #d9500b !default;
+$noticebar-font-size: $font-size-1 !default;
+$noticebar-height: 40px !default;
+$noticebar-line-height: 24px !default;
+$noticebar-left-icon-width: 12px !default;
+$noticebar-right-icon-width: 10px !default;
+$noticebar-box-padding: 0 12px !default;
+$noticebar-wrapable-padding: 16px !default;
+$noticebar-lefticon-margin: 0 6px 0 0 !default;
+$noticebar-righticon-margin: 0 0 0 6px !default;
+
+// TimeSelect
+$timeselect-title-font-size: $font-size-2 !default;
+$timeselect-title-color: $title-color !default;
+$timeselect-title-width: 100% !default;
+$timeselect-title-height: 50px !default;
+$timeselect-title-line-height: 50px !default;
+$timeselect-pannel-bg-color: #f6f7f9 !default;
+
+// TimePannel
+$timeselect-timepannel-text-color: $title-color2 !default;
+$timeselect-timepannel-font-size: $font-size-2 !default;
+$timeselect-timepannel-cur-bg-color: $white !default;
+$timeselect-timepannel-cur-text-color: #333333 !default;
+$timeselect-timepannel-width: 140px !default;
+$timeselect-timepannel-height: 40px !default;
+$timeselect-timepannel-padding: 15px !default;
+
+// TimeDetail
+$timeselect-timedetail-padding: 0 5px 50px 13px !default;
+$timeselect-timedetail-item-width: 100px !default;
+$timeselect-timedetail-item-height: 50px !default;
+$timeselect-timedetail-item-line-height: 50px !default;
+$timeselect-timedetail-item-bg-color: #f6f7f9 !default;
+$timeselect-timedetail-item-border-radius: 5px !default;
+$timeselect-timedetail-item-text-color: #333333 !default;
+$timeselect-timedetail-item-text-font-size: $font-size-2 !default;
+$timeselect-timedetail-item-cur-bg-color: rgba($primary-color, 0.15) !default;
+$timeselect-timedetail-item-cur-border: $primary-color !default;
+$timeselect-timedetail-item-cur-text-color: $primary-color !default;
+$timeselect-timedetail-time-text-color: #999 !default;
+$timeselect-timedetail-time-font-size: $font-size-1 !default;
+
+//tag
+$tag-font-size: $font-size-0 !default;
+$tag-default-border-radius: 2px !default;
+$tag-round-border-radius: 8px !default;
+$tag-default-background-color: #000000 !default;
+$tag-primary-background-color: #3460fa !default;
+$tag-success-background-color: #4fc08d !default;
+$tag-danger-background-color: linear-gradient(
+  135deg,
+  rgba(242, 20, 12, 1) 0%,
+  rgba(232, 34, 14, 1) 69.83950099728881%,
+  rgba(242, 77, 12, 1) 100%
+) !default;
+$tag-danger-background-color-plain: #df3526 !default;
+$tag-warning-background-color: #f3812e !default;
+$tag-default-color: #ffffff !default;
+$tag-border-width: 1px !default;
+$tag-plain-background-color: #fff !default;
+$tag-height: 11px !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-border-radius: 8px !default;
+$badge-padding: 0 5px !default;
+$badge-content-transform: translateY(-50%) translateX(100%) !default;
+$badge-z-index: 1 !default;
+$badge-dot-width: 7px !default;
+$badge-dot-height: 7px !default;
+$badge-dot-border-radius: 7px !default;
+$badge-dot-padding: 0px !default;
+
+//popover
+$popover-white-background-color: rgba(255, 255, 255, 1) !default;
+$popover-dark-background-color: rgba(75, 76, 77, 1) !default;
+$popover-border-bottom-color: #f0f0f0 !default;
+$popover-primary-text-color: rgba(51, 51, 51, 1) !default;
+$popover-disable-color: rgba(154, 155, 157, 1) !default;
+$popover-menu-item-padding: 16px 0 !default;
+$popover-menu-item-margin: 0 20px !default;
+$popover-menu-name-line-height: 1 !default;
+
+//progress
+$progress-inner-background-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
+$progress-insidetext-background: $progress-inner-background-color !default;
+$progress-outer-background-color: #f3f3f3 !default;
+$progress-outer-border-radius: 12px !default;
+$progress-insidetext-border-radius: 5px !default;
+$progress-insidetext-padding: 3px 5px 3px 6px !default;
+$progress-insidetext-top: -42% !default;
+$progress-small-height: 5px !default;
+$progress-small-text-font-size: 7px !default;
+$progress-small-text-line-height: 10px !default;
+$progress-small-text-padding: 2px 4px !default;
+$progress-small-text-top: -100% !default;
+$progress-base-height: 10px !default;
+$progress-base-text-font-size: 9px !default;
+$progress-base-text-line-height: 13px !default;
+$progress-base-text-padding: $progress-insidetext-padding !default;
+$progress-base-text-top: $progress-insidetext-top !default;
+$progress-large-height: 15px !default;
+$progress-large-text-font-size: 13px !default;
+$progress-large-text-line-height: 18px !default;
+$progress-large-text-padding: $progress-insidetext-padding !default;
+$progress-large-text-top: $progress-insidetext-top !default;
+
+//pagination
+$pagination-color: $primary-color !default;
+$pagination-font-size: $font-size-2 !default;
+$pagination-item-border-color: #e4e7eb !default;
+$pagination-active-background-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
+$pagination-disable-color: rgba(116, 116, 116, 0.31) !default;
+$pagination-disable-background-color: #f7f8fa !default;
+$pagination-item-border-width: 1px !default;
+$pagination-item-border-radius: 2px !default;
+$pagination-prev-next-padding: 0 11px !default;
+
+// tabs
+$tabs-tab-smile-color: $primary-color !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;
+$tabs-titles-item-small-font-size: $font-size-1 !default;
+$tabs-titles-item-color: $title-color !default;
+$tabs-titles-item-active-color: $title-color !default;
+$tabs-titles-background-color: $help-color !default;
+$tabs-horizontal-tab-line-color: linear-gradient(90deg, rgba(250, 44, 25, 1) 0%, rgba(250, 44, 25, 0.08) 100%) !default;
+$tabs-horizontal-titles-height: 46px !default;
+$tabs-horizontal-titles-item-min-width: 50px !default;
+$tabs-horizontal-titles-item-active-line-width: 31px !default;
+$tabs-vertical-tab-line-color: linear-gradient(180deg, rgba(250, 44, 25, 1) 0%, rgba(250, 44, 25, 0.08) 100%) !default;
+$tabs-vertical-titles-item-height: 31px !default;
+$tabs-vertical-titles-item-active-line-height: 14px !default;
+$tabs-vertical-titles-width: 100px !default;
+$tabs-titles-item-line-border-radius: 2px !default;
+$tabs-titles-item-line-opacity: 0.8 !default;
+
+// indicator
+$indicator-color: $primary-color !default;
+$indicator-dot-color: $disable-color !default;
+$indicator-white: $white !default;
+$indicator-size: 18px !default;
+$indicator-dot-size: calc($indicator-size / 3) !default;
+$indicator-border-size: $indicator-size + 2 !default;
+$indicator-number-font-size: 10px !default;
+
+// menu
+$menu-bar-line-height: 48px !default;
+$menu-item-font-size: $font-size-2 !default;
+$menu-item-text-color: $title-color !default;
+$menu-item-active-text-color: $primary-color !default;
+$menu-bar-border-bottom-color: #eaf0fb !default;
+$menu-bar-opened-z-index: 2001 !default;
+$menu-item-disabled-color: #969799 !default;
+$menu-title-text-padding-left: 8px !default;
+$menu-title-text-padding-right: 8px !default;
+$menu-item-content-padding: 12px 24px !default;
+$menu-item-content-max-height: 214px !default;
+$menu-item-option-padding-top: 12px !default;
+$menu-item-option-padding-bottom: 12px !default;
+$menu-item-option-i-margin-right: 6px !default;
+$menu-bar-box-shadow: 0 2px 12px rgba(89, 89, 89, 0.12) !default;
+$menu-scroll-fixed-top: 0 !default;
+$menu-scroll-fixed-z-index: 1000 !default;
+$menu-active-item-font-weight: 600 !default;
+
+// collapse
+$collapse-item-padding: 13px 36px 13px 26px !default;
+$collapse-item-color: #666666 !default;
+$collapse-item-disabled-color: #c8c9cc !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-wrapper-content-color: #666666 !default;
+$collapse-wrapper-content-font-size: $font-size-2 !default;
+$collapse-wrapper-content-line-height: 1.5 !default;
+$collapse-wrapper-content-background-color: $white !default;
+
+// searchbar
+$searchbar-background: $white !default;
+$searchbar-right-out-color: $black !default;
+$searchbar-padding: 9px 16px !default;
+$searchbar-width: 100% !default;
+$searchbar-input-background: $help-color !default;
+$searchbar-input-padding: 0 0 0 13px !default;
+$searchbar-input-height: 31px !default;
+$searchbar-input-width: 100% !default;
+$searchbar-input-border-radius: 15px !default;
+$searchbar-input-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04) !default;
+$searchbar-input-bar-color: $title-color !default;
+$searchbar-input-bar-placeholder-color: $disable-color !default;
+
+// empty
+$empty-padding: 32px 0 !default;
+$empty-image-size: 170px !default;
+$empty-description-margin-top: 4px !default;
+$empty-description-color: #bbb !default;
+$empty-description-font-size: $font-size-3 !default;
+$empty-description-line-height: 20px !default;
+$empty-description-padding: 0 40px !default;
+
+// cascader
+$cascader-font-size: $font-size-2 !default;
+$cascader-line-height: 22px !default;
+$cascader-tabs-item-padding: 0 10px !default;
+$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-color: $title-color !default;
+$cascader-item-font-size: $font-size-2 !default;
+$cascader-item-active-color: $primary-color !default;
+
+// form
+$form-item-error-line-color: $required-color !default;
+$form-item-required-color: $required-color !default;
+$form-item-error-message-color: $required-color !default;
+$form-item-label-font-size: 14px !default;
+$form-item-label-width: 90px !default;
+$form-item-label-margin-right: 10px !default;
+$form-item-label-text-align: left !default;
+$form-item-required-margin-right: 4px !default;
+$form-item-body-font-size: 14px !default;
+$form-item-body-slots-text-align: left !default;
+$form-item-body-input-text-align: left !default;
+$form-item-tip-font-size: 10px !default;
+$form-item-tip-text-align: left !default;
+
+// skeleton
+$skeleton-content-line-title-background-color: #fafafa !default;
+
+// sku
+$sku-item-border: 0 !default;
+$sku-item-disable-line: line-through !default;
+$sku-opetate-bg-default: linear-gradient(135deg, rgba(255, 64, 79, 1) 0%, rgba(250, 44, 25, 1) 100%) !default;
+$sku-item-active-bg: rgba(250, 44, 25, 0.08) !default;
+$sku-opetate-bg-buy: linear-gradient(
+  135deg,
+  rgba(255, 186, 13, 1) 0%,
+  rgba(255, 195, 13, 1) 69%,
+  rgba(255, 207, 13, 1) 100%
+) !default;
+$sku-spec-height: 27px !default;
+$sku-spec-line-height: $sku-spec-height !default;
+$sku-spec-font-size: $font-size-2 !default;
+$sku-spec-background: $help-color !default;
+$sku-spec-color: $title-color !default;
+$sku-spec-margin-right: 8px !default;
+$sku-spec-padding: 0 16px !default;
+$sku-spec-title-font-weight: 500 !default;
+$sku-spec-title-font-size: 14px !default;
+$sku-spec-title-color: #333 !default;
+$sku-spec-title-margin-bottom: 16px !default;
+$sku-operate-btn-height: 49px !default;
+$sku-operate-btn-border-top: 1px solid #f2f2f2 !default;
+$sku-operate-btn-item-height: 37px !default;
+$sku-operate-btn-item-line-height: $sku-operate-btn-item-height;
+$sku-operate-btn-item-font-size: 14px !default;
+$sku-operate-btn-item-font-weight: 600 !default;
+$sku-product-img-width: 98px !default;
+$sku-product-img-height: $sku-product-img-width !default;
+$sku-product-img-border-radius: 5px !default;
+
+// card
+$card-font-size-0: $font-size-0 !default;
+$card-font-size-1: $font-size-1 !default;
+$card-font-size-2: $font-size-2 !default;
+$card-font-size-3: $font-size-3 !default;
+$card-left-border-radius: 6px !default;
+$card-left-background-color: rgba(0, 0, 0, 0.02) !default;
+
+// grid
+$grid-border-color: #f5f6f7 !default;
+$grid-item-content-padding: 16px 8px !default;
+$grid-item-content-bg-color: $white !default;
+$grid-item-text-margin: 8px !default;
+$grid-item-text-color: $title-color2 !default;
+$grid-item-text-font-size: $font-size-1 !default;
+
+// table
+$table-border-color: #ececec !default;
+$table-cols-padding: 10px !default;
+$table-tr-even-bg-color: #f3f3f3 !default;
+$table-tr-odd-bg-color: $white !default;
+
+// navbar
+$navbar-height: 44px !default;
+$navbar-margin-bottom: 20px !default;
+$navbar-padding: 0 16px !default;
+$navbar-background: $white !default;
+$navbar-box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1) !default;
+$navbar-color: $title-color !default;
+$navbar-title-base-font: $font-size-2 !default;
+$navbar-title-font: $font-size-4 !default;
+$navbar-title-font-weight: 0 !default;
+$navbar-title-font-color: $navbar-color !default;
+$navbar-title-width: 100px !default;
+$navbar-title-icon-margin: 0 0 0 13px !default;
+
+// sidenavbar
+$sidenavbar-content-bg-color: $white !default;
+
+// subsidenavbar
+$sidenavbar-sub-title-border-color: #f6f6f6 !default;
+$sidenavbar-sub-title-bg-color: #f6f6f6 !default;
+$sidenavbar-sub-title-font-size: $font-size-large !default;
+$sidenavbar-sub-title-radius: 0 !default;
+$sidenavbar-sub-title-border: 0 !default;
+$sidenavbar-sub-title-width: 100% !default;
+$sidenavbar-sub-title-height: 40px !default;
+$sidenavbar-sub-title-text-line-height: 40px !default;
+$sidenavbar-sub-title-text-color: $title-color !default;
+
+// sidenavbaritem
+$sidenavbar-item-title-color: #333 !default;
+$sidenavbar-item-title-bg-color: $white !default;
+$sidenavbar-item-height: 40px !default;
+$sidenavbar-item-line-height: 40px !default;
+$sidenavbar-item-font-size: 16px !default;
+
+// elevator
+$elevator-list-item-highcolor: $primary-color !default;
+$elevator-list-item-font-size: 12px !default;
+$elevator-list-item-font-color: #333333 !default;
+$elevator-list-item-name-padding: 0 20px !default;
+$elevator-list-item-name-height: 30px !default;
+$elevator-list-item-name-line-height: 30px !default;
+$elevator-list-item-code-font-size: 14px !default;
+$elevator-list-item-code-font-color: #1a1a1a !default;
+$elevator-list-item-code-font-weight: 500 !default;
+$elevator-list-item-code-padding: 0 20px !default;
+$elevator-list-item-code-height: 35px !default;
+$elevator-list-item-code-line-height: 35px !default;
+$elevator-list-item-code-after-width: 100% !default;
+$elevator-list-item-code-after-height: 1px !default;
+$elevator-list-item-code-after-bg-color: #f5f5f5 !default;
+$elevator-list-item-code-current-box-shadow: 0 3px 3px 1px rgba(240, 240, 240, 1) !default;
+$elevator-list-item-code-current-bg-color: #fff !default;
+$elevator-list-item-code-current-border-radius: 50% !default;
+$elevator-list-item-code-current-width: 45px !default;
+$elevator-list-item-code-current-height: 45px !default;
+$elevator-list-item-code-current-line-height: 45px !default;
+$elevator-list-item-code-current-position: absolute !default;
+$elevator-list-item-code-current-right: 60px !default;
+$elevator-list-item-code-current-top: 50% !default;
+$elevator-list-item-code-current-transform: translateY(-50%) !default;
+$elevator-list-item-code-current-text-align: center !default;
+$elevator-list-item-bars-position: absolute !default;
+$elevator-list-item-bars-right: 8px !default;
+$elevator-list-item-bars-top: 50% !default;
+$elevator-list-item-bars-transform: translateY(-50%) !default;
+$elevator-list-item-bars-padding: 15px 0 !default;
+$elevator-list-item-bars-background-color: #eeeff2 !default;
+$elevator-list-item-bars-border-radius: 6px !default;
+$elevator-list-item-bars-text-align: center !default;
+$elevator-list-item-bars-z-index: 1 !default;
+$elevator-list-item-bars-inner-item-padding: 3px !default;
+$elevator-list-item-bars-inner-item-font-size: 10px !default;
+$elevator-list-fixed-color: $primary-color !default;
+$elevator-list-fixed-bg-color: $white !default;
+$elevator-list-fixed-box-shadow: 0 0 10px #eee !default;
+$elevator-list-item-bars-inner-item-active-color: $primary-color !default;
+
+// list
+$list-item-margin: 0 0 10px 0 !default;
+
+//Ecard
+$ecard-bg-color: #f0f2f5 !default;
+
+//addresslist
+$addresslist-bg: #fff !default;
+$addresslist-border: #f0f0f0 !default;
+$addresslist-font-color: #333333 !default;
+$addresslist-font-size: 16px !default;
+$addresslist-mask-bg: rgba(0, 0, 0, 0.4) !default;
+$addresslist-addr-font-color: #666666 !default;
+$addresslist-addr-font-size: 12px !default;
+$addresslist-set-bg: #f5a623 !default;
+$addresslist-del-bg: #e1251b !default;
+$addresslist-contnts-contact-default: $primary-color !default;
+$addresslist-contnts-contact-color: $white !default;
+
+//category
+$category-bg-color: rgba(255, 255, 255, 1) !default;
+$category-list-left-bg-color: rgba(246, 247, 249, 1) !default;
+$category-list-item-color: $title-color !default;
+$category-list-item-checked-color: rgba(255, 255, 255, 1) !default;
+$category-list-item-checked-img-bg-color: $primary-color !default;
+$category-pane-gray-color: #666 !default;
+$category-pane-border-color: rgb(153, 153, 153) !default;
+$category-pane-title-color: rgba(51, 51, 51, 1) !default;
+
+// circleProgress
+$circleprogress-primary-color: $primary-color !default;
+$circleprogress-path-color: #e5e9f2 !default;
+$circleprogress-text-color: #000000 !default;
+$circleprogress-text-size: $font-size-3 !default;
+
+// Comment
+$comment-header-user-name-color: rgba(51, 51, 51, 1) !default;
+$comment-header-time-color: rgba(153, 153, 153, 1) !default;
+$comment-bottom-label-color: rgba(153, 153, 153, 1) !default;
+$comment-shop-color: $primary-color !default;
+
+// Ellipsis
+$ellipsis-expand-collapse-color: #3460fa !default;
+
+// WaterMark
+$watermark-z-index: 2000 !default;
+
+// invoice
+$invoice-padding: 10px 10px 20px !default;
+
+@import './mixins/index';
+@import './animation/index';

src/packages/styles/variables-jdt.scss

@@ -90,6 +90,7 @@ $button-warning-color: $white !default;
 $button-warning-border-color: #ff9c00 !default;
 $button-warning-background-color: #ff9c00 !default;
 $button-plain-background-color: $white !default;
+$button-small-round-border-radius: $button-border-radius !default;
 
 // cell
 
@@ -187,6 +188,14 @@ $inputnumber-input-border-radius: 4px !default;
 $inputnumber-input-width: 40px !default;
 $inputnumber-input-margin: 0 6px !default;
 $inputnumber-input-border: 0 !default;
+$inputnumber-border: 0 !default;
+$inputnumber-border-radius: 0 !default;
+$inputnumber-height: auto !default;
+$inputnumber-line-height: normal !default;
+$inputnumber-input-border-left: 0 !default;
+$inputnumber-input-border-right: 0 !default;
+$inputnumber-border-box: content-box !default;
+$inputnumber-display: flex !default;
 
 // actionsheet
 $actionsheet-light-color: #f6f6f6 !default;
@@ -297,6 +306,7 @@ $calendar-day-width: 14.28% !default;
 $calendar-day-height: 64px !default;
 $calendar-day-font-weight: normal !default;
 $calendar-day67-font-color: $primary-color !default;
+$calendar-month-title-font-size: inherit !default;
 
 //overlay
 $overlay-bg-color: rgba(0, 0, 0, 0.7) !default;
@@ -328,6 +338,9 @@ $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: auto !default;
+$tabbar-word-margin-top: auto !default;
+$tabbar-word-line-height: normal !default;
 
 //infiniteloading
 $infiniteloading-bottom-color: #c8c8c8 !default;
@@ -351,6 +364,16 @@ $swiper-pagination-item-border-radius: 50% !default;
 //address
 $address-region-tab-line: linear-gradient(90deg, $primary-color 0%, rgba($primary-color, 0.15) 100%) !default;
 $address-icon-color: $primary-color !default;
+$address-header-title-font-size: 18px !default;
+$address-header-title-color: #262626 !default;
+$address-region-tab-font-size: 13px !default;
+$address-region-tab-color: #1d1e1e !default;
+$address-region-tab-active-item-font-weight: bold !default;
+$address-region-tab-line-border-radius: 0 !default;
+$address-region-tab-line-opacity: 1 !default;
+$address-region-item-color: #333 !default;
+$address-region-item-font-size: $font-size-1 !default;
+$address-item-margin-right: 9px !default;
 
 //steps
 $steps-base-icon-width: 18px !default;
@@ -383,6 +406,9 @@ $steps-process-icon-text-color: $primary-color !default;
 
 // dialog
 $dialog-width: 296px !default;
+$dialog-header-font-weight: normal !default;
+$dialog-header-color: rgba(38, 38, 38, 1) !default;
+$dialog-footer-justify-content: space-around !default;
 
 // checkbox
 $checkbox-label-color: rgba(0, 0, 0, 0.85) !default;
@@ -391,6 +417,7 @@ $checkbox-icon-disable-color: #d6d6d6 !default;
 $checkbox-label-margin-left: 8px !default;
 $checkbox-label-font-size: 16px !default;
 $checkbox-icon-font-size: 20px !default;
+$checkbox-icon-disable-color2: $help-color !default;
 
 //radio
 $radio-label-font-color: rgba(0, 0, 0, 0.85) !default;
@@ -405,6 +432,7 @@ $radio-label-font-size: 14px !default;
 $radio-button-font-size: 12px !default;
 $radio-button-padding: 5px 18px !default;
 $radio-icon-font-size: 20px !default;
+$radio-icon-disable-color2: $help-color !default;
 
 //fixednav
 $fixednav-bg-color: $white !default;
@@ -476,6 +504,7 @@ $tag-warning-background-color: #f3812e !default;
 $tag-default-color: #ffffff !default;
 $tag-border-width: 1px !default;
 $tag-plain-background-color: #fff !default;
+$tag-height: auto !default;
 
 //badge
 $badge-background-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
@@ -496,6 +525,9 @@ $popover-dark-background-color: rgba(75, 76, 77, 1) !default;
 $popover-border-bottom-color: rgba(229, 229, 229, 1) !default;
 $popover-primary-text-color: rgba(51, 51, 51, 1) !default;
 $popover-disable-color: rgba(154, 155, 157, 1) !default;
+$popover-menu-item-padding: 8px 0 !default;
+$popover-menu-item-margin: 0 8px !default;
+$popover-menu-name-line-height: normal !default;
 
 //progress
 $progress-inner-background-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
@@ -549,6 +581,8 @@ $tabs-vertical-tab-line-color: linear-gradient(180deg, $primary-color 0%, rgba($
 $tabs-vertical-titles-item-height: 40px !default;
 $tabs-vertical-titles-item-active-line-height: 14px !default;
 $tabs-vertical-titles-width: 100px !default;
+$tabs-titles-item-line-border-radius: 0 !default;
+$tabs-titles-item-line-opacity: 1 !default;
 
 // indicator
 $indicator-color: $primary-color !default;
@@ -577,6 +611,7 @@ $menu-item-option-i-margin-right: 6px !default;
 $menu-bar-box-shadow: 0 2px 12px rgba(89, 89, 89, 0.12) !default;
 $menu-scroll-fixed-top: 0 !default;
 $menu-scroll-fixed-z-index: 1000 !default;
+$menu-active-item-font-weight: 500 !default;
 
 // collapse
 $collapse-item-padding: 13px 36px 13px 26px !default;
@@ -604,6 +639,8 @@ $searchbar-input-height: 32px !default;
 $searchbar-input-width: 100% !default;
 $searchbar-input-border-radius: 16px !default;
 $searchbar-input-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04) !default;
+$searchbar-input-bar-color: inherit !default;
+$searchbar-input-bar-placeholder-color: inherit !default;
 
 // empty
 $empty-padding: 32px 0 !default;
@@ -642,6 +679,9 @@ $form-item-body-input-text-align: right !default;
 $form-item-tip-font-size: 12px !default;
 $form-item-tip-text-align: right !default;
 
+// skeleton
+$skeleton-content-line-title-background-color: #efefef !default;
+
 // sku
 $sku-item-border: 1px solid $primary-color !default;
 $sku-item-disable-line: line-through !default;
@@ -653,12 +693,34 @@ $sku-opetate-bg-buy: linear-gradient(
   rgba(255, 195, 13, 1) 69%,
   rgba(255, 207, 13, 1) 100%
 ) !default;
+$sku-spec-height: 30px !default;
+$sku-spec-line-height: $sku-spec-height !default;
+$sku-spec-font-size: 11px !default;
+$sku-spec-background: rgba(242, 242, 242, 1) !default;
+$sku-spec-color: $black !default;
+$sku-spec-margin-right: 12px !default;
+$sku-spec-padding: 0 18px !default;
+$sku-spec-title-font-weight: bold !default;
+$sku-spec-title-font-size: 13px !default;
+$sku-spec-title-color: $black !default;
+$sku-spec-title-margin-bottom: 18px !default;
+$sku-operate-btn-height: 54px !default;
+$sku-operate-btn-border-top: 0 !default;
+$sku-operate-btn-item-height: 40px !default;
+$sku-operate-btn-item-line-height: $sku-operate-btn-item-height;
+$sku-operate-btn-item-font-size: 15px !default;
+$sku-operate-btn-item-font-weight: normal !default;
+$sku-product-img-width: 100px !default;
+$sku-product-img-height: $sku-product-img-width !default;
+$sku-product-img-border-radius: 0 !default;
 
 // card
 $card-font-size-0: $font-size-0 !default;
 $card-font-size-1: $font-size-1 !default;
 $card-font-size-2: $font-size-2 !default;
 $card-font-size-3: $font-size-3 !default;
+$card-left-border-radius: 0 !default;
+$card-left-background-color: inherit !default;
 
 // grid
 $grid-border-color: #f5f6f7 !default;

src/packages/styles/variables.scss

@@ -103,6 +103,7 @@ $button-warning-background-color: linear-gradient(
   rgba(255, 190, 13, 1) 100%
 ) !default;
 $button-plain-background-color: $white !default;
+$button-small-round-border-radius: $button-border-radius !default;
 
 // cell
 
@@ -201,6 +202,14 @@ $inputnumber-input-border-radius: 4px !default;
 $inputnumber-input-width: 40px !default;
 $inputnumber-input-margin: 0 6px !default;
 $inputnumber-input-border: 0 !default;
+$inputnumber-border: 0 !default;
+$inputnumber-border-radius: 0 !default;
+$inputnumber-height: auto !default;
+$inputnumber-line-height: normal !default;
+$inputnumber-input-border-left: 0 !default;
+$inputnumber-input-border-right: 0 !default;
+$inputnumber-border-box: content-box !default;
+$inputnumber-display: flex !default;
 
 // actionsheet
 $actionsheet-light-color: #f6f6f6 !default;
@@ -311,6 +320,7 @@ $calendar-day-width: 14.28% !default;
 $calendar-day-height: 64px !default;
 $calendar-day-font-weight: 500 !default;
 $calendar-day67-font-color: $primary-color !default;
+$calendar-month-title-font-size: inherit !default;
 
 //overlay
 $overlay-bg-color: rgba(0, 0, 0, 0.7) !default;
@@ -353,6 +363,9 @@ $tabbar-border-bottom: 1px solid #eee !default;
 $tabbar-box-shadow: none !default;
 $tabbar-item-text-font-size: $font-size-0 !default;
 $tabbar-item-text-line-height: initial !default;
+$tabbar-height: auto !default;
+$tabbar-word-margin-top: auto !default;
+$tabbar-word-line-height: normal !default;
 
 //infiniteloading
 $infiniteloading-bottom-color: #c8c8c8 !default;
@@ -376,6 +389,16 @@ $swiper-pagination-item-border-radius: 2px !default;
 //address
 $address-region-tab-line: linear-gradient(90deg, $primary-color 0%, rgba($primary-color, 0.15) 100%) !default;
 $address-icon-color: $primary-color !default;
+$address-header-title-font-size: 18px !default;
+$address-header-title-color: #262626 !default;
+$address-region-tab-font-size: 13px !default;
+$address-region-tab-color: #1d1e1e !default;
+$address-region-tab-active-item-font-weight: bold !default;
+$address-region-tab-line-border-radius: 0 !default;
+$address-region-tab-line-opacity: 1 !default;
+$address-region-item-color: #333 !default;
+$address-region-item-font-size: $font-size-1 !default;
+$address-item-margin-right: 9px !default;
 
 //steps
 $steps-base-icon-width: 25px !default;
@@ -408,6 +431,9 @@ $steps-process-icon-text-color: $primary-color !default;
 
 // dialog
 $dialog-width: 296px !default;
+$dialog-header-font-weight: normal !default;
+$dialog-header-color: rgba(38, 38, 38, 1) !default;
+$dialog-footer-justify-content: space-around !default;
 
 // checkbox
 $checkbox-label-color: #1d1e1e !default;
@@ -416,6 +442,7 @@ $checkbox-icon-disable-color: #d6d6d6 !default;
 $checkbox-label-margin-left: 15px !default;
 $checkbox-label-font-size: 14px !default;
 $checkbox-icon-font-size: 18px !default;
+$checkbox-icon-disable-color2: $help-color !default;
 
 //radio
 $radio-label-font-color: #1d1e1e !default;
@@ -430,6 +457,7 @@ $radio-label-font-size: 14px !default;
 $radio-button-font-size: 12px !default;
 $radio-button-padding: 5px 18px !default;
 $radio-icon-font-size: 18px !default;
+$radio-icon-disable-color2: $help-color !default;
 
 //fixednav
 $fixednav-bg-color: $white !default;
@@ -501,6 +529,7 @@ $tag-warning-background-color: #f3812e !default;
 $tag-default-color: #ffffff !default;
 $tag-border-width: 1px !default;
 $tag-plain-background-color: #fff !default;
+$tag-height: auto !default;
 
 //badge
 $badge-background-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
@@ -521,6 +550,9 @@ $popover-dark-background-color: rgba(75, 76, 77, 1) !default;
 $popover-border-bottom-color: rgba(229, 229, 229, 1) !default;
 $popover-primary-text-color: rgba(51, 51, 51, 1) !default;
 $popover-disable-color: rgba(154, 155, 157, 1) !default;
+$popover-menu-item-padding: 8px 0 !default;
+$popover-menu-item-margin: 0 8px !default;
+$popover-menu-name-line-height: normal !default;
 
 //progress
 $progress-inner-background-color: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
@@ -574,6 +606,8 @@ $tabs-vertical-tab-line-color: linear-gradient(180deg, $primary-color 0%, rgba($
 $tabs-vertical-titles-item-height: 40px !default;
 $tabs-vertical-titles-item-active-line-height: 14px !default;
 $tabs-vertical-titles-width: 100px !default;
+$tabs-titles-item-line-border-radius: 0 !default;
+$tabs-titles-item-line-opacity: 1 !default;
 
 // indicator
 $indicator-color: $primary-color !default;
@@ -602,6 +636,7 @@ $menu-item-option-i-margin-right: 6px !default;
 $menu-bar-box-shadow: 0 2px 12px rgba(89, 89, 89, 0.12) !default;
 $menu-scroll-fixed-top: 0 !default;
 $menu-scroll-fixed-z-index: 1000 !default;
+$menu-active-item-font-weight: 500 !default;
 
 // collapse
 $collapse-item-padding: 13px 36px 13px 26px !default;
@@ -629,6 +664,8 @@ $searchbar-input-height: 32px !default;
 $searchbar-input-width: 100% !default;
 $searchbar-input-border-radius: 16px !default;
 $searchbar-input-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04) !default;
+$searchbar-input-bar-color: inherit !default;
+$searchbar-input-bar-placeholder-color: inherit !default;
 
 // empty
 $empty-padding: 32px 0 !default;
@@ -667,6 +704,9 @@ $form-item-body-input-text-align: left !default;
 $form-item-tip-font-size: 10px !default;
 $form-item-tip-text-align: left !default;
 
+// skeleton
+$skeleton-content-line-title-background-color: #efefef !default;
+
 // sku
 $sku-item-border: 1px solid $primary-color !default;
 $sku-item-disable-line: line-through !default;
@@ -678,12 +718,34 @@ $sku-opetate-bg-buy: linear-gradient(
   rgba(255, 195, 13, 1) 69%,
   rgba(255, 207, 13, 1) 100%
 ) !default;
+$sku-spec-height: 30px !default;
+$sku-spec-line-height: $sku-spec-height !default;
+$sku-spec-font-size: 11px !default;
+$sku-spec-background: rgba(242, 242, 242, 1) !default;
+$sku-spec-color: $black !default;
+$sku-spec-margin-right: 12px !default;
+$sku-spec-padding: 0 18px !default;
+$sku-spec-title-font-weight: bold !default;
+$sku-spec-title-font-size: 13px !default;
+$sku-spec-title-color: $black !default;
+$sku-spec-title-margin-bottom: 18px !default;
+$sku-operate-btn-height: 54px !default;
+$sku-operate-btn-border-top: 0 !default;
+$sku-operate-btn-item-height: 40px !default;
+$sku-operate-btn-item-line-height: $sku-operate-btn-item-height;
+$sku-operate-btn-item-font-size: 15px !default;
+$sku-operate-btn-item-font-weight: normal !default;
+$sku-product-img-width: 100px !default;
+$sku-product-img-height: $sku-product-img-width !default;
+$sku-product-img-border-radius: 0 !default;
 
 // card
 $card-font-size-0: $font-size-0 !default;
 $card-font-size-1: $font-size-1 !default;
 $card-font-size-2: $font-size-2 !default;
 $card-font-size-3: $font-size-3 !default;
+$card-left-border-radius: 0 !default;
+$card-left-background-color: inherit !default;
 
 // grid
 $grid-border-color: #f5f6f7 !default;

src/sites/assets/util/helper.ts

@@ -1,7 +1,7 @@
 import config from '../../config/env';
 import { reactive, watch, onMounted, computed, onBeforeUnmount } from 'vue';
 import { nav } from '../../../config.json';
-import { isJDB, isJDT } from '.';
+import { isJDB, isJDT, isJDDKH } from '.';
 
 type Obj = {
   [k: string]: any;
@@ -175,6 +175,8 @@ export const useThemeEditor = function () {
         customUrl = 'https://storage.360buyimg.com/nutui-static/source/variables-jdt.scss_source';
       } else if (isJDB()) {
         customUrl = 'https://storage.360buyimg.com/nutui-static/source/variables-jdb.scss_source';
+      } else if (isJDDKH()) {
+        customUrl = 'https://storage.360buyimg.com/nutui-static/source/variables-jddkh.scss_source';
       }
       if (customUrl) {
         loadScript('https://storage.360buyimg.com/nutui-static/cdn/sass.sync.min.js').then((res) => {

src/sites/assets/util/index.ts

@@ -6,4 +6,7 @@ const isJDT = () => {
 const isJDB = () => {
   return window.parent.location.href.includes('jdb');
 };
-export { isMobile, isJDT, isJDB };
+const isJDDKH = () => {
+  return window.parent.location.href.includes('jddkh');
+};
+export { isMobile, isJDT, isJDB, isJDDKH };