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

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

---

干货内容推荐

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

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

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

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

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

---

文章目录

• 干货内容推荐
• 一、引言
• 二、样例展示
• 三、源码分享
• • 3.1 Code 1-1
  • 3.2 Code 1-2
  • 3.3 Code 1-3
  • 3.4 Code 1-4
  • 3.5 Code 1-5
  • 3.5 Code 1-6
  • 3.7 Code 1-7
  • 3.8 Code 1-8
  • 3.9 Code 1-9
  • 3.10 Code 1-10
  • 3.11 Code 1-11

---

一、引言

个人中心界面是小程序开发中，底部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>

---

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>

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>

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">&#xe65e;</text>
			</view>
		</view>
		<view class="center-list">
			<view class="center-list-item border-bottom">
				<text class="list-icon">&#xe60f;</text>
				<text class="list-text">帐号管理</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
			<view class="center-list-item">
				<text class="list-icon">&#xe639;</text>
				<text class="list-text">新消息通知</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
		<view class="center-list">
			<view class="center-list-item border-bottom">
				<text class="list-icon">&#xe60b;</text>
				<text class="list-text">帮助与反馈</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
			<view class="center-list-item">
				<text class="list-icon">&#xe65f;</text>
				<text class="list-text">服务条款及隐私</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
		<view class="center-list">
			<view class="center-list-item">
				<text class="list-icon">&#xe614;</text>
				<text class="list-text">关于应用</text>
				<text class="navigat-arrow">&#xe65e;</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>

---

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****8888</view>
					</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>

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>

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>niew</text>
						<text>ID: 9527</text>
					</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">33</view>
						<view class="name">待付款</view>
					</view>
					<view class="cell">
						<view class="count">12</view>
						<view class="name">待发货</view>
					</view>
					<view class="cell">
						<view class="count">53</view>
						<view class="name">待提货</view>
					</view>
				</view>
			</view>

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

			<view class="region">
				<view class="title">我的商品</view>
				<view class="menu-row">
					<view class="cell">
						<view class="count">54</view>
						<view class="name">销售中</view>
					</view>
					<view class="cell">
						<view class="count">2</view>
						<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>

3.8 Code 1-8

<template>
	<view>
		<view class="head comm-center">
			<image src="/static/other/4.png"></image>
			<view class="name">niew</view>
			<view class="remarks">写点什么介绍下自己把！</view>
		</view>
		<view class="home-menu">
			<view class="row comm-center">
				<view>￥0</view>
				<view>余额</view>
			</view>
			<view class="row edge comm-center">
				<view>0</view>
				<view>积分</view>
			</view>
			<view class="row comm-center">
				<view>Lv.1</view>
				<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>

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">niew</view>
					<view class="time">到期时间: 2099.09.09</view>
				</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">积分+20</view>
			</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">积分+50</view>
			</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">积分+40</view>
			</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>

---

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">niew</view>
						<view class="no">ID: 0926</view>
					</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.00</view>
			</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>

---

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>