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 * @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"> <div class="sum">
<p>融资额</p> <div>融资额</div>
<p>90000</p> <p>190,000.00</p>
</div> <img src="@/assets/contractInquire/num.png" alt="">
<div class="times">{{ info.lease_times }}期</div> <h3><span>{{ info.lease_times }}期</span></h3>
</div> </div>
<div class="fund"> <div class="single">
<div> <div><h4>保证金</h4><p>￥{{ info.deposit | currency }}</p></div>
<p class="name">保证金</p> <div><h4>保证金</h4><p>￥{{ info.down_payment | currency }}</p></div>
<p class="money">￥{{ info.deposit | currency }}</p> <div><h4>保证金</h4><p>￥{{ info.lease_charge | currency }}</p></div>
</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> </div>
<div class="repay"> <div class="plan-name">
<div class="repayPlan"> <div class="header">还款计划</div>
<p>还款计划</p> <img :class="{'rotate':show}" src="@/assets/contractInquire/top.png" alt="" @click="showDetails">
<img src="@/assets/trial/down.png" alt="">
</div>
</div> </div>
<div class="items"> </div>
<img src="@/assets/trial/buleClip.png" alt=""> <h-content id="content" class="plan-content">
<div class="content"> <!-- 已结清 black , 逾期 orange , 还款中 blue , 未还款 green -->
<div class="dates"> <div v-for="(item,index) in 5" :key="index" :class="{'plan-list':true,'or':statu==='orange','bl':statu==='blue','gr':statu==='green'}">
<p>2019</p> <div :class="{'period':true,'orange':statu==='orange','blue':statu==='blue','green':statu==='green'}">{{ index + 1 }}期</div>
<p>01-01</p> <img v-if="statu === 'black'" src="@/assets/contractInquire/black.png" alt="" class="left">
</div> <img v-if="statu === 'orange'" src="@/assets/contractInquire/orange.png" alt="" class="left">
<div class="cash"> <img v-if="statu === 'blue'" src="@/assets/contractInquire/blue.png" alt="" class="left">
<p>现金流</p> <img v-if="statu === 'green'" src="@/assets/contractInquire/green.png" alt="" class="left">
<p>应还金额</p> <div class="time">
</div> <p>2019</p>
<div class="rent"> <span>01-01</span>
<p>租金</p>
<p>90,000.00</p>
</div>
</div> </div>
</div> <div class="name">
<div class="items"> <p>现金流项目</p>
<img src="@/assets/trial/buleClip.png" alt=""> <p>应还金额</p>
<div class="content"> </div>
<div class="dates"> <div class="number">
<p>2019</p> <p>租金</p>
<p>01-01</p> <span :class="{'orang':statu==='orange','blu':statu==='blue','gree':statu==='green'}">90,000.00</span>
</div>
<div class="cash">
<p>现金流</p>
<p>应还金额</p>
</div>
<div class="rent">
<p>租金</p>
<p>9,000,000.00</p>
</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;
.total { line-height: 24px;
margin-left: 20px; }
letter-spacing: 0; }
position: relative; }
}
.total p:nth-of-type(1){ .total {
font-family: PingFangSC-Semibold; position: relative;
font-size: 14px; background-color: #1D3FFF;
color: #FFFFFF; height: 138px;
height: 20px; color: #fff;
line-height: 20px; 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; .single {
height: 24px; display: flex;
line-height: 24px; margin-top: 28px;
margin-top: 4px;
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; p {
width: 65px; font-family: Verdana;
height: 24px; font-size: 14px;
line-height: 24px; color: #FFFFFF;
font-size: 14px; font-weight: 700;
color: #1D3FFF;
text-align: center;
letter-spacing: 0;
position: absolute;
right: 20px;
background-image: url('../../assets/trial/times.png');
background-size: 100%;
} }
}
} }
.fund { }
width: 100%;
display: flex; .plan-name {
flex-direction: row; position: relative;
margin-top: 40px; background-color: #1D3FFF;
div { margin-top: -2px;
width: 33%
img {
position: absolute;
right: 30px;
top: 12px;
height: 20px;
transition: 0s;
} }
.name {
width: 100%; .rotate {
height: 17px; transform: rotate(180deg);
line-height: 17px;
text-align: center;
opacity: 0.8;
font-family: PingFangSC-Regular;
font-size: 12px;
color: #FFFFFF;
letter-spacing: 0;
} }
.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; height: 16px;
line-height: 16px; background: #1D3FFF;
text-align: center; }
font-family: Verdana-Bold;
font-size: 13px;
color: #fff;
letter-spacing: 0;
margin-top: 5px;
}
} }
} }
.repay {
height: 52px; .plan-content {
width: 100%; background-color: #fff;
background: #1D3FFF; padding: 0px 11px;
.repayPlan {
font-family: PingFangSC-Semibold; .plan-list {
font-size: 14px; position:relative;
color: #21254C; background-color: #f7f7f7;
letter-spacing: 0; height: 78px;
height: 52px;
line-height: 52px;
background-color: #fafafa;
padding-left: 24px;
font-weight: 600;
position: relative;
border-radius: 24px 0 0 0;
display: flex; display: flex;
flex-direction: row; padding-right: 20px;
img { padding-left: 10px;
height: 19px; padding-top: 16px;
width: 19px; margin-bottom: 10px;
position: absolute;
right: 24px; .left {
top: 16px; height: 30px;
position: absolute;
left: -8px;
top: 24px;
} }
}
.repayPlan::before { .status {
content: ""; position: absolute;
display: block; width:18px;
width: 4px; right: -3px;
height: 16px; top: -5px;
background: #2D6FFF; }
position: absolute;
left: 13px; .period {
top: 17px; position: absolute;
} top: 0;
} left: 0;
.items { background: rgba(75,74,75,.5);
height: 78px; border-radius: 4px 0 4px 0;
width: 95%; width: 30px;
display: flex; height: 15px;
flex-direction: row; color: #fff;
margin: 0 16px 8px 6px; font-family: PingFangSC-Semibold;
align-items: center; font-size: 12px;
.content { letter-spacing: 1.09px;
height: 76px; line-height: 15px;
display: flex; text-align: center;
flex-direction: row; }
box-shadow: 0 1px 5px 0 rgba(219,219,219,0.69);
position: relative; .orange {
.dates { background: rgba(253, 182, 47,.5);
margin-left: 8px; }
display: flex;
flex-direction: column; .blue {
justify-content: center; background-color: rgba(29, 63, 255,.5);
p:nth-of-type(1) { }
height: 15px;
line-height: 15px; .green {
font-family: DIN-Regular; background-color: rgba(27, 162, 97,.5);
font-size: 12px; }
color: rgba(56,63,69,0.60);
letter-spacing: 0; .time {
} flex: 5;
p:nth-of-type(2) {
height: 17px; p {
line-height: 17px; font-family: DIN-Regular;
font-family: DIN-Bold; font-size: 12px;
font-size: 14px; color: rgba(56,63,69,0.60);
color: #21254C; margin-bottom: 4px;
letter-spacing: 0; margin-top: 5px;
font-weight: bold;
}
} }
.cash {
margin-left: 36px; span {
p { font-family: DIN-Bold;
opacity: 0.6; font-weight: 700;
height: 18px; font-size: 14px;
line-height: 18px; color: #21254C;
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
}
} }
.rent { }
position: absolute;
right: 20px; .name {
height: 18px; flex: 9;
line-height: 18px; opacity: 0.6;
p { font-family: PingFangSC-Regular;
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;
font-family: PingFangSC-Regular;
}
p:nth-of-type(2) {
font-family: Verdana;
color: #1D3FFF;
margin-top: 10px
}
} }
}
.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; .or {
height: 35px; 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