example: update demos for style

components/action-sheet/demo/cases/demo0.vue

@@ -26,7 +26,7 @@ export default {
   data() {
     return {
       value: false,
-      title: '操作说明的title',
+      title: '操作说明的标题',
       options: [
         {
           label: '选项1',

components/agree/demo/cases/demo0.vue

@@ -28,7 +28,7 @@ export default {
       agreeConf: {
         checked: true,
         name: 'agree0',
-        size: 'lg',
+        size: 'md',
         disabled: false,
         introduction: '选中状态',
       },

components/agree/demo/cases/demo1.vue

@@ -28,7 +28,7 @@ export default {
       agreeConf: {
         checked: false,
         name: 'agree1',
-        size: 'lg',
+        size: 'md',
         disabled: false,
         introduction: '未选中状态',
       },

components/agree/demo/cases/demo2.vue

@@ -28,7 +28,7 @@ export default {
       agreeConf: {
         checked: true,
         name: 'agree2',
-        size: 'lg',
+        size: 'md',
         disabled: true,
         introduction: '选中不可用状态',
       },

components/agree/demo/cases/demo3.vue

@@ -28,7 +28,7 @@ export default {
       agreeConf: {
         checked: false,
         name: 'agree3',
-        size: 'lg',
+        size: 'md',
         disabled: true,
         introduction: '未选中不可用状态',
       },

components/agree/demo/index.vue

@@ -24,4 +24,8 @@ export default {...createDemoModule('action-sheet', [Demo0, Demo1, Demo2, Demo3]
     padding v-gap-md h-gap-lg
     font-size font-minor-large
     background color-bg-base
+    .md-agree-content
+      color #858B9C
+      a
+        color #5878B4
 </style>

components/bill/demo/cases/demo0.vue

@@ -5,15 +5,25 @@
       no="12345689"
       water-mark="MAND-MOBILE"
     >
-      <md-detail-item title="借款金额" content="￥30,000" />
+      <md-detail-item title="借款金额">
+        &yen;30,000
+      </md-detail-item>
       <md-detail-item title="收款账户">
         <md-icon name="bank-zs" style="margin-right:10px;"></md-icon>招商银行(尾号xxxx)
       </md-detail-item>
       <md-detail-item title="借款期数" content="12期" />
-      <md-detail-item title="正常还款总息" content="￥140.50" />
+      <md-detail-item title="正常还款总息">
+        &yen;140.50
+      </md-detail-item>
       <md-detail-item title="还款">
-        <md-tag size="tiny" shape="fillet" type="fill" style="margin-right:10px;">首次</md-tag>
+        <md-tag
-        ￥404.50(9月22日)
+          size="small"
+          shape="fillet"
+          type="fill"
+          fill-color="#858B9C"
+          style="margin-right:4px;"
+        >首次</md-tag>
+        &yen;404.50&nbsp;(9月22日)
       </md-detail-item>
       <template slot="description">
         1 账单生成后显示在滴水贷首页，请按时还款避免逾期。 <br>

components/bill/demo/cases/demo1.vue

@@ -5,15 +5,25 @@
         <h1 class="title">借款单据</h1>
         <p class="desc">仔细阅读，关注您的利益、义务</p>
       </div>
-      <md-detail-item title="借款金额" content="￥30,000" />
+      <md-detail-item title="借款金额">
+        &yen;30,000
+      </md-detail-item>
       <md-detail-item title="收款账户">
         <md-icon name="bank-zs" style="margin-right:10px;"></md-icon>招商银行(尾号xxxx)
       </md-detail-item>
       <md-detail-item title="借款期数" content="12期" />
-      <md-detail-item title="正常还款总息" content="￥140.50" />
+      <md-detail-item title="正常还款总息">
+        &yen;140.50
+      </md-detail-item>
       <md-detail-item title="还款">
-        <md-tag size="tiny" shape="fillet" type="fill" style="margin-right:10px;">首次</md-tag>
+        <md-tag
-        ￥404.50(9月22日)
+          size="small"
+          shape="fillet"
+          type="fill"
+          fill-color="#858B9C"
+          style="margin-right:4px;"
+        >首次</md-tag>
+        &yen;404.50&nbsp;(9月22日)
       </md-detail-item>
       <div class="footer-slot" slot="footer">
         1 账单生成后显示在滴水贷首页，请按时还款避免逾期。 <br>
@@ -59,9 +69,9 @@ export default {
         border-radius 18px
         background-color #F3F4F5
       &:before
-        left -36px
+        left -46px
       &:after
-        right -36px
+        right -46px
     .header-slot
       padding 40px 0 20px 0
       .title
@@ -70,11 +80,11 @@ export default {
         font-family Songti SC
         line-height 1
       .desc
-        margin-top 25px
+        margin-top 16px
         color #858B9C
         font-size 26px
     .footer-slot
-      padding 25px 0
+      padding 32px 0
       color #858B9C
       font-size 22px
       line-height 1.5

components/cashier/demo/cases/demo1.vue

@@ -58,7 +58,7 @@ export default {
       cashierChannels: [
         {
           icon: 'cashier-icon-1',
-          text: '自定义银行(xxxx)',
+          text: 'XX银行(1234)',
           desc: '当前银行维护中',
           value: '001',
           disabled: true,

components/cell-item/demo/cases/demo0.vue

@@ -3,7 +3,7 @@
     <md-field>
       <md-cell-item title="普通条目" />
       <md-cell-item title="动作条目" arrow @click="onClick" />
-      <md-cell-item title="禁用条目" arrow disabled />
+      <md-cell-item title="禁用条目" disabled />
     </md-field>
   </div>
 </template>

components/cell-item/demo/cases/demo1.vue

@@ -1,12 +1,14 @@
 <template>
   <div class="md-example-child md-example-child-cell-item md-example-child-cell-item-1">
     <md-field>
-      <md-cell-item title="滴水贷" arrow />
+      <md-cell-item title="滴水贷" addon="可用8000.34" arrow />
+      <md-cell-item title="滴水贷" addon="可用8000.34" />
       <md-cell-item title="信用付">
         <md-switch slot="right" v-model="open" />
       </md-cell-item>
-      <md-cell-item title="滴水贷" addon="可用8000.34" arrow />
+      <md-cell-item title="信用付" disabled>
-      <md-cell-item title="信用付" addon="可用8000.34" />
+        <md-switch slot="right" :value="true" disabled/>
+      </md-cell-item>
       <md-cell-item title="滴水贷" addon="可用8000.34" arrow>
         <div class="holder" slot="left"></div>
       </md-cell-item>

components/cell-item/demo/cases/demo2.vue

@@ -12,9 +12,9 @@
       <md-cell-item title="招商银行" brief="展示摘要描述" addon="禁用的项目" disabled arrow>
         <span class="holder" slot="left"></span>
       </md-cell-item>
-      <md-cell-item title="建设银行" brief="摘要描述" arrow>
+      <md-cell-item title="Mand Mobile" brief="A mobile UI toolkit" arrow>
-        <p slot="children" style="font-size:18px;">
+        <p slot="children" style="font-size:0.24rem;color:#858B9C;">
-          中国建设银行，在全球范围内为台湾、香港、美国、澳大利亚等国家或地区提供全面金融服务，主要经营公司银行业务、个人银行业务和资金业务，包括居民储蓄存款、信贷资金贷款、住房类贷款、外汇、信用卡，以及投资理财等多种业务。
+          面向金融场景的Vue移动端UI组件库，丰富、灵活、实用，快速搭建优质的金融类产品，让复杂的金融场景变简单。基于「合理、好用」设计价值观，从交互操作、视觉抽象、图形可视等角度共同解决问题。
         </p>
       </md-cell-item>
     </md-field>

components/detail-item/demo/cases/demo0.vue

@@ -7,6 +7,9 @@
       <md-detail-item title="保险费用" content="0.1元/日" />
       <md-detail-item title="保障日期" content="2018/08/08 ~ 2019/08/08" />
       <md-detail-item title="保单号" content="123456789" />
+      <md-detail-item title="保单协议">
+        <a href="#" style="color:#5878B4;text-decoration:none;">查看</a>
+      </md-detail-item>
     </md-field>
   </div>
 </template>

components/dialog/demo/cases/demo0.vue

@@ -2,6 +2,7 @@
   <div class="md-example-child md-example-child-dialog md-example-child-dialog-0">
     <md-button @click="basicDialog.open = true">基本</md-button>
     <md-button @click="iconDialog.open = true">带图标</md-button>
+    <md-button @click="warnDialog.open = true">警示操作</md-button>
     <md-button @click="actDialog.open = true">多操作</md-button>
 
     <md-dialog
@@ -15,7 +16,6 @@
 
     <md-dialog
       icon="location"
-      title="窗口标题"
       :closable="true"
       v-model="iconDialog.open"
       :btns="iconDialog.btns"
@@ -23,6 +23,15 @@
       围在城里的人想逃出来，城外的人想冲进去，对婚姻也罢，职业也罢，人生的愿望大都如此。
     </md-dialog>
 
+    <md-dialog
+      title="警示操作"
+      :closable="false"
+      v-model="warnDialog.open"
+      :btns="warnDialog.btns"
+    >
+      或是因为习惯了孤独，我们渴望被爱；又或是害怕爱而不得，我们最后仍然选择孤独。
+    </md-dialog>
+
     <md-dialog
       title="窗口标题"
       :closable="false"
@@ -67,6 +76,18 @@ export default {
           },
         ],
       },
+      warnDialog: {
+        open: false,
+        btns: [
+          {
+            text: '取消',
+          },
+          {
+            text: '警示操作',
+            warning: true,
+          },
+        ],
+      },
       actDialog: {
         open: false,
         btns: [

components/field/demo/cases/demo0.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="md-example-child md-example-child-field md-example-child-field-0">
     <md-field title="区域标题" brief="区域描述性文本，可根据具体场景配置">
-      <template slot="action">
+      <div class="action-container" slot="action" @click="onClick">
-        操作<md-icon name="arrow-right"></md-icon>
+        操作 <md-icon name="rectangle"></md-icon>
-      </template>
+      </div>
       <p slot="footer">区域页脚区域内容插槽</p>
       <md-field-item solid title="标题区域" placeholder="提示文本" />
       <md-field-item solid title="标题区域" content="内容文本" addon="次要信息" />
@@ -42,3 +42,21 @@ export default {
   },
 }
 
</script>
+
+<style lang="stylus">
+.md-example-child-field-0
+  .md-field-action
+    height 36px
+    align-items flex-end
+    .action-container
+      display flex
+      align-items center
+      .md-icon
+        margin-left 10px
+        color #C5CAD5
+        font-size 16px
+        width auto
+        height auto
+        line-height normal
+</style>
+

components/icon/demo/index.vue

@@ -27,6 +27,8 @@ export default {...createDemoModule('icon', [Demo0, Demo1, Demo2])}
     padding 15px 0
     color #333
     text-align center
+    .md-icon
+      margin 0 auto
     p
       text-align center
       font-size font-body-normal

components/input-item/demo/cases/demo0.vue

@@ -5,6 +5,7 @@
         ref="input0"
         title="普通文本"
         placeholder="普通文本"
+        is-amount
         :maxlength="5"
       ></md-input-item>
       <md-input-item

components/input-item/demo/cases/demo3.vue

@@ -14,6 +14,8 @@
         brief="理财提示文案，字符超出10个自动变小"
         placeholder="最多30万元"
         :size="size"
+        is-amount
+        is-highlight
       >
         <div class="input-operator" slot="right" @click="takeAll">全部取出</div>
       </md-input-item>
@@ -70,9 +72,9 @@ export default {
         .field-operator
           display flex
           align-items center
+    .md-field-item-content::before
+      background-color #C5CAD5
     .input-operator
       font-size 28px
-      color #2F86F6
+      color #5878B4
-    .md-input-item-input
-      padding-right 140px
 </style>

components/input-item/demo/cases/demo4.vue

@@ -3,14 +3,13 @@
     <md-field>
       <md-input-item
         ref="input9"
-        title="带清空按钮"
+        title="清空按钮"
         placeholder="normal text"
-        value="with clear button"
         clearable
       ></md-input-item>
       <md-input-item
         ref="input10"
-        title="带金融键盘"
+        title="金融键盘"
         placeholder="financial number keyboard"
         is-virtual-keyboard
         clearable

components/radio/demo/cases/demo1.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="md-example-child md-example-child-radio md-example-child-radio-1">
     <md-field>
-      <md-field-item title="婚姻状况">
+      <md-field-item title="婚姻状况" solid>
         <md-radio name="2" v-model="marriage" label="已婚" inline />
         <md-radio name="1" v-model="marriage" label="未婚" inline />
         <md-radio name="3" v-model="marriage" label="保密" inline />

components/radio/demo/cases/demo2.vue

@@ -2,8 +2,9 @@
   <div class="md-example-child md-example-child-radio md-example-child-radio-2">
     <md-field title="简单选择列表" class="radio-field">
       <md-radio-list
-        :options="banks"
         v-model="myBank"
+        :options="banks"
+        icon-size="lg"
       />
     </md-field>
     <md-field title="输入项" class="radio-field">
@@ -12,6 +13,7 @@
         v-model="myReason"
         icon="right"
         icon-inverse=""
+        icon-disabled=""
         icon-position="right"
         has-input
         input-label="其他"
@@ -47,6 +49,12 @@ export default {
           text: '招商银行(尾号2342)',
           brief: '选项摘要描述',
         },
+        {
+          value: '2',
+          text: '建设银行(尾号4321)',
+          brief: '选项摘要描述',
+          disabled: true,
+        },
       ],
       myReason: '',
       reasons: [

components/selector/demo/cases/demo0.vue

@@ -6,13 +6,14 @@
         :content="selectorValue"
         @click="showSelector"
         arrow
-        align-right
+        solid
       />
     </md-field>
     <md-selector
       v-model="isSelectorShow"
       default-value="2"
       :data="data[0]"
+      max-height="400px"
       title="普通模式"
       @choose="onSelectorChoose"
     ></md-selector>

components/selector/demo/cases/demo1.vue

@@ -2,11 +2,11 @@
   <div class="md-example-child md-example-child-selector md-example-child-selector-1">
     <md-field>
       <md-field-item
-        title="自定义选项"
+        title="自定义"
         :content="selectorValue"
         @click="showSelector"
         arrow
-        align-right
+        solid
       />
     </md-field>
     <md-selector
@@ -16,8 +16,7 @@
       @choose="onSelectorChoose"
     >
       <template slot-scope="{ option }">
-        <div class="md-selector-custom-title" v-text="option.text"></div>
+        <div class="md-selector-custom-brief">{{ option.text }}使用slot-scope</div>
-        <div class="md-selector-custom-brief">{{ option.text }}使用slot-scooped的自定义描述</div>
       </template>
     </md-selector>
   </div>
@@ -76,8 +75,6 @@ export default {
 
 <style lang="stylus">
 .md-example-child-selector-1
-  .md-selector-custom-title
-    font-size 28px
   .md-selector-custom-brief
     font-size 20px
     color #999

components/selector/demo/cases/demo2.vue

@@ -5,13 +5,14 @@
         title="确认模式"
         :content="selectorValue"
         @click="showSelector"
-        align-right
         arrow
+        solid
       />
     </md-field>
     <md-selector
       v-model="isSelectorShow"
       :data="data[0]"
+      min-height="320px"
       title="确认模式"
       okText="确认"
       @confirm="onSelectorConfirm"
@@ -41,18 +42,22 @@ export default {
           {
             value: '1',
             text: '选项一',
+            brief: '选项一说明',
           },
           {
             value: '2',
             text: '选项二',
+            brief: '选项二说明',
           },
           {
             value: '3',
             text: '选项三',
+            brief: '选项三说明',
           },
           {
             value: '4',
             text: '选项四',
+            brief: '选项四说明',
           },
         ],
       ],

components/selector/demo/cases/demo3.vue

@@ -6,13 +6,13 @@
         :content="selectorValue"
         @click="showSelector"
         arrow
-        align-right
       />
     </md-field>
     <md-selector
       v-model="isSelectorShow"
       :data="data[0]"
       title="Check模式"
+      min-height="320px"
       okText="确认"
       cancelText="取消"
       @confirm="onSelectorConfirm"

components/swiper/demo/cases/demo0.vue

@@ -3,7 +3,9 @@
     <md-swiper
       @before-change="beforeChange"
       @after-change="afterChange"
-      ref="swiper">
+      ref="swiper"
+      :useNativeDriver="false"
+    >
       <md-swiper-item :key="$index" v-for="(item, $index) in simple">
         <a href="javascript:void(0)"
           class="banner-item"
@@ -85,8 +87,8 @@ export default {
 }
 
</script>
 
-<style lang="stylus" scoped>
+<style lang="stylus">
-.md-example-child
+.md-example-child-swiper-0
   height 250px
   .banner-item
     float left

components/swiper/demo/cases/demo1.vue

@@ -56,8 +56,8 @@ export default {
 }
 
</script>
 
-<style lang="stylus" scoped>
+<style lang="stylus">
-.md-example-child
+.md-example-child-swiper-1
   height 250px
   .banner-item
     float left

components/swiper/demo/cases/demo2.vue

@@ -60,8 +60,8 @@ export default {
 }
 
</script>
 
-<style lang="stylus" scoped>
+<style lang="stylus">
-.md-example-child
+.md-example-child-swiper-2
   height 250px
   .banner-item
     float left

components/swiper/demo/cases/demo3.vue

@@ -62,8 +62,8 @@ export default {
 }
 
</script>
 
-<style lang="stylus" scoped>
+<style lang="stylus">
-.md-example-child
+.md-example-child-swiper-3
   height 250px
   li
     list-style none

components/tag/demo/cases/demo1.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="md-example-child md-example-child-tag md-example-child-tag-1">
     <tag size="large" shape="fillet" type="fill" fill-color="#FC9153" font-weight="normal" font-color="#fff">字</tag>
-    <tag size="large" shape="fillet" type="fill" fill-color="#50A050" font-weight="bold" font-color="#fff">字</tag>
+    <tag size="large" shape="fillet" type="fill" fill-color="#50A050" font-weight="normal" font-color="#fff">字</tag>
-    <tag size="large" shape="fillet" type="fill" fill-color="#91C6EF" font-weight="bolder" font-color="#fff">字</tag>
+    <tag size="large" shape="fillet" type="fill" fill-color="#91C6EF" font-weight="normal" font-color="#fff">字</tag>
   </div>
 </template>
 

components/tag/demo/cases/demo2.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="md-example-child md-example-child-tag md-example-child-tag-2">
-    <tag size="large" shape="square" font-color="#3CA0E6" type="ghost">运营车</tag>
+    <tag size="large" shape="square" font-color="#FF8843" type="ghost">运营车</tag>
-    <tag size="small" shape="square" font-color="#3CA0E6" type="ghost">运营车</tag>
+    <tag size="small" shape="square" font-color="#28AA91" type="ghost">运营车</tag>
   </div>
 </template>
 

components/tag/demo/cases/demo4.vue

@@ -1,20 +1,35 @@
 <template>
   <div class="md-example-child md-example-child-tag md-example-child-tag-3">
-    <tag size="large" shape="quarter" fill-color="#FC9153" type="fill" font-weight="bolder" font-color="#fff">HOT</tag>
+    <md-tag
+      size="large"
+      shape="coupon"
+      fill-color="#FC9153"
+      type="fill"
+      font-color="#fff"
+      style="margin-right:20px;"
+    >免息券70.1</md-tag>
+    <md-tag
+      size="large"
+      shape="quarter"
+      fill-color="#FC9153"
+      type="fill"
+      font-color="#fff"
+      style="margin-right:20px;"
+    >HOT</md-tag>
   </div>
 </template>
 
-<script>
import {Tag} from 'mand-mobile'
+<script>
import {Tag, Icon} from 'mand-mobile'
 
 export default {
   name: 'tag-demo',
   /* DELETE */
-  title: '四分之一圆',
+  title: '特殊标签',
-  titleEnUS: 'Characters cut in relief',
+  titleEnUS: 'Special tags',
-  codeSandBox: 'https://codesandbox.io/s/n3o1w6vx2m',
   /* DELETE */
   components: {
-    Tag,
+    [Tag.name]: Tag,
+    [Icon.name]: Icon,
   },
 }
 
</script>

components/tag/demo/cases/demo5.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="md-example-child md-example-child-tag md-example-child-tag-3">
-    <tag size="large" shape="coupon" fill-color="#FC9153" type="fill" font-weight="bolder" font-color="#fff">免息券</tag>
+    <tag size="large" shape="coupon" fill-color="#FC9153" type="fill" font-color="#fff">免息券70.1</tag>
+    <tag size="small" shape="coupon" fill-color="#FC9153" type="fill" font-color="#fff">免息券70.1</tag>
+    <tag size="tiny" shape="coupon" fill-color="#FC9153" type="fill" font-color="#fff">免息券70.1</tag>
   </div>
 </template>
 

components/tag/demo/index.vue

@@ -16,9 +16,8 @@ import Demo1 from './cases/demo1'
 import Demo2 from './cases/demo2'
 import Demo3 from './cases/demo3'
 import Demo4 from './cases/demo4'
-import Demo5 from './cases/demo5'
 
-export default {...createDemoModule('tag', [Demo0, Demo1, Demo2, Demo3, Demo4, Demo5])}
+export default {...createDemoModule('tag', [Demo0, Demo1, Demo2, Demo3, Demo4])}
 
</script>
 
 <style lang="stylus">

components/toast/demo/cases/demo3.vue

@@ -17,7 +17,7 @@ export default {
   },
   methods: {
     showLoadingToast() {
-      Toast.loading()
+      Toast.loading('加载中...')
       setTimeout(() => {
         Toast.hide()
       }, 3000)