jp-zeroWorkerStation/pages/tab/mine/mine.vue

<template>
	<view>
		<u-navbar back-text="我的" back-icon-size="28" back-icon-color="#ffffff"
			:background="{backgroundColor: '#2795FD',}" :back-text-style="{color: '#ffffff'}"></u-navbar>
		<view class="top">
			<view class="photo">
				<u-avatar :src="src"></u-avatar>
			</view>
			<!-- <view class="login">
				请登录
			</view> -->
			<!-- 已登录 -->
			<view class="logined">
				<view class="name">
					你好，许慕 
					<view class="img-box">
						
						<img src="@/assets/img/riFill-shield-user-fill@1x.png" alt="">
					</view>
				</view>
				<view class="tel">
					155****1111
				</view>
				
			</view>
		</view>
		<!-- 求职信息 -->
		<view class="card card1">
			<view class="title">
				求职信息
			</view>
			 <u-grid :col="3" :border="false">
			 		<u-grid-item>
			 			<view class="icon">
			 				<img src="@/assets/img/riLine-folder-user-line@1x.png" alt="">
			 			</view>
			 			<view class="grid-text">求职信息</view>
			 		</u-grid-item>
			 		<u-grid-item>
			 			<view class="icon">
			 				<img src="@/assets/img/riLine-todo-line@1x.png" alt="">
			 			</view>
			 			<view class="grid-text">我的报名</view>
			 		</u-grid-item>
			 		<u-grid-item>
						<u-badge count="1" size="mini" :offset="[28,34]"></u-badge>
			 			<view class="icon">
			 				<img src="@/assets/img/riLine-mail-star-line@1x.png" alt="">
			 			</view>
			 			<view class="grid-text">收到邀请</view>
			 		</u-grid-item>
			 	</u-grid>
		</view>
		<!-- 用工服务 -->
		
		<view class="card ">
			<view class="title">
				用工服务
			</view>
			 <u-grid :col="4" :border="false">
			 		<u-grid-item>
			 			<view class="icon">
			 				<img src="@/assets/img/riLine-folder-2-line@1x.png" alt="">
			 			</view>
			 			<view class="grid-text">用工管理</view>
			 		</u-grid-item>
			 		<u-grid-item>
			 			<view class="icon">
			 				<img src="@/assets/img/riLine-inbox-archive-line@1x.png" alt="">
			 			</view>
			 			<view class="grid-text">收到报名</view>
			 		</u-grid-item>
			 		<u-grid-item>
			 			<view class="icon">
			 				<img src="@/assets/img/riLine-time-line@1x.png" alt="">
			 			</view>
			 			<view class="grid-text">邀请记录</view>
			 		</u-grid-item>
					<u-grid-item>
						<view class="icon">
							<img src="@/assets/img/riLine-service-line@1x.png" alt="">
						</view>
						<view class="grid-text">共享用工</view>
					</u-grid-item>
			 	</u-grid>
		</view>
		
		<!-- 其他服务 -->
		<view class="card ">
			<view class="title">
				其他服务
			</view>
			 <u-grid :col="3" :border="false">
			 		<u-grid-item @click="toAuthentication">
						<img src="@/assets/img/riFill-error-warning-fill@1x.png" class="badge-icon"></img>
						<img src="@/assets/img/riFill-checkbox-circle-fill@1x.png" class="checked">
			 			<view class="icon">
			 				<img src="@/assets/img/riLine-shield-user-line@1x.png" alt="">
			 			</view>
			 			<view class="grid-text">实名认证</view>
			 		</u-grid-item>
			 		<u-grid-item>
			 			<view class="icon">
			 				<img src="@/assets/img/riLine-customer-service-line@1x.png" alt="">
			 			</view>
			 			<view class="grid-text">联系客服</view>
			 		</u-grid-item>
			 		<u-grid-item>
			 			<view class="icon">
			 				<img src="@/assets/img/riLine-logout-box-r-line@1x.png" alt="">
			 			</view>
			 			<view class="grid-text">退出登录</view>
			 		</u-grid-item>
			 	</u-grid>
		</view>
		<!-- 登录弹窗 -->
			<u-popup v-model="show" mode="center" :closeable="true">
				<view class="title">
					登录荆开零工驿站
				</view>
				<view class="login-btn">
				<u-icon name="weixin-fill" size="46"></u-icon>	<text>微信用户一键登录</text>
				</view>
				
				<view class="radio">
					<!-- <radio></radio>
						<view class="agreement">
							阅读并同意<text style="color: #2795FD">《用户隐私协议》</text>
					</view> -->
					<u-radio-group v-model="value">
						<u-radio active-color="red">阅读并同意<text style="color: #2795FD">《用户隐私协议》</text></u-radio>
					</u-radio-group>
				</view>
			</u-popup>
		 

		<tabbar  :current="4"></tabbar>
	</view>
</template>

<script>
	import tabbar from "@/components/Tabbar.vue"
	
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				src: '',
				show:true,
			    value: 'false',
							
			}
		},
		methods: {
			toAuthentication() {
				uni.navigateTo({
					url: '/pages/mine/otherServices/authentication'
				})
			}
		}
	}
</script>
<style>
	page {
		background: #F0F0F2;
		padding-bottom: 150px;
	}
	
</style>
<style lang="scss" scoped>

	.top{
		
		display: flex;
		align-items: center;
		padding: 40rpx 32rpx 88rpx;
		background:url(@/assets/img/mineCover.png),linear-gradient(180deg, rgba(39,149,253,1) 0%,rgba(118,182,255,1) 100%);
	    background-repeat:no-repeat;
	  background-position: right;
	  .photo{
		  /deep/.u-avatar{
			  width: 120rpx !important;
			  height: 120rpx !important;
			  box-shadow: 0px 1px 3px 0px rgba(39, 149, 253, 100);
			  border: 2px solid rgba(255, 255, 255, 1);
		  }
	  }
	  .login{
		  color: rgba(255, 255, 255, 1);
		  font-size: 40rpx;
		  text-align: left;
		  font-family: 'PingFangSC-medium';
		  margin-left: 24rpx;
	  }
	  .logined{
		  color: rgba(255, 255, 255, 1);
		  margin-left: 24rpx;
		    .name{
				
				font-size: 40rpx;
				font-family: 'PingFangSC-medium';
				display: flex;
				align-items: center;
				.img-box{
					
					margin-left: 8rpx;
					overflow: hidden;
					img{
						width: 40rpx;
						height: 40rpx;
						vertical-align: middle;
						z-index: 999;
						position: relative;
						
						
						
					}
				}
				
			}
			.tel{
				margin-top: 8rpx;
				font-size: 32rpx;
			}
	  }
	
	}
  .card1{
	  margin-top: -32rpx !important;
	 
  }
  .card{
	  background-color: #fff;
	  border-radius: 12px;
	  margin: 32rpx ;
	  padding: 32rpx;
	  /deep/.u-grid-item{
	  		  width: 25% !important;
	  }
	  .title{
		  color: rgba(16, 16, 16, 1);
		  font-size: 40rpx;
		  margin-bottom: 20rpx;
	  }
	  .grid-text{
		  color: rgba(51, 51, 51, 1);
		  margin-top: 8rpx;
	  }
	 
	  .icon{
		  width: 56rpx;
		  height: 56rpx;
		  img{
			  width: 100%;
			  height: 100%;
		  }
	  }
	  .badge-icon {
	  			position: absolute;
	  			top: 24rpx;
	  			right: 40rpx;
	  			width: 30rpx;
	  			height: 30rpx;
	  		}
	  .checked{
	  	  position: absolute;
	  	  bottom: 72rpx;
	  	  right: 40rpx;
	  	  width: 30rpx;
	  	  height: 30rpx;
	  }
  }

// 弹窗
/deep/.u-mode-center-box{
	width: 560rpx !important;
	border-radius: 12px;
	padding: 80rpx 48rpx;
	display: flex;
	.title{
		color: rgba(16, 16, 16, 1);
		font-size: 36rpx;
		font-family: 'PingFangSC-medium';
	}
	.login-btn{
		background-color: rgba(0, 188, 99, 1);
		color: #fff;
		padding: 28rpx 70rpx;
		margin-top: 56rpx;
		margin-bottom: 16rpx;
		border-radius: 8px;
		display: flex;
		
		font-size: 32rpx;
		text{
			margin-left: 8rpx;
		}
	}
	.radio {
		display: inline-block;
		width: 100%;
		display: flex;
		justify-content: center;
		font-size: 24rpx;
		color: #777777;
		margin-left: 20rpx;
		.uni-radio-input{
			width: 24rpx;
			height: 24rpx;
			
		}
		
		.uni-radio-input-checked:before{
			font-size: 24rpx;
			    background-color: rgb(0, 122, 255);
			    border-color: rgb(0, 122, 255);
		}
	}
}


</style>