123

pages/user/user.vue

@@ -1,53 +1,86 @@
 <template>
 	<view class="container">
 		<view class="vheigh"></view>
+		<view class="top-image"><image src="../../static/user/user-top.png" mode=""></image></view>
 		<view class="user-set flex">
-			<view class="set-logo">
-				<image src="../../static/icon/uset.png" mode=""></image>
-			</view>
-			<view class="xx-logo">
-				<image src="../../static/icon/uset.png" mode=""></image>
-			</view>
+			<view class="set-logo"><image src="../../static/user/user1.png" mode=""></image></view>
+			<view class="xx-logo"><image src="../../static/user/user2.png" mode=""></image></view>
 		</view>
 		<view class="user-wrap">
-			<view class="user-info">
-				<view class="info-left">
+			<view class="info-left flex">
+				<view class="user-name">
 					<image src="../../static/error/missing-face.png" mode=""></image>
-					<view class="user-name">
-						<view class="name">
-							
-						</view>
-						<view class="phone">
-							
-						</view>
-					</view>
-					<view class="kpi">
-						今日KPI：1063
+					<view class="user-font">
+						<view class="name clamp">{{ userInfo.nickname }}</view>
+						<view class="phone">{{ userInfo.phone }}</view>
 					</view>
 				</view>
-				<view class="info-right">
-					
+				<view class="kpi">今日KPI：1063</view>
+			</view>
+			<view class="info-right">
+				<image class="iright-icon" src="../../static/user/user3.png" mode=""></image>
+				<view class="iright-font">消费积分：12345678</view>
+			</view>
+		</view>
+		<view class="main-box">
+			<view class="title flex">
+				<view class="title-left">
+					<image class="title-icon" src="../../static/user/user4.png" mode=""></image>
+					<view class="title-font">我的资产</view>
+				</view>
+				<image class="title-right" src="../../static/img/back.png" mode=""></image>
+			</view>
+			<view class="main flex">
+				<view class="item">
+					<view class="item-num">5690</view>
+					<view class="item-font">购物积分</view>
+				</view>
+				<view class="item">
+					<view class="item-num">9999</view>
+					<view class="item-font">提货券</view>
+				</view>
+				<view class="item">
+					<view class="item-num">5690</view>
+					<view class="item-font">广告值</view>
+				</view>
+			</view>
+		</view>
+		<view class="main-box">
+			<view class="title flex">
+				<view class="title-left">
+					<image class="title-icon" src="../../static/user/user5.png" mode=""></image>
+					<view class="title-font">我的订单</view>
+				</view>
+				<image class="title-right" src="../../static/img/back.png" mode=""></image>
+			</view>
+			<view class="main flex">
+				<view class="oitem">
+					<image class="oitem-image" src="../../static/user/user6.png" mode=""></image>
+					<view class="oitem-font">待付款</view>
+				</view>
+				<view class="oitem">
+					<image class="oitem-image" src="../../static/user/user7.png" mode=""></image>
+					<view class="oitem-font">待发货</view>
+				</view>
+				<view class="oitem">
+					<image class="oitem-image" src="../../static/user/user8.png" mode=""></image>
+					<view class="oitem-font">待收货</view>
+				</view>
+				<view class="oitem">
+					<image class="oitem-image" src="../../static/user/user9.png" mode=""></image>
+					<view class="oitem-font">已完成</view>
 				</view>
 			</view>
 		</view>
 		<uni-list class="tool-list">
-			<uni-list-item title="收款信息" @click="navTo('/pages/collection/collection')" thumb="/static/icon/skxx.png">
-			</uni-list-item>
-			<uni-list-item title="实名认证" @click="navTo('/pages/user/approve')" thumb="/static/icon/bdsj.png">
-			</uni-list-item>
-			<uni-list-item title="收货地址" @click="navTo('/pages/set/address')" thumb="/static/icon/shdz.png">
-			</uni-list-item>
-			<uni-list-item title="客服" @click="openKf()" thumb="/static/icon/kf.png">
-			</uni-list-item>
-			<uni-list-item title="设置" @click="navTo('/pages/set/set')" thumb="/static/icon/uset.png">
-			</uni-list-item>
-			</uni-list-item>
+			<uni-list-item title="邀请有礼" @click="navTo('/pages/user/collection')" thumb="/static/user/user10.png"></uni-list-item>
+			<uni-list-item title="我的收藏" @click="navTo('/pages/user/approve')" thumb="/static/user/user11.png"></uni-list-item>
+			<uni-list-item title="收款方式" @click="navTo('/pages/set/address')" thumb="/static/user/user12.png"></uni-list-item>
+			<uni-list-item title="客服中心" @click="openKf()" thumb="/static/user/user13.png"></uni-list-item>
 		</uni-list>
 		<uni-popup ref="popupkf" type="center">
 			<view class="popup-box">
-				<view class="img">
-					<image src="../../static/img/img009.png" mode=""></image>
-				</view>
+				<view class="img"><image src="../../static/img/img009.png" mode=""></image></view>
 				<view class="mian">
 					<view class="delivery">
 						<view class="title">已经为您定制专属客服</view>
@@ -63,18 +96,16 @@
 		</uni-popup>
 		<uni-popup ref="popupqd" type="center">
 			<view class="popup">
-				<view class="popup-dox">
-					<image class="popup-logo" src="../../static/img/sign-popup.png"></image>
-				</view>
+				<view class="popup-dox"><image class="popup-logo" src="../../static/img/sign-popup.png"></image></view>
 				<view class="popup-title">
 					获得
 					<text>{{ today_integral }}</text>
-					{{today_type}}
+					{{ today_type }}
 				</view>
 				<view class="popup-tip">
 					明天签到可得
 					<text>{{ tom_integral }}</text>
-					{{tom_type}}
+					{{ tom_type }}
 				</view>
 				<view class="popup-btn" @click="closeQd">知道了</view>
 			</view>
@@ -85,422 +116,536 @@
 	</view>
 </template>
 <script>
-	import { tabbar1 } from '@/utils/tabbar.js';
-	import {
-		mapState,
-		mapMutations
-	} from 'vuex';
-	import uniList from '@/components/uni-list/uni-list.vue';
-	import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
-	import {
-		orderData,
-		getUserInfo
-	} from '@/api/user.js';
-	import {
-		saveUrl,
-		interceptor
-	} from '@/utils/loginUtils.js';
-	let startY = 0,
-		moveY = 0,
-		pageAtTop = true;
-	export default {
-		components: {
-			uniList,
-			uniListItem
+import { tabbar1 } from '@/utils/tabbar.js';
+import { mapState, mapMutations } from 'vuex';
+import uniList from '@/components/uni-list/uni-list.vue';
+import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
+import { orderData, getUserInfo } from '@/api/user.js';
+import { saveUrl, interceptor } from '@/utils/loginUtils.js';
+let startY = 0,
+	moveY = 0,
+	pageAtTop = true;
+export default {
+	components: {
+		uniList,
+		uniListItem
+	},
+	data() {
+		return {
+			current: 4,
+			tabbar: tabbar1,
+			qded: false, //是否已签到
+			text: '', //客服微信
+			today_integral: '', //签到获得的数值
+			today_type: '', //签到获得的数值单位
+			tom_integral: '', //明天签到获得的数值
+			tom_type: '', //签到获得的数值单位
+			userDowm: 0, //卡片升级专属高度
+			userMaxDowm: 0, //卡片最高高度
+			toolList: [
+				{
+					id: 't1',
+					name: '新人通道',
+					width: '56rpx',
+					heigt: '54rpx',
+					img: '../../static/icon/tool-1.png',
+					path: '/pages/user/xrtd'
+				},
+				{
+					id: 't2',
+					name: '邀请好友',
+					width: '56rpx',
+					heigt: '57rpx',
+					img: '../../static/icon/tool-2.png',
+					path: '/pages/user/shareQrCode'
+				},
+				{
+					id: 't3',
+					name: '我的粉丝',
+					width: '68rpx',
+					heigt: '53rpx',
+					img: '../../static/icon/tool-3.png',
+					path: '/pages/user/myfans'
+				},
+				{
+					id: 't4',
+					name: '我的订单',
+					width: '55rpx',
+					heigt: '54rpx',
+					img: '../../static/icon/tool-4.png',
+					path: '/pages/order/order'
+				},
+				{
+					id: 't5',
+					name: '我的商品',
+					width: '50rpx',
+					heigt: '58rpx',
+					img: '../../static/icon/tool-5.png',
+					path: '/pages/order/order'
+				},
+				{
+					id: 't6',
+					name: '馆长申请',
+					width: '59rpx',
+					heigt: '56rpx',
+					img: '../../static/icon/tool-6.png',
+					path: '/pages/user/gzsq'
+				}
+			]
+		};
+	},
+	onShow() {
+		// 判断是否已经登录
+		if (this.hasLogin) {
+			this.loadBaseData();
+		}
+	},
+	onReady() {
+		// 初始化获取页面宽度
+		uni.createSelectorQuery()
+			.select('.container')
+			.fields(
+				{
+					size: true
+				},
+				data => {
+					// 计算最多下拉的高度
+					this.userDowm = Math.floor((data.width / 750) * 185);
+					// 计算最大触发修改高度事件
+					this.userMaxDowm = Math.floor((data.width / 750) * 250);
+				}
+			)
+			.exec();
+	},
+	// #ifndef MP
+	// onNavigationBarButtonTap(e) {
+	// 	const index = e.index;
+	// 	if (index === 0) {
+	// 		this.navTo('/pages/set/set');
+	// 	} else if (index === 1) {
+	// 		// #ifdef APP-PLUS
+	// 		const pages = getCurrentPages();
+	// 		const page = pages[pages.length - 1];
+	// 		const currentWebview = page.$getAppWebview();
+	// 		currentWebview.hideTitleNViewButtonRedDot({
+	// 			index
+	// 		});
+	// 		// #endif
+	// 		uni.navigateTo({
+	// 			url: '/pages/user/notice'
+	// 		});
+	// 	}
+	// },
+	// #endif
+	computed: {
+		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
+	},
+	methods: {
+		...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
+		// 加载初始数据
+		loadBaseData() {
+			getUserInfo({})
+				.then(({ data }) => {
+					this.setUserInfo(data);
+					// 获取用户数据完毕后在获取订单数据防止多次跳转到登录页
+					orderData({})
+						.then(({ data }) => {
+							this.setOrderInfo(data);
+						})
+						.catch(e => {
+							this.setOrderInfo({
+								complete_count: 0, //完成
+								received_count: 0, //待收货
+								unshipped_count: 0, //待发货
+								order_count: 0, //订单总数
+								unpaid_count: 0 //待付款
+							});
+						});
+				})
+				.catch(e => {
+					console.log(e);
+				});
 		},
-		data() {
-			return {
-				current: 4,
-				tabbar: tabbar1,
-				qded: false, //是否已签到
-				text:'',//客服微信
-				today_integral:'',//签到获得的数值
-				today_type:'',//签到获得的数值单位
-				tom_integral: '',//明天签到获得的数值
-				tom_type: '',//签到获得的数值单位
-				userDowm: 0, //卡片升级专属高度
-				userMaxDowm: 0, //卡片最高高度
-				toolList: [{
-						id: 't1',
-						name: '新人通道',
-						width: '56rpx',
-						heigt: '54rpx',
-						img: '../../static/icon/tool-1.png',
-						path: '/pages/user/xrtd'
-					},
-					{
-						id: 't2',
-						name: '邀请好友',
-						width: '56rpx',
-						heigt: '57rpx',
-						img: '../../static/icon/tool-2.png',
-						path: '/pages/user/shareQrCode'
-					},
-					{
-						id: 't3',
-						name: '我的粉丝',
-						width: '68rpx',
-						heigt: '53rpx',
-						img: '../../static/icon/tool-3.png',
-						path: '/pages/user/myfans'
-					},
-					{
-						id: 't4',
-						name: '我的订单',
-						width: '55rpx',
-						heigt: '54rpx',
-						img: '../../static/icon/tool-4.png',
-						path: '/pages/order/order'
-					},
-					{
-						id: 't5',
-						name: '我的商品',
-						width: '50rpx',
-						heigt: '58rpx',
-						img: '../../static/icon/tool-5.png',
-						path: '/pages/order/order'
-					},
-					{
-						id: 't6',
-						name: '馆长申请',
-						width: '59rpx',
-						heigt: '56rpx',
-						img: '../../static/icon/tool-6.png',
-						path: '/pages/user/gzsq'
-					}
-				]
-			};
+		/**
+		 * 统一跳转接口,拦截未登录路由
+		 * navigator标签现在默认没有转场动画，所以用view
+		 */
+		navTo(url) {
+			// if (!this.hasLogin) {
+			// 	// 保存地址
+			// 	saveUrl();
+			// 	// 登录拦截
+			// 	interceptor();
+			// } else {
+			uni.navigateTo({
+				url
+			});
+			// }
 		},
-		onShow() {
-			// 判断是否已经登录
-			if (this.hasLogin) {
-				this.loadBaseData();
-			}
+		useTool(e) {
+			this.navTo(e.path);
 		},
-		onReady() {
-			// 初始化获取页面宽度
-			uni.createSelectorQuery()
-				.select('.container')
-				.fields({
-						size: true
-					},
-					data => {
-						// 计算最多下拉的高度
-						this.userDowm = Math.floor((data.width / 750) * 185);
-						// 计算最大触发修改高度事件
-						this.userMaxDowm = Math.floor((data.width / 750) * 250);
-					}
-				)
-				.exec();
+		// 签到弹窗
+		goQd() {
+			this.$refs.popupqd.open();
+			this.qded = true;
 		},
-		// #ifndef MP
-		// onNavigationBarButtonTap(e) {
-		// 	const index = e.index;
-		// 	if (index === 0) {
-		// 		this.navTo('/pages/set/set');
-		// 	} else if (index === 1) {
-		// 		// #ifdef APP-PLUS
-		// 		const pages = getCurrentPages();
-		// 		const page = pages[pages.length - 1];
-		// 		const currentWebview = page.$getAppWebview();
-		// 		currentWebview.hideTitleNViewButtonRedDot({
-		// 			index
-		// 		});
-		// 		// #endif
-		// 		uni.navigateTo({
-		// 			url: '/pages/user/notice'
-		// 		});
-		// 	}
-		// },
-		// #endif
-		computed: {
-			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
+		// 关闭签到弹窗
+		closeQd() {
+			this.$refs.popupqd.close();
 		},
-		methods: {
-			...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
-			// 加载初始数据
-			loadBaseData() {
-				getUserInfo({})
-					.then(({
-						data
-					}) => {
-						this.setUserInfo(data);
-						// 获取用户数据完毕后在获取订单数据防止多次跳转到登录页
-						orderData({})
-							.then(({
-								data
-							}) => {
-								this.setOrderInfo(data);
-							})
-							.catch(e => {
-								this.setOrderInfo({
-									complete_count: 0, //完成
-									received_count: 0, //待收货
-									unshipped_count: 0, //待发货
-									order_count: 0, //订单总数
-									unpaid_count: 0 //待付款
-								});
-							});
-					})
-					.catch(e => {
-						console.log(e);
-					});
-			},
-			/**
-			 * 统一跳转接口,拦截未登录路由
-			 * navigator标签现在默认没有转场动画，所以用view
-			 */
-			navTo(url) {
-				// if (!this.hasLogin) {
-				// 	// 保存地址
-				// 	saveUrl();
-				// 	// 登录拦截
-				// 	interceptor();
-				// } else {
-					uni.navigateTo({
-						url
-					});
-				// }
-			},
-			useTool(e) {
-				this.navTo(e.path)
-			},
-			// 签到弹窗
-			goQd() {
-				this.$refs.popupqd.open()
-				this.qded = true
-			},
-			// 关闭签到弹窗
-			closeQd() {
-				this.$refs.popupqd.close()
-			},
-			// 打开客服
-			openKf() {
-				this.$refs.popupkf.open()
-			},
-			// 关闭客服
-			cancel() {
-				this.$refs.popupkf.close()
-			},
+		// 打开客服
+		openKf() {
+			this.$refs.popupkf.open();
+		},
+		// 关闭客服
+		cancel() {
+			this.$refs.popupkf.close();
 		}
-	};
+	}
+};
 </script>
 <style lang="scss">
-	%flex-center {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-	}
+%flex-center {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
 
-	%section {
-		display: flex;
-		justify-content: space-around;
-		align-content: center;
-		background: #fff;
-		border-radius: 10rpx;
-	}
+%section {
+	display: flex;
+	justify-content: space-around;
+	align-content: center;
+	background: #fff;
+	border-radius: 10rpx;
+}
 
-	.container,page {
-		min-height: 100%;
-		height: auto;
-		background-color: $page-color-base;
-	}
+.container,
+page {
+	min-height: 100%;
+	height: auto;
+	background-color: $page-color-base;
+}
 
+.vheigh {
+	height: var(--status-bar-height);
+	background-color: $base-color;
+}
 
-	.vheigh {
-		height: var(--status-bar-height);
-		background-color: $base-color;
+.top-image {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 230rpx;
+	image {
+		width: 100%;
+		height: 100%;
 	}
+}
 
-	.tool-list {
-		width: 690rpx;
-		margin: auto;
-		background: #FFFFFF;
-		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
-		border-radius: 20rpx;
-	}
+.tool-list {
+	width: 690rpx;
+	margin: auto;
+	margin-top: 20rpx;
+	background: #ffffff;
+	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+	border-radius: 20rpx;
+}
 
-	.popup-box {
-		width: 522rpx;
-		height: 605rpx;
-		background-color: #ffffff;
-		border-radius: 20rpx;
+.popup-box {
+	width: 522rpx;
+	height: 605rpx;
+	background-color: #ffffff;
+	border-radius: 20rpx;
+	position: relative;
+
+	.img {
 		position: relative;
+		top: -56rpx;
+		left: 0;
+		width: 522rpx;
+		height: 132rpx;
+		display: flex;
+		justify-content: center;
 
-		.img {
-			position: relative;
-			top: -56rpx;
-			left: 0;
-			width: 522rpx;
+		image {
+			border-radius: 20rpx 20rpx 0 0;
+			width: 450rpx;
 			height: 132rpx;
+		}
+	}
+
+	.mian {
+		margin-top: -44rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		// padding: 32rpx 32rpx;
+		background-color: #ffffff;
+		border-radius: 0 0 20rpx 20rpx;
+		text-align: center;
+
+		.delivery {
+			font-size: 40rpx;
+			color: #333333;
 			display: flex;
-			justify-content: center;
+			align-items: center;
+			flex-direction: column;
 
 			image {
-				border-radius: 20rpx 20rpx 0 0;
-				width: 450rpx;
-				height: 132rpx;
+				margin-top: 48rpx;
+				width: 172rpx;
+				height: 160rpx;
 			}
 		}
 
-		.mian {
-			margin-top: -44rpx;
+		.nocancel {
+			font-size: 32rpx;
+			color: #333333;
+			margin-top: 14rpx;
+		}
+
+		.comfirm-box {
+			margin-top: 52rpx;
 			display: flex;
-			flex-direction: column;
-			align-items: center;
-			// padding: 32rpx 32rpx;
-			background-color: #ffffff;
-			border-radius: 0 0 20rpx 20rpx;
-			text-align: center;
+			// margin-bottom: 32rpx;
 
-			.delivery {
-				font-size: 40rpx;
-				color: #333333;
+			// justify-content: space-around;
+			.cancel {
 				display: flex;
 				align-items: center;
-				flex-direction: column;
-
-				.title {}
-
-				image {
-					margin-top: 48rpx;
-					width: 172rpx;
-					height: 160rpx;
-				}
-			}
+				justify-content: center;
+				width: 197rpx;
+				height: 74rpx;
+				border: 1px solid #dcc786;
+				border-radius: 38rpx;
 
-			.nocancel {
 				font-size: 32rpx;
-				color: #333333;
-				margin-top: 14rpx;
+				color: #605128;
 			}
 
-			.comfirm-box {
-				margin-top: 52rpx;
+			.comfirm {
+				margin-left: 32rpx;
 				display: flex;
-				// margin-bottom: 32rpx;
-
-				// justify-content: space-around;
-				.cancel {
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					width: 197rpx;
-					height: 74rpx;
-					border: 1px solid #dcc786;
-					border-radius: 38rpx;
-
-					font-size: 32rpx;
-					color: #605128;
-				}
-
-				.comfirm {
-					margin-left: 32rpx;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					width: 197rpx;
-					height: 74rpx;
-					background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
-					border-radius: 38px;
-					font-size: 32rpx;
-					color: #605128;
-				}
+				align-items: center;
+				justify-content: center;
+				width: 197rpx;
+				height: 74rpx;
+				background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
+				border-radius: 38px;
+				font-size: 32rpx;
+				color: #605128;
 			}
 		}
 	}
+}
 
-	.popup {
-		width: 560rpx;
-		padding-bottom: 45rpx;
-		background-color: #ffffff;
-		border-radius: 15rpx;
-		text-align: center;
-		line-height: 1;
+.popup {
+	width: 560rpx;
+	padding-bottom: 45rpx;
+	background-color: #ffffff;
+	border-radius: 15rpx;
+	text-align: center;
+	line-height: 1;
 
-		.popup-dox {
-			position: relative;
+	.popup-dox {
+		position: relative;
 
-			.popup-logo {
-				margin: -160rpx auto 0;
-				width: 400rpx;
-				height: 200rpx;
-			}
+		.popup-logo {
+			margin: -160rpx auto 0;
+			width: 400rpx;
+			height: 200rpx;
 		}
+	}
 
-		.popup-title {
-			margin-top: 85rpx;
-			font-size: 40rpx;
-			font-family: PingFang SC;
-			font-weight: bold;
-			color: #2a2a2a;
+	.popup-title {
+		margin-top: 85rpx;
+		font-size: 40rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #2a2a2a;
 
-			text {
-				font-size: 56rpx;
-				color: #e83f30;
-			}
+		text {
+			font-size: 56rpx;
+			color: #e83f30;
 		}
+	}
 
-		.popup-tip {
-			margin-top: 20rpx;
-			font-size: 28rpx;
-			font-family: PingFang SC;
-			font-weight: 500;
-			color: #8c8c8c;
+	.popup-tip {
+		margin-top: 20rpx;
+		font-size: 28rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #8c8c8c;
 
-			text {
-				color: #e83f30;
-			}
+		text {
+			color: #e83f30;
 		}
+	}
 
-		.popup-btn {
-			margin: 58rpx auto 0;
-			width: 270rpx;
-			height: 66rpx;
-			background: #f0c838;
-			border-radius: 34rpx;
-			text-align: center;
-			line-height: 66rpx;
-			font-size: 36rpx;
-			font-family: Source Han Sans CN;
-			font-weight: 500;
-			color: #ffffff;
-		}
+	.popup-btn {
+		margin: 58rpx auto 0;
+		width: 270rpx;
+		height: 66rpx;
+		background: #f0c838;
+		border-radius: 34rpx;
+		text-align: center;
+		line-height: 66rpx;
+		font-size: 36rpx;
+		font-family: Source Han Sans CN;
+		font-weight: 500;
+		color: #ffffff;
 	}
-	.user-wrap {
-		width: 690rpx;
-		height: 283rpx;
-		background: #FFFFFF;
-		box-shadow: 0px 4rpx 13rpx 0px rgba(229, 229, 229, 0.46);
-		border-radius: 20rpx;
-		margin: auto;
-		.user-info {
+}
+.user-wrap {
+	position: relative;
+	z-index: 10;
+	width: 690rpx;
+	height: 283rpx;
+	background: #ffffff;
+	box-shadow: 0px 4rpx 13rpx 0px rgba(229, 229, 229, 0.46);
+	border-radius: 20rpx;
+	padding: 34rpx 0 40rpx;
+	margin: auto;
+	.info-left {
+		padding-left: 34rpx;
+		.user-name {
+			display: flex;
+			align-items: center;
 			image {
 				width: 120rpx;
 				height: 120rpx;
+				border-radius: 50%;
 			}
-			.info-left {
-				.kpi {
-					text-align: center
-					202
-					00;
-					width: 241rpx;
-					line-height: 61rpx;
-					background: #F5EEDE;
-					border-radius: 30rpx 0px 0px 30rpx;
+			.user-font {
+				padding-left: 34rpx;
+				.name {
+					width: 250rpx;
+					font-size: 40rpx;
+					font-family: Source Han Sans CN;
+					font-weight: 400;
+					color: #333333;
+				}
+				.phone {
+					margin-top: 10rpx;
+					font-size: 20rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #999999;
 				}
 			}
 		}
+		.kpi {
+			background: #f5eede;
+			border-radius: 30rpx 0px 0px 30rpx;
+			padding: 18rpx 24rpx;
+			font-size: 26rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #c6914e;
+		}
+	}
+	.info-right {
+		display: flex;
+		align-items: center;
+		margin-top: 54rpx;
+		padding: 0 34rpx;
+		.iright-icon {
+			width: 32rpx;
+			height: 32rpx;
+		}
+		.iright-font {
+			margin-left: 12rpx;
+			font-size: 28rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #333333;
+		}
+	}
+}
+.user-set {
+	view {
+		flex-shrink: 0;
+	}
+	padding: 30rpx;
+	image {
+		height: 40rpx;
+		width: 40rpx;
+	}
+}
+.main-box {
+	margin: 20rpx auto 0;
+	width: 690rpx;
+	background: #ffffff;
+	box-shadow: 0px 4rpx 14rpx 0px rgba(229, 229, 229, 0.46);
+	border-radius: 20rpx;
+	.title {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 24rpx;
+		border-bottom: 1px solid #EEEEEE;
+		.title-left {
+			display: flex;
+			align-items: center;
+			.title-icon {
+				width: 32rpx;
+				height: 32rpx;
+			}
+			.title-font {
+				margin-left: 20rpx;
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #333333;
+			}
+		}
+		.title-right {
+			width: 14rpx;
+			height: 24rpx;
+		}
 	}
-	.user-set {
-		view {
-			flex-shrink: 0;
+	.main {
+		padding:50rpx 0 30rpx;
+		.item {
+			padding-bottom: 20rpx;
+			width: 33%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			.item-num {
+				font-size: 36rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #333333;
+			}
+			.item-font {
+				margin-top: 18rpx;
+				font-size: 22rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #666666;
+			}
 		}
-		padding: 30rpx;
-		image {
-			height: 40rpx;
-			width: 40rpx;
+		.oitem {
+			width: 25%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			.oitem-image {
+				height: 50rpx;
+				width: 48rpx;
+			}
+			.oitem-font {
+				margin-top: 20rpx;
+				font-size: 24rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #333333;
+			}
 		}
 	}
-</style>
+}
+</style>