example(steps): add demo

components/steps/demo/cases/demo8.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="md-example-child md-example-child-steps md-example-child-steps-8">
+    <md-steps
+      direction="vertical"
+      :steps="steps"
+      :current="0.5"
+    >
+      <template slot="reached">
+        <md-icon name="checked"></md-icon>
+      </template>
+      <div
+        class="custom-content"
+        slot="content"
+        slot-scope="{ index, step }"
+      >
+        <template v-if="index === 0">
+          <p class="name active" v-text="step.name"></p>
+          <p class="amount">
+            <md-amount :value="+step.amount"></md-amount>元
+          </p>
+          <p class="desc" v-html="step.text"></p>
+        </template>
+        <template v-else>
+          <p class="name" v-text="step.name"></p>
+        </template>
+      </div>
+    </md-steps>
+  </div>
+</template>
+
+<script>
import {Steps, Amount, Icon} from 'mand-mobile'
+
+export default {
+  name: 'steps-demo',
+  /* DELETE */
+  title: '使用插槽',
+  titleEnUS: 'Using slots',
+  height: 150,
+  /* DELETE */
+  components: {
+    [Steps.name]: Steps,
+    [Amount.name]: Amount,
+    [Icon.name]: Icon,
+  },
+  data() {
+    return {
+      steps: [
+        {
+          name: '还款申请已提交',
+          amount: '600.5',
+          text: '银行处理中，预计<span>30分钟</span>内到账，请留意短信信息。如有疑问，请联系客服。',
+        },
+        {
+          name: '还款成功',
+        },
+      ],
+    }
+  },
+}
+
</script>
+
+<style lang="stylus">
+.md-example-child-steps-8
+  .md-steps
+    height 360px
+  .custom-content
+    .name
+      font-size 28px
+      color #858B9C
+      &.active
+        font-size 40px
+        color #111A34
+    .amount
+      margin-top 20px
+      color #111A34
+      .md-amount
+        margin-right 5px
+        font-size 80px
+    .desc
+      line-height 40px !important
+      span
+        color #FF8325
+</style>
+

components/steps/demo/index.vue

@@ -19,8 +19,9 @@ import Demo4 from './cases/demo4'
 import Demo5 from './cases/demo5'
 import Demo6 from './cases/demo6'
 import Demo7 from './cases/demo7'
+import Demo8 from './cases/demo8'
 
-export default {...createDemoModule('steps', [Demo0, Demo1, Demo2, Demo3, Demo4, Demo5, Demo6, Demo7])}
+export default {...createDemoModule('steps', [Demo0, Demo1, Demo2, Demo3, Demo4, Demo5, Demo6, Demo7, Demo8])}
 
</script>
 
 <style lang="stylus" scoped>