feat(time-line): refresh ui (#1281)

Signed-off-by: jacknan <zhumaonan@aliyun.com>

examples/sites/demos/mobile/app/timeline/different-data.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-time-line :data="data" name-field="statusText" time-field="date"></tiny-time-line>
+  <tiny-time-line :data="data" name-field="statusText" :active="active" @click="click"></tiny-time-line>
 </template>
 
 <script lang="jsx">
@@ -15,48 +15,28 @@ export default {
       data: [
         {
           status: 'current',
-          date: '2019-11-12 14:20:15',
-          statusText: '筛选中',
+          statusText: '企业资料',
           personInfo: '张三',
           cycle: '周期：2天',
           overdue: '已超期 1 天'
         },
         {
           status: 'success',
-          date: '2019-11-12 14:20:15',
-          statusText: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'fail',
-          date: '2019-11-12 14:20:15',
-          statusText: '筛选中',
+          statusText: '法人资料',
           personInfo: '张三',
           cycle: '周期：2天',
           overdue: '已超期 1 天'
         },
         {
           status: 'complete',
-          date: '2019-11-12 14:20:15',
-          statusText: '筛选中',
+          statusText: '校验身份',
           personInfo: '张三',
           cycle: '周期：2天',
           overdue: '已超期 1 天'
         },
         {
           status: 'complete',
-          date: '2019-11-12 14:20:15',
-          statusText: '筛选中',
-          personInfo: '张三',
-          cycle: '周期：2天',
-          overdue: '已超期 1 天'
-        },
-        {
-          status: 'complete',
-          date: '2019-11-11 00:01:30',
-          statusText: '筛选中',
+          statusText: '提交资料',
           personInfo: '张三',
           cycle: '周期：2天',
           overdue: '已超期 1 天'

packages/theme-mobile/src/steps/index.less

@@ -152,6 +152,7 @@
 
     .icon {
       font-weight: 600;
+
       span {
         display: inline-block;
       }
@@ -184,7 +185,6 @@
 
         .round {
           position: relative;
-          height: 100%;
           width: 7px;
           height: 7px;
           border-radius: 50%;
@@ -232,6 +232,7 @@
             border-style: solid;
             border-width: 2px 2px 0 0;
             transform: rotate(-45deg);
+
             &-fold {
               transform: rotate(135deg);
             }
@@ -242,6 +243,7 @@
       .content {
         margin-left: 19px;
         margin-right: 10px;
+
         &-left-margin {
           margin-left: 119px;
         }
@@ -305,7 +307,7 @@
       }
 
       .icon {
-        top: 0px;
+        top: 0;
       }
     }
   }

packages/theme-mobile/src/steps/vars.less

@@ -14,18 +14,18 @@
   --ti-mobile-steps-timeline-date-time-text-color: var(--ti-mobile-common-color-text-primary, #191919);
   --ti-mobile-steps-advanced-line-height: 28px;
   --ti-mobile-steps-advanced-li-bg-color: var(--ti-mobile-common-bg-color-white, #fff);
-  --ti-mobile-steps-advanced-active-bg-color: var(--ti-mobile-common-bg-color-main, #4a79fe);
+  --ti-mobile-steps-advanced-active-bg-color: var(--ti-mobile-color-bg-primary-default, #191919);
   --ti-mobile-steps-advanced-li-text-color: var(--ti-mobile-common-color-text-white, #fff);
   --ti-mobile-steps-line-bg-color: var(--ti-mobile-common-bg-color-weaken, #dbdbdb);
   --ti-mobile-steps-icon-size: 20px;
   --ti-mobile-steps-icon-bg-color: var(--ti-mobile-common-bg-color-white, #fff);
-  --ti-mobile-steps-unselected-text-color: var(--ti-mobile-common-color-text-weaken-ligtht, #c2c2c2);
+  --ti-mobile-steps-unselected-text-color: var(--ti-mobile-color-text-placeholder, #808080);
   --ti-mobile-steps-font-size-base: 12px;
-  --ti-mobile-steps-done-text-color: var(--ti-mobile-common-color-text-high-light, #4a79fe);
+  --ti-mobile-steps-done-text-color: var(--ti-mobile-color-text-primary, #191919);
   --ti-mobile-steps-done-icon-bg-color: var(--ti-mobile-common-bg-color-white, #fff);
-  --ti-mobile-steps-done-icon-fill-color: var(--ti-mobile-common-bg-color-main, #4a79fe);
-  --ti-mobile-steps-done-active-border-color: var(--ti-mobile-common-bg-color-main, #4a79fe);
-  --ti-mobile-steps-line-active-bg-color: var(--ti-mobile-common-bg-color-main, #4a79fe);
+  --ti-mobile-steps-done-icon-fill-color: var(--ti-mobile-color-bg-primary-default, #191919);
+  --ti-mobile-steps-done-active-border-color: var(--ti-mobile-color-bg-primary-default, #191919);
+  --ti-mobile-steps-line-active-bg-color: var(--ti-mobile-color-bg-primary-default, #191919);
   --ti-mobile-steps-line-height: 1px;
   --ti-mobile-steps-timeline-name-font-size: 14px;
   --ti-mobile-steps-timeline-bg-color-normal: var(--ti-mobile-common-status-bg-color-normal, #fff);

packages/theme-mobile/src/time-line/vars.less

@@ -2,7 +2,7 @@
   --ti-mobile-timeline-font-size: 14px;
   --ti-mobile-timeline-color: #333;
   --ti-mobile-timeline-hairline-color: #ddd;
-  --ti-mobile-timeline-user-color: #039be5;
+  --ti-mobile-timeline-user-color: #191919;
   --ti-mobile-timeline-cycle-color: #666;
   --ti-mobile-timeline-tip-color: #ef4f4f;
   --ti-mobile-timeline-icon-size: 20px;

packages/vue/src/time-line/src/mobile.vue

@@ -16,7 +16,7 @@
         v-for="(node, index) in state.nodes"
         :key="index"
         :style="{
-          width: horizontal ? 'auto' : space ? space + 'px' : 100 / state.nodes.length + '%'
+          width: horizontal ? (space ? space + 'px' : 100 / state.nodes.length + '%') : null
         }"
         :class="['normal', getStatusCls(index)]"
       >