feat: 优化个人中心与设备修改页面，新增资产与样式调整

1.  新增个人中心背景图、退出登录图标等静态资源
2.  重构个人中心页面布局，使用自定义导航栏与新UI样式
3.  完善设备修改页面交互与样式，优化空值处理与权限判断
4.  修复选择器文本为空时的显示问题，新增表格列超出隐藏样式

pages.json

@@ -202,6 +202,7 @@
       "style": {
         "navigationBarTitleText": "个人中心",
         "enablePullDownRefresh": false,
+				"navigationStyle": "custom",
         "navigationBarBackgroundColor": "#00B075"
       }
     },

pages/cb/cbd/equip-set/new-analyse.vue

@@ -21,7 +21,7 @@
 				<u-picker v-model="pickertfone" mode="selector" @confirm="confirmFun" :default-selector="[yserindex]"
 					:range="yearlist"></u-picker>
 				<view class="schedule" @click="pickertfworm=!pickertfworm">
-					<p class="schedule_value">{{wormvalue}}</p>
+					<p class="schedule_value">{{wormvalue || ''}}</p>
 					<!-- {{titletext[indexone]}} -->
 					<p class="schedule_icon">
 						<u-icon name="arrow-down"></u-icon>

pages/cbd/components/deviceData.vue

@@ -1102,7 +1102,7 @@ export default {
 
       /* 固定列 */
       .fixed-column {
-        width: 240rpx;
+        width: 250rpx;
         position: relative;
         z-index: 2;
         background: #FFFFFF;
@@ -1140,6 +1140,10 @@ export default {
               color: #042118;
               text-align: left;
               padding-left: 0;
+              // 超出隐藏
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
             }
           }
         }

pages/equipList2/seabox/modification copy.vue

@@ -0,0 +1,274 @@
+<template>
+	<view>
+		<view class="status_bar"></view>
+		<view class="" style="position: relative;top: 40px;">
+			<view style="position: fixed;z-index: 100;">
+				<uni-nav-bar @clickLeft="clickLeft" left-icon="back" title="修改名称"></uni-nav-bar>
+			</view>
+			<view class="mod">
+				<view class="mod_name">
+					<p>
+					<text style="color: #ff0000;">*</text>设备名称</p>
+					<input type="text" v-model="moddata.device_name" :class="quanxian.namealter?'namebg':''" />
+				</view>
+				<view class="mod_id">
+					<p>设备ID</p>
+					<input type="text" :value="moddata.imei || moddata.device_id || moddata.id" disabled />
+				</view>
+				<view class="mod_user">
+					<p>适配用户</p>
+					<input type="text" :value="moddata.real_name==''?'无':moddata.real_name" disabled />
+				</view>
+				<view class="mod_city">
+					<view style="width: 90%;">
+						<p><span style="color: #ff0000;" v-if="quanxian.cityalter">*</span>设备位置</p>
+						<input type="text" :value="city" disabled />
+					</view>
+					<!-- <u-icon name="arrow-right"></u-icon> -->
+				</view>
+				<view class="mod_time">
+					<p>设备添加时间</p>
+					<input type="text" :value="moddata.addtime|timeFormat()" disabled />
+				</view>
+				<p style="width: 90%;margin: 0 auto;text-align: right;color: #06B535;"><span style="color: #ff0000;">*</span>为可修改</p>
+				<view class="sub" @click="btn">
+					提 交
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				moddata: [],
+				city: "",
+				selectcityTF: false,
+				quanxian:{
+					namealter:false,
+					cityalter:false,
+					infoalter:false
+				}
+			}
+		},
+		methods: {
+			async eqlistcity(lat, lng) { //修改设备定位
+				const res = await this.$myRequest({
+					url: '/api/api_gateway?method=forecast.worm_lamp.revise_device',
+					data: {
+						device_id: this.moddata.imei || this.moddata.device_id || this.moddata.id,
+						lat: lat,
+						lng: lng
+					}
+				})
+				console.log(res)
+				if (res==false) {
+					uni.showToast({
+						title: '修改地址失败!',
+						icon: "none"
+					});
+				}else{
+					uni.showToast({
+						title: '修改地址成功!',
+						icon: "none"
+					});
+				}
+			},
+			async eqlistname(lat, lng) { //修改设备名称
+				const res = await this.$myRequest({
+					url: '/api/api_gateway?method=forecast.worm_lamp.revise_device',
+					data: {
+						device_id: this.moddata.imei || this.moddata.device_id || this.moddata.id,
+						device_name: this.moddata.device_name,
+						lat: lat,
+						lng: lng,
+					}
+				})
+				console.log(res)
+				if (res==false) {
+					uni.showToast({
+						title: '修改名称失败!',
+						icon: "none"
+					});
+				}else{
+					uni.showToast({
+						title: '修改名称成功!',
+						icon: "none"
+					});
+					uni.removeStorage({
+						key: "location"
+					})
+					this.clickLeft()
+				}
+			},
+			async eqlistuser(id, imei,device_model) { //获取设备信息
+				const res = await this.$myRequest({
+					url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
+					data: {
+						device_type_id: id,
+						device_id: imei,
+						device_model: device_model,
+					}
+				})
+				this.moddata = res.data[0]
+				console.log(res)
+				this.selectaddress(this.moddata.lng, this.moddata.lat)
+			},
+			async xyeqlistuser(imei) { //获取设备信息
+				const res = await this.$myRequest({
+					url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_list',
+					data: {
+						device_id: imei,
+					}
+				})
+				console.log(res)
+				this.moddata = res.data[0]
+				this.selectaddress(this.moddata.lng, this.moddata.lat)
+			},
+			btn() {
+				// this.eqlistcity(this.moddata.lat, this.moddata.lng)
+				this.eqlistname(this.moddata.lat, this.moddata.lng)
+			},
+			clickLeft() {
+				uni.navigateBack({
+					delta:1,
+					success:()=>{
+						//告知上一页刷新数据
+						uni.$emit('refreshData')
+					}
+				})
+			},
+			amendcity() { //修改设备地址
+				this.selectcityTF = true
+				uni.navigateTo({
+					url: "/pages/fourBase/city"
+				})
+			},
+			selectaddress(lng, lat) { //获取分布位置
+				uni.request({
+					type: "GET",
+					url: "https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=" + lng + "," + lat +
+						"&key=27273b81090f78759e4057f94474516f&radius=1000&extensions=all",
+					dataType: "json",
+					complete: ress => {
+						// console.log(ress)
+						if (ress.data.regeocode.formatted_address.length == 0) {
+							this.city = "--"
+						} else {
+							this.city = ress.data.regeocode.formatted_address
+						}
+					}
+				});
+			},
+		},
+		onLoad(option) {
+			console.log(option)
+			if(option.id==10){
+				const data = JSON.parse(option.data)
+				this.xyeqlistuser(data.device_id || data.id)
+			}else{
+				const data = JSON.parse(option.data)
+				this.eqlistuser(data.type_id, data.imei || data.device_id || data.id,data.device_model)
+			}
+			uni.getStorage({
+				key:"jurisdiction",
+				success:(res)=>{
+					console.log(JSON.parse(res.data))
+					if(!res?.data){
+						return;
+					}
+					let items = JSON.parse(res.data).filter((item)=>{
+						return item.purview_name == "设备管理"
+					})
+					let items2 = items[0].children.filter((item)=>{
+						return item.purview_name == "设备列表"
+					})
+					this.quanxian.namealter = items2[0].children.some((item)=>{
+						return item.purview_name == "修改名称"
+					})
+					this.quanxian.cityalter = items2[0].children.some((item)=>{
+						return item.purview_name == "添加位置"
+					})
+					this.quanxian.infoalter = items2[0].children.some((item)=>{
+						return item.purview_name == "修改名称" || item.purview_name == "添加位置"
+					})
+				},
+			})
+		},
+		onShow(){
+			uni.getStorage({
+				key: "location",
+				success: (res) => {
+					// console.log(res);
+					this.moddata.lat = res.data[1]
+					this.moddata.lng = res.data[0]
+					this.selectaddress(this.moddata.lng, this.moddata.lat)
+				}
+			})
+			
+		}
+	}
+</script>
+
+<style lang="scss">
+	page{
+		background-color: #FAFAFA;
+	}
+	.mod {
+		width: 100%;
+		position: absolute;
+		top: 44px;
+		.mod_name,
+		.mod_id,
+		.mod_user,
+		.mod_time {
+			width: 90%;
+			margin: 30rpx auto;
+			display: flex;
+			justify-content: space-between;
+			background-color: #FFFFFF;
+			padding: 20rpx 10rpx;
+			color: #57C77A;
+			line-height: 50rpx;
+			.namebg{
+				background-color: #FAFAFA;
+			}
+			input {
+				text-align: right;
+				font-size: 28rpx;
+				padding: 10rpx;
+			}
+		}
+		.mod_city{
+			width: 90%;
+			margin: 30rpx auto;
+			background-color: #FFFFFF;
+			padding: 20rpx 10rpx;
+			color: #57C77A;
+			line-height: 50rpx;
+			display: flex;
+			justify-content: space-between;
+			.namebg{
+				background-color: #FAFAFA;
+			}
+			input {
+				width: 90%;
+				font-size: 28rpx;
+				padding: 10rpx;
+			}
+		}
+	}
+
+	.sub {
+		width: 90%;
+		margin: 30rpx auto;
+		text-align: center;
+		height: 70rpx;
+		line-height: 70rpx;
+		background-color: #57C77A;
+		border-radius: 35rpx;
+		color: #FFFFFF;
+	}
+</style>

pages/equipList2/seabox/modification.vue

@@ -1,41 +1,60 @@
 <template>
-	<view>
-		<view class="status_bar"></view>
-		<view class="" style="position: relative;top: 40px;">
-			<view style="position: fixed;z-index: 100;">
-				<uni-nav-bar @clickLeft="clickLeft" left-icon="back" title="修改名称"></uni-nav-bar>
+	<view class="modification">
+		<view class="modification__header">
+      <u-icon
+        size="36"
+        class="arrow-left"
+        name="arrow-left"
+        @click="handleBack"
+      ></u-icon>
+			信息修改
+    </view>
+		<view class="modification__content">
+			<view class="modification__content__item">
+				<view class="modification__content__item__title">
+					设备名称
+				</view>
+				<view class="modification__content__item__input">
+					<u-input v-model="moddata.device_name" placeholder="请输入设备名称" clearable class="input" :custom-style="{ 'text-align': 'right' }"></u-input>
+				</view>
 			</view>
-			<view class="mod">
-				<view class="mod_name">
-					<p>
-					<text style="color: #ff0000;">*</text>设备名称</p>
-					<input type="text" v-model="moddata.device_name" :class="quanxian.namealter?'namebg':''" />
+			<view class="modification__content__item">
+				<view class="modification__content__item__title">
+					设备ID
 				</view>
-				<view class="mod_id">
-					<p>设备ID</p>
-					<input type="text" :value="moddata.imei || moddata.device_id || moddata.id" disabled />
+				<view class="modification__content__item__input">
+					<u-input disabled :value="moddata.imei || moddata.device_id || moddata.id" placeholder="请输入设备ID" clearable class="input" :custom-style="{ 'text-align': 'right' }"></u-input>
 				</view>
-				<view class="mod_user">
-					<p>适配用户</p>
-					<input type="text" :value="moddata.real_name==''?'无':moddata.real_name" disabled />
+			</view>
+			<view class="modification__content__item">
+				<view class="modification__content__item__title">
+					适配用户
 				</view>
-				<view class="mod_city">
-					<view style="width: 90%;">
-						<p><span style="color: #ff0000;" v-if="quanxian.cityalter">*</span>设备位置</p>
-						<input type="text" :value="city" disabled />
-					</view>
-					<!-- <u-icon name="arrow-right"></u-icon> -->
+				<view class="modification__content__item__input">
+					<u-input disabled :value="moddata.real_name || '无'" placeholder="请输入用户名" clearable class="input" :custom-style="{ 'text-align': 'right' }"></u-input>
 				</view>
-				<view class="mod_time">
-					<p>设备添加时间</p>
-					<input type="text" :value="moddata.addtime|timeFormat()" disabled />
+			</view>
+			<view class="modification__content__item">
+				<view class="modification__content__item__title">
+					设备位置
 				</view>
-				<p style="width: 90%;margin: 0 auto;text-align: right;color: #06B535;"><span style="color: #ff0000;">*</span>为可修改</p>
-				<view class="sub" @click="btn">
-					提 交
+				<view class="modification__content__item__input" @click.native="amendcity">
+					<view class="location-city">{{ city }}</view>
+					<u-icon name="arrow-right"></u-icon>
+				</view>
+			</view>
+			<view class="modification__content__item">
+				<view class="modification__content__item__title">
+					设备添加时间
+				</view>
+				<view class="modification__content__item__input">
+					<u-input disabled :value="moddata.addtime | timeFormat()" placeholder="请输入设备添加时间" clearable class="input" :custom-style="{ 'text-align': 'right' }"></u-input>
 				</view>
 			</view>
 		</view>
+		<view class="sub" @click="btn">
+			提 交
+		</view>
 	</view>
 </template>
 
@@ -46,6 +65,8 @@
 				moddata: [],
 				city: "",
 				selectcityTF: false,
+				locationCity: "",
+				locationName: "",
 				quanxian:{
 					namealter:false,
 					cityalter:false,
@@ -54,7 +75,12 @@
 			}
 		},
 		methods: {
-			async eqlistcity(lat, lng) { //修改设备定位
+			handleBack() {
+				uni.navigateBack({
+					delta: 1
+				});
+			},
+			async eqlistcity(lat, lng) {
 				const res = await this.$myRequest({
 					url: '/api/api_gateway?method=forecast.worm_lamp.revise_device',
 					data: {
@@ -63,8 +89,7 @@
 						lng: lng
 					}
 				})
-				console.log(res)
-				if (res==false) {
+				if (!res) {
 					uni.showToast({
 						title: '修改地址失败!',
 						icon: "none"
@@ -76,7 +101,7 @@
 					});
 				}
 			},
-			async eqlistname(lat, lng) { //修改设备名称
+			async eqlistname(lat, lng) {
 				const res = await this.$myRequest({
 					url: '/api/api_gateway?method=forecast.worm_lamp.revise_device',
 					data: {
@@ -86,8 +111,7 @@
 						lng: lng,
 					}
 				})
-				console.log(res)
-				if (res==false) {
+				if (!res) {
 					uni.showToast({
 						title: '修改名称失败!',
 						icon: "none"
@@ -103,7 +127,7 @@
 					this.clickLeft()
 				}
 			},
-			async eqlistuser(id, imei,device_model) { //获取设备信息
+			async eqlistuser(id, imei,device_model) {
 				const res = await this.$myRequest({
 					url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
 					data: {
@@ -113,39 +137,66 @@
 					}
 				})
 				this.moddata = res.data[0]
-				console.log(res)
 				this.selectaddress(this.moddata.lng, this.moddata.lat)
 			},
-			async xyeqlistuser(imei) { //获取设备信息
+			async xyeqlistuser(imei) {
 				const res = await this.$myRequest({
 					url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_list',
 					data: {
 						device_id: imei,
 					}
 				})
-				console.log(res)
 				this.moddata = res.data[0]
 				this.selectaddress(this.moddata.lng, this.moddata.lat)
 			},
 			btn() {
-				// this.eqlistcity(this.moddata.lat, this.moddata.lng)
 				this.eqlistname(this.moddata.lat, this.moddata.lng)
 			},
 			clickLeft() {
 				uni.navigateBack({
 					delta:1,
 					success:()=>{
-						//告知上一页刷新数据
 						uni.$emit('refreshData')
 					}
 				})
 			},
-			amendcity() { //修改设备地址
-				this.selectcityTF = true
-				uni.navigateTo({
-					url: "/pages/fourBase/city"
+			getCity({city}){
+				if(city.city == undefined){
+					var add = city
+				}else if(city.city != undefined){
+					var add = city.city
+				}
+				let pages = getCurrentPages()
+				let prevpage = pages[pages.length - 2]
+				prevpage.$vm.city = add
+				uni.navigateBack({
+					delta: 1
 				})
 			},
+			selectedCity(city){
+				this.getCity && this.getCity({city});
+			},
+			location(){
+				let That = this;
+				uni.chooseLocation({
+				  success(res){
+						uni.setStorage({
+							key:"location",
+							data:[res.longitude,res.latitude]
+						})
+						That.city = res && res.address;
+						That.locationName = res && res.name;
+						That.selectedCity({city:That.city,name:That.locationName});
+				  },
+					fail(){
+						That.locationCity = "定位失败，请点击重试";
+						That.locationName = "";
+					}
+				});
+			},
+			amendcity() {
+				this.location()
+			},
 			selectaddress(lng, lat) { //获取分布位置
 				uni.request({
 					type: "GET",
@@ -153,7 +204,6 @@
 						"&key=27273b81090f78759e4057f94474516f&radius=1000&extensions=all",
 					dataType: "json",
 					complete: ress => {
-						// console.log(ress)
 						if (ress.data.regeocode.formatted_address.length == 0) {
 							this.city = "--"
 						} else {
@@ -164,8 +214,7 @@
 			},
 		},
 		onLoad(option) {
-			console.log(option)
-			if(option.id==10){
+			if(option.id == 10){
 				const data = JSON.parse(option.data)
 				this.xyeqlistuser(data.device_id || data.id)
 			}else{
@@ -175,23 +224,22 @@
 			uni.getStorage({
 				key:"jurisdiction",
 				success:(res)=>{
-					console.log(JSON.parse(res.data))
 					if(!res?.data){
 						return;
 					}
 					let items = JSON.parse(res.data).filter((item)=>{
 						return item.purview_name == "设备管理"
 					})
-					let items2 = items[0].children.filter((item)=>{
+					let items2 = items[0]?.children?.filter((item)=>{
 						return item.purview_name == "设备列表"
 					})
-					this.quanxian.namealter = items2[0].children.some((item)=>{
+					this.quanxian.namealter = items2[0]?.children?.some((item)=>{
 						return item.purview_name == "修改名称"
 					})
-					this.quanxian.cityalter = items2[0].children.some((item)=>{
+					this.quanxian.cityalter = items2[0]?.children?.some((item)=>{
 						return item.purview_name == "添加位置"
 					})
-					this.quanxian.infoalter = items2[0].children.some((item)=>{
+					this.quanxian.infoalter = items2[0]?.children?.some((item)=>{
 						return item.purview_name == "修改名称" || item.purview_name == "添加位置"
 					})
 				},
@@ -201,66 +249,84 @@
 			uni.getStorage({
 				key: "location",
 				success: (res) => {
-					// console.log(res);
 					this.moddata.lat = res.data[1]
 					this.moddata.lng = res.data[0]
 					this.selectaddress(this.moddata.lng, this.moddata.lat)
 				}
 			})
-			
 		}
 	}
 </script>
 
 <style lang="scss">
 	page{
-		background-color: #FAFAFA;
+		background: linear-gradient(180deg, #ffffff00 0%, #F5F6FA 23.64%, #F5F6FA 100%), linear-gradient(102deg, #BFEADD 6.77%, #B8F1E7 40.15%, #B9EEF5 84.02%);
 	}
-	.mod {
+	.modification{
+		display: flex;
 		width: 100%;
-		position: absolute;
-		top: 44px;
-		.mod_name,
-		.mod_id,
-		.mod_user,
-		.mod_time {
-			width: 90%;
-			margin: 30rpx auto;
-			display: flex;
-			justify-content: space-between;
-			background-color: #FFFFFF;
-			padding: 20rpx 10rpx;
-			color: #57C77A;
-			line-height: 50rpx;
-			.namebg{
-				background-color: #FAFAFA;
-			}
-			input {
-				text-align: right;
-				font-size: 28rpx;
-				padding: 10rpx;
+		height: calc(100vh - 112rpx);
+		padding-top: 112rpx;
+		flex-direction: column;
+		align-items: center;
+		overflow-y: scroll;
+		&__header{
+			width: 100%;
+			font-size: 28rpx;
+			color: #042118;
+			font-family: 'Source Han Sans CN VF';
+			font-weight: 700;
+			position: relative;
+			text-align: center;
+			.arrow-left {
+				position: absolute;
+				left: 32rpx;
+				margin-right: 12rpx;
 			}
 		}
-		.mod_city{
-			width: 90%;
-			margin: 30rpx auto;
-			background-color: #FFFFFF;
-			padding: 20rpx 10rpx;
-			color: #57C77A;
-			line-height: 50rpx;
+		&__content{
+			width: calc(100% - 64rpx);
+			margin-top: 32rpx;
+			background: #ffffff;
+			border-radius: 16rpx;
+			padding: 32rpx;
+			box-sizing: border-box;
+		}
+		&__content__item{
 			display: flex;
+			width: 100%;
+			margin-bottom: 32rpx;
 			justify-content: space-between;
-			.namebg{
-				background-color: #FAFAFA;
-			}
-			input {
-				width: 90%;
+			align-items: center;
+		}
+		&__content__item__title{
+			width: 180rpx;
+			font-size: 28rpx;
+			color: #333333;
+			font-family: 'Source Han Sans CN VF';
+		}
+		&__content__item__input{
+			font-size: 26rpx;
+			color: #042118;
+			font-family: 'Source Han Sans CN VF';
+			font-weight: 400;
+			display:flex;
+			align-items: center;
+			.location-city{
 				font-size: 28rpx;
-				padding: 10rpx;
+				color:#333333;
+			}
+			.u-icon--right{
+				color:#999999;
+				margin-left: 12rpx;
+			}
+			.input{
+				font-size: 26rpx;
+				text-align: right;
+				width: 100%;
+				color: #333333;
 			}
 		}
-	}
-
 	.sub {
 		width: 90%;
 		margin: 30rpx auto;
@@ -268,7 +334,8 @@
 		height: 70rpx;
 		line-height: 70rpx;
 		background-color: #57C77A;
-		border-radius: 35rpx;
+		border-radius: 16rpx;
 		color: #FFFFFF;
 	}
-</style>
+	}
+</style>

pages/my/index/index.vue

@@ -1,54 +1,70 @@
 <template>
-	<view>
-		<view class="subject">
-			<view style="width: 100%;background-color: #FFFFFF;position: relative;">
-				<view class="personal" v-if="isLogin">
-					<view class="personal_left">
-						<image :src="userinfos.image" mode="" @error="imageError"></image>
-					</view>
-					<view class="personal_center">
-						<p>{{usernames}}</p>
-						<p>{{ userinfos.email || userinfos.mobile }}</p>
-					</view>
-					<view class="personal_right" @click="userinfo">
-						<uni-icons type="compose" style="color: #FFFFFF;margin-right: 10rpx;"></uni-icons>
-						编辑
-					</view>
-				</view>
-			</view>
-			<view style="background-color: #FFFFFF;margin: 20rpx auto 0;">
-				<view class="AboutUs" @click="about">
-					<u-icon name="pingtai" custom-prefix="custom-icon" class="icon_left"></u-icon>
-					{{$isneutral?"关于我们":"关于更新"}}
+  <view class="subject">
+    <view style="width: 100%; position: relative" class="subject-top">
+      <view class="personal" v-if="isLogin">
+        <view class="personal_left">
+          <image :src="userinfos.image" mode="" @error="error"></image>
+        </view>
+        <view class="personal_center">
+          <p>
+            {{ usernames }}
+            <view @click="userinfo" class="userinfo">
+              <u-icon
+                name="edit-pen"
+                class="edit-pen"
+              ></u-icon>
+            </view>
+          </p>
+          <p>{{ userinfos.email || userinfos.mobile || '' }}</p>
+        </view>
+        <!-- <view class="personal_right" @click="userinfo">
+          <uni-icons
+            type="compose"
+            style="margin-right: 10rpx"
+            color="#FFFFFF"
+          ></uni-icons>
+          编辑
+        </view> -->
+      </view>
+    </view>
+    <view class="menu">
+      <view>
+        <view class="AboutUs" @click="about">
+          <image :src="personIcon" mode="" class="icon_left"></image>
+          {{$isneutral?"关于我们":"关于更新"}}
 					<p class="update" v-if="updateTF">NEW</p>
-					<uni-icons type="arrowright" class="icon_right"></uni-icons>
-				</view>
-			</view>
-			<view style="background-color: #FFFFFF;" v-if="isLogin">
-				<view class="quit" @click="outto">
-					<u-icon name="tuichudenglu" custom-prefix="custom-icon" class="icon_left"></u-icon>
-					退出登录
-					<uni-icons type="arrowright" class="icon_right"></uni-icons>
-				</view>
-			</view>
-			<view style="background-color: #ffffff" v-else>
-			  <view class="quit" @click="handleLogin">
-			    <u-icon
-			      name="tuichudenglu"
-			      custom-prefix="custom-icon"
-			      class="icon_left"
-			    ></u-icon>
-			    去登录
-			    <uni-icons type="arrowright" class="icon_right"></uni-icons>
-			  </view>
-			</view>
-		</view>
-	</view>
+          <uni-icons type="arrowright" class="icon_right"></uni-icons>
+        </view>
+      </view>
+      <view style="background-color: #ffffff" v-if="isLogin">
+        <view class="quit" @click="outto">
+          <image :src="logoutIcon" mode="" class="icon_left"></image>
+          退出登录
+          <uni-icons type="arrowright" class="icon_right"></uni-icons>
+        </view>
+      </view>
+      <view style="background-color: #ffffff" v-else>
+        <view class="quit" @click="handleLogin">
+          <u-icon
+            name="tuichudenglu"
+            custom-prefix="custom-icon"
+            class="icon_left"
+          ></u-icon>
+          去登录
+          <uni-icons type="arrowright" class="icon_right"></uni-icons>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 <script>
+import personIcon from '../../assets/personIcon1.png';
+import logoutIcon from '../../assets/logout.png';
 	export default {
 		data() {
 			return {
+				personIcon,
+				logoutIcon,
 				isLogin: false,
 				usernames: '',
 				userinfos: {},
@@ -176,98 +192,124 @@
 	}
 </script>
 <style lang="scss">
-	.subject {
-		width: 100%;
-		height: 100vh;
-		background-color: #F9F9F9;
-	}
-
-	.personal {
-		width: 90%;
-		margin: 0 auto;
-		display: flex;
-		padding: 20rpx 0 40rpx;
-		box-sizing: border-box;
-
-		.personal_left {
-			width: 18%;
-			margin-right: 30rpx;
-
-			image {
-				width: 124rpx;
-				height: 120rpx;
-				border-radius: 60rpx;
-			}
-		}
-
-		.personal_center {
-			padding-top: 20rpx;
-
-			p:nth-child(1) {
-				font-size: 34rpx;
-				font-weight: 700;
-				margin-bottom: 10rpx;
-			}
+.subject {
+  width: 100%;
+  height: 100vh;
+  background: #F5F6FA;
+  .subject-top{
+    height: 450rpx;
+    background-image: url('../../assets/personBg.png');
+    background-size: cover;
+  }
+}
 
-			p:nth-child(2) {
-				font-size: 24rpx;
-			}
-		}
+.personal {
+  width: 90%;
+  margin: 0 auto;
+  display: flex;
+  padding: 20rpx 0 40rpx;
+  padding-top: 136rpx;
+  box-sizing: border-box;
+  position: relative;
+  .personal_left {
+    width: 120rpx;
+    height: 120rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    margin-right: 30rpx;
+    border: 4rpx solid #ffffff;
+    image {
+      width: 120rpx;
+      height: 120rpx;
+      border-radius: 60rpx;
+    }
+  }
 
-		.personal_right {
-			width: 150rpx;
-			background-color: #55C87B;
-			height: 60rpx;
-			text-align: center;
-			border-radius: 30rpx;
-			line-height: 60rpx;
-			color: #FFFFFF;
-			position: absolute;
-			top: 50rpx;
-			right: 30rpx;
-		}
-	}
+  .personal_center {
+    padding-top: 20rpx;
+    color:#ffffff;
 
-	.AboutUs,
-	.quit,
-	.opinion {
-		width: 90%;
-		height: 100rpx;
-		line-height: 100rpx;
-		margin: 20rpx auto 0;
-		position: relative;
-		padding-left: 20rpx;
-		font-size: 28rpx;
+    p:nth-child(1) {
+      width: 100%;
+      font-size: 34rpx;
+      font-weight: 700;
+      margin-bottom: 10rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .userinfo{
+      width: 40rpx;
+      height: 40rpx;
+      border-radius: 16rpx;
+      color:#ffffff;
+      font-size: 24rpx;
+      background: #00000014;
+      margin-left: 16rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .edit-pen{
+        font-size: 20rpx;
+      }
+    }
+    p:nth-child(2) {
+      font-size: 24rpx;
+    }
+  }
 
-		.icon_left {
-			margin-right: 20rpx;
-			color: #55C87B !important;
-			font-size: 32rpx;
-		}
+  .personal_right {
+    width: 150rpx;
+    background-color: #55c87b;
+    height: 60rpx;
+    text-align: center;
+    border-radius: 30rpx;
+    line-height: 60rpx;
+    color: #ffffff;
+    position: absolute;
+    right: 30rpx;
+  }
+}
+.menu{
+  margin: 0 32rpx;
+  background: #ffffff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  position: relative;
+  top: -140rpx;
+}
+.AboutUs,
+.quit,
+.opinion {
+  display:flex;
+  align-items: center;
+  width: 90%;
+  height: 100rpx;
+  line-height: 100rpx;
+  margin: 0rpx auto;
+  position: relative;
+  padding-left: 20rpx;
+  font-size: 28rpx;
 
-		.icon_right {
-			position: absolute;
-			top: 0;
-			right: 10rpx;
-			font-size: 32rpx !important;
-		}
+  .icon_left {
+    margin-right: 20rpx;
+    color: #55c87b !important;
+    width: 40rpx;
+    height: 40rpx;
+  }
 
-		.update {
-			position: absolute;
-			top: 34rpx;
-			right: 40rpx;
-			font-size: 16rpx !important;
-			background-color: #f00;
-			border-radius: 25rpx;
-			height: 30rpx;
-			padding: 2rpx 16rpx;
-			line-height: 30rpx;
-			color: #fff;
-		}
-	}
+  .icon_right {
+    position: absolute;
+    top: 0;
+    right: 10rpx;
+    font-size: 32rpx !important;
+  }
+}
 
-	.opinion {
-		margin: 0 auto;
-		border-top: 2rpx solid #EAEAEA;
-	}
+.opinion {
+  margin: 0 auto;
+  border-top: 2rpx solid #eaeaea;
+}
 </style>