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