example: update demos for style

2018-12-03 21:29:22 +08:00 · 2018-12-03 21:29:22 +08:00 · a13e70e3b5
parent ed5ac69c4c
commit a13e70e3b5
35 changed files with 170 additions and 69 deletions
--- a/components/action-sheet/demo/cases/demo0.vue
+++ b/components/action-sheet/demo/cases/demo0.vue
@ -26,7 +26,7 @@ export default {
  data() {
    return {
      value: false,
-      title: '操作说明的title',
+      title: '操作说明的标题',
      options: [
        {
          label: '选项1',
--- a/components/agree/demo/cases/demo0.vue
+++ b/components/agree/demo/cases/demo0.vue
@ -28,7 +28,7 @@ export default {
      agreeConf: {
        checked: true,
        name: 'agree0',
-        size: 'lg',
+        size: 'md',
        disabled: false,
        introduction: '选中状态',
      },
--- a/components/agree/demo/cases/demo1.vue
+++ b/components/agree/demo/cases/demo1.vue
@ -28,7 +28,7 @@ export default {
      agreeConf: {
        checked: false,
        name: 'agree1',
-        size: 'lg',
+        size: 'md',
        disabled: false,
        introduction: '未选中状态',
      },
--- a/components/agree/demo/cases/demo2.vue
+++ b/components/agree/demo/cases/demo2.vue
@ -28,7 +28,7 @@ export default {
      agreeConf: {
        checked: true,
        name: 'agree2',
-        size: 'lg',
+        size: 'md',
        disabled: true,
        introduction: '选中不可用状态',
      },
--- a/components/agree/demo/cases/demo3.vue
+++ b/components/agree/demo/cases/demo3.vue
@ -28,7 +28,7 @@ export default {
      agreeConf: {
        checked: false,
        name: 'agree3',
-        size: 'lg',
+        size: 'md',
        disabled: true,
        introduction: '未选中不可用状态',
      },
--- a/components/agree/demo/index.vue
+++ b/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>
--- a/components/bill/demo/cases/demo0.vue
+++ b/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>
-        ￥404.50(9月22日)
+        <md-tag
+          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>
--- a/components/bill/demo/cases/demo1.vue
+++ b/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>
-        ￥404.50(9月22日)
+        <md-tag
+          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
--- a/components/cashier/demo/cases/demo1.vue
+++ b/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,
--- a/components/cell-item/demo/cases/demo0.vue
+++ b/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>
--- a/components/cell-item/demo/cases/demo1.vue
+++ b/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="信用付" addon="可用8000.34" />
+      <md-cell-item title="信用付" disabled>
+        <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>
--- a/components/cell-item/demo/cases/demo2.vue
+++ b/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>
-        <p slot="children" style="font-size:18px;">
-          中国建设银行，在全球范围内为台湾、香港、美国、澳大利亚等国家或地区提供全面金融服务，主要经营公司银行业务、个人银行业务和资金业务，包括居民储蓄存款、信贷资金贷款、住房类贷款、外汇、信用卡，以及投资理财等多种业务。
+      <md-cell-item title="Mand Mobile" brief="A mobile UI toolkit" arrow>
+        <p slot="children" style="font-size:0.24rem;color:#858B9C;">
+          面向金融场景的Vue移动端UI组件库，丰富、灵活、实用，快速搭建优质的金融类产品，让复杂的金融场景变简单。基于「合理、好用」设计价值观，从交互操作、视觉抽象、图形可视等角度共同解决问题。
        </p>
      </md-cell-item>
    </md-field>
--- a/components/detail-item/demo/cases/demo0.vue
+++ b/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>
--- a/components/dialog/demo/cases/demo0.vue
+++ b/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: [
--- a/components/field/demo/cases/demo0.vue
+++ b/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">
-        操作<md-icon name="arrow-right"></md-icon>
-      </template>
+      <div class="action-container" slot="action" @click="onClick">
+        操作 <md-icon name="rectangle"></md-icon>
+      </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>
+
--- a/components/icon/demo/index.vue
+++ b/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
--- a/components/input-item/demo/cases/demo0.vue
+++ b/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
--- a/components/input-item/demo/cases/demo3.vue
+++ b/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
-    .md-input-item-input
-      padding-right 140px
+      color #5878B4
 </style>
--- a/components/input-item/demo/cases/demo4.vue
+++ b/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
--- a/components/radio/demo/cases/demo1.vue
+++ b/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 />
--- a/components/radio/demo/cases/demo2.vue
+++ b/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: [
--- a/components/selector/demo/cases/demo0.vue
+++ b/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>
--- a/components/selector/demo/cases/demo1.vue
+++ b/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-scooped的自定义描述</div>
+        <div class="md-selector-custom-brief">{{ option.text }}使用slot-scope</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
--- a/components/selector/demo/cases/demo2.vue
+++ b/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: '选项四说明',
          },
        ],
      ],
--- a/components/selector/demo/cases/demo3.vue
+++ b/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"
--- a/components/swiper/demo/cases/demo0.vue
+++ b/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>
-.md-example-child
+<style lang="stylus">
+.md-example-child-swiper-0
  height 250px
  .banner-item
    float left
--- a/components/swiper/demo/cases/demo1.vue
+++ b/components/swiper/demo/cases/demo1.vue
@ -56,8 +56,8 @@ export default {
 }
 
</script>

-<style lang="stylus" scoped>
-.md-example-child
+<style lang="stylus">
+.md-example-child-swiper-1
  height 250px
  .banner-item
    float left
--- a/components/swiper/demo/cases/demo2.vue
+++ b/components/swiper/demo/cases/demo2.vue
@ -60,8 +60,8 @@ export default {
 }
 
</script>

-<style lang="stylus" scoped>
-.md-example-child
+<style lang="stylus">
+.md-example-child-swiper-2
  height 250px
  .banner-item
    float left
--- a/components/swiper/demo/cases/demo3.vue
+++ b/components/swiper/demo/cases/demo3.vue
@ -62,8 +62,8 @@ export default {
 }
 
</script>

-<style lang="stylus" scoped>
-.md-example-child
+<style lang="stylus">
+.md-example-child-swiper-3
  height 250px
  li
    list-style none
--- a/components/tag/demo/cases/demo1.vue
+++ b/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="#91C6EF" font-weight="bolder" 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="normal" font-color="#fff">字</tag>
  </div>
 </template>

--- a/components/tag/demo/cases/demo2.vue
+++ b/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="small" 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="#28AA91" type="ghost">运营车</tag>
  </div>
 </template>

--- a/components/tag/demo/cases/demo4.vue
+++ b/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: '四分之一圆',
-  titleEnUS: 'Characters cut in relief',
-  codeSandBox: 'https://codesandbox.io/s/n3o1w6vx2m',
+  title: '特殊标签',
+  titleEnUS: 'Special tags',
  /* DELETE */
  components: {
-    Tag,
+    [Tag.name]: Tag,
+    [Icon.name]: Icon,
  },
 }
 
</script>
--- a/components/tag/demo/cases/demo5.vue
+++ b/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>

--- a/components/tag/demo/index.vue
+++ b/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">
--- a/components/toast/demo/cases/demo3.vue
+++ b/components/toast/demo/cases/demo3.vue
@ -17,7 +17,7 @@ export default {
  },
  methods: {
    showLoadingToast() {
-      Toast.loading()
+      Toast.loading('加载中...')
      setTimeout(() => {
        Toast.hide()
      }, 3000)