|
@@ -1,6 +1,138 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- mine
|
|
|
+ <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>
|
|
|
+ <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 ref="mytabbar"
|
|
|
:current="4"></tabbar>
|
|
|
</view>
|
|
@@ -14,7 +146,10 @@
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ src: '',
|
|
|
+ show:'true',
|
|
|
+ value: 'false',
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -22,7 +157,163 @@
|
|
|
}
|
|
|
}
|
|
|
</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>
|