|
|
@@ -1,6 +1,118 @@
|
|
|
<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>
|
|
|
<tabbar ref="mytabbar"
|
|
|
:current="4"></tabbar>
|
|
|
</view>
|
|
|
@@ -14,7 +126,8 @@
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ src: '',
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -22,7 +135,114 @@
|
|
|
}
|
|
|
}
|
|
|
</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;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
