Skip to content

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

'试算页面修改'

parent 6653a1c5
Show 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 * @Author: your name
* @Date: 2019-10-30 11:16:17 * @Date: 2019-10-30 19:29:24
* @LastEditTime: 2019-10-30 18:54:41 * @LastEditTime: 2019-10-31 10:26:52
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: \hls-xcmg-vue-app\src\pages\financingTrial\trial-repay-plan.vue * @FilePath: \hls-xcmg-vue-app\src\pages\financingTrial\trial-repay-plan.vue
--> -->
<template> <template>
<h-view id="trialRepayPlan"> <h-view id="repay-plan" class="public-style">
<h-header :proportion="[5,1,1]" class="bar-custom"> <h-header :proportion="[5,1,1]" class="bar-custom">
<div slot="left" class="h-header-btn"> <div slot="left" class="h-header-btn">
<img src="@/assets/userBind/arrow.png" @click="$routeGo()"> <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
<span>融资明细</span> <span>融资明细</span>
</div> </div>
</h-header> </h-header>
<h-content> <div class="center">
<div class="topMoney">
<div class="quota">
<div class="total"> <div class="total">
<p>融资额</p> <div class="sum">
<p>90000</p> <div>融资额</div>
</div> <p>190,000.00</p>
<div class="times">{{ info.lease_times }}期</div> <img src="@/assets/contractInquire/num.png" alt="">
</div> <h3><span>{{ info.lease_times }}期</span></h3>
<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>
</div>
<div class="repay">
<div class="repayPlan">
<p>还款计划</p>
<img src="@/assets/trial/down.png" alt="">
</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>
<div class="cash"> <div class="single">
<p>现金流</p> <div><h4>保证金</h4><p>￥{{ info.deposit | currency }}</p></div>
<p>应还金额</p> <div><h4>保证金</h4><p>￥{{ info.down_payment | currency }}</p></div>
<div><h4>保证金</h4><p>￥{{ info.lease_charge | currency }}</p></div>
</div> </div>
<div class="rent">
<p>租金</p>
<p>90,000.00</p>
</div> </div>
<div class="plan-name">
<div class="header">还款计划</div>
<img :class="{'rotate':show}" src="@/assets/contractInquire/top.png" alt="" @click="showDetails">
</div> </div>
</div> </div>
<div class="items"> <h-content id="content" class="plan-content">
<img src="@/assets/trial/buleClip.png" alt=""> <!-- 已结清 black , 逾期 orange , 还款中 blue , 未还款 green -->
<div class="content"> <div v-for="(item,index) in 5" :key="index" :class="{'plan-list':true,'or':statu==='orange','bl':statu==='blue','gr':statu==='green'}">
<div class="dates"> <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> <p>2019</p>
<p>01-01</p> <span>01-01</span>
</div> </div>
<div class="cash"> <div class="name">
<p>现金流</p> <p>现金流项目</p>
<p>应还金额</p> <p>应还金额</p>
</div> </div>
<div class="rent"> <div class="number">
<p>租金</p> <p>租金</p>
<p>9,000,000.00</p> <span :class="{'orang':statu==='orange','blu':statu==='blue','gree':statu==='green'}">90,000.00</span>
</div>
</div> </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> </div>
</h-content> </h-content>
</h-view> </h-view>
</template> </template>
<script> <script>
export default { export default {
name: '', name: 'RepayPlan',
components: {
},
data () { data () {
return { return {
// 已结清 black , 逾期 orange , 还款中 blue , 未还款 green
statu: 'black',
info: {}, info: {},
show: false,
height: 0,
oldHeight: 0,
newHeight: 0,
} }
}, },
computed: {}, computed: {},
...@@ -101,6 +90,29 @@ export default { ...@@ -101,6 +90,29 @@ export default {
next() next()
}, },
methods: { 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 () { repayQuery () {
let vm = this let vm = this
let url = $config.basePath + 'prd_repayment_plan' let url = $config.basePath + 'prd_repayment_plan'
...@@ -119,211 +131,272 @@ export default { ...@@ -119,211 +131,272 @@ export default {
}) })
}, },
}, },
} }
</script> </script>
<style lang='less' scoped> <style lang='less' >
@import "../../styles/public-style"; #repay-plan {
#trialRepayPlan { .h-header {
.topMoney { background-color: #1D3FFF;
width: 100%; .h-header-btn {
height: 150px; img {
background: #1D3FFF; width: 16px;
background-image: url('../../assets/trial/cur.png'); height: 16px;
background-size: 100% 100%; margin-left: 4px;
.quota { }
width: 100%;
height: 48px; span {
display: flex; font-family: PingFangSC-Semibold;
flex-direction: row; margin-left: 16px;
padding-top: 36px; font-size: 17px;
align-items: center; letter-spacing: 0.61px;
line-height: 24px;
}
}
}
.total { .total {
margin-left: 20px;
letter-spacing: 0;
position: relative; position: relative;
} background-color: #1D3FFF;
.total p:nth-of-type(1){ height: 138px;
color: #fff;
background-image: url(../../assets/contractInquire/background.png);
background-size: cover;
.sum {
padding: 0 20px;
div {
font-family: PingFangSC-Semibold; font-family: PingFangSC-Semibold;
font-size: 14px; font-size: 14px;
color: #FFFFFF; padding-top: 12px;
height: 20px; padding-bottom: 10px;
line-height: 20px;
} }
.total p:nth-of-type(2){
p {
font-family: Verdana-BoldItalic; font-family: Verdana-BoldItalic;
font-size: 20px; font-size: 20px;
color: #FFFFFF; font-weight: 700;
height: 24px; font-style: italic;
line-height: 24px; margin-left: -4px;
margin-top: 4px;
} }
.times {
font-family: Verdana-BoldItalic; img {
width: 65px; width: 75px;
height: 24px;
line-height: 24px;
font-size: 14px;
color: #1D3FFF;
text-align: center;
letter-spacing: 0;
position: absolute; position: absolute;
right: 20px; right: 20px;
background-image: url('../../assets/trial/times.png'); top: 25px;
background-size: 100%; }
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;
}
} }
} }
.fund { .single {
width: 100%;
display: flex; display: flex;
flex-direction: row; margin-top: 28px;
margin-top: 40px;
div { div {
width: 33% flex: auto;
}
.name {
width: 100%;
height: 17px;
line-height: 17px;
text-align: center; text-align: center;
h4 {
opacity: 0.8; opacity: 0.8;
margin: 0;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 12px; font-size: 12px;
color: #FFFFFF; color: #FFFFFF;
letter-spacing: 0; margin-bottom: 8px;
} }
.money {
width: 100%; p {
height: 16px; font-family: Verdana;
line-height: 16px; font-size: 14px;
text-align: center; color: #FFFFFF;
font-family: Verdana-Bold; font-weight: 700;
font-size: 13px;
color: #fff;
letter-spacing: 0;
margin-top: 5px;
} }
} }
} }
.repay {
height: 52px; }
width: 100%;
background: #1D3FFF; .plan-name {
.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; position: relative;
border-radius: 24px 0 0 0; background-color: #1D3FFF;
display: flex; margin-top: -2px;
flex-direction: row;
img { img {
height: 19px;
width: 19px;
position: absolute; position: absolute;
right: 24px; right: 30px;
top: 16px; top: 12px;
height: 20px;
transition: 0s;
} }
.rotate {
transform: rotate(180deg);
} }
.repayPlan::before {
.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: ""; content: "";
display: block; position: absolute;
top: 16px;
left: 15px;
width: 4px; width: 4px;
height: 16px; height: 16px;
background: #2D6FFF; background: #1D3FFF;
position: absolute;
left: 13px;
top: 17px;
} }
} }
.items { }
.plan-content {
background-color: #fff;
padding: 0px 11px;
.plan-list {
position:relative;
background-color: #f7f7f7;
height: 78px; height: 78px;
width: 95%;
display: flex;
flex-direction: row;
margin: 0 16px 8px 6px;
align-items: center;
.content {
height: 76px;
display: flex; display: flex;
flex-direction: row; padding-right: 20px;
box-shadow: 0 1px 5px 0 rgba(219,219,219,0.69); padding-left: 10px;
position: relative; padding-top: 16px;
.dates { margin-bottom: 10px;
margin-left: 8px;
display: flex; .left {
flex-direction: column; height: 30px;
justify-content: center; position: absolute;
p:nth-of-type(1) { left: -8px;
top: 24px;
}
.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; height: 15px;
color: #fff;
font-family: PingFangSC-Semibold;
font-size: 12px;
letter-spacing: 1.09px;
line-height: 15px; 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-family: DIN-Regular;
font-size: 12px; font-size: 12px;
color: rgba(56,63,69,0.60); color: rgba(56,63,69,0.60);
letter-spacing: 0; margin-bottom: 4px;
margin-top: 5px;
} }
p:nth-of-type(2) {
height: 17px; span {
line-height: 17px;
font-family: DIN-Bold; font-family: DIN-Bold;
font-weight: 700;
font-size: 14px; font-size: 14px;
color: #21254C; color: #21254C;
letter-spacing: 0;
font-weight: bold;
} }
} }
.cash {
margin-left: 36px; .name {
p { flex: 9;
opacity: 0.6; opacity: 0.6;
height: 18px;
line-height: 18px;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 13px; font-size: 13px;
color: #4B4A4B; color: #4B4A4B;
letter-spacing: 0;
} p {
p:nth-of-type(1) { margin-bottom: 17px;
margin-top: 16px
}
p:nth-of-type(2) {
margin-top: 10px
} }
} }
.rent {
position: absolute; .number {
right: 20px; flex: 9;
height: 18px; text-align: right;
line-height: 18px; font-family: PingFangSC-Regular;
p {
font-size: 13px; font-size: 13px;
color: #4B4A4B; color: #4B4A4B;
letter-spacing: 0;
width: 90px; p {
text-align: right margin-bottom: 17px;
} }
p:nth-of-type(1) {
margin-top: 16px; span.orang {
font-family: PingFangSC-Regular; color: rgb(253, 182, 47);
font-weight: 700;
font-family: PingFangSC-Semibold;
} }
p:nth-of-type(2) { span.blu {
font-family: Verdana;
color: #1D3FFF; color: #1D3FFF;
margin-top: 10px 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> </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