Skip to content

H
hls-xcmg-vue-app
Commit bb66120b authored by 786817560's avatar 786817560
Browse files
Options

'试算页面修改'

parent 6653a1c5
Hide whitespace changes
Inline Side-by-side
Showing with 321 additions and 248 deletions
src/pages/financingTrial/trial-repay-plan.vue
View file @ bb66120b
<!--
* @Author: your name
* @Date: 2019-10-30 11:16:17
* @LastEditTime: 2019-10-30 18:54:41
* @Date: 2019-10-30 19:29:24
* @LastEditTime: 2019-10-31 10:26:52
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \hls-xcmg-vue-app\src\pages\financingTrial\trial-repay-plan.vue
-->
<template>
<h-view id="trialRepayPlan">
<h-view id="repay-plan" class="public-style">
<h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()">
<span>融资明细</span>
</div>
</h-header>
<h-content>
<div class="topMoney">
<div class="quota">
<div class="total">
<p>融资额</p>
<p>90000</p>
</div>
<div class="times">{{ info.lease_times }}期</div>
<div class="center">
<div class="total">
<div class="sum">
<div>融资额</div>
<p>190,000.00</p>
<img src="@/assets/contractInquire/num.png" alt="">
<h3><span>{{ info.lease_times }}期</span></h3>
</div>
<div class="fund">
<div>
<p class="name">保证金</p>
<p class="money">￥{{ info.deposit | currency }}</p>
</div>
<div>
<p class="name">首付款</p>
<p class="money">￥{{ info.down_payment | currency }}</p>
</div>
<div>
<p class="name">手续费</p>
<p class="money">￥{{ info.lease_charge | currency }}</p>
</div>
<div class="single">
<div><h4>保证金</h4><p>￥{{ info.deposit | currency }}</p></div>
<div><h4>保证金</h4><p>￥{{ info.down_payment | currency }}</p></div>
<div><h4>保证金</h4><p>￥{{ info.lease_charge | currency }}</p></div>
</div>
</div>
<div class="repay">
<div class="repayPlan">
<p>还款计划</p>
<img src="@/assets/trial/down.png" alt="">
</div>
<div class="plan-name">
<div class="header">还款计划</div>
<img :class="{'rotate':show}" src="@/assets/contractInquire/top.png" alt="" @click="showDetails">
</div>
<div class="items">
<img src="@/assets/trial/buleClip.png" alt="">
<div class="content">
<div class="dates">
<p>2019</p>
<p>01-01</p>
</div>
<div class="cash">
<p>现金流</p>
<p>应还金额</p>
</div>
<div class="rent">
<p>租金</p>
<p>90,000.00</p>
</div>
</div>
<h-content id="content" class="plan-content">
<!-- 已结清 black , 逾期 orange , 还款中 blue , 未还款 green -->
<div v-for="(item,index) in 5" :key="index" :class="{'plan-list':true,'or':statu==='orange','bl':statu==='blue','gr':statu==='green'}">
<div :class="{'period':true,'orange':statu==='orange','blue':statu==='blue','green':statu==='green'}">{{ index + 1 }}期</div>
<img v-if="statu === 'black'" src="@/assets/contractInquire/black.png" alt="" class="left">
<img v-if="statu === 'orange'" src="@/assets/contractInquire/orange.png" alt="" class="left">
<img v-if="statu === 'blue'" src="@/assets/contractInquire/blue.png" alt="" class="left">
<img v-if="statu === 'green'" src="@/assets/contractInquire/green.png" alt="" class="left">
<div class="time">
<p>2019</p>
<span>01-01</span>
</div>
</div>
<div class="items">
<img src="@/assets/trial/buleClip.png" alt="">
<div class="content">
<div class="dates">
<p>2019</p>
<p>01-01</p>
</div>
<div class="cash">
<p>现金流</p>
<p>应还金额</p>
</div>
<div class="rent">
<p>租金</p>
<p>9,000,000.00</p>
</div>
<div class="name">
<p>现金流项目</p>
<p>应还金额</p>
</div>
<div class="number">
<p>租金</p>
<span :class="{'orang':statu==='orange','blu':statu==='blue','gree':statu==='green'}">90,000.00</span>
</div>
<img v-if="statu === 'black'" src="@/assets/contractInquire/done.png" alt="" class="status">
<img v-if="statu === 'orange'" src="@/assets/contractInquire/prompt.png" alt="" class="status">
</div>
</h-content>
</h-view>
</template>
<script>
export default {
name: '',
name: 'RepayPlan',
components: {
},
data () {
return {
// 已结清 black , 逾期 orange , 还款中 blue , 未还款 green
statu: 'black',
info: {},
show: false,
height: 0,
oldHeight: 0,
newHeight: 0,
}
},
computed: {},
......@@ -101,6 +90,29 @@ export default {
next()
},
methods: {
showDetails () {
if (!this.flag) {
this.flag = true
this.height = document.getElementsByClassName('total')[0].clientHeight
this.oldHeight = document.getElementById('content').clientHeight
this.newHeight = this.height + this.oldHeight
}
if (!this.show) {
this.show = !this.show
document.getElementById('content').style.height = this.newHeight + 'px'
document.getElementsByClassName('center')[0].style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
document.getElementsByClassName('center')[0].style.transform = 'translate(0px, -' + this.height + 'px) scale(1) translateZ(0px)'
document.getElementById('content').style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
document.getElementById('content').style.transform = 'translate(0px, -' + this.height + 'px) scale(1) translateZ(0px)'
} else {
this.show = !this.show
document.getElementById('content').style.height = this.oldHeight + 'px'
document.getElementsByClassName('center')[0].style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
document.getElementsByClassName('center')[0].style.transform = 'translate(0px, -' + 0 + 'px) scale(1) translateZ(0px)'
document.getElementById('content').style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
document.getElementById('content').style.transform = 'translate(0px, -' + 0 + 'px) scale(1) translateZ(0px)'
}
},
repayQuery () {
let vm = this
let url = $config.basePath + 'prd_repayment_plan'
......@@ -119,211 +131,272 @@ export default {
})
},
},
}
</script>
<style lang='less' scoped>
@import "../../styles/public-style";
#trialRepayPlan {
.topMoney {
width: 100%;
height: 150px;
background: #1D3FFF;
background-image: url('../../assets/trial/cur.png');
background-size: 100% 100%;
.quota {
width: 100%;
height: 48px;
display: flex;
flex-direction: row;
padding-top: 36px;
align-items: center;
.total {
margin-left: 20px;
letter-spacing: 0;
position: relative;
}
.total p:nth-of-type(1){
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #FFFFFF;
height: 20px;
line-height: 20px;
<style lang='less' >
#repay-plan {
.h-header {
background-color: #1D3FFF;
.h-header-btn {
img {
width: 16px;
height: 16px;
margin-left: 4px;
}
span {
font-family: PingFangSC-Semibold;
margin-left: 16px;
font-size: 17px;
letter-spacing: 0.61px;
line-height: 24px;
}
}
}
.total {
position: relative;
background-color: #1D3FFF;
height: 138px;
color: #fff;
background-image: url(../../assets/contractInquire/background.png);
background-size: cover;
.sum {
padding: 0 20px;
div {
font-family: PingFangSC-Semibold;
font-size: 14px;
padding-top: 12px;
padding-bottom: 10px;
}
p {
font-family: Verdana-BoldItalic;
font-size: 20px;
font-weight: 700;
font-style: italic;
margin-left: -4px;
}
img {
width: 75px;
position: absolute;
right: 20px;
top: 25px;
}
h3 {
position: absolute;
font-weight: 700;
margin: 0;
right: 42px;
top: 32px;
color: #1D3FFF;
font-family: PingFangSC-Semibold;
font-size: 14px;
span {
font-style: italic;
margin-right: 5px;
}
.total p:nth-of-type(2){
font-family: Verdana-BoldItalic;
font-size: 20px;
color: #FFFFFF;
height: 24px;
line-height: 24px;
margin-top: 4px;
}
}
.single {
display: flex;
margin-top: 28px;
div {
flex: auto;
text-align: center;
h4 {
opacity: 0.8;
margin: 0;
font-family: PingFangSC-Regular;
font-size: 12px;
color: #FFFFFF;
margin-bottom: 8px;
}
.times {
font-family: Verdana-BoldItalic;
width: 65px;
height: 24px;
line-height: 24px;
font-size: 14px;
color: #1D3FFF;
text-align: center;
letter-spacing: 0;
position: absolute;
right: 20px;
background-image: url('../../assets/trial/times.png');
background-size: 100%;
p {
font-family: Verdana;
font-size: 14px;
color: #FFFFFF;
font-weight: 700;
}
}
}
.fund {
width: 100%;
display: flex;
flex-direction: row;
margin-top: 40px;
div {
width: 33%
}
.plan-name {
position: relative;
background-color: #1D3FFF;
margin-top: -2px;
img {
position: absolute;
right: 30px;
top: 12px;
height: 20px;
transition: 0s;
}
.name {
width: 100%;
height: 17px;
line-height: 17px;
text-align: center;
opacity: 0.8;
font-family: PingFangSC-Regular;
font-size: 12px;
color: #FFFFFF;
letter-spacing: 0;
.rotate {
transform: rotate(180deg);
}
.money {
width: 100%;
.header {
position: relative;
height: 48px;
line-height: 48px;
background-color: #fff;
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #21254C;
font-weight: 700;
text-indent: 2em;
border-radius: 24px 0 0 0 ;
&:before {
content: "";
position: absolute;
top: 16px;
left: 15px;
width: 4px;
height: 16px;
line-height: 16px;
text-align: center;
font-family: Verdana-Bold;
font-size: 13px;
color: #fff;
letter-spacing: 0;
margin-top: 5px;
}
background: #1D3FFF;
}
}
}
.repay {
height: 52px;
width: 100%;
background: #1D3FFF;
.repayPlan {
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #21254C;
letter-spacing: 0;
height: 52px;
line-height: 52px;
background-color: #fafafa;
padding-left: 24px;
font-weight: 600;
position: relative;
border-radius: 24px 0 0 0;
}
.plan-content {
background-color: #fff;
padding: 0px 11px;
.plan-list {
position:relative;
background-color: #f7f7f7;
height: 78px;
display: flex;
flex-direction: row;
img {
height: 19px;
width: 19px;
position: absolute;
right: 24px;
top: 16px;
padding-right: 20px;
padding-left: 10px;
padding-top: 16px;
margin-bottom: 10px;
.left {
height: 30px;
position: absolute;
left: -8px;
top: 24px;
}
}
.repayPlan::before {
content: "";
display: block;
width: 4px;
height: 16px;
background: #2D6FFF;
position: absolute;
left: 13px;
top: 17px;
}
}
.items {
height: 78px;
width: 95%;
display: flex;
flex-direction: row;
margin: 0 16px 8px 6px;
align-items: center;
.content {
height: 76px;
display: flex;
flex-direction: row;
box-shadow: 0 1px 5px 0 rgba(219,219,219,0.69);
position: relative;
.dates {
margin-left: 8px;
display: flex;
flex-direction: column;
justify-content: center;
p:nth-of-type(1) {
height: 15px;
line-height: 15px;
font-family: DIN-Regular;
font-size: 12px;
color: rgba(56,63,69,0.60);
letter-spacing: 0;
}
p:nth-of-type(2) {
height: 17px;
line-height: 17px;
font-family: DIN-Bold;
font-size: 14px;
color: #21254C;
letter-spacing: 0;
font-weight: bold;
}
.status {
position: absolute;
width:18px;
right: -3px;
top: -5px;
}
.period {
position: absolute;
top: 0;
left: 0;
background: rgba(75,74,75,.5);
border-radius: 4px 0 4px 0;
width: 30px;
height: 15px;
color: #fff;
font-family: PingFangSC-Semibold;
font-size: 12px;
letter-spacing: 1.09px;
line-height: 15px;
text-align: center;
}
.orange {
background: rgba(253, 182, 47,.5);
}
.blue {
background-color: rgba(29, 63, 255,.5);
}
.green {
background-color: rgba(27, 162, 97,.5);
}
.time {
flex: 5;
p {
font-family: DIN-Regular;
font-size: 12px;
color: rgba(56,63,69,0.60);
margin-bottom: 4px;
margin-top: 5px;
}
.cash {
margin-left: 36px;
p {
opacity: 0.6;
height: 18px;
line-height: 18px;
font-family: PingFangSC-Regular;
font-size: 13px;
color: #4B4A4B;
letter-spacing: 0;
}
p:nth-of-type(1) {
margin-top: 16px
}
p:nth-of-type(2) {
margin-top: 10px
}
span {
font-family: DIN-Bold;
font-weight: 700;
font-size: 14px;
color: #21254C;
}
.rent {
position: absolute;
right: 20px;
height: 18px;
line-height: 18px;
p {
font-size: 13px;
color: #4B4A4B;
letter-spacing: 0;
width: 90px;
text-align: right
}
p:nth-of-type(1) {
margin-top: 16px;
font-family: PingFangSC-Regular;
}
p:nth-of-type(2) {
font-family: Verdana;
color: #1D3FFF;
margin-top: 10px
}
}
.name {
flex: 9;
opacity: 0.6;
font-family: PingFangSC-Regular;
font-size: 13px;
color: #4B4A4B;
p {
margin-bottom: 17px;
}
}
.number {
flex: 9;
text-align: right;
font-family: PingFangSC-Regular;
font-size: 13px;
color: #4B4A4B;
p {
margin-bottom: 17px;
}
span.orang {
color: rgb(253, 182, 47);
font-weight: 700;
font-family: PingFangSC-Semibold;
}
span.blu {
color: #1D3FFF;
font-weight: 700;
font-family: PingFangSC-Semibold;
}
span.gree {
color: #1BA261;
}
}
}
img {
width: 10px;
height: 35px;
.or {
background-color:rgba(253, 182, 47,.05);
}
}
.bl,.gr {
background: #FFFFFF;
box-shadow: 0 1px 5px 0 rgba(219,219,219,0.69);
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment