odd_job_applet/pages/my/my.vue

<template name="mypage">
	<view class="mypage">
		<u-sticky>
			<view class="topArea">
				<image class="topArea-Bg" :src="$getImageUrl('static/images/applet/my/myTopBg.png')"></image>
				<view class="topArea-top" :style="{height:navBarTop + 'px'}"></view>
				<view class="topArea-nav" :style="{height:navBarHeight + 'px',lineHeight:navBarHeight + 'px'}">
					<view class="nav-title">个人中心</view>
				</view>
				<view class="topArea-main">
					<view class="noLogin" @click="goLPage('/pages/my/myinfo')" v-if="userinfo==false">
						<image class="noLogin-icon" :src="$getImageUrl('static/images/applet/dfhead.jpg')"></image>
						<view class="noLogin-title">未登录</view>
					</view>
					<view class="haveLogin" v-else>
						<image class="login-avatar" :src="userinfo.avatar"></image>
						<view class="login-infor">
							<view class="infor-top">
								<text class="infor-top-name">{{userinfo.nickname}}</text>
								<view class="infor-top-verify" v-if="brokerall != null">
									<view class="verify-icon">
										<image class="verify-icon-image"
											:src="$getImageUrl('static/images/applet/my/verify.png')">
										</image>
									</view>
									<view class="verify-text">
										<text v-if="brokerall[0]['is_partner'] == 1">就业合伙人</text>
										<text v-else>经纪人</text>
									</view>
								</view>
								<text class="infor-top-noVerify" v-if="userinfo.authstatus == 1">(未实名)</text>
							</view>
							<view class="infor-bottom">
								{{userinfo.mobile}}
								<text class="margin-left" v-if="upper" @click="myUpper">(上级门店)</text>
								<text class="margin-left" v-if="upper" @click="myUpper">(归属就业合伙人)</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>

		<view class="topMenu">
			<view class="topMenu-item" @click="goLPage('/pages/my/myinfo')">
				<image class="item-image" :src="$getImageUrl('static/images/applet/my/infor.png')" mode="widthFix">
				</image>
				<view class="item-title">基本信息</view>
			</view>
			<view class="topMenu-item" @click="goLPage('/pages/my/mycode')">
				<image class="item-image" :src="$getImageUrl('static/images/applet/my/code.png')" mode="widthFix">
				</image>
				<view class="item-title">我的推广码</view>
			</view>
			<view class="topMenu-item" @click="goLPage('/pages/my/myteam')">
				<image class="item-image" :src="$getImageUrl('static/images/applet/my/invite.png')" mode="widthFix">
				</image>
				<view class="item-title">我的邀请</view>
			</view>
		</view>

		<view class="topApply">
			<view class="topApply-left">
				<image class="left-icon" :src="$getImageUrl('static/images/applet/index/topApplyIcon.png')"></image>
			</view>
			<view class="topApply-center" v-if="brokerall == null">经纪人福利多多</view>
			<view class="topApply-center" v-if="brokerall != null">{{brokerall[0].type == 1 ? '经纪人中心' : '红色合伙人'}}</view>
			<view class="topApply-right" v-if="brokerall == null" @tap="goLPage('/pages/broker/brokerform')">立即开通</view>
			<view class="topApply-right" v-if="brokerall != null" @tap="goLPage('/pages/broker/center')">进入工作台</view>
		</view>

		<view class="teacher" @click="goLPage('/pages/resident/resident')" v-if="resident != null">
			<view class="teacher-left">
				<image class="left-icon" :src="$getImageUrl('static/images/applet/index/topApplyIcon.png')"></image>
			</view>
			<view class="teacher-center">驻场老师</view>
		</view>

		<view class="topMenu">
			<view class="topMenu-item" @click="goLPage('/pages/my/mybag')">
				<image class="item-icon" :src="$getImageUrl('static/images/applet/my/wallet.png')"></image>
				<view class="item-titleSmall">我的钱包</view>
			</view>
			<view class="topMenu-item" @click="goLPage('/pages/my/myauth')">
				<image class="item-icon" :src="$getImageUrl('static/images/applet/my/verifyName.png')"></image>
				<view class="item-titleSmall">实名认证</view>
			</view>
			<view class="topMenu-item" @click="goLPage('/pages/comjobs/star')">
				<image class="item-icon" :src="$getImageUrl('static/images/applet/my/collect.png')"></image>
				<view class="item-titleSmall">我的收藏</view>
			</view>
			<view class="topMenu-item" @click="goLPage('/pages/my/task')">
				<image class="item-icon" :src="$getImageUrl('static/images/applet/my/task.png')"></image>
				<view class="item-titleSmall">任务中心</view>
			</view>
		</view>

		<view class="topMenu">
			<view class="topMenu-item" @click="goPage('/pages/comjobs/log')">
				<image class="item-icon" :src="$getImageUrl('static/images/applet/my/apply.png')"></image>
				<view class="item-titleSmall">我的报名</view>
			</view>
			<view class="topMenu-item" @click="goLPage('/pages/resume/log')">
				<image class="item-icon" :src="$getImageUrl('static/images/applet/my/invitation.png')"></image>
				<view class="item-titleSmall">收到的邀请</view>
			</view>
			<view class="topMenu-item" @click="goLPage('/pages/activity/myActivity')">
				<image class="item-icon" :src="$getImageUrl('static/images/applet/my/recruit.png')"></image>
				<view class="item-titleSmall">我的活动</view>
			</view>
			<!-- <view class="topMenu-item" @click="goHome">
				<image class="item-icon" :src="$getImageUrl('static/images/applet/my/recruit.png')"></image>
				<view class="item-titleSmall">我要招聘</view>
			</view> -->
			<view class="topMenu-item" @click="goLPage('/pages/train/joinlist')">
				<image class="item-icon" :src="$getImageUrl('static/images/applet/my/cultivate.png')"></image>
				<view class="item-titleSmall">培训意愿</view>
			</view>
		</view>

		<view class="topMenu">
			<view class="topMenu-item" @click="goLPage('/pages/notice/notice')">
				<image class="item-icon" :src="$getImageUrl('static/images/applet/my/notice.png')"></image>
				<view class="item-titleSmall">通知公告</view>
			</view>
			<view class="topMenu-item" @click="goLPage('/pages/my/feedback')">
				<image class="item-icon" :src="$getImageUrl('static/images/applet/my/feedback.png')"></image>
				<view class="item-titleSmall">意见反馈</view>
			</view>
			<view class="topMenu-item" @click="goPage('/pages/my/about')">
				<image class="item-icon" :src="$getImageUrl('static/images/applet/my/about.png')"></image>
				<view class="item-titleSmall">关于我们</view>
			</view>
			<view class="topMenu-item" @tap="goHome">
				<image class="item-icon" :src="$getImageUrl('static/images/applet/my/exchange.png')"></image>
				<view class="item-titleSmall">切换身份</view>
			</view>
		</view>


		<view style="margin-top: 60rpx; display: flex;justify-content: center;">
			<image style=" width: 127rpx;" :src="$getImageUrl('static/images/applet/my/empty.png')" mode="widthFix">
			</image>
		</view>

		<view style="margin-top: 34rpx; text-align: center; font-size: 24rpx; color: #B4B5B5;">没有更多数据了</view>


		<view class="margin-bottom" style="position: relative;" v-if="false">
			<view class="padding-lr padding-top" style="z-index: 999; position: absolute; top: 0rpx; width: 100%;">
				<view class="bg-white radius flex justify-start padding-lr padding-tb-xl shadow shadow-lg"
					:style="{'background-image':'url('+$getImageUrl('static/images/applet/mytop.png')+')'}"
					@click="goLPage('/pages/my/myinfo')" v-if="userinfo==false">
					<view class="cu-avatar lg round"
						:style="{'background-image':'url('+$getImageUrl('static/images/applet/dfhead.jpg')+')'}"></view>
					<view class="padding-lr padding-top text-lg">未登录</view>
				</view>
				<view
					class="bg-white radius flex justify-between align-center padding-lr padding-tb-xl shadow shadow-lg"
					:style="{'background-image':'url('+$getImageUrl('static/images/applet/mytop.png')+')'}" v-else>
					<view class="flex justify-start">
						<view class="cu-avatar lg round margin-left"
							:style="'background-image:url('+userinfo.avatar+');'"></view>
						<view class="padding-lr padding-top-xs text-lg">
							<view class="padding-bottom-xs">
								{{userinfo.nickname}}
								<text class="text-sm text-red" v-if="userinfo.authstatus == 1">（未实名）</text>
								<text class="text-sm text-red" v-if="brokerall != null">（经纪人）</text>
							</view>
							<view class="text-sm text-gray">{{userinfo.mobile}}</view>
						</view>
					</view>
					<!-- <view  @click="goBrokerMyentry('/pages/my/myentry')"  style="font-weight:bold;color: red;">【经纪人中心】</view> -->
				</view>
			</view>

			<view style="height: 140rpx; width: 100%;" v-if="false"></view>

			<view class="cu-list grid col-3 no-border" style="padding-top: 120rpx;" v-if="appplatform=='ios'">
				<view class="cu-item text-center" @click="goLPage('/pages/my/myinfo')">
					<image class="myicon" :src="$getImageUrl('static/images/applet/myicon01.png')"></image>
					<text>基本信息</text>
				</view>
				<view class="cu-item text-center" @click="goLPage('/pages/my/myteam')">
					<image class="myicon" :src="$getImageUrl('static/images/applet/myicon03.png')"></image>
					<text>我的邀请</text>
				</view>
				<view class="cu-item text-center" @click="goLPage('/pages/mall/mall')">
					<image class="myicon" :src="$getImageUrl('static/images/applet/myicon04.png')"></image>
					<text>积分商城</text>
				</view>
			</view>

			<view class="cu-list grid col-3 no-border" style="padding-top: 120rpx;" v-else>
				<view class="cu-item text-center" @click="goLPage('/pages/my/myinfo')">
					<image class="myicon" :src="$getImageUrl('static/images/applet/myicon01.png')"></image>
					<text>基本信息</text>
				</view>
				<view class="cu-item text-center" @click="goLPage('/pages/my/mycode')">
					<image class="myicon" :src="$getImageUrl('static/images/applet/myicon02.png')"></image>
					<text>我的推广码</text>
				</view>
				<view class="cu-item text-center" @click="goLPage('/pages/my/myteam')">
					<image class="myicon" :src="$getImageUrl('static/images/applet/myicon03.png')"></image>
					<text>我的邀请</text>
				</view>
				<!-- <view class="cu-item text-center" @click="goLPage('/pages/mall/mall')">
					<image class="myicon" :src="$getImageUrl('static/images/applet/myicon04.png')"></image>
					<text>积分商城</text>
				</view> -->
			</view>
		</view>

		<view class="cu-list menu sm-border" v-if="false">
			<view class="cu-item arrow" @click="goLPage('/pages/broker/center')" v-if="brokerall != null">
				<view class="content">
					<text class="cuIcon-friend text-grey"></text>
					<text>经纪人中心</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="goLPage('/pages/resident/resident')" v-if="resident != null">
				<view class="content">
					<text class="cuIcon-friend text-grey"></text>
					<text>驻场老师</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="goPage('/pages/comjobs/log')">
				<view class="content">
					<text class="cuIcon-edit text-grey"></text>
					<text>我的报名</text>
				</view>
				<view class="action" v-if="tip_num.comjobs_num > 0">
					<view class="cu-tag round bg-red sm">{{tip_num.comjobs_num}}</view>
				</view>
			</view>
			<view class="cu-item arrow" @click="goLPage('/pages/comjobs/star')">
				<view class="content">
					<text class="cuIcon-like text-grey"></text>
					<text>我的收藏</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="goLPage('/pages/resume/log')">
				<view class="content">
					<text class="cuIcon-profile text-grey"></text>
					<text>收到的邀请</text>
				</view>
				<view class="action" v-if="tip_num.invite_num > 0">
					<view class="cu-tag round bg-red sm">{{tip_num.invite_num}}</view>
				</view>
			</view>
			<view class="cu-item arrow" @click="goLPage('/pages/my/mybag')">
				<view class="content">
					<text class="cuIcon-moneybag text-grey"></text>
					<text>我的钱包</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="goLPage('/pages/notice/notice')">
				<view class="content">
					<text class="cuIcon-punch text-grey"></text>
					<text>通知公告</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="goLPage('/pages/train/joinlist')">
				<view class="content">
					<text class="cuIcon-calendar text-grey"></text>
					<text>培训意愿</text>
				</view>
			</view>
			<!-- <view class="cu-item arrow" @click="goLPage('/pages/my/myintegral')">
				<view class="content">
					<text class="cuIcon-sponsor text-grey"></text>
					<text>我的积分</text>
				</view>
			</view> -->
			<!-- <view class="cu-item arrow" @click="goPage('/pages/article/article')">
				<view class="content">
					<text class="cuIcon-news text-grey"></text>
					<text>政策资讯</text>
				</view>
			</view> -->
			<view class="cu-item arrow" @click="goLPage('/pages/my/myauth')">
				<view class="content">
					<text class="cuIcon-news text-grey"></text>
					<text>实名认证</text>
				</view>
				<view class="action">
					<text class="text-grey" v-if="userinfo.authstatus==1">待认证</text>
					<text class="text-grey" v-if="userinfo.authstatus==2">审核中</text>
					<text class="text-grey" v-if="userinfo.authstatus==3">已认证</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="goLPage('/pages/my/task')">
				<view class="content">
					<text class="cuIcon-album text-grey"></text>
					<text>任务中心</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="goHome">
				<view class="content">
					<text class="cuIcon-friend text-grey"></text>
					<text>我要招聘</text>
				</view>
			</view>
		</view>

		<view class="cu-list menu sm-border" v-if="false">
			<view class="cu-item arrow" @click="goLPage('/pages/my/feedback')">
				<view class="content">
					<text class="cuIcon-warn text-grey"></text>
					<text>意见反馈</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="goPage('/pages/my/about')">
				<view class="content">
					<text class="cuIcon-info text-grey"></text>
					<text>关于我们</text>
				</view>
			</view>
		</view>

		<view class="cu-modal" :class="modalName=='workerModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">身份切换</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-tb-sm">

					<view class="cu-list menu">
						<block v-if="workerall!=null">
							<view class="cu-item arrow" v-for="(item,index) in workerall" :key="index" @tap="goWorker"
								:data-index="index">
								<view class="content text-left">
									<text class="cuIcon-settings text-grey"></text>
									<text>{{item.title}}</text>
								</view>
								<view class="action">
									<text class="text-grey">
										<text class="margin-left text-red" v-if="item.status==1">待审核</text>
										<text class="margin-left text-red" v-if="item.status==4">升级审核</text>
									</text>
								</view>
							</view>
						</block>
						<view class="cu-item arrow" @click="goLogin(1)">
							<view class="content text-left">
								<text class="cuIcon-settings text-grey"></text>
								<text>个人雇主注册</text>
							</view>
						</view>
						<view class="cu-item arrow" @click="goLogin(2)">
							<view class="content text-left">
								<text class="cuIcon-settings text-grey"></text>
								<text>企业雇主注册</text>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>

		<view class="cu-modal" :class="modalName=='upperModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">归属门店</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl text-left text-lg">
					<view>姓名：{{upper.title}}</view>
					<view class="margin-top-sm">电话：{{upper.mobile}}</view>
				</view>
			</view>
		</view>


		<view class="padding-sm"></view>
		<view class="padding-xl"></view>
		<view class="cu-bar tabbar bg-white foot">
			<view class="action text-gray" @tap="goNavPage('/pages/index/index')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/index.png"></image>
				</view>
				首页
			</view>
			<view class="action text-gray" @tap="goNavPage('/pages/comjobs/comjobs')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/jobs.png"></image>
				</view>
				招聘
			</view>
			<!-- #ifndef MP-WEIXIN -->
			<view class="action text-gray videoimg" @tap="goNavPage('/pages/video/videolist')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/video.png"></image>
				</view>
				微工作
			</view>
			<!-- #endif -->

			<view class="action text-gray" @tap="goNavPage('/pages/broker/brokerlist')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/broker.png"></image>
				</view>
				经纪人
			</view>

			<view class="action text-red" @tap="goNavPage('/pages/my/my')">
				<view class="cuIcon-cu-image">
					<image src="../../static/tabbar/mySelected.png"></image>
				</view>
				我的
			</view>
		</view>

		<!-- <button class="cu-btn bg-blue lg shadow echo-gohome" @tap="goHome"> 切换身份 </button> -->

		<wxContact></wxContact>

	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				appplatform: "",
				param: {},
				userinfo: false,
				workerall: null,
				agentall: null,
				brokerall: null,
				upper: null,
				modalName: null,
				resident: null,
				tip_num: {
					comjobs_num: 0,
					invite_num: 0,
				},
				navBarTop: 0,
				navBarHeight: 0,
			}
		},
		onLoad: function() {
			_this = this;
			//#ifdef APP-PLUS
			_this.appplatform = uni.getSystemInfoSync().platform;
			//#endif

			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			_this.navBarTop = menuButtonInfo.top;
			_this.navBarHeight = menuButtonInfo.height;
		},
		onShareAppMessage: function(res) {
			return {
				title: "个人中心",
				path: "/pages/my/my"
			}
		},
		onShow: function() {
			_this = this;
			_this.userinfo = uni.getStorageSync('userinfo') || false;
			_this.workerall = null;
			_this.agentall = null;
			_this.brokerall = null;
			if (_this.userinfo !== false) {
				_this.$req.ajax({
					path: "my/getuser",
					data: {
						userid: _this.userinfo.id
					}
				}).then((data) => {
					_this.param = data.param;
					_this.userinfo = data.user;
					uni.setStorageSync('userinfo', data.user);
					_this.workerall = data.workerall;
					_this.agentall = data.agentall;
					_this.brokerall = data.brokerall;
					_this.resident = data.resident;
					_this.upper = data.upper;
					uni.setStorageSync('residentinfo', data.resident);
					uni.setStorageSync('brokerinfo', data.brokerall ? data.brokerall[0] : null);
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
					_this.userinfo = false;
					uni.removeStorageSync('userinfo');
				});

				//获取提示数字
				_this.$req.ajax({
					path: "my/gettipnum",
					data: {
						userid: _this.userinfo.id
					}
				}).then((data) => {
					_this.tip_num = data;
				})
			}
		},
		methods: {
			goUrl: function(type, tilurl) {
				if (type == 1) {
					uni.navigateTo({
						url: tilurl,
						fail: function() {
							uni.switchTab({
								url: tilurl
							});
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/tool/webview?pagesrc=' + encodeURIComponent(tilurl)
					});
				}
			},

			goManage: function(e) {
				_this.userinfo = _this.checkLogin("/pages/my/my");
				if (_this.userinfo === false) {
					return false;
				}
				var mtype = e.currentTarget.dataset.mtype;
				var index = e.currentTarget.dataset.index;
				var pageurl = "/pages/index/index";
				if (mtype == 'worker') {
					// if (_this.workerall[index].status==1){
					// 	uni.showModal({
					// 		title: '信息提示',
					// 		content: "信息审核中，请耐心等待。",
					// 		showCancel: false
					// 	});
					// 	return;
					// }
					pageurl = "/pages/worker/worker";
					uni.setStorageSync('workerinfo', _this.workerall[index]);
				} else if (mtype == 'agent') {
					pageurl = "/pages/agent/agent";
					uni.setStorageSync('agentinfo', _this.agentall[index]);
				} else if (mtype == 'broker') {
					pageurl = "/pages/broker/broker";
					uni.setStorageSync('brokerinfo', _this.brokerall[index]);
				}
				uni.navigateTo({
					url: pageurl,
					fail: function() {
						uni.switchTab({
							url: pageurl
						});
					}
				});
			},

			hideModal: function(e) {
				_this.modalName = null;
			},
			goLogin: function(wtype) {
				uni.setStorageSync('identityinfo', true);
				uni.navigateTo({
					url: "/pages/login/worker?wtype=" + wtype
				});
			},

			goLPage: function(pageurl) {
				_this.userinfo = _this.checkLogin("/pages/my/my");
				if (_this.userinfo === false) {
					return false;
				}
				uni.navigateTo({
					url: pageurl,
					fail: function() {
						uni.switchTab({
							url: pageurl
						});
					}
				});
			},
			goPage: function(pageurl) {
				uni.navigateTo({
					url: pageurl,
					fail: function() {
						uni.switchTab({
							url: pageurl
						});
					}
				});
			},

			goBrokerMyentry: function(pageurl) {
				_this.userinfo = uni.getStorageSync('userinfo') || false;
				if (!_this.userinfo.brokerid) {
					uni.showModal({
						title: '暂无权限',
						content: '您现在还不是经纪人，请先申请',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/broker/brokerform"
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					uni.navigateTo({
						url: pageurl,
						fail: function() {
							uni.switchTab({
								url: pageurl
							});
						}
					});

				}

			},

			goNavPage: function(pageurl) {
				uni.redirectTo({
					url: pageurl
				});
			},

			// 咨询电话
			makeTelephone: function(e) {
				var telephone = e.currentTarget.dataset.telephone;
				uni.makePhoneCall({
					phoneNumber: telephone
				});
			},

			loginOut: function() {
				uni.clearStorageSync();
				uni.showModal({
					title: '温馨提示',
					content: '退出成功。',
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							uni.reLaunch({
								url: "/pages/index/home"
							});
						}
					}
				});
			},

			goWorker: function(e) {
				var index = e.currentTarget.dataset.index;
				if (_this.workerall[index].status == 1 || _this.workerall[index].status == 4) {
					uni.showModal({
						title: '信息提示',
						content: "信息审核中，请耐心等待。",
						showCancel: false
					});
					return;
				}
				if (_this.workerall[index].status == 2 || _this.workerall[index].status == 3) {
					uni.showModal({
						title: '信息提示',
						content: "账号存在风险，请联系平台。",
						showCancel: false
					});
					return;
				}

				uni.setStorageSync('identityinfo', true);
				uni.setStorageSync('workerinfo', _this.workerall[index]);
				uni.reLaunch({
					url: "/pages/worker/worker"
				});
			},

			goHome: function() {
				_this.modalName = "workerModal";
				// uni.setStorageSync('identityinfo', false);
				// uni.setStorageSync('workerinfo', null);
				// uni.reLaunch({
				// 	url: "/pages/index/home"
				// });
			},

			myUpper: function() {
				_this.modalName = "upperModal";
			},

		}
	}
</script>

<style lang="scss">
	/* .mytop{ padding: 30rpx 30rpx 50rpx 30rpx; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; position: relative; } */

	.topArea {
		width: 750rpx;
		height: 300rpx;
		position: relative;

		.topArea-Bg {
			position: absolute;
			width: 100%;
			height: 300rpx;
			z-index: -100;
		}

		.topArea-nav {
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;

			.nav-title {
				width: 100%;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
			}
		}

		.topArea-main {
			width: 100%;
			margin-top: 30rpx;
			padding: 0 24rpx;

			.noLogin {
				display: flex;
				align-items: center;

				.noLogin-icon {
					width: 120rpx;
					height: 120rpx;
					border-radius: 16rpx;
				}

				.noLogin-title {
					margin-left: 20rpx;
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}

			.haveLogin {
				display: flex;
				align-items: center;

				.login-avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 16rpx;
				}

				.login-infor {
					margin-left: 20rpx;

					.infor-top {
						margin-bottom: 20rpx;
						display: flex;
						align-items: center;

						.infor-top-name {
							font-size: 26rpx;
							color: #FFFFFF;
						}

						.infor-top-verify {
							margin-left: 30rpx;
							font-size: 24rpx;
							color: #FFFFFF;
							display: flex;
							align-items: center;

							.verify-icon {
								margin-right: 10rpx;
								width: 25rpx;
								height: 25rpx;
								border-radius: 50%;
								background-color: #F5DB03;

								.verify-icon-image {
									width: 25rpx;
									height: 25rpx;
								}
							}

						}

						.infor-top-noVerify {
							margin-left: 30rpx;
							font-size: 24rpx;
							color: #FFFFFF;
						}
					}

					.infor-bottom {
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}

	.topMenu {
		margin: 20rpx 20rpx;
		padding: 30rpx 0;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(0, 0, 0, 0.1);
		border-radius: 14rpx;
		opacity: 1;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;

		.topMenu-item {
			flex: 1;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.item-image {
				width: 60rpx;
				height: 60rpx;
				margin-bottom: 10rpx;
			}

			.item-icon {
				width: 60rpx;
				height: 60rpx;
				margin-bottom: 10rpx;
			}

			.item-title {
				color: #747474;
				font-size: 30rpx;
			}

			.item-titleSmall {
				margin-top: 5rpx;
				color: #747474;
				font-size: 24rpx;
			}
		}
	}

	.topApply {
		margin: 30rpx 20rpx;
		padding: 10rpx 30rpx;
		// height: 141rpx;
		background: linear-gradient(270deg, #484353 0%, #6F6F6F 100%);
		border-radius: 15rpx;
		display: flex;
		align-items: center;
		// justify-content: space-between;

		.topApply-left {
			width: 62rpx;
			height: 62rpx;
			border-radius: 50%;
			box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(0, 0, 0, 0.3);
			opacity: 1;

			.left-icon {
				width: 62rpx;
				height: 62rpx;
				border-radius: 50%;
			}
		}

		.topApply-center {
			flex: 1;
			margin-left: 20rpx;
			height: 50rpx;
			padding: 0 20rpx;
			border-left: 2rpx solid rgba(255, 232, 171, 0.16);
			font-size: 26rpx;
			line-height: 50rpx;
			color: #E0E0E0;
		}

		.topApply-right {
			width: 164rpx;
			height: 54rpx;
			line-height: 54rpx;
			text-align: center;
			background: linear-gradient(180deg, #FAE7B5 0%, #F3CA7E 100%);
			border-radius: 27rpx;
			opacity: 1;
			font-size: 22rpx;
			color: #3F3852;
		}
	}

	.teacher {
		margin: 30rpx 20rpx;
		padding: 10rpx 30rpx;
		// height: 141rpx;
		background: linear-gradient(270deg, #484353 0%, #6F6F6F 100%);
		border-radius: 15rpx;
		display: flex;
		align-items: center;
		// justify-content: space-between;

		.teacher-left {
			width: 62rpx;
			height: 62rpx;
			border-radius: 50%;
			box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(0, 0, 0, 0.3);
			opacity: 1;

			.left-icon {
				width: 62rpx;
				height: 62rpx;
				border-radius: 50%;
			}
		}

		.teacher-center {
			margin-left: 20rpx;
			height: 50rpx;
			padding: 0 20rpx;
			border-left: 2rpx solid rgba(255, 232, 171, 0.16);
			font-size: 26rpx;
			line-height: 50rpx;
			color: #E0E0E0;
		}
	}
</style>