家政人员简历样式开发

common/styles/global/pages.scss

@@ -682,3 +682,53 @@
 	.filter-btn + .filter-btn{margin-left: 60rpx;}
 }
 
+/*** 家政人员简历 ***/
+.phone-jianli-page{
+	width: 100%;height: 100vh;background-color: #f8f9fd;display: flex;flex-direction: column;
+	.jianli-wrap-box{overflow: auto;box-sizing: border-box;padding-bottom: 120rpx;}
+	.jianli-head-box{
+		display: flex;background-color:#3fd2a1;box-sizing: border-box;padding: 24rpx 36rpx;
+		margin: 24rpx 32rpx;border-radius: 10rpx;
+		.head-img-box{
+			width: 220rpx;height: 220rpx;margin-right: 32rpx;display: flex;align-items: center;
+			border-radius: 10rpx;overflow: hidden;position: relative;
+			.head-img{width: 100%;height: auto;}
+			.head-status{
+				height: 30rpx;line-height: 30rpx;padding: 0 16rpx;
+				position: absolute;right:0;bottom:0;border-radius: 10rpx 0 10rpx 0;text-align: center;
+				font-size: 24rpx;color: #fff;background-image: linear-gradient(to right, #fbba31, #fea32b);}
+		}
+		
+		.head-content-box{
+			display: flex;flex-direction: column;justify-content: space-around;font-size: 28rpx;color:#fff;
+			.name-row{font-size: 32rpx;font-weight: 600;}
+		}
+	}
+	
+	.jianli-body-box{background-color: #fff;box-sizing: border-box;padding: 24rpx 36rpx;}
+	.jbxx-label{word-spacing: 48rpx;margin-right: 10rpx;color: #666;flex-shrink: 0;}
+	.leixing-row{
+		display: flex;background-color: #e7f8f2;border-radius: 10rpx;
+		box-sizing: border-box;padding: 24rpx 32rpx;font-size: 28rpx;
+		.leixing-content{color: #333;font-weight: 600;}
+	}
+	
+	.body-jbxx-box{
+		box-sizing: border-box;padding: 24rpx 32rpx 0;
+		>view{color: #333;font-size: 28rpx;display: flex;margin-bottom: 20rpx;line-height: 1.5;}
+		.jbxx-title{font-size: 30rpx;color: #3fd2a1;font-weight: 600;}
+		.jbxx-tip{border-top: 1rpx solid #ebebeb;font-size: 24rpx;color: #666;
+		box-sizing: border-box;padding: 20rpx 0 0;justify-content: center;margin-bottom: 0;}
+	}
+	
+	.jianli-bottom-box{
+		width: 100%;height: 100rpx;background-color: #f9f9f9;border-top: 1rpx solid #eeeeee;z-index: 9;
+		position: fixed;left: var(-window-left);right: var(-window right);bottom: var(--window-bottom);
+		box-sizing: border-box;padding-bottom: env(safe-area-inset-bottom);display: flex;justify-content: space-around;align-items: center;
+		.bottom-icon{width: 36rpx;height: 36rpx;display: block;@include ezy-no-repeat-cover();margin: 0 auto 2rpx;}
+		.zl-icon{background-image: url("@/static/images/common/jz-editor-icon.png");}
+		.tel-icon{background-image: url("@/static/images/common/jz-tel-icon.png");}
+		.bottom-text{font-size: 24rpx;color: #333;}
+	}
+	
+}

pages/admin/Jiazheng/jiazhengUserInfo.vue

@@ -1,62 +1,55 @@
 <template>
-	<view class="jiazheng-uni-list">
+	<view class="phone-jianli-page">
 		<view class="icon-title-navBar-box">
 			<view @click="goUpPage" class="nav-bar-icon"></view>
 			<text class="nav-bar-title">家政人员信息</text>
 		</view>
-		<view>
-			<img style="width: 100rpx;height: 100rpx;" :src="jianliInfo.icon" alt="" />
-			<view>{{jianliInfo.zhuangtai}}</view>
-			<view>
-				<p>{{jianliInfo.realName}}</p>
-				<p>{{jianliInfo.nianling}}岁|{{jianliInfo.jiguan}}人</p>
-			</view>
-		</view>
-
-		<view>
-			类型：{{jianliInfo.leixing}}
-		</view>
-		<view>
-			<view>
-				<h1>基本信息</h1>
-				<view>
-					学历:{{jianliInfo.xieli}}
-				</view>
-				<view>
-					民族:{{jianliInfo.minzu}}
+		<view class="jianli-wrap-box">
+			<view class="jianli-head-box">
+				<view class="head-img-box">
+					<img class="head-img" :src="jianliInfo.icon" v-if="jianliInfo.icon">
+					<icon class="phone-default-userImg" v-else></icon>
+					<view class="head-status">{{jianliInfo.zhuangtai}}</view>
 				</view>
-				<view>
-					属相:{{jianliInfo.shuxiang}}
-				</view>
-				<view>
-					星座:{{jianliInfo.xingzuo}}
+				<view class="head-content-box">
+					<view class="name-row">{{jianliInfo.realName}}</view>
+					<view>{{jianliInfo.jiguan}}人</view>
+					<view>
+						<text>{{jianliInfo.nianling}}岁</text>
+						<text v-if="jianliInfo.jingyan"> | {{jianliInfo.jingyan}}</text>
+					</view>
 				</view>
-				<view>
-					性别:{{jianliInfo.gender}}
+			</view>
+		
+			<view class="jianli-body-box">
+				<view class="leixing-row">
+					<view class="jbxx-label">类 型：</view>
+					<text class="leixing-content">{{jianliInfo.leixing}}</text>
 				</view>
-				<view>
-					婚姻状况:{{jianliInfo.hunyin}}
+				<view class="body-jbxx-box">
+					<view class="jbxx-title">基本信息</view>
+					<view><view class="jbxx-label">学 历：</view>{{jianliInfo.xieli}}</view>
+					<view><view class="jbxx-label">民 族：</view>{{jianliInfo.minzu}} </view>
+					<view><view class="jbxx-label">属 相：</view>{{jianliInfo.shuxiang}} </view>
+					<view><view class="jbxx-label">星 座：</view>{{jianliInfo.xingzuo}} </view>
+					<view><view class="jbxx-label">性 别：</view>{{jianliInfo.gender}} </view>
+					<view><view class="jbxx-label">婚姻状况：</view>{{jianliInfo.hunyin}} </view>
+					<view><view class="jbxx-label">现住地址：</view>{{jianliInfo.juzhuDizhi}} </view>
+					<view><view class="jbxx-label">家政公司：</view>{{jianliInfo.jzName}} </view>
+					<view class="jbxx-tip">{{jianliInfo.tips}} </view>
 				</view>
-				<view>
-					现住地址:{{jianliInfo.juzhuDizhi}}
-				</view>
-				<view>
-					家政公司:{{jianliInfo.jzName}}
+			</view>
+			<view class="jianli-bottom-box">
+				<view @click="goJiazhengManage">
+					<icon class="bottom-icon zl-icon"></icon>
+					<text class="bottom-text">资料编辑</text>
 				</view>
 				<view>
-				{{jianliInfo.tips}}
+					<icon class="bottom-icon tel-icon"></icon>
+					<text class="bottom-text">拨打电话</text>
 				</view>
 			</view>
 		</view>
-
-	</view>
-	<view>
-		<view @click="goJiazhengManage">
-			资料编辑
-		</view>
-		<view>
-			资料编辑2
-		</view>
 	</view>
 </template>
 <script>
@@ -115,21 +108,3 @@
 		}
 	}
 </script>
-
-
-
-<style>
-	.jiazheng-uni-list {
-		display: flex;
-		width: 100%;
-		flex-direction: column;
-	}
-
-	.jiazheng-uni-list-left {
-		position: relative;
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: center;
-	}
-</style>