前端小程序 sdy

pages/public/login_account_number.vue

@@ -4,6 +4,7 @@
 		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
 		<view class="wrapper">
 			<image style='width:38px;height:38px;margin-bottom:10px;' src='../../static/img/login/logo@2x.png'></image>
+
 			<h2>欢迎使用易粮易运</h2>
 			<view style='position:relative;width:100%;margin-top:50px;border-bottom:1px solid #E8E9ED;padding:10px;' class="flex">
 				<view style='width:15%;border-right:1px solid #E8E9ED;'>+86</view>

pages/user/user.vue

@@ -1,7 +1,7 @@
-<template>  
-    <view class="container">  
-	
-		<view class="user-section">
+<template>
+	<view class="container">
+
+		<!-- <view class="user-section">
 			<view class="bg">
 				<image class="bg_ware" src="https://moyv.top/wechat/images/bg_wave.gif"></image>
 			</view>
@@ -13,91 +13,78 @@
 				<view class="info-box">
 					<view @click="toLogin" class="username">{{hasLogin? (userInfo.userName || '点击修改昵称') : '立即登录' }}</view>
 				</view>
-				<!-- <view class="qr-wrap">
-					<text class="cuIcon-qrcode"  @click="qrClick(userInfo)"></text>
-				</view> -->
 			</view>
-			
+		</view> -->
+		<view class="indexUp flex">
+			<image src="../../static/img/myimg/YongHu@3x.png" class="headPortrait"></image>
+			<view class="personal">
+				<view class="information">用户名：</view>
+				<view class="information">手机号：</view>
+			</view>
+
 		</view>
-		<view 
-			class="cover-container"
-		>
-		<!-- :style="[{
-			transform: coverTransform,
-			transition: coverTransition
-		}]"
-		@touchstart="coverTouchstart"
-		@touchmove="coverTouchmove"
-		@touchend="coverTouchend" -->
-			<!-- <image class="arc" src="/static/arc.png"></image> -->
-<!-- 列表 -->
-						<view class="cu-list menu text-left solid-top">
-						<!-- <view class='cu-item' @click='myAccount'>
-							<view>
-								<text class="cuIcon-sponsor icon text-grey"></text>
-								<text class="text-grey">我的名头</text>
-							</view>
-							<view class = 'tip_text cuIcon-right' ></view>
-						</view> -->
-						<view class="cu-item" v-for="(item, index) in gridList" v-if="item.show" :key="index" @click="gridClick(item, index)" hover-class="common-hover" :hover-stay-time="50">
-							<view>
-								<text :class="item.icon" class="grid_icon icon text-grey"></text>
-                                <text class="text-grey">{{item.name}}</text>
-							</view>
-							<view>
-								<text v-if='item.num==4&&taskTip' class='badge_user'>{{taskTip}}</text>
-								<text v-if='item.num==2&&contractTip' class='badge_user'>{{contractTip}}</text>
-								<text class = 'tip_text cuIcon-right' ></text>
-							</view>
-							
-						</view>
-						
-						<!-- <view class='cu-item' @click='scanCode'>
+		<view class="cover-container">
+
+			<view class="cu-list menu text-left solid-top indexlow">
+
+				<view class="cu-item" v-for="(item, index) in gridList" v-if="item.show" :key="index"
+					@click="gridClick(item, index)" hover-class="common-hover" :hover-stay-time="50">
+					<view>
+						<text :class="item.icon" class="grid_icon icon text-grey"></text>
+						<text class="text-grey">{{item.name}}</text>
+					</view>
+					<view>
+						<text v-if='item.num==4&&taskTip' class='badge_user'>{{taskTip}}</text>
+						<text v-if='item.num==2&&contractTip' class='badge_user'>{{contractTip}}</text>
+						<text class='tip_text cuIcon-right'></text>
+					</view>
+				</view>
+
+				<!-- <view class='cu-item' @click='scanCode'>
 							<view>
 								<text class="cuIcon-scan icon text-grey"></text>
 							    <text class="text-grey">扫一扫</text>
 							</view>
 							<view class = 'tip_text cuIcon-right' ></view>
 						</view> -->
-						</view>
-						<view style='text-align:center;'>
-							<navigator url="/pages/sale/webview?can_share=false&url=https://liangxin.zthymaoyi.com/userAgreement.html" class="path" hover-class="navigator-hover">《服务协议》</navigator>|<navigator url="/pages/sale/webview?can_share=false&url=https://liangxin.zthymaoyi.com/screctAgreement.html"
-						 class="path" hover-class="navigator-hover">《隐私政策》</navigator>
-						</view>
+			</view>
+			<view style='text-align:center;'>
+				<navigator
+					url="/pages/sale/webview?can_share=false&url=https://liangxin.zthymaoyi.com/userAgreement.html"
+					class="path" hover-class="navigator-hover">《服务协议》</navigator>|<navigator
+					url="/pages/sale/webview?can_share=false&url=https://liangxin.zthymaoyi.com/screctAgreement.html"
+					class="path" hover-class="navigator-hover">《隐私政策》</navigator>
+			</view>
 		</view>
-		<neil-modal
-			:show="inputShow" 
-			@close="cancel" 
-			:style="{display:inputStatus}"
-			title="修改昵称" 
-			showCancel="true"
-			>
-			<input v-model="inputContent" style="margin:20upx;"  placeholder="请输入昵称" />
+		<neil-modal :show="inputShow" @close="cancel" :style="{display:inputStatus}" title="修改昵称" showCancel="true">
+			<input v-model="inputContent" style="margin:20upx;" placeholder="请输入昵称" />
 			<button class="margin:20upx;bg-green">
 				确认修改
 			</button>
-			
+
 		</neil-modal>
-    </view>  
-	
-</template>  
-<script>  
-    import dragButton from "@/components/drag-button/drag-button.vue";
+	</view>
+
+</template>
+<script>
+	import dragButton from "@/components/drag-button/drag-button.vue";
 	import neilModal from '@/components/neil-modal/neil-modal.vue';
-    import {  
-        mapState 
-    } from 'vuex';  
-	let startY = 0, moveY = 0, pageAtTop = true;
-    export default {
+	import {
+		mapState
+	} from 'vuex';
+	let startY = 0,
+		moveY = 0,
+		pageAtTop = true;
+	export default {
 		components: {
 			neilModal,
 			dragButton
 		},
-		data(){
+		data() {
 			return {
 				inputShow: false,
-				modalName:'',
-				mycarStyle:'',
+				modalName: '',
+				mycarStyle: '',
 				feild: undefined,
 				inputContent: '',
 				coverTransform: 'translateY(0px)',
@@ -105,136 +92,136 @@
 				moving: false,
 				footprintList: [],
 				isVip: false,
-				userInfoTmp:[],
-				inputStatus:'none',
-				carInfo:[],
+				userInfoTmp: [],
+				inputStatus: 'none',
+				carInfo: [],
 				gridList: [
-						// {
-						// 	num:0,
-						// 	name: '货源信息',
-						// 	icon:'cuIcon-apps',
-						// 	tips: 0,
-						// 	url:'/pages/tran/my_tran?TabCur=0',
-						// 	show:true
-						// },
-						// {
-						// 	num:1,
-						// 	name: '承运信息',
-						// 	icon:'cuIcon-calendar',
-						// 	tips: 0,
-						// 	url:'/pages/tran/my_tran?TabCur=1',
-						// 	show:true
-						// },
-						// {
-						// 	num:2,
-						// 	name: '我的合同',
-						// 	icon:'cuIcon-copy',
-						// 	tips: 0,
-						// 	url:'/pageB/contract/contract',
-						// 	show:true
-						// },
-						// {
-						// 	num:3,
-						// 	name: '消息列表',
-						// 	icon:'cuIcon-news',
-						// 	tips: 0,
-						// 	url:'/pages/user/message',
-						// 	show:true
-						// },
-						// {
-						// 	num:4,
-						// 	name: '任务中心',
-						// 	icon:'cuIcon-copy',
-						// 	tips: 0,
-						// 	url:`/pages/user/task`,
-						// 	show:true
-						// },
-						// {
-						// 	num:5,
-						// 	name: '我的车辆',
-						// 	icon:'cuIcon-deliver',
-						// 	tips: 0,
-						// 	url:'',
-						// 	show:true
-						// },
-						// {
-						// 	num:6,
-						// 	name: '联系我们',
-						// 	icon:'cuIcon-phone',
-						// 	tips: 0,
-						// 	url:'/pages/user/contact',
-						// 	show:true
-						// },
-						// {
+					// {
+					// 	num:0,
+					// 	name: '货源信息',
+					// 	icon:'cuIcon-apps',
+					// 	tips: 0,
+					// 	url:'/pages/tran/my_tran?TabCur=0',
+					// 	show:true
+					// },
+					// {
+					// 	num:1,
+					// 	name: '承运信息',
+					// 	icon:'cuIcon-calendar',
+					// 	tips: 0,
+					// 	url:'/pages/tran/my_tran?TabCur=1',
+					// 	show:true
+					// },
+					// {
+					// 	num:2,
+					// 	name: '我的合同',
+					// 	icon:'cuIcon-copy',
+					// 	tips: 0,
+					// 	url:'/pageB/contract/contract',
+					// 	show:true
+					// },
+					// {
+					// 	num:3,
+					// 	name: '消息列表',
+					// 	icon:'cuIcon-news',
+					// 	tips: 0,
+					// 	url:'/pages/user/message',
+					// 	show:true
+					// },
+					// {
+					// 	num:4,
+					// 	name: '任务中心',
+					// 	icon:'cuIcon-copy',
+					// 	tips: 0,
+					// 	url:`/pages/user/task`,
+					// 	show:true
+					// },
+					// {
+					// 	num:5,
+					// 	name: '我的车辆',
+					// 	icon:'cuIcon-deliver',
+					// 	tips: 0,
+					// 	url:'',
+					// 	show:true
+					// },
+					// {
+					// 	num:6,
+					// 	name: '联系我们',
+					// 	icon:'cuIcon-phone',
+					// 	tips: 0,
+					// 	url:'/pages/user/contact',
+					// 	show:true
+					// },
+					// {
+
+					{
+						num: 0,
+						name: '身份认证',
+						icon: 'cuIcon-apps',
+						tips: 0,
+						url: '/pages/attestation/index',
+						show: true
+					},
+					{
+						num: 1,
+						name: '我的合同',
+						icon: 'cuIcon-calendar',
+						tips: 0,
+						url: '/pageB/contract/contract',
+						show: true
+					},
+					{
+						num: 2,
+						name: '我的任务',
+						icon: 'cuIcon-copy',
+						tips: 0,
+						url: '/pages/task/my_task',
+						show: true
+					},
+					{
+						num: 3,
+						name: '我的发布',
+						icon: 'cuIcon-news',
+						tips: 0,
+						url: `/pages/release/release`,
+						show: true
+					},
+					{
+						num: 4,
+						name: '货运收发',
+						icon: 'cuIcon-copy',
+						tips: 0,
+						url: `/pages/user/task`,
+						show: true
+					},
 					
-						{
-							num:0,
-							name: '身份认证',
-							icon:'cuIcon-apps',
-							tips: 0,
-							url:'/pages/attestation/index',
-							show:true
-						},
-						{
-							num:1,
-							name: '我的合同',
-							icon:'cuIcon-calendar',
-							tips: 0,
-							url:'/pageB/contract/contract',
-							show:true
-						},
-						{
-							num:2,
-							name: '我的任务',
-							icon:'cuIcon-copy',
-							tips: 0,
-							url:'/pages/task/my_task',
-							show:true
-						},
-						{
-							num:3,
-							name: '我的发布',
-							icon:'cuIcon-news',
-							tips: 0,
-							url:`/pages/release/release`,
-							show:true
-						},
-						{
-							num:4,
-							name: '货运收发',
-							icon:'cuIcon-copy',
-							tips: 0,
-							url:`/pages/user/task`,
-							show:true
-						},
-						// {
-						// 	num:5,
-						// 	name: '退出登录',
-						// 	icon:'cuIcon-exit',
-						// 	tips: 0,
-						// 	url:'',
-						// 	show:true
-						// },
-					],
-					showTran:true,
-					companyId:1,
-					current: 4
+					// {
+					// 	num:5,
+					// 	name: '退出登录',
+					// 	icon:'cuIcon-exit',
+					// 	tips: 0,
+					// 	url:'',
+					// 	show:true
+					// },
+				],
+				showTran: true,
+				companyId: 1,
+				current: 4
 			}
 		},
-		
+
 		onShow() {
 			console.log(uni.getStorageSync('userInfo'))
 			uni.showTabBar()
 			this.loadData()
 		},
-		onLoad(){
-		},
+		onLoad() {},
 		// #ifndef MP
 		onNavigationBarButtonTap(e) {
 			const index = e.index;
 			if (index === 0) {
 				this.navTo('/pages/set/set');
-			}else if(index === 1){
+			} else if (index === 1) {
 				// #ifdef APP-PLUS
 				const pages = getCurrentPages();
 				const page = pages[pages.length - 1];
@@ -249,10 +236,10 @@
 			}
 		},
 		// #endif
-        computed: {
-			...mapState(['hasLogin','userInfo'])
+		computed: {
+			...mapState(['hasLogin', 'userInfo'])
 		},
-        methods: {
+		methods: {
 			zhibo() {
 				uni.navigateTo({
 					url: `/pageB/video/broadcast`
@@ -265,18 +252,16 @@
 			},
 			contactUs() {
 				const that = this
-				uni.makePhoneCall({	 	
-				 	// 手机号
-				    phoneNumber: '18241771147', 			
+				uni.makePhoneCall({
+					// 手机号
+					phoneNumber: '18241771147',
 					// 成功回调
-					success: (res) => {
-					},			
+					success: (res) => {},
 					// 失败回调
-					fail: (res) => {
-					}					
-				  });
+					fail: (res) => {}
+				});
 			},
-			loadData(){
+			loadData() {
 				// const that = this
 				// if(uni.getStorageSync("PageCur")){
 				// 	that.PageCur = uni.getStorageSync("PageCur");
@@ -295,65 +280,62 @@
 				// 	uni.setStorageSync("task", data.task);
 				// 	uni.setStorageSync("contract", data.contract);
 				// 	uni.setStorageSync('showTran', data.showTran);
-					
+
 				// 	that.showTran = data.showTran
 				// 	that.gridList[4].tips = data.task
 				// 	that.gridList[2].tips = data.contract
 				// 	that.companyId = data.companyId
 				// 	uni.hideLoading()
-				
+
 				// })
 			},
-			gridClick (item, index) {
+			gridClick(item, index) {
 				var that = this
-				if(item.name == "退出登录"){
+				if (item.name == "退出登录") {
 					this.logout()
 					return;
-				}
-				else if(item.name == "联系我们"){
+				} else if (item.name == "联系我们") {
 					//#ifdef MP
-						this.inputShow = true
-						this.inputStatus = 'inline'
-						this.feild = "nickname"
-						this.inputContent = ''
+					this.inputShow = true
+					this.inputStatus = 'inline'
+					this.feild = "nickname"
+					this.inputContent = ''
 					//#endif
 					//#ifdef APP-PLUS
-						this.contactUs()
+					this.contactUs()
 					//#endif
 					return;
-				}
-				else if(item.name == '我的车辆'){
+				} else if (item.name == '我的车辆') {
 					const that = this
 					uni.showLoading({
 						title: '正在加载',
-						mask:true
+						mask: true
 					})
 					that.$api.request('tran', 'getMyCarList', failres => {
 						that.$api.msg(failres.errmsg)
 						uni.hideLoading()
 					}).then(res => {
 						that.carInfo = res.data
-						if(that.carInfo.length == 0){
+						if (that.carInfo.length == 0) {
 							that.$api.msg('暂无车辆信息')
-						}
-						else{
+						} else {
 							var height = that.carInfo.length * 100
 							var width = 500
-							that.mycarStyle = "height:"+height+"rpx;width:" + width+"rpx"
+							that.mycarStyle = "height:" + height + "rpx;width:" + width + "rpx"
 							that.modalName = 'MycarModal'
 						}
-						
+
 						uni.hideLoading()
 					})
-					
+
 					return;
 				}
-				if(item.url){
+				if (item.url) {
 					uni.navigateTo({
-						url: item.url+`?companyId=${that.companyId}`
+						url: item.url + `?companyId=${that.companyId}`
 					})
 				}
-				
+
 			},
 			toLogin() {
 				if (!this.hasLogin) {
@@ -387,7 +369,7 @@
 				this.inputStatus = 'none'
 				this.genderShow = false
 			},
-			myAccount(){
+			myAccount() {
 				uni.navigateTo({
 					url: `/pageA/pages/contract`
 				})
@@ -413,70 +395,88 @@
 			 * 统一跳转接口,拦截未登录路由
 			 * navigator标签现在默认没有转场动画，所以用view
 			 */
-			navTo(url){
-				if(!this.hasLogin){
+			navTo(url) {
+				if (!this.hasLogin) {
 					url = '/pages/public/login';
 				}
-				uni.navigateTo({  
+				uni.navigateTo({
 					url
 				})
-			}, 
-			mycarClick(carNo){
+			},
+			mycarClick(carNo) {
 				this.modalName = null
 				uni.navigateTo({
 					url: `/pageB/car/mycar_detail?carNo=${carNo}`
 				})
-				
+
 			},
-			qrClick(userInfo){
+			qrClick(userInfo) {
 				this.modalName = null
 				uni.navigateTo({
 					url: `/pages/user/qr`
 				})
-				
+
 			},
-			scanCode(){
+			scanCode() {
 				uni.scanCode({
-				    success: function (res) {
+					success: function(res) {
 						uni.navigateTo({
 							url: res.result
 						})
-				    }
+					}
 				})
 			},
 			hideModal(e) {
 				this.modalName = null
 			},
-        }  
-    }  
-</script>  
+		}
+	}
+</script>
 <style lang='scss' scoped>
+	.container {
+		padding-top: 85px;
+		background-color: #F5F6FA;
+		position: relative;
+		width: 100vw;
+		height: 100vh;
+		overflow: hidden;
+		background: url('~@/static/img/login/bg.png');
+		background-size: 100% 100%;
+		margin: 0 auto;
+	}
+
 	.cu-tag.badge {
-	    right: 26rpx;
+		right: 26rpx;
 	}
+
 	.path {
 		color: #007aff;
 		display: inline-block;
 		text-align: center;
 	}
-	.icon{
-		margin-right:10rpx;
+
+	.icon {
+		margin-right: 10rpx;
 	}
-	.portrait-box{
-		margin-top:20rpx;
+
+	.portrait-box {
+		margin-top: 20rpx;
 	}
-	.qr-wrap{
-		margin-top:20upx;
-		color:#fff;
+
+	.qr-wrap {
+		margin-top: 20upx;
+		color: #fff;
 		font-size: 32rpx;
 	}
-	.cu-list{
+
+	.cu-list {
 		/* height: 483rpx;
 		overflow-y: scroll; */
 		margin-top: 42rpx;
-		margin-bottom:80rpx;
+		margin-bottom: 80rpx;
 	}
-	.badge_user{
+
+	.badge_user {
 		color: #fff;
 		background-color: #dc3545;
 		display: inline-block;
@@ -488,48 +488,56 @@
 		white-space: nowrap;
 		vertical-align: top;
 		border-radius: 50%;
-		transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+		transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
 	}
+
 	@keyframes move_wave {
-	    0% {
-	        transform: translateX(0) translateZ(0) scaleY(1)
-	    }
-	    50% {
-	        transform: translateX(-25%) translateZ(0) scaleY(0.55)
-	    }
-	    100% {
-	        transform: translateX(-50%) translateZ(0) scaleY(1)
-	    }
+		0% {
+			transform: translateX(0) translateZ(0) scaleY(1)
+		}
+
+		50% {
+			transform: translateX(-25%) translateZ(0) scaleY(0.55)
+		}
+
+		100% {
+			transform: translateX(-50%) translateZ(0) scaleY(1)
+		}
 	}
+
 	.bg {
 		position: relative;
-		height:300rpx;
+		height: 300rpx;
 		/* background: linear-gradient(to bottom, #56ccf2, #2f80ed); */
 		/*background: linear-gradient(to bottom, #0be9fe, #4bb0fe); */
-	    background: linear-gradient(to bottom, #d5f8ff, #56ccf2);
-		
+		background: linear-gradient(to bottom, #d5f8ff, #56ccf2);
+
 	}
+
 	.bg_ware {
-	  position: absolute;
-	  left: 0;
-	  bottom: -2rpx;
-	  width: 100%;
-	  mix-blend-mode: screen;
-	  height: 224rpx;
+		position: absolute;
+		left: 0;
+		bottom: -2rpx;
+		width: 100%;
+		mix-blend-mode: screen;
+		height: 224rpx;
 	}
+
 	%flex-center {
-	 display:flex;
-	 flex-direction: column;
-	 justify-content: center;
-	 align-items: 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: 10upx;
+		display: flex;
+		justify-content: space-around;
+		align-content: center;
+		background: #fff;
+		border-radius: 10upx;
 	}
+
 	.grid-item-box {
 		flex: 1;
 		/* position: relative;
@@ -542,6 +550,7 @@
 		justify-content: center;
 		padding: 15px 0;
 	}
+
 	.image {
 		width: 80rpx;
 		height: 80rpx;
@@ -551,12 +560,14 @@
 		font-size: 26rpx;
 		margin-top: 10rpx;
 	}
-	.user-section{
+
+	.user-section {
 		height: 520upx;
 		padding: 100upx 30upx 0;
-		position:relative;
-		.bg{
-			position:absolute;
+		position: relative;
+
+		.bg {
+			position: absolute;
 			left: 0;
 			top: 0;
 			width: 100%;
@@ -567,44 +578,49 @@
 			/* opacity: .7; */
 		}
 	}
-	.user-info-box{
+
+	.user-info-box {
 		height: 180upx;
 		/* display:flex; */
 		/* align-items:center; */
-		text-align:center;
-		position:relative;
+		text-align: center;
+		position: relative;
 		z-index: 1;
-		.portrait{
+
+		.portrait {
 			width: 130upx;
 			height: 130upx;
-			border:5upx solid #fff;
+			border: 5upx solid #fff;
 			border-radius: 50%;
 		}
-		.username{
+
+		.username {
 			font-size: $font-lg + 3upx;
 			color: #fff;
 			margin-top: 20upx;
 		}
 	}
 
-	.vip-card-box{
-		display:flex;
+	.vip-card-box {
+		display: flex;
 		flex-direction: column;
 		color: #f7d680;
 		height: 240upx;
-		background: linear-gradient(left, rgba(0,0,0,.7), rgba(0,0,0,.8));
+		background: linear-gradient(left, rgba(0, 0, 0, .7), rgba(0, 0, 0, .8));
 		border-radius: 16upx 16upx 0 0;
 		overflow: hidden;
 		position: relative;
 		padding: 20upx 24upx;
-		.card-bg{
-			position:absolute;
+
+		.card-bg {
+			position: absolute;
 			top: 20upx;
 			right: 0;
 			width: 380upx;
 			height: 260upx;
 		}
-		.b-btn{
+
+		.b-btn {
 			position: absolute;
 			right: 20upx;
 			top: 16upx;
@@ -618,51 +634,66 @@
 			background: linear-gradient(left, #f9e6af, #ffd465);
 			z-index: 1;
 		}
-		.tit{
+
+		.tit {
 			font-size: $font-base+2upx;
 			color: #f7d680;
 			margin-bottom: 28upx;
-			.yticon{
+
+			.yticon {
 				color: #f6e5a3;
 				margin-right: 16upx;
 			}
 		}
-		.e-b{
+
+		.e-b {
 			font-size: $font-sm;
 			color: #d8cba9;
 			margin-top: 10upx;
 		}
 	}
-	.cover-container{
+
+	.cover-container {
+		padding: 1px 10px ;
 		padding-bottom: 200upx;
-		.arc{
-			position:absolute;
+		
+	   background-color: #F5F6FA;
+	/* 	border-radius: 20px; */
+		margin-top: 50px;
+
+		.arc {
+			position: absolute;
 			left: 0;
 			top: -34upx;
 			width: 100%;
 			height: 36upx;
 		}
 	}
-	.tj-sction{
+
+	.tj-sction {
 		@extend %section;
-		.tj-item{
+
+		.tj-item {
 			@extend %flex-center;
 			flex-direction: column;
 			height: 140upx;
 			font-size: $font-sm;
 			color: #75787d;
 		}
-		.num{
+
+		.num {
 			font-size: $font-lg;
 			color: $font-color-dark;
 			margin-bottom: 8upx;
 		}
 	}
-	.order-section{
+
+	.order-section {
 		@extend %section;
 		padding: 28upx 0;
 		margin-top: 20upx;
-		.order-item{
+
+		.order-item {
 			@extend %flex-center;
 			width: 120upx;
 			height: 120upx;
@@ -670,39 +701,46 @@
 			font-size: $font-sm;
 			color: $font-color-dark;
 		}
-		.yticon{
+
+		.yticon {
 			font-size: 48upx;
 			margin-bottom: 18upx;
 			color: #fa436a;
 		}
-		.icon-shouhoutuikuan{
-			font-size:44upx;
+
+		.icon-shouhoutuikuan {
+			font-size: 44upx;
 		}
 	}
-	.history-section{
+
+	.history-section {
 		padding: 30upx 0 0;
 		margin-top: 20upx;
 		background: #fff;
-		border-radius:10upx;
-		.sec-header{
-			display:flex;
+		border-radius: 10upx;
+
+		.sec-header {
+			display: flex;
 			align-items: center;
 			font-size: $font-base;
 			color: $font-color-dark;
 			line-height: 40upx;
 			margin-left: 30upx;
-			.yticon{
+
+			.yticon {
 				font-size: 44upx;
 				color: #5eba8f;
 				margin-right: 16upx;
 				line-height: 40upx;
 			}
 		}
-		.h-list{
+
+		.h-list {
 			white-space: nowrap;
 			padding: 30upx 30upx 0;
-			image{
-				display:inline-block;
+
+			image {
+				display: inline-block;
 				width: 160upx;
 				height: 160upx;
 				margin-right: 20upx;
@@ -710,44 +748,73 @@
 			}
 		}
 	}
-	.grid{
+
+	.grid {
 		display: flex;
 		align-items: center;
 		flex-wrap: wrap;
+
 		/* border-top: 2upx solid rgba(172,172,172,.2); */
-		.grid-item-3{
+		.grid-item-3 {
 			box-sizing: border-box;
 			width: calc(100% / 3);
-			border-bottom: 2upx solid rgba(172,172,172,.2);
-			border-right: 2upx solid rgba(172,172,172,.2);
+			border-bottom: 2upx solid rgba(172, 172, 172, .2);
+			border-right: 2upx solid rgba(172, 172, 172, .2);
 			text-align: center;
 			padding: 40upx 0;
 			position: relative;
+
 			/* view{
 				font-size: $font-sm;
 				margin-top: 16upx;
 				color: $font-color-dark;
 			} */
-			.grid_icon{
+			.grid_icon {
 				font-size: 48upx;
 				margin-bottom: 18upx;
 				color: #fa436a;
 			}
-			.tip_text{
+
+			.tip_text {
 				display: block;
 				padding: 4upx 8upx;
 				text-align: center;
 				border-radius: 36upx;
 				font-size: 24upx;
 				background-color: #fa436a;
-				color: rgba(255,255,255,1);
+				color: rgba(255, 255, 255, 1);
 				position: absolute;
 				right: 6upx;
 				top: 6upx;
 			}
 		}
-		.grid-item-3:nth-child(3n + 3),.grid-item-4:nth-child(4n + 4){
+
+		.grid-item-3:nth-child(3n + 3),
+		.grid-item-4:nth-child(4n + 4) {
 			border-right: none;
 		}
 	}
-</style>
+
+	.headPortrait {
+		width: 75px;
+		height: 75px;
+		border-radius: 40px;
+		margin-left: 20px;
+		border: 2px solid #ffffff;
+	}
+
+	.personal {
+		margin-top: 10px;
+		margin-left: 20px;
+	}
+
+	.information {
+		font-size: 15px;
+		font-weight: 600;
+		height: 20px;
+	}
+	.indexlow{
+		/* margin-top: 30px; */
+		border-radius: 20px;
+	}
+</style>