<template>
	<view class="page">
		<u-navbar :is-back="false" title=" " :border-bottom="false" :background="bgc" title-color='#fff'
			title-size='44' height='50'></u-navbar>
		</u-navbar>
		<!-- 头部 -->
		<view class="avattop">
			<button type="primary reverse" open-type="chooseAvatar" @chooseavatar="getImage">
				<image :src="imageSrc" mode=""></image> 
			</button> 
			<view class="name-info">
				<view class="name" @click="editName">  {{userobj.nickName == undefined ? '' : userobj.nickName}} <image style="width: 50rpx;height: 50rpx;" src="https://api.ccttiot.com/smartmeter/img/static/ubGJ5hT0FVzaNuVLxQMO"></image>  </view>
				<view class="phone" v-if="userobj.userName">{{formatPhone(userobj.userName)}}</view>
			</view>
		</view>
		<view class="" v-if="isSysAdmin" @click="btnlr" style="width:180rpx;text-align: center;border-radius: 30rpx;height: 70rpx;background-color: #48893B;color: #fff;position: fixed;top: 200rpx;right: 16rpx;line-height: 70rpx;">
			{{ $t('my.gatewayEntry') }}
		</view>
		<view class="tongji">
			<view class="" @click="btnjy(1)">
				<text class="cu">{{obj.focusCount == undefined ? 0 : obj.focusCount}}</text>
				<text class="xi">{{ $t('my.follow') }}</text>
			</view>
			<view class="" @click="btnjy(2)">
				<text class="cu">{{obj.fansCount == undefined ? 0 : obj.fansCount}}</text>
				<text class="xi">{{ $t('my.fans') }}</text>
			</view>
			<view class="" @click="btnjy(3)">
				<text class="cu">{{obj.friendCount == undefined ? 0 : obj.friendCount}}</text>
				<text class="xi">{{ $t('my.friend') }}</text>
			</view>
			<view class="">
				<text class="cu">{{obj.likeCount == undefined ? 0 : obj.likeCount}}</text>
				<text class="xi">{{ $t('my.likes') }}</text>
			</view>
			<image @click="btnsz" src="https://api.ccttiot.com/smartmeter/img/static/uKwTokqmfDbviS6sre8V" mode=""></image>
		</view>
		<!-- 帮助与客服 -->
		<view class="kefu">
			<view class="lt" style="border-right: 1px solid #D8D8D8;padding-right: 30rpx;">
				<view class="ltxx" @click="btnkf">
					<view class="one">
						<view class="ones">{{ $t('my.help') }}</view>
						<view class="">{{ $t('my.helpSub') }}</view>
					</view>
					<image src="https://api.ccttiot.com/smartmeter/img/static/uvKnHSxPnANSsTbgO7em" mode=""></image>
				</view>
			</view>
			<view class="lt">
				<view class="ltxx" @click="btnyjfk">
					<view class="one">
						<view class="ones">{{ $t('my.feedback') }}</view>
						<view class="">{{ $t('my.feedbackSub') }}</view>
					</view>
					<image src="https://api.ccttiot.com/smartmeter/img/static/ual1t8rYuPBxROgRNPmN" mode=""></image>
				</view>
			</view>
		</view>
		<!-- <view class="bot">
			<view class="nav">
				<view :class="['nav-item', currentTab === 0 ? 'active' : '']" @tap="switchTab(0)">笔记</view>
				<view :class="['nav-item', currentTab === 1 ? 'active' : '']" @tap="switchTab(1)">喜欢</view>
			</view>
			<swiper class="feed-swiper" :current="currentTab" :circular="false" duration="300" @change="onSwiperChange">
				<swiper-item>
					<scroll-view class="feed" @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="black">
						<view class="waterfall-container">
							<view class="waterfall-left">
								<view class="demo-warter" v-for="(item, index) in feedLists.filter((_, i) => i % 2 === 0)" :key="index" @click="btngonglue(item)">
									<u-lazy-load
										v-if="!isVideo(firstMedia(item))"
										threshold="-450"
										border-radius="0"
										:image="firstMedia(item)"
										:index="index"
									></u-lazy-load>
									<view v-else class="video-holder">
										<video
											class="feed-video"
											:src="firstMedia(item)"
											:poster="item.cover || firstMedia(item)"
											autoplay
											controls
											playsinline
											webkit-playsinline
											muted
										></video>
									</view>
									<view class="dizhi">
										{{item.title && item.title.length > 10 ? item.title.slice(0,20) + '...' : item.title}}
									</view>
									<view class="cont">
										<view class="lt">
											<image :src="item.userAvatar" mode="aspectFill"></image>
											{{item.nickName && item.nickName.length > 4 ? item.nickName.slice(0,20) + '...' : item.nickName}}
										</view>
										<view class="rt">
											<image v-if="item.isLiked == true" src="https://api.ccttiot.com/smartmeter/img/static/uCxUJSEQTStvqaf93xox" mode=""></image>
											<image v-else src="https://api.ccttiot.com/smartmeter/img/static/uypbgeMkBQw7XWmzKmm6" mode=""></image>
											{{ item.likes }}
										</view>
									</view>
								</view>
							</view>
							<view class="waterfall-right">
								<view class="demo-warter" v-for="(item, index) in feedLists.filter((_, i) => i % 2 === 1)" :key="index" @click="btngonglue(item)">
									<u-lazy-load
										v-if="!isVideo(firstMedia(item))"
										threshold="-450"
										border-radius="0"
										:image="firstMedia(item)"
										:index="index"
									></u-lazy-load>
									<view v-else class="video-holder">
										<video
											class="feed-video"
											:src="firstMedia(item)"
											:poster="item.cover || firstMedia(item)"
											autoplay
											controls
											playsinline
											webkit-playsinline
											muted
										></video>
									</view>
									<view class="dizhi">
										{{item.title && item.title.length > 10 ? item.title.slice(0,20) + '...' : item.title}}
									</view>
									<view class="cont">
										<view class="lt">
											<image :src="item.userAvatar" mode="aspectFill"></image>
											{{item.nickName && item.nickName.length > 4 ? item.nickName.slice(0,20) + '...' : item.nickName}}
										</view>
										<view class="rt">
											<image v-if="item.isLiked == true" src="https://api.ccttiot.com/smartmeter/img/static/uCxUJSEQTStvqaf93xox" mode=""></image>
											<image v-else src="https://api.ccttiot.com/smartmeter/img/static/uypbgeMkBQw7XWmzKmm6" mode=""></image>
											{{ item.likes }}
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="" style="width: 100%;text-align: center;margin-top: 30rpx;color: #ccc;">
							{{ $t('my.noMoreFeed') }}
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view class="feed" @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="black">
						<view class="waterfall-container">
							<view class="waterfall-left">
								<view class="demo-warter" v-for="(item, index) in feedList.filter((_, i) => i % 2 === 0)" :key="index" @click="btngonglue(item)">
										<u-lazy-load
											v-if="!isVideo(firstMedia(item))"
											threshold="-450"
											border-radius="0"
											:image="firstMedib(item)"
											:index="index"
										></u-lazy-load>
										<view v-else class="video-holder">
											<video
												class="feed-video"
												:src="firstMedib(item)"
												:poster="item.cover || firstMedia(item)"
												autoplay
												controls
												playsinline
												webkit-playsinline
												muted
											></video>
										</view>
									<view class="dizhi">
										{{item.bstName && item.bstName.length > 10 ? item.bstName.slice(0,20) + '...' : item.bstName}}
									</view>
									<view class="cont">
										<view class="lt">
											<image :src="item.bstUserAvatar" mode="aspectFill"></image>
											{{ item.bstUserName && item.bstUserName.length > 4 ? item.bstUserName.slice(0,20) + '...' : item.bstUserName}}
										</view>
										<view class="rt">
											<image src="https://api.ccttiot.com/smartmeter/img/static/uCxUJSEQTStvqaf93xox" mode=""></image>
										</view>
									</view>
								</view>
							</view>
							<view class="waterfall-right">
								<view class="demo-warter" v-for="(item, index) in feedList.filter((_, i) => i % 2 === 1)" :key="index" @click="btngonglue(item)">
										<u-lazy-load
											v-if="!isVideo(firstMedib(item))"
											threshold="-450"
											border-radius="0"
											:image="firstMedib(item)"
											:index="index"
										></u-lazy-load>
										<view v-else class="video-holder">
											<video
												class="feed-video"
												:src="firstMedib(item)"
												:poster="item.cover || firstMedib(item)"
												autoplay
												controls
												playsinline
												webkit-playsinline
												muted
											></video>
										</view>
									<view class="dizhi">
										{{item.bstName && item.bstName.length > 10 ? item.bstName.slice(0,20) + '...' : item.bstName}}
									</view>
									<view class="cont">
										<view class="lt">
											<image :src="item.bstUserAvatar" mode="aspectFill"></image>
											{{item.bstUserName && item.bstUserName.length > 4 ? item.bstUserName.slice(0,20) + '...' : item.bstUserName}}
										</view> 
										<view class="rt">
											<image src="https://api.ccttiot.com/smartmeter/img/static/uCxUJSEQTStvqaf93xox" mode=""></image>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="" style="width: 100%;text-align: center;margin-top: 30rpx;color: #ccc;">
							{{ $t('my.noMoreData') }}
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view> -->
       <tab-bar :indexs='2'></tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#E2EFDF",
				},
                userobj:{},
				imageSrc:'',
				token:'',
				picdomain:'',
				logoflag:true,
				currentTab: 1,
				feedList: [],//喜欢
				feedLists: [],//笔记
				pageNum:1,
				total:0,
				isRefreshing:false,
				obj:{},
				isSysAdmin:false
			}
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '绿小能',
				path: '/pages/index/index'
			}
		},
		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '绿小能',
				query: '',
				path: '/pages/index/index'
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.pageNum = 1
			this.getinfo()
			this.gettiken()
		},
		methods: {
			// 点击跳转到录入网关
			btnlr(){
				uni.navigateTo({
					url:'/page_newyemian/wgluru'
				})
			},
			// 请求关注粉丝统计
			getgzfslist(){
				this.$u.get(`/app/user/${this.userobj.userId}`).then(res => {
					if(res.code == 200){
						this.obj = res.data
					}
				})
			},
			// 请求笔记列表
			geibiji(){
				this.$u.get(`/app/feed/list?userId=${this.userobj.userId}&pageNum=${this.pageNum}&pageSize=20`).then(res =>{
				    if(res.code == 200){
						this.total = res.total
						if(this.pageNum == 1){
							this.feedLists = res.rows
						}else{
							this.feedLists = this.feedLists.concat(res.rows)
						}
				    }
				})
			},
			// 请求点赞的动态列表
			getzdlist(){
				this.$u.get(`/app/like/list?userId=${this.userobj.userId}&bstType=1&pageNum=${this.pageNum}&pageSize=20`).then(res =>{
				    if(res.code == 200){
						this.total = res.total
				        if(this.pageNum == 1){
				        	this.feedList = res.rows
							this.pageNum ++
				        }else{
				        	this.feedList = this.feedList.concat(res.rows)
							this.pageNum ++
				        }
						console.log(this.feedList)
				    }
				})
			},
			// 点击图文进行跳转详情
			btngonglue(item){
				console.log(item);
				uni.navigateTo({
					url:'/page_user/dongtai/dongtaixq?id=' + item.id
				})
			},
			// 点击关注，粉丝，朋友跳转
			btnjy(num){
				if(num == 1){
					uni.navigateTo({
						url:'/page_newyemian/gereninfo/guanzhu?userId=' + this.userobj.userId
					})
				}else if(num == 2){
					uni.navigateTo({
						url:'/page_newyemian/gereninfo/fensi?userId=' + this.userobj.userId
					})
				}else if(num == 3){
					uni.navigateTo({
						url:'/page_newyemian/gereninfo/pengyou?userId=' + this.userobj.userId
					})
				}
			},
			// 点击昵称修改名称
			editName(){
				const currentName = this.userobj.nickName || ''
				uni.showModal({
					title: '修改昵称',
					editable: true,
					placeholderText: '请输入昵称',
					content: currentName,
					confirmText: '保存',
					success: (res) => {
						if (res.confirm) {
							const newName = (res.content || '').trim()
							if (newName.length > 10) {
							    uni.showToast({
							    	title: '名称已超过限制',
							    	icon: 'none',
							    	duration: 3000
							    })
							}else{
								if (!newName || newName === currentName) return
								this.$u.put(`/app/user/updateBasicInfo`, { nickName: newName }).then((r) => {
									if (r.code === 200) {
										this.getinfo()
										uni.showToast({ title: '已更新', icon: 'success',duration:3000})
									}else if(res.code == 401){
										uni.reLaunch({
											url:'/pages/login/login'
										})
									}else{
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 3000
										})
									}
								})
							}
						}
					}
				})
			},
			
			// 判断获取的数据是否为视频（通过后缀名）
			isVideo(url) {
				if (!url || typeof url !== 'string') return false
				const lower = url.split('?')[0].toLowerCase()
				return ['.mp4','.mov','.m4v','.mkv','.avi','.wmv','.flv','.webm','.3gp'].some(ext => lower.endsWith(ext))
			},
			firstMedia(item) {
				if (!item || !item.picture) return ''
				if (Array.isArray(item.picture)) {
					return item.picture[0] || ''
				}
				return item.picture.split(',').map(url => url.trim()).find(url => !!url) || ''
			},
			firstMedib(item) {
				if (!item || !item.bstPicture) return ''
				if (Array.isArray(item.bstPicture)) {
					return item.bstPicture[0] || ''
				}
				return item.bstPicture.split(',').map(url => url.trim()).find(url => !!url) || ''
			},
			// 头部tab点击切换
			switchTab(index) {
				this.currentTab = index 
				this.pageNum = 1
			},
			// 轮播图左右滑动切换事件
			onSwiperChange(e) {
				this.currentTab = e.detail.current
				this.pageNum = 1
				if(e.detail.current == 1){ 
                    this.getzdlist()
				}else if(e.detail.current == 0){
                    this.geibiji()
				}
			},
			// 上拉加载更多数据
			handqixing() {
				console.log('底部');
				if(this.currentTab == 1){
					if(this.feedList.length < this.total){
						this.getzdlist()
					}
				}else if(this.currentTab == 0){
					if(this.feedLists.length < this.total){
						this.geibiji()
					}
				}
			},
			// 下拉刷新最新的数据
			onRefresh() {
				this.isRefreshing = true
				setTimeout(() => {
					this.pageNum = 1
					this.isRefreshing = false
					if(this.currentTab == 1){
						this.getzdlist()
					}else if(this.currentTab == 0){
						this.geibiji()
					}
				}, 300)
			},
			// 点击设置进行跳转
            btnsz(){
				uni.navigateTo({
					url:'/page_newyemian/sehzhi'
				})
			},	
			// 获取用户信息
			getinfo() {
				this.$u.get(`/system/user/profile`).then((res) => {
					if (res.code == 200) {
						this.isSysAdmin = res.data.isSysAdmin
						uni.setStorageSync('user',res.data)
						uni.setStorageSync('userId',res.data.userId)
						this.userobj = res.data
						this.getzdlist()
						this.getgzfslist()
						this.imageSrc = res.data.avatar
						this.logoflag = false
					}else if(res.code == 401){
						this.logoflag = true
						uni.showModal({
						    title: '提示',  
						    content: '您还未登录，是否前去登录？',  
						    success: function (res) {  
						        if (res.confirm) { 
								   uni.navigateTo({
								   	url:'/pages/login/login'
								   })
						        } else if (res.cancel) {  
						           
						        }  
						    }  
						})
					}
				})
			},
			// 获取七牛云token
			gettiken() {
				this.$u.get("/common/qiniu/uploadInfo").then(res => {
					this.token = res.token
					this.picdomain = res.domain
				})
			},
			// 获取修改头像
			getImage(e){
				let that = this
				uni.uploadFile({
					url: 'https://up-z2.qiniup.com',
					filePath:  e.detail.avatarUrl,
					name: 'file',
					header: {
						accept: 'application/json'
					},
					formData: {
						token: that.token,
					},
					success: (res) => {
						that.imageSrc = that.picdomain + '/' + JSON.parse(res.data).key
						console.log(that.imageSrc);
						let data = {
							avatar:that.imageSrc
						}
						that.$u.put(`/app/user/updateBasicInfo`,data).then(res => {
								
						})
					}
				})
			},
			// 点击跳转到意见反馈页面
            btnyjfk(){
				uni.navigateTo({
					url:'/page_user/opinion'
				})
			},
			// 点击跳转到客服与帮助
			btnkf(){
				uni.navigateTo({
					url:'/page_user/kefu'
				})
			},
			//点击跳转到文章详情
			 btnxq(num){
				if(num == 1){
					uni.navigateTo({
						url:'/page_user/yinsixq?tit=' + '隐私政策'  + '&id=' + 2
					})
				}else if(num == 2){
					uni.navigateTo({
						url:'/page_user/yinsixq?tit=' + '用户协议'  + '&id=' + 1
					})
				}else if(num == 3){
					uni.navigateTo({
						url:'/page_user/yinsixq?tit=' + '关于我们' + '&id=' + 3
					})
				}else if(num == 4){
					uni.showModal({  
					    title: '提示',  
					    content: '您确定要退出登录吗？',  
					    success: function (res) {  
					        if (res.confirm) { 
							   uni.clearStorage().then(() => {  
							       // 成功清空所有本地存储  
							       console.log('所有本地存储数据已清空')
							   }).catch((error) => {  
							       // 处理错误  
							       console.error('清空本地存储失败', error)
							   })
					           uni.reLaunch({
					           	url:'/pages/login/login'
					           })
					        } else if (res.cancel) {  
					           
					        }  
					    }  
					})
				}
			 },
			// 格式化手机号，将中间四位数替换为*
			formatPhone(phone) {
				if (!phone || typeof phone !== 'string') return ''
				// 移除所有非数字字符
				const phoneNumber = phone.replace(/\D/g, '')
				// 如果是11位手机号，格式化为：前3位 + **** + 后4位
				if (phoneNumber.length === 11) {
					return phoneNumber.substring(0, 3) + '****' + phoneNumber.substring(7)
				}
				// 如果不是11位，但长度大于7位，也进行中间四位替换
				if (phoneNumber.length > 7) {
					const start = Math.floor((phoneNumber.length - 4) / 2)
					return phoneNumber.substring(0, start) + '****' + phoneNumber.substring(start + 4)
				}
				// 其他情况直接返回原值
				return phone
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #E2EFDF;
		box-sizing: border-box;
	}
	.waterfall-container {
		display: flex;
		gap: 20rpx;
		padding: 0 20rpx;
		.waterfall-left,
		.waterfall-right {
			flex: 1;
		}
	}
	.demo-warter {
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		background-color: #ffffff;
		padding-bottom: 20rpx;
		box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0,0,0,0.1);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		position: relative;
		overflow: hidden;
		.video-holder{
			width: 100%;
			border-radius: 10rpx 10rpx 0 0;
			overflow: hidden;
			background-color: #000;
		}
		.feed-video{
			width: 100%;
			display: block;
			object-fit: cover;
		}
		.shuju{
			display: flex;
			align-items: center;
			margin-top: 10rpx;
			justify-content: flex-end;
			view{
				font-size: 14rpx;
				color: #3D3D3D;
				margin-left: 32rpx;
				image{
					width: 20rpx;
					height: 20rpx;
					margin-right: 4rpx;
				}
				display: flex;
				align-items: center;
			}
		}
		.cont{
			font-size: 24rpx;
			color: #3D3D3D;
			padding: 0 18rpx;
			margin-top: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.lt{
				display: flex;
				align-items: center;
				image{
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
					border-radius: 50%;
				}
			}
			.rt{
				display: flex;
				align-items: center;
				image{
					width: 28rpx;
					height: 28rpx;
					margin-right: 8rpx;
					border-radius: 50%;
				}
			}
		}
		.dizhi{
			margin-top: 16rpx;
			padding-left: 18rpx;
			font-weight: 600;
			font-size: 28rpx;
			color: #3D3D3D;
		}
	}
	.bot{
		width: 100%;
		height: 54vh;
		background: #fff;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin-top: 30rpx;
		border-radius: 50rpx 50rpx 0 0;
		.nav {
			display: flex;
			justify-content: center;
			gap: 70rpx;
			margin-bottom: 20rpx;
			padding-top: 20rpx;
			.nav-item {
				font-size: 32rpx;
				color: #3D3D3D;
				padding: 12rpx 6rpx;
				&.active {
					color: #48893B !important;
					position: relative;
					font-weight: 600;
					font-size: 36rpx;
					color: #3D3D3D;
				}
			}
		}
		.feed-swiper { flex: 1;height: 50vh;overflow: scroll; }
		.feed {
			width: 750rpx;
			margin: auto;
			height: 40vh;
			overflow: scroll;
			padding-bottom: 100rpx;
			.feed-card {
				padding: 24rpx 40rpx;
				box-sizing: border-box;
				.card-header {
					display: flex;
					.avatar {
						width: 72rpx;
						height: 72rpx;
						border-radius: 50%;
						margin-right: 16rpx;
					}
					.meta { flex: 1; }
					.name-row { display: flex; align-items: center; justify-content: space-between; }
					.name { font-weight: 600; color: #333; }
					.follow-btn {
						padding: 6rpx 20rpx;
						border-radius: 999rpx;
						background: #00c27a;
						color: #fff;
						&.followed { background: #f0f0f0; color: #666; }
					}
					.time { color: #999; font-size: 24rpx; }
				}
				.card-content {
					margin-top: 12rpx;
					padding-left: 90rpx;
					.text { color: #333; }
					.thumb { width: 98px; height: 98px; border-radius: 12rpx; margin-top: 12rpx; }
					.video-thumb { width: 98px; height: 98px; margin-top: 12rpx; border-radius: 12rpx; overflow: hidden; }
					.video-thumb video { width: 98px; height: 98px; object-fit: cover; display: block; }
					// 单图：等比缩放，最大宽度100%
					.thumb-single {
						margin-top: 12rpx;
						image { width: 98px; height: 98px; border-radius: 12rpx; display: block; }
						video { width: 98px; height: 98px; border-radius: 12rpx; object-fit: cover; display: block; }
					}
					// 多图：正方形九宫格，自适应裁剪
					.thumb-grid {
						margin-top: 12rpx;
						display: grid;
						grid-template-columns: repeat(3, 98px);
						gap: 10rpx;
						.grid-item {
							position: relative;
							width: 98px; height: 98px;
							image, video {
								position: absolute;
								top: 0; left: 0; right: 0; bottom: 0;
								width: 98px; height: 98px;
								border-radius: 8rpx;
							}
						}
					}
				}
				.dizhi{
					font-weight: 600;
					font-size: 26rpx;
					color: #1EC28B;
					display: flex;
					align-items: center;
					margin-top: 10rpx;
					padding-left: 90rpx;
					.qian{
						width: 26rpx;
						height: 26rpx;
						margin-right: 8rpx;
					}
					.hou{
						width: 32rpx;
						height: 32rpx;
						margin-left: 4rpx;
					}
				}
				.card-actions {
					margin-top: 16rpx;
					display: flex;
					justify-content: space-between;
					gap: 32rpx;
					color: #666;
					padding-left: 90rpx;
					image{
						width: 32rpx;
						height: 32rpx;
					}
					.action { display: flex; align-items: center; }
					.num { margin-left: 8rpx; }
				}
			}
		}
	}
	.tongji{
		display: flex;
		justify-content: space-between;
		width: 690rpx;
		margin: auto;
		margin-top: 34rpx;
		image{
			width: 106rpx;
			height: 66rpx;
		}
		view{
			text-align: center;
			.cu{
				font-weight: 600;
				font-size: 36rpx;
				color: #3D3D3D;
				display: block;
			}
			.xi{
				font-size: 28rpx;
				color: #767676;
				display: block;
			}
		}
	}
	button{
		width: 136rpx;
		height: 136rpx;
		border-radius: 50%;
		background-color: #D8D8D8;
		position: relative;
		left: -260rpx;
		image{
			border-radius: 50%;
			width: 136rpx;
			height: 136rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	.zhengce{
		width: 670rpx;
		height: 420rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
		margin-top: 28rpx;
		border-radius: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
		view{
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #D8D8D8;
			padding-bottom: 28rpx;
			box-sizing: border-box;
			padding-top: 28rpx;
			font-size: 36rpx;
			color: #3D3D3D;
			image{
				width: 18rpx;
				height: 32rpx;
			}
		}
	}
	.avattop{
		display: flex;
		align-items: center;
		font-size: 40rpx;
		color: #3D3D3D;
		font-weight: 600;
		.name-info{
			position: absolute;
			left: 220rpx;
			display: flex;
			flex-direction: column;
			.name{
				display: flex;
				align-items: center;
			}
			.phone{
				font-size: 28rpx;
				color: #767676;
				font-weight: 400;
				margin-top: 8rpx;
			}
		}
	}
	
	.kefu{
		width: 690rpx;
		height: 166rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 64rpx 0rpx rgba(0,0,0,0.08);
		border-radius: 20rpx;
		padding: 42rpx 22rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		margin: auto;
		margin-top: 32rpx;
		.lt{
			text-align: left;
			width: 48%;
			.ltxx{
				display: flex;
				justify-content: space-between;
				width: 100%;
				.one{
					.ones{
						font-size: 28rpx;
						color: #3D3D3D;
						font-weight: 600;
						margin-bottom: 10rpx;
					}
				}
				image{
					width: 84rpx;
					height: 84rpx;
				}
			}
		}
	}

	
</style>