【uniapp】个人中心页面

1
<template>
2
  <view class="content">
3
    <view class="tops">
4
      <uni-icons type="gear" size="32" class="setIcon" @click="setFun"></uni-icons>
5
      <view class="infos">
6
        <image
7
          src="https://img1.baidu.com/it/u=1665929857,2089570148&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889"
8
          mode="aspectFill"></image>
9
        <view class="names">
10
          韩信
11
        </view>
12
        <view class="desc">
13
          纵情山河万里，肆意九州五岳，爱恨痴狂，抵不过沧海一笑
14
        </view>
15
        <view class="t-list">
16
          <view class="t-item">
17
            <view class="tit">
18
              收藏
19
            </view>
20
            <view class="vals">
21
              45
22
            </view>
23
          </view>
24
          <view class="t-item">
25
            <view class="tit">
26
              点赞
27
            </view>
28
            <view class="vals">
29
              266
30
            </view>
31
          </view>
32
          <view class="t-item">
33
            <view class="tit">
34
              分享
35
            </view>
36
            <view class="vals">
37
              103
38
            </view>
39
          </view>
40
        </view>
41
      </view>
42

43
    </view>
44

45
    <view class="lists">
46
      <uni-list>
47
        <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" showArrow title="个人信息" clickable
48
          @click="clickList" rightText="右侧文字" />
49
        <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon2" showArrow title="我的购物车" clickable
50
          @click="clickList" rightText="右侧文字" />
51
        <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon3" showArrow title="用户反馈" clickable
52
          @click="clickList" />
53
        <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon4" showArrow title="我的邮件" clickable
54
          @click="clickList" />
55
        <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon5" showArrow title="分享有礼" clickable
56
          @click="clickList" />
57
      </uni-list>
58
    </view>
59
  </view>
60
</template>
61

62
<script>
63
  export default {
64
    data() {
65
      return {
66
        extraIcon1: {
67
          color: '#666666',
68
          size: '22',
69
          type: 'auth'
70
        },
71
        extraIcon2: {
72
          color: '#666666',
73
          size: '22',
74
          type: 'cart'
75
        },
76
        extraIcon3: {
77
          color: '#666666',
78
          size: '22',
79
          type: 'chatboxes'
80
        },
81
        extraIcon4: {
82
          color: '#666666',
83
          size: '22',
84
          type: 'email'
85
        },
86
        extraIcon5: {
87
          color: '#666666',
88
          size: '22',
89
          type: 'gift'
90
        }
91
      }
92
    },
93
    methods: {
94
      setFun() {
95
        uni.showToast({
96
          title: "点击设置",
97
          icon: "none"
98
        })
99
      },
100
      clickList() {
101
        uni.showToast({
102
          title: "点击列表",
103
          icon: "none"
104
        })
105
      }
106
    }
107
  }
108
</script>
109

110
<style scoped>
111
  .tops {
112
    position: relative;
113
    height: 580rpx;
114
    background-color: aquamarine;
115
    background: url("https://img1.baidu.com/it/u=3643237076,897388802&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=400") no-repeat;
116
    background-size: 100% 100%;
117
  }
118

119
  .setIcon {
120
    position: absolute;
121
    top: 50rpx;
122
    right: 50rpx;
123
  }
124

125
  .lists {
126
    padding: 20rpx;
127
  }
128

129
  .tops .infos {
130
    width: 80%;
131
    height: 450rpx;
132
    position: absolute;
133
    top: 40%;
134
    left: 50%;
135
    transform: translate(-50%, -25%);
136
    text-align: center;
137
  }
138

139
  .infos image {
140
    width: 120rpx;
141
    height: 120rpx;
142
    border-radius: 50%;
143
    border: 4rpx solid #fff;
144
  }
145

146
  .infos .names {
147
    font-size: 34rpx;
148
    color: #333;
149
    font-weight: 700;
150
    margin: 20rpx 0 10rpx;
151
  }
152

153
  .infos .desc {
154
    max-width: 62%;
155
    font-size: 28rpx;
156
    color: #333;
157
    margin: 10rpx auto;
158
    overflow: hidden;
159
    text-overflow: ellipsis;
160
    white-space: nowrap;
161
    text-align: center;
162
  }
163

164
  .infos .t-list {
165
    margin-top: 60rpx;
166
    display: flex;
167
    justify-content: space-around;
168
  }
169

170
  .t-item .tit {
171
    font-size: 32rpx;
172
    color: #333;
173
    margin-bottom: 10rpx;
174
  }
175

176
  .t-item .vals {
177
    font-size: 36rpx;
178
    color: #333;
179
    font-weight: 700;
180
    margin-bottom: 10rpx;
181
  }
182

183
  /deep/.uni-list-item__content-title[data-v-296a3d7e] {
184
    font-size: 30rpx;
185
    color: #333;
186
    overflow: hidden;
187
    font-weight: 500;
188
  }
189

190
  /deep/.uni-list-item__container {
191
    padding: 30rpx;
192
  }
193
</style>

1
<template>
2
  <view class="content">
3
    <view class="topBox">
4
      <view class="setbox">
5
        <view class="set-left">
6
          <uni-icons type="calendar" size="30" color="#fff"></uni-icons>
7
          <view class="txt">签到</view>
8
        </view>
9
        <view class="set-right">
10
          <uni-icons type="gear" size="30" color="#fff" @click="setFun"></uni-icons>
11
          <uni-icons type="chat" size="30" color="#fff"></uni-icons>
12
        </view>
13
      </view>
14

15
      <view class="users">
16
        <view class="u-top">
17
          <image
18
            src="https://img2.baidu.com/it/u=2953585264,744730101&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360"
19
            mode=""></image>
20
          <view class="tit">
21
            登录 / 注册
22
          </view>
23
        </view>
24
        <view class="u-bottom">
25
          <view class="u-item">
26
            <view class="num">12</view>
27
            <view class="u-tit">浏览</view>
28
          </view>
29
          <view class="u-item">
30
            <view class="num">12</view>
31
            <view class="u-tit">浏览</view>
32
          </view>
33
          <view class="u-item">
34
            <view class="num">12</view>
35
            <view class="u-tit">浏览</view>
36
          </view>
37
        </view>
38
      </view>
39
    </view>
40

41
    <view class="bottomBox">
42
      <view class="order-list">
43
        <view class="o-item">
44
          <image src="../../static/daifuk.png" mode=""></image>
45
          <view class="tit">待付款</view>
46
        </view>
47
        <view class="o-item">
48
          <image src="../../static/daifa.png" mode=""></image>
49
          <view class="tit">待发货</view>
50
        </view>
51
        <view class="o-item">
52
          <image src="../../static/yifa.png" mode=""></image>
53
          <view class="tit">已发货</view>
54
        </view>
55
        <view class="o-item">
56
          <image src="../../static/wancheng.png" mode=""></image>
57
          <view class="tit">已完成</view>
58
        </view>
59
      </view>
60
    </view>
61

62
    <view class="listBox">
63
      <view class="lists">
64
        <uni-list>
65
          <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" showArrow title="个人信息" clickable
66
            @click="clickList" rightText="右侧文字" />
67
          <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon2" showArrow title="我的购物车" clickable
68
            @click="clickList" rightText="右侧文字" />
69
          <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon3" showArrow title="用户反馈" clickable
70
            @click="clickList" />
71
          <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon4" showArrow title="我的邮件" clickable
72
            @click="clickList" />
73
          <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon5" showArrow title="分享有礼" clickable
74
            @click="clickList" />
75
        </uni-list>
76
      </view>
77
    </view>
78

79
  </view>
80
</template>
81

82
<script>
83
  export default {
84
    data() {
85
      return {
86
        extraIcon1: {
87
          color: '#666666',
88
          size: '22',
89
          type: 'auth'
90
        },
91
        extraIcon2: {
92
          color: '#666666',
93
          size: '22',
94
          type: 'cart'
95
        },
96
        extraIcon3: {
97
          color: '#666666',
98
          size: '22',
99
          type: 'chatboxes'
100
        },
101
        extraIcon4: {
102
          color: '#666666',
103
          size: '22',
104
          type: 'email'
105
        },
106
        extraIcon5: {
107
          color: '#666666',
108
          size: '22',
109
          type: 'gift'
110
        },
111

112
      }
113
    },
114
    methods: {
115
      setFun() {
116
        uni.showToast({
117
          title: "点击设置",
118
          icon: "none"
119
        })
120
      },
121
      clickList() {
122
        uni.showToast({
123
          title: "点击列表",
124
          icon: "none"
125
        })
126
      }
127
    }
128
  }
129
</script>
130

131
<style scoped>
132
  .content {
133
    background-color: #f5f5f5;
134
    height: 100vh;
135
  }
136

137
  /* 弧形背景 */
138
  .topBox {
139
    width: 100%;
140
    position: relative;
141
    z-index: 1;
142
    overflow: hidden;
143
    padding: 60rpx 20rpx 20rpx;
144
    box-sizing: border-box;
145
  }
146

147
  .topBox::after {
148
    content: "";
149
    width: 140%;
150
    height: 200px;
151
    position: absolute;
152
    left: -20%;
153
    top: 0;
154
    z-index: -1;
155
    border-radius: 0 0 50% 50%;
156
    background: #00aaff;
157
  }
158

159
  /* 弧形背景 */
160

161
  .setbox {
162
    display: flex;
163
    justify-content: space-between;
164
    align-items: center;
165
  }
166

167
  .set-left {
168
    width: 18%;
169
    display: flex;
170
    justify-content: space-between;
171
    align-items: center;
172
  }
173

174
  .txt {
175
    color: #fff;
176
    font-size: 30rpx;
177
  }
178

179
  .set-right .uni-icons {
180
    margin-right: 10rpx;
181
  }
182

183
  .users {
184
    margin-top: 20rpx;
185
    padding: 30rpx;
186
    box-sizing: border-box;
187
    height: 280rpx;
188
    background-color: #fff;
189
    box-shadow: 1px 10rpx 20rpx #ececec;
190
    border-radius: 12rpx;
191
  }
192

193
  .u-top {
194
    display: flex;
195
    justify-content: flex-start;
196
    align-items: center;
197
    margin-bottom: 30rpx;
198
  }
199

200
  .users .u-top image {
201
    width: 100rpx;
202
    height: 100rpx;
203
    border-radius: 50%;
204
    margin-right: 20rpx;
205
  }
206

207
  .u-top .tit {
208
    font-size: 30rpx;
209
    font-weight: 700;
210
    color: #333;
211
  }
212

213
  .u-bottom {
214
    display: flex;
215
    justify-content: space-around;
216
    align-items: center;
217
  }
218

219
  .u-item {
220
    text-align: center;
221
  }
222

223
  .u-item .u-tit {
224
    color: #757575;
225
    font-size: 26rpx;
226
    margin-top: 10rpx;
227
  }
228

229
  .u-item .num {
230
    color: #000000;
231
    font-size: 33rpx;
232
    font-weight: 700;
233
  }
234

235
  .bottomBox {
236
    padding: 20rpx;
237
    box-sizing: border-box;
238
  }
239

240
  .order-list {
241
    height: 200rpx;
242
    margin: -15rpx auto 0;
243
    padding: 30rpx;
244
    box-sizing: border-box;
245
    background-color: #fff;
246
    border-radius: 12rpx;
247
    display: flex;
248
    justify-content: space-around;
249
    align-items: center;
250
  }
251

252
  .o-item {
253
    width: 25%;
254
    text-align: center;
255
  }
256

257
  .o-item image {
258
    width: 65rpx;
259
    height: 55rpx;
260
  }
261

262
  .o-item .tit {
263
    font-size: 28rpx;
264
    margin-top: 10rpx;
265
  }
266

267
  .listBox {
268
    height: 200rpx;
269
    margin: -10rpx auto 0;
270
    padding: 20rpx;
271
    box-sizing: border-box;
272
    border-radius: 12rpx;
273
  }
274
</style>

1
<template>
2
  <view class="content">
3
    <view class="topBox">
4
      <uni-icons type="gear" size="32" class="setIcon" color="#fff" @click="setFun"></uni-icons>
5
      <image src="https://img0.baidu.com/it/u=464193705,1968194224&fm=253&fmt=auto&app=120&f=JPEG?w=801&h=500" mode="aspectFill"></image>
6
      <view class="userName">
7
        <view class="name">
8
          着逝者为铠
9
        </view>
10
        <view class="desc">
11
          以绝望挥剑,着逝者为铠
12
        </view>
13
      </view>
14
    </view>
15

16
    <view class="listBox">
17
      <view class="lists">
18
        <uni-list>
19
          <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" showArrow title="个人信息" clickable
20
            @click="clickList" rightText="右侧文字" />
21
          <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon2" showArrow title="我的购物车" clickable
22
            @click="clickList" rightText="右侧文字" />
23
          <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon3" showArrow title="用户反馈" clickable
24
            @click="clickList" />
25
          <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon4" showArrow title="我的邮件" clickable
26
            @click="clickList" />
27
          <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon5" showArrow title="分享有礼" clickable
28
            @click="clickList" />
29
        </uni-list>
30
      </view>
31
    </view>
32
  </view>
33
</template>
34

35
<script>
36
  export default {
37
    data() {
38
      return {
39
        extraIcon1: {
40
          color: '#666666',
41
          size: '22',
42
          type: 'auth'
43
        },
44
        extraIcon2: {
45
          color: '#666666',
46
          size: '22',
47
          type: 'cart'
48
        },
49
        extraIcon3: {
50
          color: '#666666',
51
          size: '22',
52
          type: 'chatboxes'
53
        },
54
        extraIcon4: {
55
          color: '#666666',
56
          size: '22',
57
          type: 'email'
58
        },
59
        extraIcon5: {
60
          color: '#666666',
61
          size: '22',
62
          type: 'gift'
63
        },
64

65
      }
66
    },
67
    methods: {
68
      setFun() {
69
        uni.showToast({
70
          title: "点击设置",
71
          icon: "none"
72
        })
73
      },
74
      clickList() {
75
        uni.showToast({
76
          title: "点击列表",
77
          icon: "none"
78
        })
79
      }
80
    }
81
  }
82
</script>
83

84
<style scoped>
85
  .content {
86
    box-sizing: border-box;
87
    position: relative;
88
    height: 100vh;
89
    background-color: #00aa7f;
90
  }
91

92
  .topBox {
93
    height: 350rpx;
94
    padding: 50rpx;
95
    box-sizing: border-box;
96
    display: flex;
97
    justify-content: flex-start;
98
    align-items: center;
99
  }
100

101
  .topBox image {
102
    width: 130rpx;
103
    height: 130rpx;
104
    border-radius: 50%;
105
    border: 3rpx solid #fff;
106
    margin-right: 30rpx;
107
  }
108

109
  .topBox .name {
110
    font-size: 42rpx;
111
    color: #fff;
112
    font-weight: 700;
113
    margin-bottom: 23rpx;
114
  }
115

116
  .topBox .desc {
117
    font-size: 28rpx;
118
    color: #ececec;
119
    margin-bottom: 10rpx;
120
    text-overflow: ellipsis;
121
    white-space: nowrap;
122
    text-align: center;
123
  }
124

125
  .listBox {
126
    height: calc(100% - 330rpx);
127
    background-color: #ffffff;
128
    border-top-left-radius: 30rpx;
129
    border-top-right-radius: 30rpx;
130
    margin-top: -20rpx;
131
    padding: 30rpx 20rpx;
132
  }
133

134
  .setIcon {
135
    position: absolute;
136
    top: 50rpx;
137
    right: 50rpx;
138
  }
139
</style>