feat(steps): 多端适配

scripts/rn/copy-file.js

@@ -32,6 +32,7 @@ const childAdaptedArray = [
   'hoverbuttonitem',
   'avatargroup',
   'icon',
+  'step'
 ]
 
 // copy文件并增加css引入

src/config.json

@@ -1056,7 +1056,7 @@
           "author": "ailululu"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Step",
           "sort": 17,
           "cName": "步骤条子组件",
@@ -1067,7 +1067,7 @@
           "author": "swag~jun"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Steps",
           "type": "component",
           "cName": "步骤条",

src/packages/step/step.harmony.css

@@ -1,35 +1,36 @@
 .nut-step {
-  flex-grow: 0;
-  flex-shrink: 0;
   flex: 1;
   text-align: center;
   font-size: 0;
 }
 .nut-step-head {
   position: relative;
   display: flex;
+  flex-direction: row;
   justify-content: center;
+  align-items: center;
   margin-bottom: 12px;
 }
 .nut-step-line {
   position: absolute;
-  top: calc(25px / 2);
-  left: calc(50% + (100% - 70%) / 2);
   height: 1px;
   width: 70%;
-  background: #888B94;
+  background-color: #888b94;
+  left: calc(100% - 70% / 2);
 }
 .nut-step-icon {
   position: relative;
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
+  border-radius: 999vmax;
   width: 25px;
   height: 25px;
   line-height: 25px;
   font-size: 12px;
-  background-color: #888B94;
-  border-color: #888B94;
+  background-color: #888b94;
+  border-color: #888b94;
   color: #ffffff;
   z-index: 1;
 }
@@ -38,17 +39,16 @@
   height: 100%;
 }
 .nut-step-icon.is-text {
-  border-radius: 50%;
+  border-radius: 999vmax;
   border-width: 1px;
   border-style: solid;
 }
 .nut-step-icon.is-icon {
-  border-radius: 50%;
+  border-radius: 999vmax;
   border-width: 1px;
   border-style: solid;
 }
 .nut-step-main {
-  padding: 0 10%;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -58,113 +58,116 @@
   display: block;
   margin-bottom: 10px;
   font-size: 14px;
-  color: #1A1A1A;
+  color: #1a1a1a;
 }
 .nut-step-description {
-  display: block;
+  display: flex;
+  flex-wrap: wrap;
   font-size: 12px;
   color: #505259;
 }
-.nut-step:last-child .nut-step-line {
-  display: none;
-}
-.nut-step.nut-step-process .nut-step-icon {
-  background-color: #FF0F23;
-  border-color: #FF0F23;
+.nut-step-process-icon {
+  background-color: #ff0f23;
+  border-color: #ff0f23;
   color: #ffffff;
 }
-.nut-step.nut-step-process .nut-step-title {
-  color: #FF0F23;
+.nut-step-process-title {
+  color: #ff0f23;
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 600;
 }
-.nut-step.nut-step-process .nut-step-description {
+.nut-step-process-inner {
+  color: #ffffff;
+}
+.nut-step-process-description {
   color: #505259;
 }
-.nut-step.nut-step-wait .nut-step-title {
-  color: #1A1A1A;
+.nut-step-finish-description {
+  color: #505259;
 }
-.nut-step.nut-step-wait .nut-step-description {
+.nut-step-finish-description {
   color: #505259;
 }
-.nut-step.nut-step-finish .nut-step-icon {
-  background-color: #ffffff;
-  border-color: #FF0F23;
-  color: #FF0F23;
+.nut-step-finish-title {
+  color: #ff0f23;
 }
-.nut-step.nut-step-finish .nut-step-line {
-  background: #FF0F23;
+.nut-step-finish-icon {
+  border-width: 1px;
+  background-color: #ffffff;
+  border-color: #ff0f23;
+  color: #ff0f23;
 }
-.nut-step.nut-step-finish .nut-step-title {
-  color: #FF0F23;
+.nut-step-finish-line {
+  background-color: #ff0f23;
 }
-.nut-step.nut-step-finish .nut-step-description {
-  color: #505259;
+.nut-step-finish-inner {
+  color: #ff0f23;
 }
-
-.nut-steps-dot .nut-step-head {
-  margin: 10px 0;
+.nut-step-wait-inner {
+  color: #ffffff;
 }
-.nut-steps-dot .nut-step-line {
-  top: 7px;
+.nut-step-wait-description {
+  color: #505259;
 }
-.nut-steps-dot .nut-step-icon {
+.nut-step-dot-icon {
   width: 6px;
   height: 6px;
   border: 2px solid #ffffff;
-  border-radius: 50%;
+  border-radius: 999vmax;
   box-sizing: content-box;
 }
-.nut-steps-dot .nut-step-wait .nut-step-icon {
-  background-color: #888B94;
+.nut-step-dot-wait-icon {
+  background-color: #888b94;
 }
-.nut-steps-dot .nut-step-finish .nut-step-icon {
+.nut-step-dot-finish-icon {
   background-color: #ffffff;
-  border-color: #FF0F23;
+  border-color: #ff0f23;
 }
-.nut-steps-dot .nut-step-process .nut-step-icon {
+.nut-step-dot-process-icon {
   position: relative;
 }
-.nut-steps-dot .nut-step-process .nut-step-icon:before {
+.nut-step-dot-process-icon::before {
   content: "";
   display: inline-block;
   position: absolute;
   left: 50%;
   top: 50%;
-  margin-left: -7px;
-  margin-top: -7px;
+  transform: translate(-50%, -50%);
+  /* #ifdef harmony*/
+  top: 3px;
+  left: 3px;
+  /* #endif */
   width: 14px;
   height: 14px;
-  background-color: #FF0F23;
-  border-radius: 50%;
+  background-color: #ff0f23;
+  border-radius: 999vmax;
   opacity: 0.23;
 }
-
-.nut-steps-horizontal.nut-steps-dot .nut-step-line {
-  top: 50%;
-  bottom: -50%;
-}
-
-.nut-steps-vertical .nut-step {
+.nut-step-vertical {
   display: flex;
-  height: 33.34%;
+  flex-direction: row;
+  align-items: start;
+  position: relative;
 }
-.nut-steps-vertical .nut-step-line {
+.nut-step-vertical-line {
   position: absolute;
-  display: inline-block;
+  top: 150%;
   width: 1px;
-  height: 70%;
-  background: #888B94;
-  top: calc(25px + (100% - 70% - 12px) / 2);
+  height: 50px;
+  background: #888b94;
   left: calc(50% - 1px);
 }
-.nut-steps-vertical.nut-steps-dot .nut-step-line {
-  top: calc(6px + (100% - 70%) / 2);
-}
-.nut-steps-vertical .nut-step-main {
-  display: inline-block;
+.nut-step-vertical-main {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
   padding-left: 6%;
   text-align: start;
+  position: relative;
+  bottom: 10px;
+}
+.nut-step-vertical-dot-line {
+  top: 300%;
 }
 
 [dir=rtl] .nut-step-line {