userCenter.vue
8.02 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
<template>
<v-layout id="UserCenter" column justify-center align-center>
<v-flex>
<div class="userInfoBlock">
<div class="avatar">
<svg v-if="!userInfo.avatar" width="5.7rem" height="5.7rem" viewBox="0 0 183 183" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="个人中心" transform="translate(-284.000000, -149.000000)">
<image id="e3f6ced22ab588cfcaf329d7cbc51b98-copy" x="284" y="149" width="183" height="183" xlink:href="data:image/png;base64,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"></image>
</g>
</g>
</svg>
<img class="avatarImg" v-if="userInfo.avatar" :src="userInfo.avatar" alt="" />
</div>
<div class="username">{{userInfo.username}}</div>
<div class="phone">{{userInfo.phone}}</div>
</div>
<v-card class="UserCenterTab" flat height="4.3rem">
<div class="isBorrowing UserCenterTabButton">
<i aria-hidden="true" class="material-icons icon iconfont icon-qianbao"></i>
<span>借入</span>
</div>
<span class="tabDivider"></span>
<div class="isLending UserCenterTabButton">
<i aria-hidden="true" class="material-icons icon iconfont icon-qian"></i>
<span>借出</span>
</div>
</v-card>
</v-flex>
</v-layout>
</template>
<script>
export default {
data:() => ({
userInfo: {},
}),
created() {
this.userInfo = {
username: '姚姚姚',
phone: '180********',
avatar: '',
}
}
}
</script>
<style lang="scss" scoped>
#UserCenter {
padding-top: 0.8rem;
color: $light-gold;
.userInfoBlock {
width: 100%;
text-align: center;
.avatar {
width: 5.7rem;
height: 5.7rem;
border-radius: 2.9rem;
overflow: hidden;
.avatarImg {
width: 100%;
height: 100%;
vertical-align: bottom;
}
svg {
background-color: #4F5D73;
}
}
.username {
width: 100%;
height: 1.5rem;
font-size: 18px;
font-weight:bold;
margin-top: 0.2rem
}
.phone {
width: 100%;
height: 1.5rem;
font-size: 18px;
font-weight:bold;
margin-top: 0.2rem
}
}
.UserCenterTab {
width: 92vw;
margin-top: 1.5rem;
background: #3A424A;
border-radius: 10px;
padding: 0.6rem 0;
.UserCenterTabButton {
width: calc(50% - 0.5px);
border-radius: 0;
display: inline-block;
height: 100%;
font-size: 18px;
text-align: center;
color: $light-gold;
i {
margin-right: 1.05rem;
line-height: 3.1rem;
}
span {
line-height: 3.1rem;
}
}
.isBorrowing {
border-right: 0.5px solid $light-gold;
i {
color: $gold;
}
}
.isLending {
border-left: 0.5px solid $light-gold;
i {
color: #50CFF2;
}
}
}
}
</style>