borrowContent.vue
5.37 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<template>
<v-layout id="Borrow" column justify-center align-center>
<h3 id="BorrowTitle">借款内容</h3>
<v-flex>
<v-card id="BorrowList" flat >
<v-list class="list">
<v-list-tile>
<v-list-tile-content class="BorrowListTitle">借款人</v-list-tile-content>
<v-list-tile-content class="BorrowListValue">史文斌</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-content class="BorrowListTitle">出借人</v-list-tile-content>
<v-list-tile-content class="BorrowListValue">姚婷</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-content class="BorrowListTitle">借款金额</v-list-tile-content>
<v-list-tile-content class="BorrowListValue">10000.00</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-content class="BorrowListTitle">出借方式</v-list-tile-content>
<v-list-tile-content class="BorrowListValue">线下出借</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-content class="BorrowListTitle">还款方式</v-list-tile-content>
<v-list-tile-content class="BorrowListValue">到期还本付息</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-content class="BorrowListTitle">借款日期</v-list-tile-content>
<v-list-tile-content class="BorrowListValue">2018-3-13</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-content class="BorrowListTitle">还款日期</v-list-tile-content>
<v-list-tile-content class="BorrowListValue">2018-3-13</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-content class="BorrowListTitle">服务费</v-list-tile-content>
<v-list-tile-content class="BorrowListValue">5%</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-content class="BorrowListTitle">担保费</v-list-tile-content>
<v-list-tile-content class="BorrowListValue">到期还本付息</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-content class="BorrowListTitle">借款用途</v-list-tile-content>
<v-list-tile-content class="BorrowListValue">2018-3-13</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-content class="BorrowListTitle">补充说明</v-list-tile-content>
<v-list-tile-content class="BorrowListValue">2018-3-13</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-content class="BorrowListTitle">借条ID</v-list-tile-content>
<v-list-tile-content class="BorrowListValue">5%</v-list-tile-content>
</v-list-tile>
<v-list-tile>
<v-list-tile-content class="BorrowListTitle">创建时间</v-list-tile-content>
<v-list-tile-content class="BorrowListValue">到期还本付息</v-list-tile-content>
</v-list-tile>
<v-list-tile >
<v-list-tile-content class="BorrowListTitle">借款协议</v-list-tile-content>
<v-list-tile-action>
<v-icon class="BorrowListArrow">查看 keyboard_arrow_right</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile >
<v-list-tile-content class="BorrowListTitle">居间服务协议</v-list-tile-content>
<v-list-tile-action>
<v-icon class="BorrowListArrow">查看 keyboard_arrow_right</v-icon>
</v-list-tile-action>
</v-list-tile>
<v-list-tile class="BorrowListImg">
<v-list-tile-content class="BorrowListImgContent">图片说明</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-flex>
</v-layout>
</template>
<script>
export default {
data:() => ({
userInfo: {},
}),
created() {
this.userInfo = {}
}
}
</script>
<style lang="scss" scoped>
#Borrow {
padding-top: 1.3rem;
#BorrowTitle {
display: block;
font-size: 18px;
width: calc(100vw - 1rem);
color: $light-gold;
border-left: 0.25rem solid $light-gold;
padding-left: 0.75rem;
margin-left: 1rem;
}
#BorrowList {
width: 100vw;
margin-top: 1.1rem;
border-top: 1px solid #979797;
.list {
padding: 0;
background-color: $toolbar-grey;
li {
height: 2.1rem;
/deep/ div.list__tile {
height: 2.1rem;
color: $light-gold;
padding: 0 0.8rem;
border-bottom: 1px solid #979797;
}
}
.BorrowListTitle {
font-size: 1rem;
}
.BorrowListValue {
font-size: 1rem;
align-items: flex-end;
}
.BorrowListArrow {
font-size: 1rem;
color: $light-gold;
}
.BorrowListImg {
min-height: 5.9rem;
/deep/ div.list__tile {
height: 100%;
}
.BorrowListImgContent {
align-items: center;
}
}
}
}
}
</style>