小程序开发必备功能的吐血整理【个人中心界面样式大全】

📌个人主页：个人主页
🧀 推荐专栏：小程序开发成神之路 --(这是一个为想要入门和进阶小程序开发专门开启的精品专栏！从个人到商业的全套开发教程，实打实的干货分享，确定不来看看？ 😻😻)
📝作者简介：一个读研中创业、打工中学习的能搞全栈、也搞算法、目前在搞大数据的奋斗者。
⭐️您的小小关注是我持续输出的动力！⭐️

干货内容推荐

🥇入门和进阶小程序开发，不可错误的精彩内容🥇 ：

《你真的会做小程序按钮吗？看了字节35K前端的样式设计，悟了》

《来接私活吧？玩转小程序开发之丝滑拆红包【附完整代码】》

《来接私活吧？小程序接私活必备功能-婚恋交友【附完整代码】》

《吐血整理的几十款小程序登陆界面【附完整代码】》

一、引言

个人中心界面是小程序开发中，底部tarbar的必备元素之一！用户信息也是每个小程序必须要精心维护的重中之重！

想要给用户带来高级且享受的用户体验，一个设计精美、交互流畅的个人中心界面就显得尤为重要。

为此，我总结了这么多年来的小程序开发经验，吐血整理出了每个小程序开发者必备的开发精囊，不收藏就会后悔的那种！

二、样例展示

样式名称	样式效果	源码代号
`商城样式A`		`Code 1-1`
`通用样式A`		`Code 1-2`
`通用样式B`		`Code 1-3`
`通用样式C`		`Code 1-4`
`通用样式D`		`Code 1-5`
`通用样式E`		`Code 1-6`
`电商样式B`		`Code 1-7`
`电商样式C`		`Code 1-8`
`会员中心样式A`		`Code 1-9`
`会员样式B`		`Code 1-10`
`通用样式G`		`Code 1-11`

三、源码分享

在上个章节所提及的界面效果中，其类型从娱乐交友、生活购物覆盖到了各个应用场景。其中一些通用的样式效果，由于其元素的结构适合各个场景，因此在我的日常开发中，经常拿他们来魔改，从而打到我想要的效果。

以下是每个样例的详细代码,请君自取：

3.1 Code 1-1


<template>
	<view>
		<view class="header" v-bind:class="{'status':isH5Plus}">
			<view class="userinfo">
				<view class="face">
					<image :src="userinfo.face">image>
				view>
				<view class="info">
					<view class="username">{{userinfo.username}}view>
					<view class="integral">积分:{{userinfo.integral}}view>
				view>
			view>
			<view class="setting">
				<image src="/static/other/10.png">image>
			view>
		view>
		<view class="orders">
			<view class="box">
				<view class="label" v-for="(row,index) in orderTypeLise" :key="row.name" hover-class="hover" @tap="toOrderType(index)">
					<view class="icon">
						<view class="badge" v-if="row.badge>0">{{row.badge}}view>
						<image :src="row.icon">image>
					view>
					{{row.name}}
				view>
			view>
		view>
		<view class="list" v-for="(list,list_i) in severList" :key="list_i">
			<view class="li" v-for="(li,li_i) in list" @tap="toPage(list_i,li_i)" v-bind:class="{'noborder':li_i==list.length-1}"
			 hover-class="hover" :key="li.name">
				<view class="icon">
					<image :src="li.icon">image>
				view>
				<view class="text">{{li.name}}view>
				<image class="to" src="/static/other/youjiantou.png">image>
			view>
		view>
		<soure :url="url">soure>
	view>
template>
<script>
	export default {
		data() {
			return {
				url: 'https://ext.dcloud.net.cn/plugin?id=105',
				//#ifdef APP-PLUS
				isH5Plus: true,
				//#endif
				//#ifndef APP-PLUS
				isH5Plus: false,
				//#endif
				userinfo: {},
				orderTypeLise: [
					//name-标题 icon-图标 badge-角标
					{
						name: '待付款',
						icon: '/static/other/1.png',
						badge: 99
					},
					{
						name: '待发货',
						icon: '/static/other/2.png',
						badge: 2
					},
					{
						name: '待收货',
						icon: '/static/other/3.png',
						badge: 6
					},
					{
						name: '待评价',
						icon: '/static/other/4.png',
						badge: 9
					},
					{
						name: '退换货',
						icon: '/static/other/5.png',
						badge: 0
					}
				],
				severList: [
					[{
							name: '我的收藏',
							icon: '/static/other/6.png'
						},
						{
							name: '优惠券',
							icon: '/static/other/7.png'
						},
						{
							name: '红包',
							icon: '/static/other/8.png'
						},
						{
							name: '任务',
							icon: '/static/other/9.png'
						},
					],
					[{
							name: '积分明细',
							icon: '/static/other/1.png'
						},
						{
							name: '抽奖',
							icon: '/static/other/2.png'
						},
						{
							name: '收货地址',
							icon: '/static/other/3.png'
						}
					]
				],
			};
		},
		onLoad() {
			//加载
			this.init();
		},
		methods: {
			init() {
				//用户信息
				this.userinfo = {
					face: '/static/other/1.png',
					username: "VIP会员10240",
					integral: "1435"
				}
			},
			//用户点击订单类型
			toOrderType(index) {
				uni.showToast({
					title: this.orderTypeLise[index].name
				});
			},
			//用户点击列表项
			toPage(list_i, li_i) {
				uni.showToast({
					title: this.severList[list_i][li_i].name
				});
			}
		}
	}
script>

<style lang="scss">
	page {
		background-color: #fff
	}

	.header {
		&.status {
			padding-top: var(--status-bar-height);
		}

		background-color:#ff6364;
		width:92%;
		height:30vw;
		padding:0 4%;
		display:flex;
		align-items:center;

		.userinfo {
			width: 90%;
			display: flex;

			.face {
				flex-shrink: 0;
				width: 15vw;
				height: 15vw;

				image {
					width: 100%;
					height: 100%;
					border-radius: 100%
				}
			}

			.info {
				display: flex;
				flex-flow: wrap;
				padding-left: 30upx;

				.username {
					width: 100%;
					color: #fff;
					font-size: 40upx
				}

				.integral {
					display: flex;
					align-items: center;
					padding: 0 20upx;
					height: 40upx;
					color: #fff;
					background-color: rgba(0, 0, 0, 0.1);
					border-radius: 20upx;
					font-size: 24upx
				}
			}
		}

		.setting {
			flex-shrink: 0;
			width: 6vw;
			height: 6vw;

			image {
				width: 100%;
				height: 100%
			}
		}
	}

	.hover {
		background-color: #eee
	}

	.orders {
		background-color: #ff6364;
		width: 92%;
		height: 11vw;
		padding: 0 4%;
		margin-bottom: calc(11vw + 40upx);
		display: flex;
		align-items: flex-start;
		border-radius: 0 0 100% 100%;
		margin-top: -1upx;

		.box {
			width: 98%;
			padding: 0 1%;
			height: 22vw;
			background-color: #fefefe;
			border-radius: 24upx;
			box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
			margin-bottom: 40upx;
			display: flex;
			align-items: center;
			justify-content: center;

			.label {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-flow: wrap;
				width: 100%;
				height: 16vw;
				color: #666666;
				font-size: 26upx;

				.icon {
					position: relative;
					width: 7vw;
					height: 7vw;
					margin: 0 1vw;

					.badge {
						position: absolute;
						width: 4vw;
						height: 4vw;
						background-color: #ec6d2c;
						top: -1vw;
						right: -1vw;
						border-radius: 100%;
						font-size: 20upx;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						z-index: 10;
					}

					image {
						width: 7vw;
						height: 7vw;
						z-index: 9;
					}
				}
			}
		}
	}

	.list {
		width: 100%;
		border-bottom: solid 26upx #f1f1f1;

		.li {
			width: 92%;
			height: 100upx;
			padding: 0 4%;
			border-bottom: solid 1upx #e7e7e7;
			display: flex;
			align-items: center;

			&.noborder {
				border-bottom: 0
			}

			.icon {
				flex-shrink: 0;
				width: 50upx;
				height: 50upx;

				image {
					width: 50upx;
					height: 50upx
				}
			}

			.text {
				padding-left: 20upx;
				width: 100%;
				color: #666
			}

			.to {
				flex-shrink: 0;
				width: 40upx;
				height: 40upx
			}
		}
	}
style>

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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324

3.2 Code 1-2

<template>
	<view class="center">
		<view class="center_top">view>
		
		<view class="avatar_box">
			<open-data class="avatar" type="userAvatarUrl">open-data>
			<open-data class="nickname" type="userNickName">open-data>
		view>
		<view class="center_box_bg">
			
			<view class="profily">
				<view class="home_menu">
					<view class="cell" v-for="(item,index) in homeMenu" :key="index">
						<image class="img" :src="item.img" mode="aspectFill">image>
						<text :class="index==1?'special':''">{{item.name}}text>
					view>
				view>
			view>
			
			<view class="arc">
				<view class="within_arc">view>
			view>
			
			<view class="list_menu">
				<view class="row" v-for="(item,index) in listMenu" :key="index">
					<image :src="item.icon" mode="aspectFill">image>
					<text>{{item.name}}text>
					<u-icon name="arrow-right" color="#B6B6B6">u-icon>
				view>
			view>
		view>
	view>
template>

<script>
	export default {
		data() {
			return {
				homeMenu: [{
					name: '主菜单1',
					img: '/static/other/2.png',
				}, {
					name: '主菜单2',
					img: '/static/other/2.png',
				}, {
					name: '主菜单3',
					img: '/static/other/2.png',
				}],

				listMenu: [{
					name: '列表菜单一',
					icon: '/static/other/1.png',
				}, {
					name: '列表菜单二',
					icon: '/static/other/2.png'
				}, {
					name: '列表菜单三 ',
					icon: '/static/other/3.png'
				}, {
					name: '列表菜单四',
					icon: '/static/other/4.png'
				}, {
					name: '列表菜单五',
					icon: '/static/other/5.png'
				}, {
					name: '列表菜单六',
					icon: '/static/other/6.png'
				}, {
					name: '列表菜单七',
					icon: '/static/other/7.png'
				}]
			};
		},
		methods: {

		},
	}
script>

<style lang="scss">
	page {
		height: 100%;
	}

	.profily,
	.profily_header {
		border-radius: 20rpx;
	}

	.center {
		height: 100%;

		&_top {
			height: 400rpx;
			background-color: $uni-bg-color;
			background-size: cover;
		}

		&_box_bg {
			background: #F9F9F9;
			position: relative;

			.profily {
				position: absolute;
				width: 90%;
				margin: 0 auto;
				top: -100rpx;
				left: 5%;
				background: #FEFEFE;
				padding: 35rpx;
				box-sizing: border-box;
				box-shadow: 1rpx 2rpx 16rpx 1rpx rgba(107, 107, 107, 0.1);
			}
		}
	}

	.avatar_box {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		top: 70rpx;
		left: 275rpx;
		width: 200rpx;
		height: 200rpx;

		.avatar {
			height: 120rpx;
			width: 120rpx;
			background-size: 100%;
			border: 5rpx solid #FFFFFF;
			border-radius: 50%;
			overflow: hidden;
		}

		.nickname {
			color: #FFFFFF;
			padding-top: 10rpx;
			font-size: 34rpx;
			font-family: KaiTi;
		}

	}

	.home_menu {
		position: relative;
		display: flex;
		justify-content: space-around;

		.cell {
			width: 250rpx;
			font-size: 24rpx;
			text-align: center;
			display: flex;
			flex-direction: column;

			.img {
				width: 80rpx;
				height: 80rpx;
				margin: 0 auto;
				margin-bottom: 5rpx;
			}

			text {
				line-height: 20rpx;
				margin-top: 20rpx;
			}

			.special {
				border-left: 3rpx solid #CCCCCC;
				border-right: 3rpx solid #CCCCCC;
			}
		}
	}

	.arc {
		background-color: $uni-bg-color;
		height: 100rpx;
	}

	.within_arc {
		background-color: #FFFFFF;
		border-top-left-radius: 20%;
		border-top-right-radius: 20%;
		height: 100rpx;
	}

	.list_menu {
		width: 100%;
		display: inline-block;

		.row {
			font-size: 28rpx;
			letter-spacing: 1rpx;
			padding: 30rpx 5%;
			background: #FEFEFE;
			border-bottom: 1rpx solid #EEEEEE;
			overflow: hidden;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			position: relative;

			text:nth-of-type(1) {
				margin-left: 20rpx;
				width: 80%;
			}

			image {
				width: 40rpx;
				height: 40rpx;
			}

			&:nth-of-type(4) {
				margin-top: 10rpx;
			}
		}
	}
style>

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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221

3.3 Code 1-3

<template>
	<view class="center">
		<view class="center_top">view>
		
		<view class="avatar_box">
			<open-data class="avatar" type="userAvatarUrl" default-avatar="https://dev.stall.lkxlkf.com/ca/icons/default/default-icon.png">open-data>
			<open-data class="nickname" type="userNickName">open-data>
		view>
		<view class="center_box_bg">
			
			<view class="profily">
				<view class="home_menu">
					<view class="cell" v-for="(item,index) in homeMenu" :key="index">
						<image class="img" :src="item.img" mode="aspectFill">image>
						<text :class="index==1?'special':''">{{item.name}}text>
					view>
				view>
			view>
			
			<view class="list_menu">
				<view class="row" v-for="(item,index) in listMenu" :key="index">
					<image :src="item.icon" mode="aspectFill">image>
					<text>{{item.name}}text>
				view>
			view>
		view>
	view>
template>

<script>
	export default {
		data() {
			return {
				homeMenu: [{
					name: '主菜单1',
					img: '/static/other/10.png'
				}, {
					name: '主菜单2',
					img: '/static/other/10.png'
				}, {
					name: '主菜单3',
					img: '/static/other/10.png'
				}],

				listMenu: [{
					name: '列表菜单一',
					icon: '/static/other/1.png'
				}, {
					name: '列表菜单二',
					icon: '/static/other/2.png'
				}, {
					name: '列表菜单三 ',
					icon: '/static/other/3.png'
				}, {
					name: '列表菜单四',
					icon: '/static/other/4.png'
				}, {
					name: '列表菜单五',
					icon: '/static/other/5.png'
				}, {
					name: '列表菜单六',
					icon: '/static/other/6.png'
				}, {
					name: '列表菜单七',
					icon: '/static/other/7.png'
				}, {
					name: '列表菜单八',
					icon: '/static/other/8.png'
				}, {
					name: '列表菜单九',
					icon: '/static/other/9.png'
				}]
			};
		},
		methods: {

		},
	}
script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #f9f9f9;
	}

	.profily,
	.profily_header {
		border-radius: 20rpx;
	}

	.center {
		height: 100%;

		&_top {
			height: 400rpx;
			background-color: #a9c6b6;
			background-size: cover;
		}

		&_box_bg {
			background: #F9F9F9;
			position: relative;

			.profily {
				position: absolute;
				width: 90%;
				margin: 0 auto;
				top: -100rpx;
				left: 5%;
				background: #FEFEFE;
				padding: 35rpx;
				box-sizing: border-box;
				box-shadow: 1rpx 2rpx 16rpx 1rpx rgba(107, 107, 107, 0.1);
			}
		}
	}

	.avatar_box {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		top: 50rpx;
		left: 275rpx;
		width: 200rpx;
		height: 200rpx;

		.avatar {
			height: 120rpx;
			width: 120rpx;
			background-size: 100%;
			border: 5rpx solid #FFFFFF;
			border-radius: 50%;
			overflow: hidden;
		}

		.nickname {
			color: #FFFFFF;
			padding-top: 10rpx;
			font-size: 34rpx;
			font-family: KaiTi;
		}

	}

	.center_box_bg {
		padding-top: 100rpx;
	}

	.home_menu {
		position: relative;
		display: flex;
		justify-content: space-around;

		.cell {
			width: 250rpx;
			font-size: 24rpx;
			text-align: center;
			display: flex;
			flex-direction: column;

			.img {
				width: 80rpx;
				height: 80rpx;
				margin: 0 auto;
				margin-bottom: 5rpx;
			}

			text {
				line-height: 20rpx;
				margin-top: 20rpx;
			}

			.special {
				border-left: 3rpx solid #CCCCCC;
				border-right: 3rpx solid #CCCCCC;
			}
		}
	}

	.list_menu {
		padding: 50rpx 30rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.row {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: 230rpx;
			height: 200rpx;
			background-color: #FFFFFF;
			box-shadow: 1rpx 2rpx 16rpx 1rpx rgba(107, 107, 107, 0.1);

			image {
				width: 60rpx;
				height: 60rpx;
			}

			text {
				padding-top: 20rpx;
				font-size: 24rpx;
			}
		}
	}
style>

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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211

3.4 Code 1-4

<template>
	<view class="center">
		<view class="logo" @click="goLogin" :hover-class="!login ? 'logo-hover' : ''">
			<image class="logo-img" src="/static/other/3.png">image>
			<view class="logo-title">
				<text class="uer-name">Hi，{{login ? uerInfo.name : '未登录'}}text>
				<text class="go-login navigat-arrow" v-if="!login">text>
			view>
		view>
		<view class="center-list">
			<view class="center-list-item border-bottom">
				<text class="list-icon">text>
				<text class="list-text">帐号管理text>
				<text class="navigat-arrow">text>
			view>
			<view class="center-list-item">
				<text class="list-icon">text>
				<text class="list-text">新消息通知text>
				<text class="navigat-arrow">text>
			view>
		view>
		<view class="center-list">
			<view class="center-list-item border-bottom">
				<text class="list-icon">text>
				<text class="list-text">帮助与反馈text>
				<text class="navigat-arrow">text>
			view>
			<view class="center-list-item">
				<text class="list-icon">text>
				<text class="list-text">服务条款及隐私text>
				<text class="navigat-arrow">text>
			view>
		view>
		<view class="center-list">
			<view class="center-list-item">
				<text class="list-icon">text>
				<text class="list-text">关于应用text>
				<text class="navigat-arrow">text>
			view>
		view>
		<soure :url="url">soure>
	view>
template>

<script>
	export default {
		data() {
			return {
				url:'https://ext.dcloud.net.cn/plugin?id=38',
				login: false,
				uerInfo: {}
			}
		},
		methods: {
			goLogin() {
				if (!this.login) {
					console.log("点击前往登录")
				}
			}
		}
	}
script>

<style>
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #f8f8f8;
	}

	.center {
		flex-direction: column;
	}

	.logo {
		width: 750upx;
		height: 240upx;
		padding: 20upx;
		box-sizing: border-box;
			background-color: #a9c6b6;
		flex-direction: row;
		align-items: center;
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}

	.go-login.navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20upx;
	}

	.center-list {
		background-color: #FFFFFF;
		margin-top: 20upx;
		width: 750upx;
		flex-direction: column;
	}

	.center-list-item {
		height: 90upx;
		width: 750upx;
		box-sizing: border-box;
		flex-direction: row;
		padding: 0upx 20upx;
	}

	.border-bottom {
		border-bottom-width: 1upx;
		border-color: #c8c7cc;
		border-bottom-style: solid;
	}

	.list-icon {
		width: 40upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #4cd964;
		text-align: center;
		font-family: texticons;
		margin-right: 20upx;
	}

	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		flex: 1;
		text-align: left;
	}

	.navigat-arrow {
		height: 90upx;
		width: 40upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		text-align: right;
		font-family: texticons;
	}
style>
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184

3.5 Code 1-5

<template>
	<view>
		<view class="header">
			<view class="bg">
				<view class="box">
					<view class="box-hd">
						<view class="avator">
							<img src="/static/other/3.png">
						view>
						<view class="phone-number">187****8888view>
					view>
					<view class="box-bd">
						<view class="item">
							<view class="icon"><img src="/static/other/wx.png">view>
							<view class="text">我的通知view>
						view>
						<view class="item">
							<view class="icon"><img src="/static/other/wb.png">view>
							<view class="text">我的收藏view>
						view>
						<view class="item">
							<view class="icon"><img src="/static/other/zfb.png">view>
							<view class="text">我的客服view>
						view>
					view>
				view>
			view>
		view>
		<view class="list-content">
			<view class="list">
				<view class="li noborder">
					<view class="icon">
						<image src="/static/other/1.png">image>
					view>
					<view class="text">我的名片view>
					<image class="to" src="/static/other/youjiantou.png">image>
				view>
			view>
			<view class="list">
				<view class="li " @click="changeSkin">
					<view class="icon">
						<image src="/static/other/2.png">image>
					view>
					<view class="text">主题切换view>
					<image class="to" src="/static/other/youjiantou.png">image>
				view>
				<view class="li ">
					<view class="icon">
						<image src="/static/other/3.png">image>
					view>
					<view class="text">帮助中心view>
					<image class="to" src="/static/other/youjiantou.png">image>
				view>
				<view class="li ">
					<view class="icon">
						<image src="/static/other/4.png">image>
					view>
					<view class="text">关于我们view>
					<image class="to" src="/static/other/youjiantou.png">image>
				view>
				<view class="li ">
					<view class="icon">
						<image src="/static/other/5.png">image>
					view>
					<view class="text">意见反馈view>
					<image class="to" src="/static/other/youjiantou.png">image>
				view>
			view>
			<view class="list">
				<view class="li noborder">
					<view class="icon">
						<image src="/static/other/6.png">image>
					view>
					<view class="text">系统设置view>
					<image class="to" src="/static/other/youjiantou.png">image>
				view>
			view>
			<soure :url="url">soure>
		view>
	view>
template>
<script>
	export default {
		data() {
			return {
				url: 'https://ext.dcloud.net.cn/plugin?id=223'
			};
		},
		onLoad() {},
		methods: {}
	}
script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
		font-size: 30upx;
	}

	.header {
		background: #fff;
		height: 290upx;
		padding-bottom: 110upx;

		.bg {
			width: 100%;
			height: 200upx;
			padding-top: 100upx;
			background-color: #4191ea;
		}
	}

	.box {
		width: 650upx;
		height: 280upx;
		border-radius: 20upx;
		margin: 0 auto;
		background: #fff;
		box-shadow: 0 5upx 20upx 0upx rgba(0, 0, 150, .2);

		.box-hd {
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: center;

			.avator {
				width: 160upx;
				height: 160upx;
				background: #fff;
				border: 5upx solid #fff;
				border-radius: 50%;
				margin-top: -80upx;
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.phone-number {
				width: 100%;
				text-align: center;
			}
		}

		.box-bd {
			display: flex;
			flex-wrap: nowrap;
			flex-direction: row;
			justify-content: center;

			.item {
				flex: 1 1 auto;
				display: flex;
				flex-wrap: wrap;
				flex-direction: row;
				justify-content: center;
				border-right: 1px solid #f1f1f1;
				margin: 15upx 0;

				&:last-child {
					border: none;
				}

				.icon {
					width: 60upx;
					height: 60upx;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.text {
					width: 100%;
					text-align: center;
					margin-top: 10upx;
				}
			}
		}
	}

	.list-content {
		background: #fff;
	}

	.list {
		width: 100%;
		border-bottom: 15upx solid #f1f1f1;
		background: #fff;

		&:last-child {
			border: none;
		}

		.li {
			width: 92%;
			height: 100upx;
			padding: 0 4%;
			border-bottom: 1px solid rgb(243, 243, 243);
			display: flex;
			align-items: center;

			&.noborder {
				border-bottom: 0
			}

			.icon {
				flex-shrink: 0;
				width: 50upx;
				height: 50upx;

				image {
					width: 50upx;
					height: 50upx;
				}
			}

			.text {
				padding-left: 20upx;
				width: 100%;
				color: #666;
			}

			.to {
				flex-shrink: 0;
				width: 40upx;
				height: 40upx;
			}
		}
	}
style>

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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236

3.5 Code 1-6

<template>
	<view class="center">
		<view class="center_top">
			<view class="mask">view>
		view>
		<view class="center_box_bg">
			<view class="profily">
				<view class="base">
					<view class="profily_header">view>
					<text>昵称text>
					<image src="/static/other/1.png">image>
				view>
				<view class="order_status">
					<view class="status" v-for="item in status">
						<image class="icon" :src="item.url" mode="aspectFill">image>
						<text>{{item.name}}text>
					view>
				view>
			view>
			<view class="baiban">

			view>
			<view class="center_menu">
				<view class="menu_item" v-for="item in menus">
					<image :src="item.icon" mode="aspectFill">image>
					<text>{{item.name}}text>
				view>
			view>
		view>
		<soure :url="url">soure>
	view>
template>

<script>
	export default {
		data() {
			return {
				url: 'https://ext.dcloud.net.cn/plugin?id=247',
				status: [{
						key: 1,
						name: '待发货',
						url: '/static/other/3.png'
					},
					{
						key: 2,
						name: '待收货',
						url: '/static/other/3.png'
					},
					{
						key: 3,
						name: '待评价',
						url: '/static/other/3.png'
					},
					{
						key: 4,
						name: '全部订单',
						url: '/static/other/3.png'
					}
				],
				menus: [{
						name: '我的收藏',
						icon: '/static/other/1.png',
						key: 1,
					},
					{
						name: '地址管理',
						icon: '/static/other/2.png',
						key: 2,
					},
					{
						name: '尺码对照表',
						icon: '/static/other/3.png',
						key: 3,
					},
					{
						name: '帮助中心',
						icon: '/static/other/4.png',
						key: 4,
					},
					{
						name: '意见反馈',
						icon: '/static/other/5.png',
						key: 5,
					},
					{
						name: '关于我们',
						icon: '/static/other/6.png',
						key: 6,
					}

				]
			};
		},
		methods: {

		},
		computed: {

		}
	}
script>

<style lang="scss">
	page {
		height: 100%;
	}

	.profily,
	.profily_header {
		border-radius: 8px;
	}

	.center {
		height: 100%;

		&_top {
			height: 18%;
			background: url('/static/other/3.png') no-repeat 0% 50%;
			background-size: cover;

			.mask {
				background: rgba(0, 0, 0, .4);
				height: 100%;
			}
		}

		&_box_bg {
			background: #F9F9F9;
			position: relative;

			.profily {
				position: absolute;
				width: 90%;
				margin: 0 auto;
				top: -100upx;
				left: 5%;
				background: #FEFEFE;
				padding: 35upx;
				box-sizing: border-box;
				box-shadow: 0px 2px 5px #EDEDED;
			}
		}
	}

	.base {
		display: flex;
		align-items: center;
		border-bottom: 2px solid #F6F6F6;
		padding-bottom: 35upx;
		position: relative;

		.profily_header {
			height: 120upx;
			width: 120upx;
			background-image: url('/static/other/3.png');
			background-size: 100%;
		}

		text {
			margin-left: 20px;
			font-size: 30upx;
		}

		image {
			position: absolute;
			height: 40upx;
			width: 40upx;
			right: 0px;
			top: 0px;
		}
	}

	.order_status {
		display: flex;
		justify-content: space-between;
		margin-top: 35upx;

		.status {
			width: 140upx;
			font-size: 24upx;
			text-align: center;
			letter-spacing: .5px;
			display: flex;
			flex-direction: column;

			.icon {
				width: 50upx;
				height: 50upx;
				margin: 0 auto;
				margin-bottom: 5px;

			}
		}
	}

	.baiban {
		background: #FEFEFE;
		height: 300upx;
	}

	.center_menu {
		width: 100%;
		display: inline-block;

		.menu_item {
			font-size: 28upx;
			letter-spacing: 1px;
			padding: 14px 5%;
			background: #FEFEFE;
			overflow: hidden;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			position: relative;
			border-bottom: 1px solid #EFEFEF;

			&:hover {
				background: #F6F6F6 !important;
			}

			&::after {
				content: '';
				width: 30upx;
				height: 30upx;
				position: absolute;
				right: 5%;
				background: url('/static/other/youjiantou.png') no-repeat;
				background-size: 100%;
			}

			text:nth-of-type(1) {
				margin-left: 10px;
			}

			image {
				width: 40upx;
				height: 40upx;
			}

			&:nth-of-type(4) {
				margin-top: 10px;
			}
		}
	}
style>

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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246

3.7 Code 1-7

<template>
	<view>
		
		<view class="head">
			<view class="info">
				<view class="user">
					<image src="/static/other/3.png">image>
					<view class="name">
						<text>niewtext>
						<text>ID: 9527text>
					view>
				view>
				<view class="btn">分享店铺view>
			view>
		view>
		
		<view class="menu-box">
			<view class="region">
				<view class="title">待处理view>
				<view class="menu-row">
					<view class="cell">
						<view class="count">33view>
						<view class="name">待付款view>
					view>
					<view class="cell">
						<view class="count">12view>
						<view class="name">待发货view>
					view>
					<view class="cell">
						<view class="count">53view>
						<view class="name">待提货view>
					view>
				view>
			view>

			<view class="region">
				<view class="title">店铺数据view>
				<view class="menu-row">
					<view class="cell">
						<view class="count">122view>
						<view class="name">今日访客view>
					view>
					<view class="cell">
						<view class="count">23view>
						<view class="name">今日订单view>
					view>
					<view class="cell">
						<view class="count">888view>
						<view class="name">今日收入view>
					view>
				view>
			view>

			<view class="region">
				<view class="title">我的商品view>
				<view class="menu-row">
					<view class="cell">
						<view class="count">54view>
						<view class="name">销售中view>
					view>
					<view class="cell">
						<view class="count">2view>
						<view class="name">待上架view>
					view>
					<view class="cell">
						<view class="count" style="color: #ff7962;font-weight: 1000;">＋view>
						<view class="name">新增商品view>
					view>
				view>
			view>
		view>
	view>
template>

<script>
script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.head {
		position: relative;
		width: 100%;
		height: 400rpx;
		background-color: #ff7962;

		.info {
			padding-top: 150rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.user {
				padding-left: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 120rpx;
					height: 120rpx;
				}

				.name {
					padding-left: 20rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: flex-start;
					flex-direction: column;

					text {
						line-height: 40rpx;
					}
				}
			}

			.btn {
				text-align: center;
				background-color: #ff907c;
				color: #FFFFFF;
				font-size: 30rpx;
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-top-left-radius: 10rpx;
				border-bottom-left-radius: 10rpx;
			}
		}
	}

	.menu-box {
		position: absolute;
		top: 300rpx;
		width: 100%;
	}

	.region {
		background-color: #FFFFFF;
		margin: 30rpx;
		border-radius: 10rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			padding: 30rpx;
		}

		.menu-row {
			display: flex;
			justify-content: center;
			align-items: center;

			.cell {
				width: 30%;
				height: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.count {
					font-size: 40rpx;
				}

				.name {
					font-size: 30rpx;
					line-height: 100rpx;
					color: #8a8a8a;
				}
			}
		}
	}
style>

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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180

3.8 Code 1-8

<template>
	<view>
		<view class="head comm-center">
			<image src="/static/other/4.png">image>
			<view class="name">niewview>
			<view class="remarks">写点什么介绍下自己把！view>
		view>
		<view class="home-menu">
			<view class="row comm-center">
				<view>￥0view>
				<view>余额view>
			view>
			<view class="row edge comm-center">
				<view>0view>
				<view>积分view>
			view>
			<view class="row comm-center">
				<view>Lv.1view>
				<view>等级view>
			view>
		view> 
		<view class="list-menu">
			<view class="cell">
				<view class="left-icon comm-center">
					<image src="/static/other/2.png">image>
				view>
				<view class="txt">我的鼻血view>
				<view class="right-icon comm-center">
					<image src="/static/other/youjiantou.png">image>
				view>
			view>
			<view class="cell">
				<view class="left-icon comm-center">
					<image src="/static/other/7.png">image>
				view>
				<view class="txt">我的眼泪view>
				<view class="right-icon comm-center">
					<image src="/static/other/youjiantou.png">image>
				view>
			view>
			<view class="cell">
				<view class="left-icon comm-center">
					<image src="/static/other/10.png">image>
				view>
				<view class="txt">我的便便view>
				<view class="right-icon comm-center">
					<image src="/static/other/youjiantou.png">image>
				view>
			view>
			<view class="cell">
				<view class="left-icon comm-center">
					<image src="/static/other/1.png">image>
				view>
				<view class="txt">我的帅气view>
				<view class="right-icon comm-center">
					<image src="/static/other/youjiantou.png">image>
				view>
			view>
		view>
	view>
template>

<script>
	export default {
		data() {
			return {
				url: 'http://www.javanx.cn/20190222/css3-radial-gradient/'
			}
		},
		methods: {

		}
	}
script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.head {
		height: 400rpx;
		flex-direction: column;
		background-color: #d24839;
		color: #fbf1ef;

		image {
			width: 120rpx;
			height: 120rpx;
			border: 5rpx solid #FFFFFF;
			border-radius: 100%;
		}

		.name {
			padding-top: 30rpx;
			font-size: 35rpx;
		}

		.remarks {
			padding-top: 10rpx;
			font-size: 24rpx;
		}
	}

	.home-menu {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 20rpx 0;
		height: 180rpx;
		border-radius: 5rpx;
		background-color: #FFFFFF;

		.row {
			width: 30%;
			font-size: 28rpx;
			font-weight: bold;
			flex-direction: column;

			view {
				line-height: 50rpx;
			}
		}

		.edge {
			border-left: 5rpx solid #f1f1f1;
			border-right: 5rpx solid #f1f1f1;
		}
	}

	.list-menu {
		background-color: #FFFFFF;

		.cell {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			border-top: 5rpx solid #f8f8f8;
 
			.left-icon {
				width: 15%;

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.txt {
				width: 75%;
				font-size: 26rpx;
			}

			.right-icon {
				width: 10%;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}
style>

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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166

3.9 Code 1-9

<template>
	<view class="box">
		<view class="top">
			<view class="region">
				<view class="img-box">
					<image src="/static/other/1.png">
					image>
				view>
				<view class="info">
					<view class="name">niewview>
					<view class="time">到期时间: 2099.09.09view>
				view>
				<view class="btn-box">
					<view class="btn">续费view>
				view>
			view>
		view>
		<view class="title">
			会员特权
		view>
		<view class="menu-box">
			<view class="menu">
				<image src="/static/other/3.png">image>
				<text>课程免费text>
			view>
			<view class="menu">
				<image src="/static/other/2.png">image>
				<text>双倍积分text>
			view>
			<view class="menu">
				<image src="/static/other/5.png">image>
				<text>专属兑换text>
			view>
			<view class="menu">
				<image src="/static/other/7.png">image>
				<text>尊贵标识text>
			view>
		view>
		<view style="height: 20rpx;margin: 50rpx 20rpx 20rpx 20rpx;background-color: #f4f4f4;">view>
		<view class="task-title">
			<view class="left">成长任务view>
			<view class="right">查看更多view>
		view>
		<view class="task-title">
			<view class="task-img-box">
				<image src="/static/other/wx.png">image>
			view>
			<view class="task-info">
				<view class="task-name">每日签到view>
				<view class="task-tip">积分+20view>
			view>
			<view class="task-btn">
				<view class="btn">签到view>
			view>
		view>
		<view class="task-title">
			<view class="task-img-box">
				<image src="/static/other/zfb.png">image>
			view>
			<view class="task-info">
				<view class="task-name">观看视频三十分钟view>
				<view class="task-tip">积分+50view>
			view>
			<view class="task-btn">
				<view class="btn">去完成view>
			view>
		view>
		<view class="task-title">
			<view class="task-img-box">
				<image src="/static/other/wb.png">image>
			view>
			<view class="task-info">
				<view class="task-name">分享视频课程view>
				<view class="task-tip">积分+40view>
			view>
			<view class="task-btn">
				<view class="btn">去完成view>
			view>
		view>
	view>
template>

<script>
	export default {
		data() {
			return {
				tagEle: [],
			};
		},
		onShow() {},

	};
script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		margin: auto;
		overflow: hidden;
	}

	.top {
		position: relative;
		padding-top: 100rpx;
		width: 100%;
		height: 250rpx;
	}

	.top:after {
		width: 140%;
		height: 150px;
		position: absolute;
		left: -20%;
		top: 0;
		z-index: -1;
		content: '';
		border-radius: 0 0 50% 50%;
		background: linear-gradient(to right, #319efd, #1ccee8);
	}

	.region {
		padding: 0 50rpx;
		width: 650rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.img-box {
			width: 100rpx;
			height: 100rpx;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.info {
			padding-left: 20rpx;
			width: 400rpx;
			line-height: 55rpx;
			flex-direction: column;

			.name {
				font-size: 40rpx;
				letter-spacing: 5rpx;
				color: #FFFFFF;
			}

			.time {
				font-size: 28rpx;
				letter-spacing: 2rpx;
				color: #b3dffe;
			}
		}

		.btn-box {
			width: 150rpx;

			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 120rpx;
				height: 50rpx;
				font-size: 28rpx;
				font-weight: bold;
				border-radius: 50rpx;
				background-color: #FFFFFF;
				color: #ff9602;
				box-shadow: 5rpx 5rpx 10rpx #489dcf;
			}
		}
	}

	.title {
		width: 100%;
		letter-spacing: 10rpx;
		display: flex;
		justify-content: center;
		color: #fd9903;
		font-size: 35rpx;
		font-weight: 600;
	}

	.menu-box {
		padding: 0 50rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.menu {
			padding-top: 50rpx;
			height: 200rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 100rpx;
				height: 100rpx;
			}

			text {
				padding-top: 30rpx;
				font-size: 24rpx;
				color: #808080;
			}
		}
	}

	.task-title {
		margin: 0 40rpx;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #f5f7fe;

		.left {
			font-size: 35rpx;
			letter-spacing: 5rpx;
		}

		.right {
			font-size: 26rpx;
			color: #a0a0a0;
		}
	}

	.task-img-box {
		width: 100rpx;
		height: 150rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.task-info {
		width: 500rpx;

		.task-name {
			line-height: 50rpx;
			font-size: 30rpx;
			font-weight: 500;
		}

		.task-tip {
			font-size: 24rpx;
			font-weight: bold;
			color: #ffaa00;
		}
	}

	.task-btn {
		width: 150rpx;

		.btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 120rpx;
			height: 50rpx;
			color: #FFFFFF;
			font-size: 26rpx;
			border-radius: 30rpx;
			background-color: #007AFF;
			box-shadow: 5rpx 5rpx 10rpx #489dcf;
		}
	}
style>

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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278

3.10 Code 1-10

<template>
	<view class="box">
		<view class="top">
			<view class="region">
				<view class="upper">
					<view class="img-box">
						<image src="/static/other/1.png">
						image>
					view>
					<view class="info">
						<view class="name">niewview>
						<view class="no">ID: 0926view>
					view>
				view>
				<view class="lower">这个人好懒，什么都没有留下~view>
			view>
			<view class="count">
				<view class="title">
					<image src="/static/other/wx.png">image>
					<text>余额text>
				view>
				<view class="val">888.00view>
			view>
		view>
		<view class="menu-box">
			<view class="menu">
				<image src="/static/other/1.png">image>
				<text>我的订单text>
			view>
			<view class="menu">
				<image src="/static/other/1.png">image>
				<text>我的收藏text>
			view>
			<view class="menu">
				<image src="/static/other/1.png">image>
				<text>联系我们text>
			view>
			<view class="menu">
				<image src="/static/other/1.png">image>
				<text>消息中心text>
			view>
			<view class="menu">
				<image src="/static/other/1.png">image>
				<text>历史记录text>
			view>
			<view class="menu">
				<image src="/static/other/1.png">image>
				<text>版本更新text>
			view>
			<view class="menu">
				<image src="/static/other/1.png">image>
				<text>积分商城text>
			view>
			<view class="menu">
				<image src="/static/other/1.png">image>
				<text>个人中心text>
			view>
			<view class="menu">
				<image src="/static/other/1.png">image>
				<text>历史记录text>
			view>
			<view class="menu">
				<image src="/static/other/1.png">image>
				<text>版本更新text>
			view>
			<view class="menu">
				<image src="/static/other/1.png">image>
				<text>积分商城text>
			view>
			<view class="menu">
				<image src="/static/other/1.png">image>
				<text>个人中心text>
			view>
		view>
	view>
template>

<script>
	export default {
		data() {
			return {
				tagEle: [],
			};
		},
		onShow() {},

	};
script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		margin: auto;
		overflow: hidden;
	}

	.top {
		position: relative;
		padding-top: 100rpx;
		width: 100%;
		height: 400rpx;
	}

	.top:after {
		width: 140%;
		height: 200px;
		position: absolute;
		left: -20%;
		top: 0;
		z-index: -1;
		content: '';
		border-radius: 0 0 60% 60%;
		background-color: #426db5;
	}

	.region {
		margin-left: 150rpx;
		width: 450rpx;

		.upper {
			display: flex;
			justify-content: center;
			align-items: center;

			.img-box {
				width: 100rpx;
				height: 100rpx;

				image {
					width: 100rpx;
					height: 100rpx;
				}
			}

			.info {
				padding-left: 30rpx;
				line-height: 55rpx;
				flex-direction: column;

				.name {
					font-size: 40rpx;
					letter-spacing: 5rpx;
					color: #FFFFFF;
				}

				.no {
					font-size: 24rpx;
					letter-spacing: 2rpx;
					color: #b3dffe;
				}
			}
		}

		.lower {
			display: flex;
			justify-content: center;
			line-height: 100rpx;
			font-size: 24rpx;
			color: #b3dffe;
		}
	}

	.count {
		display: flex;
		justify-content: space-between;
		margin-top: 35rpx;
		margin-left: 200rpx;
		width: 350rpx;
		line-height: 80rpx;
		border-radius: 50rpx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 3rpx 9rpx #bdbdbd;

		.title {
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 30rpx;
				height: 30rpx;
			}

			text {
				font-size: 30rpx;
				padding-left: 15rpx;
			}
		}

		.val {
			display: flex;
			justify-content: flex-end;
			padding-right: 50rpx;
			font-weight: bold;
			font-size: 30rpx;
			align-items: center;
			width: 50%;
			color: #426db5;
		}
	}

	.menu-box {
		margin: 0rpx 27rpx;
		display: flex;
		flex-wrap: wrap;
		box-shadow: 0rpx 1rpx 10rpx #ebebeb;

		.menu {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 172rpx;
			height: 220rpx;
			border-bottom: 1rpx solid #ececec;
			flex-direction: column;

			image {
				width: 60rpx;
				height: 60rpx;
			}

			text {
				padding-top: 30rpx;
				font-size: 28rpx;
			}

		}
	}
style>

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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231

3.11 Code 1-11

<template>
	<view>
		<view class="upper-box">
			<view class="tip-box">
				<view class="tip">欢迎您，niew!view>
				<view class="btn">签到赢大奖 >view>
			view>
			<view class="setting">
				<image src="/static/other/wb.png">image>
			view>
		view>
		<view class="lower-box">
			<view class="menu">
				<image src="/static/other/6.png">image>
				<text>我的收藏text>
			view>
			<view class="menu">
				<image src="/static/other/2.png">image>
				<text>我的订单text>
			view>
			<view class="menu">
				<image src="/static/other/3.png">image>
				<text>我的消息text>
			view>
			<view class="menu">
				<image src="/static/other/4.png">image>
				<text>我的钱包text>
			view>
		view>
	view>
template>

<script>
	export default {
		data() {
			return {};
		},
	};
script>

<style lang="scss">
	.upper-box {
		position: relative;
		width: 100%;
		height: 400rpx;
		border-bottom-right-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		background: linear-gradient(to right, #2859fe, #1ba0ff);

		.tip-box {
			padding: 50rpx 0 0 50rpx;

			.tip {
				font-size: 50rpx;
				line-height: 100rpx;
				color: #FFFFFF;
			}

			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 250rpx;
				height: 60rpx;
				border-radius: 50rpx;
				color: #2859fe;
				background-color: #FFFFFF;
			}
		}
		
		.setting{
			position: absolute;
			top: 50rpx;
			right: 50rpx;
			
			image{
				width: 60rpx;
				height: 60rpx;
			}
		}
	}

	.lower-box {
		position: relative;
		top: -80rpx;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;

		.menu {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			margin: 30rpx;
			width: 250rpx;
			height: 300rpx;
			background-color: #FFFFFF;
			border-radius: 30rpx;
			box-shadow: 0 5rpx 15rpx #e1e1e1;

			image {
				width: 120rpx;
				height: 120rpx;
			}

			text {
				font-size: 28rpx;
				padding-top: 50rpx;
			}
		}
	}
style>

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

相关阅读:
新服务器上CentOS 8 安装mysql 8.0 全过程
 设计模式：享元模式案例
 MeterSphereV2.3版本Mac本地启动详细教程（含常见错误）
文举论金：黄金原油全面走势分析策略独家指导
 mac安装python2
某微e-office协同管理系统存在任意文件读取漏洞分析 CNVD-2022-07603
解锁 zkSync Era：开创全新的 Layer 2 扩展时代
 19_Vue如何监测到对象类型数据发生改变的？
【仿牛客网笔记】 Redis，一站式高性能存储方案——点赞
 一文带你认知定时消息发布RocketMQ
原文地址：https://blog.csdn.net/weixin_37797592/article/details/127490577