<script>
|
export default {
|
name: "index",
|
data() {
|
return {
|
title:'<div style="text-align: center;color: #252938;font-weight: bold">12期共还 <span style="color: #4766FE">6027.12</span> 元，含利息+担保费+权益费<span style="color: #4766FE">6027.12</span>元</div>'
|
}
|
},
|
}
|
</script>
|
|
<template>
|
<view>
|
<view class="head">
|
<rich-text :nodes="title"></rich-text>
|
<view class="tips">（注：以实际放款成功后合同为准）</view>
|
</view>
|
<view class="content">
|
<view class="pt40" >
|
<view class="lis" v-for="(item,index) in 12" :key="index">
|
<view class="mr">
|
<view class="period" >第{{item}}期</view>
|
<view class="date">{{item.dateDue.replace(/-/g, "")}}</view>
|
|
</view>
|
<view class="rotundity">
|
<image class="drop" :src="`${$images}/static/img/loan-progress/loan-status-current-icon.png`" ></image>
|
</view>
|
<view class="notes" >
|
<view class="nums" >{{item.amt}}</view>
|
<view class="remarks">本金{{ item.prcpAmt }}+利息{{ item.intAmt }}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
</template>
|
|
<style scoped lang="scss">
|
.head{
|
margin-top: 40rpx;
|
padding: 0 56rpx;
|
padding-bottom: 40rpx;
|
border-bottom: 10rpx solid #F7F7F7;
|
font-size: 32rpx;
|
color: #252938;
|
.title{
|
display: flex;
|
flex-direction: row;
|
text-align: center;
|
color: #252938;
|
font-size: 32rpx;
|
font-weight: bold;
|
.num{
|
color: #4766FE;
|
display: contents;
|
}
|
}
|
.tips{
|
color: #666666;
|
font-size: 28rpx;
|
text-align: center;
|
margin-top: 20rpx;
|
}
|
|
}
|
|
.content{
|
.pt40{
|
padding-top: 40rpx;
|
}
|
.mr{
|
margin-right: 20rpx;
|
}
|
.lis{
|
display: flex;flex-direction: row;padding-left: 60rpx;
|
.period{
|
color: #666666;font-size: 28rpx;text-align: right;
|
}
|
.date{
|
color: #666666;font-size: 28rpx;margin-top: 12rpx;
|
}
|
&:nth-last-child(1){
|
.rotundity{
|
&:after{
|
display: none;
|
}
|
}
|
}
|
}
|
}
|
|
.rotundity{
|
position: relative;
|
.drop{
|
width: 28rpx;height: 28rpx;z-index: 9;position: relative;
|
}
|
&:after{
|
content: '';
|
display: inline-block;
|
width: 2rpx;
|
height: 100%;
|
background: #E2E3E8;
|
position: absolute;
|
left: calc( 50% - 1rpx);
|
|
}
|
|
}
|
.notes{
|
margin-left: 30rpx;margin-bottom: 60rpx;
|
.nums{
|
color: #333333;font-size: 32rpx;font-weight: bold;
|
}
|
.remarks{
|
color: #666666;font-size: 24rpx;margin-top: 14rpx;
|
}
|
}
|
</style>
|
