Skip to content

H
hls-xcmg-vue-app
Commit 92bd5a72 authored by 李晓兵's avatar 李晓兵
Browse files
Options

'我的还款明细页面调整'

parent 87f6e9f3
Hide whitespace changes
Inline Side-by-side
Showing with 347 additions and 289 deletions
src/pages/contractRepayment/repay-plan.vue
View file @ 92bd5a72
<template> <template>
<h-view id="repay-plan" class="public-style"> <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 class="plan-content"> <h-content class="plan-content">
<div class="header">还款计划</div> <div class="header">还款计划</div>
<div class="plan-list"> <div class="plan-list">
<div v-for="(item,index) in 12" :key="index" class="plan-item"> <div v-for="(item,index) in 12" :key="index" class="plan-item">
<div class="left"> <div class="left">
<p>2019</p> <p>2019</p>
<span>01-01</span> <span>01-01</span>
</div> </div>
<div :class="{right:true,white:show!=='done'}"> <div :class="{right:true,white:show!=='done'}">
<div :class="{number:true,blue:show==='undone',orange:show==='doing'}">{{ index + 1 }}</div> <div :class="{number:true,blue:show==='undone',orange:show==='doing'}">{{ index + 1 }}</div>
<div class="top"> <div class="top">
<div><p>现金流项目</p><span :class="{black:show!=='done'}">保证金</span></div> <div><p>现金流项目</p><span :class="{black:show!=='done'}">保证金</span></div>
<div><p>支付方式</p><span>代扣</span></div> <div><p>支付方式</p><span>代扣</span></div>
</div> </div>
<div class="center"><p>应还金额</p><p :class="{bold:show==='undone'}">90,000.00</p></div> <div class="center"><p>应还金额</p><p :class="{bold:show==='undone'}">90,000.00</p></div>
<div class="center"><p>已还金额</p><p :class="{yellow:show==='doing'}">90,000.00</p></div> <div class="center"><p>已还金额</p><p :class="{yellow:show==='doing'}">90,000.00</p></div>
</div> </div>
</div> </div>
</div> </div>
</h-content> </h-content>
</h-view> </h-view>
</template> </template>
<script> <script>
export default { export default {
name: 'RepayPlan', name: 'RepayPlan',
components: { components: {
}, },
data () { data () {
return { return {
// 状态 {已还全部 done} {还一部分 doning} {没还 undone} // 状态 {已还全部 done} {还一部分 doning} {没还 undone}
show: 'doing', show: 'doing',
} }
}, },
computed: {}, computed: {},
watch: {}, watch: {},
methods: { methods: {
}, },
} }
</script> </script>
<style lang='less' > <style lang='less' >
#repay-plan { #repay-plan {
.h-header { .h-header {
background-color: #00469C; background-color: #00469C;
.h-header-btn { .h-header-btn {
img { img {
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-left: 4px; margin-left: 4px;
} }
span { span {
font-family: PingFangSC-Semibold; font-family: PingFangSC-Semibold;
margin-left: 16px; margin-left: 16px;
font-size: 17px; font-size: 17px;
letter-spacing: 0.61px; letter-spacing: 0.61px;
line-height: 24px; line-height: 24px;
} }
} }
} }
.plan-content { .plan-content {
background-color: #EFEFEF; background-color: #EFEFEF;
padding-bottom: 10px;
.header { .header {
position: relative; position: relative;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
background-color: #fff; background-color: #fff;
font-family: PingFangSC-Semibold; font-family: PingFangSC-Semibold;
font-size: 14px; font-size: 14px;
color: #21254C; color: #21254C;
font-weight: 700; font-weight: 700;
text-indent: 1.5em; text-indent: 1.5em;
border-bottom: 1px solid #F1F0F5; border-bottom: 1px solid #F1F0F5;
&:before { &:before {
content: ""; content: "";
position: absolute; position: absolute;
top: 12px; top: 12px;
left: 0; left: 0;
width: 4px; width: 4px;
height: 16px; height: 16px;
background: #1D3FFF; background: #1D3FFF;
} }
&:after { &:after {
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
left: 40px; left: 40px;
content: ""; content: "";
width: 0; width: 0;
height: 0; height: 0;
border-width: 6px; border-width: 6px;
border-style: solid; border-style: solid;
border-color:transparent transparent #EFEFEF transparent; border-color:transparent transparent #EFEFEF transparent;
} }
} }
.plan-list { .plan-list {
.plan-item { .plan-item {
display: flex; display: flex;
height: 120px; height: 120px;
margin-top: 8px; margin-top: 8px;
padding-left: 8px; padding-left: 8px;
.left { .left {
position: relative; position: relative;
flex: 13; flex: 13;
p { 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);
margin-bottom: 5px; margin-bottom: 5px;
} }
span { span {
font-family: DIN-Bold; font-family: DIN-Bold;
font-size: 14px; font-size: 14px;
color: #21254C; color: #21254C;
font-weight: 700; font-weight: 700;
} }
&:before { &:before {
content: ''; content: '';
position: absolute; position: absolute;
left: 20px; left: 20px;
top: 36px; top: 36px;
height: 82px; height: 82px;
width: 5px; width: 5px;
border-left: 2px dotted #21254C; border-left: 2px dotted #21254C;
opacity: 0.3; opacity: 0.3;
} }
} }
&:last-child { &:last-child {
.left { .left {
&:before { &:before {
content:''; content:'';
border-left: 2px dotted transparent; border-left: 2px dotted transparent;
} }
} }
} }
.right { .right {
padding-left: 28px; padding-left: 28px;
position: relative; position: relative;
flex:77; flex:77;
background-color: #f8f8f8; background-color: #f8f8f8;
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
line-height: 40px; line-height: 40px;
.number { .number {
position: absolute; position: absolute;
left: 0px; left: 0px;
width: 20px; width: 20px;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
background: rgba(75, 74, 75, .6); background: rgba(75, 74, 75, .6);
border-radius: 4px 0 4px 0; border-radius: 4px 0 4px 0;
color: white; color: white;
} }
.blue { .blue {
background: #00469C; background: #00469C;
} }
.orange { .orange {
background: #FDB62F; background: #FDB62F;
} }
.top { .top {
height: 40px; height: 40px;
border-bottom: 1px solid #F1F0F5; border-bottom: 1px solid #F1F0F5;
display: flex; display: flex;
div { div {
flex: 3; flex: 3;
display: flex; display: flex;
padding-right: 15px; padding-right: 15px;
p { p {
flex: 1; flex: 1;
opacity: 0.6; opacity: 0.6;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 13px; font-size: 13px;
color: #4B4A4B; color: #4B4A4B;
} }
span { span {
flex:1; flex:1;
opacity: 0.8; opacity: 0.8;
font-family: PingFangSC-Medium; font-family: PingFangSC-Medium;
font-size: 13px; font-size: 13px;
color: #4B4A4B; color: #4B4A4B;
text-align: right; text-align: right;
} }
span.black { span.black {
opacity: 1; opacity: 1;
} }
&:first-child { &:first-child {
flex:4; flex:4;
span { span {
text-align: left; text-align: left;
text-indent: .5em; text-indent: .5em;
} }
} }
} }
} }
.center { .center {
border-bottom: 1px solid #F1F0F5; border-bottom: 1px solid #F1F0F5;
display: flex; display: flex;
padding-right: 15px; padding-right: 15px;
p { p {
flex: 1; flex: 1;
opacity: 0.6; opacity: 0.6;
font-family: Verdana; font-family: Verdana;
font-size: 13px; font-size: 13px;
color: #4B4A4B; color: #4B4A4B;
&:last-child { &:last-child {
text-align: right; text-align: right;
} }
} }
p.yellow { p.yellow {
color: #FDB62F; color: #FDB62F;
font-style:italic; font-style:italic;
font-family: Verdana-BoldItalic; font-family: Verdana-BoldItalic;
font-weight: 700; font-weight: 700;
opacity: 1; opacity: 1;
} }
p.bold { p.bold {
font-family: Verdana-BoldItalic; font-family: Verdana-BoldItalic;
font-weight: 700; font-weight: 700;
opacity: 1; opacity: 1;
} }
} }
} }
.white { .white {
background: #fff; background: #fff;
} }
} }
} }
} }
} }
</style> </style>
src/pages/myInfo/my-info.vue
View file @ 92bd5a72
...@@ -448,10 +448,10 @@ export default { ...@@ -448,10 +448,10 @@ export default {
top: -10px; top: -10px;
left: 25px; left: 25px;
font-size: 10px; font-size: 10px;
width: 20px; width: 18px;
height: 20px; height: 18px;
text-align: center; text-align: center;
line-height: 20px; line-height: 18px;
background-color: red; background-color: red;
color: #fff; color: #fff;
border-radius: 50%; border-radius: 50%;
...@@ -461,10 +461,10 @@ export default { ...@@ -461,10 +461,10 @@ export default {
top: -10px; top: -10px;
left: 25px; left: 25px;
font-size: 10px; font-size: 10px;
width: 30px; width: 24px;
height: 20px; height: 18px;
text-align: center; text-align: center;
line-height: 20px; line-height: 18px;
background-color: red; background-color: red;
color: #fff; color: #fff;
border-radius: 50%; border-radius: 50%;
...@@ -506,19 +506,21 @@ export default { ...@@ -506,19 +506,21 @@ export default {
background-color: #fff; background-color: #fff;
} }
.right-icon{ .right-icon{
width: 20px; width: 18px;
height: 20px; height: 18px;
font-size: 10px;
text-align: center; text-align: center;
line-height: 20px; line-height: 18px;
background-color: red; background-color: red;
color: #fff; color: #fff;
border-radius: 50%; border-radius: 50%;
} }
.right-icon-width{ .right-icon-width{
width: 30px; width: 24px;
height: 20px; height: 18px;
font-size: 10px;
text-align: center; text-align: center;
line-height: 20px; line-height: 18px;
background-color: red; background-color: red;
color: #fff; color: #fff;
border-radius: 50%; border-radius: 50%;
......
src/pages/reimburseMyself/reimburse-detail.vue
View file @ 92bd5a72
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
* @Date 2019/10/22 * @Date 2019/10/22
*/ */
<template> <template>
<h-view id="reimburse" class="public-style" style="height: 100%"> <h-view id="reimburseDetail" class="public-style" style="height: 100%">
<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()">
...@@ -48,15 +48,26 @@ ...@@ -48,15 +48,26 @@
<div slot="name">付款账户名称</div> <div slot="name">付款账户名称</div>
<div slot="content">{{ '张三' }}</div> <div slot="content">{{ '张三' }}</div>
</item> </item>
<item>
<div slot="name">合同号</div>
<div slot="content">{{ '234567' }}</div>
</item>
<item>
<div slot="name">款项</div>
<div slot="content">{{ '首付款：手续费' }}</div>
</item>
</list-item> </list-item>
<div class="list-wrap">
<list-item v-for="(list,index) in [0,1]" :key="index">
<item>
<img slot="left-icon" src="@/assets/reimburseMyself/reimburse.png" class="left-icon">
<div slot="name">合同号</div>
<div slot="content">{{ 'con2134567654' }}</div>
</item>
<item>
<img slot="left-icon" src="" class="left-icon">
<div slot="name" class="time-font">款项</div>
<div slot="content" class="time-font">{{ '首付款：手续费' }}</div>
</item>
<item>
<img slot="left-icon" src="" class="left-icon">
<div slot="name" class="time-font">交易金额</div>
<div slot="content" class="money-font">{{ 90000 | currency }}</div>
</item>
</list-item>
</div>
</h-content> </h-content>
</h-view> </h-view>
</template> </template>
...@@ -78,6 +89,51 @@ export default { ...@@ -78,6 +89,51 @@ export default {
} }
</script> </script>
<style scoped lang="less" rel="stylesheet"> <style lang="less" rel="stylesheet">
#reimburseDetail {
.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;
}
}
.hls-item .contents .add-name .left-icon {
width: 30px;
}
.list-wrap {
margin: 10px;
}
.add-name {
.time-font {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
}
}
.add-content {
.money-font {
font-family: Verdana-Bold;
font-size: 15px;
color: rgba(56, 63, 69, 0.60);
font-weight: 600;
}
.time-font {
font-family: PingFangSC-Regular;
font-size: 14px;
color: #656464;
}
}
}
</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