89 lines
2.4 KiB
Vue
89 lines
2.4 KiB
Vue
|
<template>
|
|||
|
|
<div class="md-example-child md-example-child-bill-1">
|
|||
|
|
<md-bill>
|
|||
|
|
<div class="header-slot" slot="header">
|
|||
|
|
<h1 class="title">借款单据</h1>
|
|||
|
|
<p class="desc">仔细阅读，关注您的利益、义务</p>
|
|||
|
|
</div>
|
|||
|
|
<md-detail-item title="借款金额">
|
|||
|
|
¥30,000
|
|||
|
|
</md-detail-item>
|
|||
|
|
<md-detail-item title="收款账户">
|
|||
|
|
<md-icon name="bank-zs" svg style="margin-right:10px;"></md-icon>招商银行(尾号xxxx)
|
|||
|
|
</md-detail-item>
|
|||
|
|
<md-detail-item title="借款期数" content="12期" />
|
|||
|
|
<md-detail-item title="正常还款总息">
|
|||
|
|
¥140.50
|
|||
|
|
</md-detail-item>
|
|||
|
|
<md-detail-item title="还款">
|
|||
|
|
<md-tag
|
|||
|
|
size="small"
|
|||
|
|
shape="fillet"
|
|||
|
|
type="fill"
|
|||
|
|
fill-color="#858B9C"
|
|||
|
|
style="margin-right:4px;"
|
|||
|
|
>首次</md-tag>
|
|||
|
|
¥404.50 (9月22日)
|
|||
|
|
</md-detail-item>
|
|||
|
|
<div class="footer-slot" slot="footer">
|
|||
|
|
1 账单生成后显示在滴水贷首页，请按时还款避免逾期。 <br>
|
|||
|
|
2 整笔账单还款完成后，额度将恢复。暂不支持额度实时恢复。<br>
|
|||
|
|
3 还款日将自动扣款，扣款顺序优先余额，其次还款账户：工商银行 (尾号xxxx)。
|
|||
|
|
</div>
|
|||
|
|
</md-bill>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
import '@examples/assets/images/bank-zs.svg'
|
|||
|
|
import {Bill, DetailItem, Icon, Tag} from 'mand-mobile'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'bill-demo',
|
|||
|
|
components: {
|
|||
|
|
[Bill.name]: Bill,
|
|||
|
|
[DetailItem.name]: DetailItem,
|
|||
|
|
[Icon.name]: Icon,
|
|||
|
|
[Tag.name]: Tag,
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="stylus">
|
|||
|
|
.md-example-child-bill-1
|
|||
|
|
.md-bill
|
|||
|
|
background-color #FFF
|
|||
|
|
box-shadow 0 6px 24px rgba(17, 26, 52, .05)
|
|||
|
|
&.md-water-mark
|
|||
|
|
overflow visible
|
|||
|
|
.md-bill-neck
|
|||
|
|
&:before, &:after
|
|||
|
|
content ''
|
|||
|
|
position absolute
|
|||
|
|
top 0
|
|||
|
|
width 36px
|
|||
|
|
height 36px
|
|||
|
|
border-radius 18px
|
|||
|
|
background-color #F3F4F5
|
|||
|
|
&:before
|
|||
|
|
left -46px
|
|||
|
|
&:after
|
|||
|
|
right -46px
|
|||
|
|
.header-slot
|
|||
|
|
padding 40px 0 20px 0
|
|||
|
|
.title
|
|||
|
|
color #111A34
|
|||
|
|
font-size 60px
|
|||
|
|
font-family Songti SC
|
|||
|
|
line-height 1
|
|||
|
|
.desc
|
|||
|
|
margin-top 16px
|
|||
|
|
color #858B9C
|
|||
|
|
font-size 26px
|
|||
|
|
.footer-slot
|
|||
|
|
padding 32px 0
|
|||
|
|
color #858B9C
|
|||
|
|
font-size 22px
|
|||
|
|
line-height 1.5
|
|||
|
|
border-top solid 1px #E1E4EB
|
|||
|
|
</style>
|