style(collapse、menu、navbar、noticebar、step): add sass param

src/packages/__VUE/collapseitem/index.scss

@@ -25,10 +25,10 @@
     display: block;
     width: 100%;
     overflow: hidden;
-    padding: 13px 26px;
-    color: #666666;
-    font-size: 14px;
-    line-height: 24px;
+    padding: $collapse-item-padding;
+    color: $collapse-item-color;
+    font-size: $collapse-item-font-size;
+    line-height: $collapse-item-line-height;
     background-color: #fff;
     box-sizing: border-box;
     .collapse-icon {
@@ -37,6 +37,7 @@
       top: 50%;
       // margin-top: -6px;
       right: 16px;
+      color: $collapse-item-icon-color;
       // width: 24px;
       // height: 12px;
       // line-height: 24px;
@@ -53,7 +54,7 @@
       top: 50%;
       right: 60px;
       margin-top: -12px;
-      color: #999999;
+      color: $collapse-item-sub-title-color;
     }
     .titleIconRight {
       vertical-align: middle;
@@ -72,11 +73,11 @@
     transition: height 0.3s ease-in-out;
     .collapse-content {
       display: block;
-      padding: 12px 26px;
-      color: #666666;
-      font-size: 14px;
-      line-height: 1.5;
-      background-color: #fff;
+      padding: $collapse-wrapper-content-padding;
+      color: $collapse-wrapper-content-color;
+      font-size: $collapse-wrapper-content-font-size;
+      line-height: $collapse-wrapper-content-line-height;
+      background-color: $collapse-wrapper-content-background-color;
     }
   }
   .open-style {
@@ -88,7 +89,7 @@
     // height: 0;
   }
   .nut-collapse-item-disabled {
-    color: #c8c9cc;
+    color: $collapse-item-disabled-color;
     cursor: not-allowed;
     pointer-events: none;
     // .collapse-icon-disabled {
@@ -96,6 +97,9 @@
     //   background-repeat: no-repeat;
     //   background-size: 100% 100%;
     // }
+    .collapse-icon {
+      color: $collapse-item-disabled-color;
+    }
   }
   .titleIconLeft {
     float: left;

src/packages/__VUE/menu/demo.vue

@@ -32,7 +32,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, ref } from 'vue';
 import { createComponent } from '../../utils/create';
 const { createDemo } = createComponent('menu');

src/packages/__VUE/menu/index.scss

@@ -3,7 +3,7 @@
   display: flex;
   line-height: $menu-bar-line-height;
   background-color: $white;
-  border-bottom: 1px solid $menu-bar-border-bottom-color;
+  box-shadow: $menu-bar-box-shadow;
 
   &.opened {
     z-index: $menu-bar-opened-z-index;
@@ -12,8 +12,8 @@
   .nut-menu__item {
     flex: 1;
     text-align: center;
-    font-size: $font-size-2;
-    color: $title-color;
+    font-size: $menu-item-font-size;
+    color: $menu-item-text-color;
     min-width: 0;
 
     &.active {

src/packages/__VUE/navbar/index.scss

@@ -2,14 +2,14 @@
   position: relative;
   display: flex;
   align-items: center;
-  height: 44px;
+  height: $navbar-height;
   box-sizing: border-box;
-  padding: 13px 16px;
-  background: $white;
-  box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
-  font-size: $cell-title-font;
-  color: $cell-color;
-  margin-bottom: 20px;
+  padding: $navbar-padding;
+  background: $navbar-background;
+  box-shadow: $navbar-box-shadow;
+  font-size: $navbar-title-base-font;
+  color: $navbar-color;
+  margin-bottom: $navbar-margin-bottom;
   overflow: hidden;
   &:active::before {
     opacity: 0.1;
@@ -54,7 +54,10 @@
     display: flex;
     justify-content: center;
     .title {
-      width: 100px;
+      width: $navbar-title-width;
+      font-size: $navbar-title-font;
+      font-weight: $navbar-title-font-weight;
+      color: $navbar-title-font-color;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 1;
@@ -62,7 +65,7 @@
     }
     &.icon {
       .icon {
-        margin-left: 13px;
+        margin: $navbar-title-icon-margin;
       }
     }
     .nut-icon {

src/packages/__VUE/noticebar/demo.vue

@@ -1,10 +1,8 @@
 <template>
-  <div class="demo">
+  <div class="demo full">
     <h2>默认用法</h2>
     <nut-noticebar
       text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
-      :background="`rgba(251, 248, 220, 1)`"
-      :color="`#D9500B`"
     ></nut-noticebar>
 
     <h2>滚动播放</h2>

src/packages/__VUE/noticebar/index.scss

@@ -1,15 +1,16 @@
 .nut-noticebar-page {
   // width: 100%;
   display: flex;
-  padding: 0px $noticebar-box-padding-right 0 $noticebar-box-padding-left;
+  padding: $noticebar-box-padding;
   height: $noticebar-height;
   font-size: $noticebar-font-size;
   position: relative;
   align-items: center;
+  background: $noticebar-background;
+  color: $noticebar-color;
   &.wrapable {
     height: auto;
-    padding: $noticebar-wrapable-padding-bottom $noticebar-wrapable-padding-right $noticebar-wrapable-padding-bottom
-      $noticebar-wrapable-padding-left;
+    padding: $noticebar-wrapable-padding;
     .wrap {
       height: auto;
       .content {
@@ -27,8 +28,7 @@
   .left-icon {
     height: $noticebar-left-icon-width;
     min-width: $noticebar-left-icon-width;
-    margin: $noticebar-lefticon-padding-top $noticebar-lefticon-padding-right $noticebar-lefticon-padding-bottom
-      $noticebar-lefticon-padding-left;
+    margin: $noticebar-lefticon-margin;
     background-size: 100% 100%;
   }
   .right-icon {
@@ -36,8 +36,7 @@
     align-items: center;
     justify-content: center;
     width: $noticebar-right-icon-width;
-    margin: $noticebar-righticon-padding-top $noticebar-righticon-padding-right $noticebar-righticon-padding-bottom
-      $noticebar-righticon-padding-left;
+    margin: $noticebar-righticon-margin;
   }
   .wrap {
     display: flex;
@@ -95,7 +94,7 @@
   height: $noticebar-height;
   font-size: $noticebar-font-size;
   overflow: hidden;
-  padding: 0px $noticebar-box-padding-right 0 $noticebar-box-padding-left;
+  padding: $noticebar-box-padding;
 
   .horseLamp_list {
     margin: 0;

src/packages/__VUE/step/index.scss

@@ -17,15 +17,15 @@
     right: -50%;
     display: inline-block;
     height: 1px;
-    background: #909ca4;
+    background: $steps-base-line-color;
   }
   &-icon {
     position: relative;
     display: flex;
-    width: 25px;
-    height: 25px;
-    line-height: 25px;
-    font-size: 13px;
+    width: $steps-base-icon-width;
+    height: $steps-base-icon-height;
+    line-height: $steps-base-icon-line-height;
+    font-size: $steps-base-icon-font-size;
     align-items: center;
     justify-content: center;
     z-index: 1;
@@ -53,14 +53,14 @@
   }
   &-title {
     display: block;
-    margin-bottom: 10px;
-    font-size: 14px;
-    color: #909ca4;
+    margin-bottom: $steps-base-title-margin-bottom;
+    font-size: $steps-base-title-font-size;
+    color: $steps-base-title-color;
   }
   &-content {
     display: block;
-    font-size: 14px;
-    color: #666;
+    font-size: $steps-base-content-font-size;
+    color: $steps-base-content-color;
   }
   &:last-child {
     .nut-step-line {
@@ -69,53 +69,53 @@
   }
   &.nut-step-finish {
     .nut-step-head {
-      color: $primary-color;
-      border-color: $primary-color;
+      color: $steps-finish-head-color;
+      border-color: $steps-finish-head-border-color;
     }
     .nut-step-icon.is-text {
-      background-color: $white;
+      background-color: $steps-finish-icon-text-color;
     }
     .nut-step-icon.is-icon {
-      background-color: $white;
+      background-color: $steps-finish-icon-text-color;
     }
     .nut-step-line {
-      background: $primary-color;
+      background: $steps-finish-line-background;
     }
     .nut-step-title {
-      color: $primary-color;
+      color: $steps-finish-title-color;
     }
   }
   &.nut-step-process {
     .nut-step-head {
-      color: $white;
-      border-color: $primary-color;
+      color: $steps-process-head-color;
+      border-color: $steps-process-head-border-color;
     }
     .nut-step-icon.is-text {
-      background-color: $primary-color;
+      background-color: $steps-process-icon-text-color;
     }
     .nut-step-icon.is-icon {
-      background-color: $primary-color;
+      background-color: $steps-process-icon-text-color;
     }
     .nut-step-title {
-      color: $primary-color;
+      color: $steps-process-title-color;
     }
   }
   &.nut-step-wait {
     .nut-step-head {
-      color: #909ca4;
-      border-color: #909ca4;
+      color: $steps-wait-head-color;
+      border-color: $steps-wait-head-border-color;
     }
     .nut-step-icon.is-text {
-      background-color: $white;
+      background-color: $steps-wait-icon-bg-color;
     }
     .nut-step-icon.is-icon {
-      background-color: $step-wait-bg-color;
+      background-color: $steps-wait-icon-bg-color;
       .nut-icon {
-        color: $white;
+        color: $steps-wait-icon-color;
       }
     }
     .nut-step-content {
-      color: #909ca4;
+      color: $steps-wait-content-color;
     }
   }
 }
@@ -155,10 +155,10 @@
     }
     .nut-step-wait {
       .nut-step-icon {
-        background-color: #959fb1;
+        background-color: $steps-wait-icon-bg-color;
       }
       .nut-step-content {
-        color: #909ca4;
+        color: $steps-wait-content-color;
       }
     }
     .nut-step-finish {

src/packages/__VUE/steps/demo.vue

@@ -11,7 +11,7 @@
         <nut-step title="步骤三">3</nut-step>
       </nut-steps>
       <div class="steps-button">
-        <nut-button type="primary" @click="handleStep('current1')">下一步</nut-button>
+        <nut-button size="mini" type="primary" @click="handleStep('current1')">下一步</nut-button>
       </div>
     </div>
     <h2>标题和描述信息</h2>
@@ -22,7 +22,7 @@
         <nut-step title="步骤三" content="步骤描述"></nut-step>
       </nut-steps>
       <div class="steps-button" style="margin-top: 10px">
-        <nut-button type="primary" @click="handleStep('current2')">下一步</nut-button>
+        <nut-button size="mini" type="primary" @click="handleStep('current2')">下一步</nut-button>
       </div>
     </div>
     <h2>自定义图标</h2>

src/packages/styles/variables.scss

@@ -318,7 +318,33 @@ $address-region-tab-line: linear-gradient(90deg, $primary-color 0%, rgba($primar
 $address-icon-color: $primary-color !default;
 
 //steps
-$step-wait-bg-color: #959fb1 !default;
+$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: 296px !default;
@@ -352,28 +378,17 @@ $fixednav-index: 201 !default;
 $fixednav-btn-bg: linear-gradient(135deg, $primary-color 0%, $primary-color-end 100%) !default;
 
 // NoticeBar
+$noticebar-background: rgba(251, 248, 220, 1) !default;
+$noticebar-color: #d9500b !default;
 $noticebar-font-size: 14px !default;
 $noticebar-height: 40px !default;
 $noticebar-line-height: 24px !default;
 $noticebar-left-icon-width: 16px !default;
 $noticebar-right-icon-width: 16px !default;
-$noticebar-box-padding-left: 16px !default;
-$noticebar-box-padding-right: 16px !default;
-
-$noticebar-wrapable-padding-left: 16px !default;
-$noticebar-wrapable-padding-right: 16px !default;
-$noticebar-wrapable-padding-top: 16px !default;
-$noticebar-wrapable-padding-bottom: 16px !default;
-
-$noticebar-lefticon-padding-left: 0px !default;
-$noticebar-lefticon-padding-right: 10px !default;
-$noticebar-lefticon-padding-top: 0px !default;
-$noticebar-lefticon-padding-bottom: 0px !default;
-
-$noticebar-righticon-padding-left: 10px !default;
-$noticebar-righticon-padding-right: 0px !default;
-$noticebar-righticon-padding-top: 0px !default;
-$noticebar-righticon-padding-bottom: 0px !default;
+$noticebar-box-padding: 0 16px !default;
+$noticebar-wrapable-padding: 16px !default;
+$noticebar-lefticon-margin: 0px 10px !default;
+$noticebar-righticon-margin: 0px 10px !default;
 
 // TimeSelect
 $timeselect-title-font-size: $font-size-2 !default;
@@ -490,7 +505,9 @@ $indicator-border-size: $indicator-size + 2 !default;
 $indicator-number-font-size: 10px !default;
 
 // menu
-$menu-bar-line-height: 46px !default;
+$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;
@@ -502,6 +519,21 @@ $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;
+
+// collapse
+$collapse-item-padding: 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-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;
@@ -577,6 +609,20 @@ $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: 13px 16px !default;
+$navbar-background: $white !default;
+$navbar-box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1) !default;
+$navbar-color: $title-color2 !default;
+$navbar-title-base-font: $font-size-2 !default;
+$navbar-title-font: $font-size-2 !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;
 

src/sites/mobile-taro/vue/src/feedback/pages/noticebar/index.vue

@@ -1,10 +1,8 @@
 <template>
-  <div class="demo">
+  <div class="demo full">
     <h2>默认用法</h2>
     <nut-noticebar
       text="华为畅享9新品即将上市，活动期间0元预约可参与抽奖，赢HUAWEI WATCH等好礼，更多产品信息请持续关注！"
-      :background="`rgba(251, 248, 220, 1)`"
-      :color="`#D9500B`"
     ></nut-noticebar>
 
     <h2>滚动播放</h2>