perf(mine): 个人信息模块适老化优化

pages/mine/avatar/avatar.vue

@@ -1,4 +1,5 @@
 <template>
+	<page-meta root-font-size="system" />
 	<view class="container">
 		<tt-cropper mode="ratio" :imageUrl="avatarModel.imageUrl" :width="500" :height="500" :radius="90" :delay="300"
 			@cancel="onCancel" @confirm="onConfirm">
@@ -8,11 +9,10 @@
 		  <image class="avatar-image" :src="avatarModel.avatarPath" mode="aspectFill" @click="previewImage(avatarModel.avatarPath)"></image>
 		  <image class="blur-image" :src="avatarModel.avatarPath" mode="aspectFill"></image>
 		</view>
-
-
-
-		<button type="default" @click="selectFile">选择图片</button>
-		<button type="primary" @click="submitImage">提交</button>
+		<view class="button_container">
+			<button type="default" @click="selectFile">选择图片</button>
+			<button type="primary" @click="submitImage">提交</button>
+		</view>
 	</view>
 </template>
 
@@ -130,15 +130,20 @@
 			margin-top: 10px;
 			width: 90%;
 		}
+		.button_container {
+			button {
+				font-size: calc(18px + .5*(1rem - 16px));
+			}
+		}
 	}
 	
 	/* wxss */
 	.preview {
-	      margin: 3rem auto;
-	      width: 15rem;
-	      height: 15rem;
-	  position: relative;
-	  overflow: hidden;
+		margin: 3rem auto;
+		width: calc(15rem + 0px);
+		height: calc(15rem + 0px);
+		position: relative;
+		overflow: hidden;
 	}
 	
 	.avatar-image,

pages/mine/checkIn/checkIn.vue

@@ -1,4 +1,5 @@
 <template>
+	<page-meta root-font-size="system" />
 	<view class="attendance-page">
 
 		<view class="header">
@@ -620,7 +621,7 @@
 
 	.ygoa-icon {
 		margin-right: 0.5rem;
-		font-size: 2.1rem;
+		font-size: calc(2rem + 0px) !important;
 		vertical-align: middle;
 		/* 确保图标与文本竖直居中 */
 	}
@@ -629,9 +630,43 @@
 		padding: 20px;
 		background-color: #f9f9f9;
 
-		.calendar-content {
+		::v-deep .calendar-content {
 			margin: -20px;
 			margin-top: 20px;
+			.uni-calendar__header {
+				.uni-calendar__header-text {
+					font-size: calc(14px + .5*(1rem - 16px)) !important;
+				}
+				.uni-calendar__backtoday {
+					padding: 2px 8px 2px 10px !important;
+					font-size: calc(0.75rem + 0px) !important;
+				}
+			}
+			.uni-calendar__box {
+				.uni-calendar__weeks {
+					.uni-calendar__weeks-day {
+						.uni-calendar__weeks-day-text {
+							font-size: calc(14px + .5*(1rem - 16px)) !important;
+						}
+					}
+					.uni-calendar__weeks-item {
+						.uni-calendar-item__weeks-box-item {
+							.uni-calendar-item__weeks-box-circle {
+								width: calc(8px + .5*(1rem - 16px)) !important;
+								height: calc(8px + .5*(1rem - 16px)) !important;
+								top: calc(5px - .25*(1rem - 16px)) !important;
+								right: calc(5px - .25*(1rem - 16px)) !important;
+							}
+							.uni-calendar-item__weeks-box-text {
+								font-size: calc(14px + .5*(1rem - 16px)) !important;
+							}
+							.uni-calendar-item__weeks-lunar-text {
+								font-size: calc(12px + .5*(1rem - 16px)) !important;
+							}
+						}
+					}
+				}
+			}
 		}
 	}
 
@@ -642,13 +677,13 @@
 		margin-bottom: 20px;
 
 		.clockRecordTitle {
-			font-size: 1.25rem;
+			font-size: calc(1.25rem + 0px) !important;
 			margin: auto;
 		}
 	}
 
 	.title {
-		font-size: 24px;
+		font-size: calc(1.5rem + 0px) !important;
 		font-weight: bold;
 		color: #333;
 	}
@@ -677,7 +712,7 @@
 
 	.statistic-title {
 		text-align: center;
-		font-size: 20px;
+		font-size: calc(1.25rem + 0px) !important;
 		font-weight: bold;
 		color: #333;
 	}
@@ -694,15 +729,15 @@
 	}
 
 	.value {
-		font-size: 18px;
+		font-size: calc(1.125rem + 0px) !important;
 		font-weight: bold;
+		line-height: calc(2rem + 0px) !important;
 		color: #333;
 	}
 
-	.value,
 	.label {
-		line-height: 50rpx;
-		/* 与图标高度一致，确保垂直对齐 */
+		font-size: calc(1rem + 0px) !important;
+		line-height: calc(2rem + 0px) !important;
 	}
 
 	.chart-container {
@@ -710,7 +745,7 @@
 	}
 
 	.chart-title {
-		font-size: 20px;
+		font-size: calc(1.25rem + 0px) !important;
 		font-weight: bold;
 		text-align: center;
 		margin-bottom: 10px;
@@ -722,7 +757,6 @@
 		height: 300px;
 	}
 
-
 	.todayCheckIn {
 		background-color: #ffffff;
 		padding: 20px;
@@ -732,8 +766,6 @@
 		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 	}
 
-
-
 	.check-in-container {
 		width: 100%;
 		height: 100%;
@@ -744,12 +776,11 @@
 	}
 
 	.todayAttTitle {
-		font-size: 22px;
+		font-size: calc(1.375rem + 0px) !important;
 		font-weight: bold;
 		margin-bottom: 20px;
 	}
 
-
 	.info-row {
 		width: 100%;
 		display: flex;
@@ -767,10 +798,6 @@
 		/* 确保图标与文本竖直居中 */
 	}
 
-
-
-
-
 	.clockRecord {
 		margin-bottom: 20px;
 		padding: 10px;
@@ -795,8 +822,6 @@
 		margin: 10px 0;
 	}
 
-
-
 	.shift-label {
 		font-size: 14px;
 		color: #333;

pages/mine/clockIn/clockIn.vue

@@ -1,4 +1,5 @@
 <template>
+	<page-meta root-font-size="system" />
 	<view class="container">
 		<!-- 时间日期信息 -->
 		<view class="header">
@@ -453,12 +454,13 @@ function isClockIn(attType) {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
 @import "@/static/font/ygoa/iconfont.css";
 
 .ygoa-icon {
 	margin-right: 20rpx;
-	font-size: 50rpx;
+	/* font-size: calc(26px + .5(1rem - 16px)); */
+	font-size: calc(1.625rem + 0px) !important;
 }
 
 .container {
@@ -466,32 +468,30 @@ function isClockIn(attType) {
 	flex-direction: column;
 	align-items: center;
 	padding: 20rpx;
-}
-
-.header {
-	width: 100%;
-	height: 200rpx;
-	background-color: #f8f8f8;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-}
-
-.day {
-	font-size: 24px;
-	color: #333;
-	/* font-weight: bold; */
-}
+	.header {
+		width: 100%;
+		height: 200rpx;
+		background-color: #f8f8f8;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		.day {
+			font-size: calc(1.5rem + 0px);
+			color: #333;
+			/* font-weight: bold; */
+		}
 
-.date {
-	font-size: 16px;
-	color: #666;
-}
+		.date, .nowTime {
+			font-size: calc(1rem + 0px);
+			color: #666;
+		}
 
-.nowTime {
-	font-size: 16px;
-	color: #666;
+		// .nowTime {
+		// 	font-size: 16px;
+		// 	color: #666;
+		// }
+	}
 }
 
 .record {
@@ -500,40 +500,38 @@ function isClockIn(attType) {
 	border-top: 1px solid #ddd;
 	border-bottom: 1px solid #ddd;
 	padding: 0 15rpx;
-}
-
-.record-item {
-	display: flex;
-	align-items: center;
-	height: 100rpx;
-	border-bottom: 1px solid #eee;
-}
-
-.icon {
-	width: 50rpx;
-	height: 50rpx;
-	margin-right: 10rpx;
-}
-
-.title {
-	font-size: 28rpx;
-}
-
-.time {
-	font-size: 24rpx;
-	color: #999;
-	margin-left: auto;
-}
+	.record-item {
+		display: flex;
+		align-items: center;
+		height: 100rpx;
+		border-bottom: 1px solid #eee;
+		.icon {
+			width: 50rpx;
+			height: 50rpx;
+			margin-right: 10rpx;
+		}
+		.title {
+			font-size: calc(0.9rem + 0px);
+		}
 
-.signStatus {
-	font-size: 24rpx;
-	color: orange;
-	/* margin-left: auto; */
+		.time {
+			font-size: calc(0.8rem + 0px);
+			color: #999;
+			margin-left: auto;
+		}
+		.signStatus {
+			font-size: calc(0.9rem + 0px);
+			color: orange;
+			/* margin-left: auto; */
+		}
+	}
 }
 
-.map {
-	margin-top: 20rpx;
-	height: 56vh !important;
+::v-deep.map-content {
+	.map {
+		margin-top: 20rpx;
+		height: 56vh !important;
+	}
 }
 
 .footer {
@@ -541,9 +539,10 @@ function isClockIn(attType) {
 	margin-top: 20rpx;
 	display: flex;
 	justify-content: space-around;
+	button {
+		font-size: calc(18px + .5*(1rem - 16px));
+		width: 100%;
+	}
 }
 
-.footer button {
-	width: 100%;
-}
 </style>

pages/mine/edit/edit.vue

@@ -1,32 +1,33 @@
 <template>
+	<page-meta root-font-size="system" />
 	<view class="container">
 		<!-- 手机号码输入框 -->
 		<!-- <view class="input-group">
-			<text>手机号码：</text>
+			<text class="title">手机号码：</text>
 			<input type="number" maxlength="11" v-model="userInfo.desktopPhone" placeholder="请输入手机号码" />
 		</view> -->
 
 		<!-- 邮箱输入框 -->
 		<!-- <view class="input-group">
-			<text>邮箱：</text>
+			<text class="title">邮箱：</text>
 			<input type="text" v-model="userInfo.mail" placeholder="请输入邮箱地址" />
 		</view> -->
 		
 		<!-- qq输入框 -->
 		<view class="input-group">
-			<text>qq：</text>
+			<text class="title">qq：</text>
 			<input type="text" v-model="userInfo.qq" placeholder="请输入qq" />
 		</view>
 		
 		<!-- msn输入框 -->
 		<view class="input-group">
-			<text>msn：</text>
+			<text class="title">msn：</text>
 			<input type="text" v-model="userInfo.msn" placeholder="请输入msn" />
 		</view>
 
 		<!-- 用户生日输入框 -->
 		<!-- <view class="input-group">
-			<text>用户生日：</text>
+			<text class="title">用户生日：</text>
 			<view class="example-body">
 				<uni-datetime-picker type="date" :clear-icon="false" v-model="userInfo.birthday" @maskClick="maskClick" />
 			</view>
@@ -35,7 +36,7 @@
 		<!-- 性别选择器 -->
 		<!-- <view class="sex-selector">
 			<radio-group @change="handleGenderChange">
-				<text>性别：</text>
+				<text class="title">性别：</text>
 				<view class="sexLabel">
 					<label>
 						<radio value="M" :checked="userInfo.sex === 'M' " />男
@@ -136,23 +137,23 @@
 
 	.input-group {
 		margin-bottom: 10rpx;
-	}
-
-	.input-group input,
-	.sexLabel {
-		padding: 10rpx 20rpx;
-		margin: 20rpx auto;
-		height: 70rpx;
-	}
-
-	.input-group input {
-		border: 1px solid gainsboro; /* 修改边框样式 */
-		background-color: white;
-	}
-
-	.input-group text {
-		display: block;
-		margin-bottom: 20rpx;
+		.title {
+			// font-size: calc(16px + .5*(1rem - 16px));
+		}
+		input {
+			// font-size: calc(16px + .5*(1rem - 16px));
+			border: 1px solid gainsboro; /* 修改边框样式 */
+			background-color: white;
+		}
+		input, .sexLabel {
+			padding: 10rpx 20rpx;
+			margin: 20rpx auto;
+			height: 70rpx;
+		}
+		text {
+			display: block;
+			margin-bottom: 20rpx;
+		}
 	}
 
 	.sex-selector label {
@@ -161,5 +162,8 @@
 
 	.primaryBtn {
 		margin-top: 70rpx;
+		button {
+			font-size: calc(18px + .5*(1rem - 16px));
+		}
 	}
 </style>

pages/mine/index.vue

@@ -1,18 +1,17 @@
 <template>
+	<page-meta root-font-size="system" />
 	<view class="content">
 		<!-- 用户信息部分 -->
 		<uni-card margin="0" spacing="0">
 			<view class="headImg">
-				<image
-					:src="userStore.user.photo==''?config.baseUrlPre+config.defaultAvatarPath:config.baseUrlPre+userStore.user.photo"
-					class="avatar" @click="toEditAvatar"></image>
+				<image :src="config.baseUrlPre + (userStore.user.photo==''?config.defaultAvatarPath:userStore.user.photo)" class="avatar" @click="toEditAvatar"></image>
 			</view>
-			<view class="user-info">
+			<view class="user-info" @click="lookMsg()">
 				<view class="info-detail">
 					<view class="name">
 						<text>姓名: {{ userStore.user.name}}</text>
 					</view>
-					<view>
+					<view class="desc">
 						<text>ID: {{ userStore.user.useId }}</text>
 					</view>
 					<!-- 部门切换框 -->
@@ -20,18 +19,20 @@
 						<view class="uni-list-cell-left">
 							部门:
 						</view>
-						<view class="uni-list-cell-db">
-							<picker @change="bindPickerChange" :value="index" :range="deptNameArray">
-								<view class="uni-input">{{deptNameArray[index]}}</view>
+						<view class="uni-list-cell-db" @click.stop="">
+							<picker @change.stop="bindPickerChange" :value="index" :range="deptNameArray">
+								<view class="uni-input">
+								{{ deptNameArray[index] }}
+								</view>
 							</picker>
 						</view>
 					</view>
-					<view>
+					<view class="desc">
 						<text> 职务: {{ userStore.user.groupXUsers[index].posName ||'暂无'}}</text>
 					</view>
 
 				</view>
-				<uni-icons @click="lookMsg()" type="forward" size="16" margin-left="10px"></uni-icons>
+				<uni-icons type="forward" size="16" margin-left="10px"></uni-icons>
 			</view>
 		</uni-card>
 
@@ -129,13 +130,12 @@
 	}
 </script>
 
-
-<style lang="scss">
+<style lang="scss" scoped>
 	@import "@/static/font/ygoa/iconfont.css";
 
 	.ygoa-icon {
-		margin-right: 0.625rem;
-		font-size: 1.6rem;
+		margin-right: calc(10px + .5*(1rem - 16px)) !important;
+		font-size: calc(1.6rem + 0px) !important;
 	}
 
 	.content {
@@ -147,40 +147,46 @@
 	.user-info {
 		display: flex;
 		align-items: center;
-		padding: 1rem 3rem;
+		padding: 16px 48px;
 		border-bottom: 1rpx solid #666;
 		color: #777;
+		::v-deep .uni-icons {
+			font-size: calc(1rem + 0px) !important;
+		}
 	}
 
 
 	.avatar {
-		width: 6.25rem;
-		height: 6.25rem;
+		width: calc(6.25rem + 0px) !important;
+		height: calc(6.25rem + 0px) !important;
 		border-radius: 50%;
 	}
 
 	.info-detail {
 		flex-grow: 1;
 		// text-align: center;
+		.name {
+			padding: 0.5rem 0;
+			color: #333;
+			font-size: calc(1.1rem + 0px) !important;
+		}
+		.desc {
+			font-size: calc(0.875rem + 0px) !important;
+		}
 	}
 
-	.name {
-		padding: 0.5rem 0;
-		color: #333;
-		font-size: 1.1rem;
-	}
 
 
 
 	.function-list {
-		margin-bottom: 2rem;
+		margin-bottom: calc(16px + .5*(1rem - 16px)) !important;
 	}
 
 	.function-item {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: 0.75rem;
+		padding: calc(12px + .5*(1rem - 16px)) !important;
 		background-color: #ffffff;
 		border-radius: 10rpx;
 		margin-bottom: 0.75rem;
@@ -190,7 +196,7 @@
 
 	.title {
 		flex-grow: 1;
-		font-size: 1rem;
+		font-size: calc(1rem + 0px) !important;
 	}
 
 	.desc {
@@ -216,7 +222,7 @@
 
 	::v-deep .uni-list-cell-left {
 		padding: 0 0;
-		font-size: 1.1rem;
+		font-size: calc(1.1rem + 0px) !important;
 		color: #333;
 		flex: none;
 	}
@@ -230,7 +236,7 @@
 		text-decoration: underline;
 		/* 给文字添加下划线 */
 		color: blue;
-		font-size: 1.1rem;
+		font-size: calc(1.1rem + 0px) !important;
 		background-color: #f5f5f5;
 		overflow: hidden;
 		/* 隐藏超出部分 */

pages/mine/personal_message/personal_message.vue

@@ -1,4 +1,5 @@
 <template>
+	<page-meta root-font-size="system" />
 	<view class="container">
 		<!-- 用户头像 -->
 		<image :src="headImg" class="avatar"></image>
@@ -85,8 +86,8 @@
 		}
 	})
 	const headImg=ref()
-	function setHeadImg() {
-		headImg.value=userInfo.value.photo==""?config.baseUrlPre+config.defaultAvatarPath:config.baseUrlPre+userInfo.value.photo
+	function setHeadImg() { // TODO 直接返回 不创建变量
+		headImg.value=config.baseUrlPre + (userInfo.value.photo==""?config.defaultAvatarPath:userInfo.value.photo)
 	}
 </script>
 
@@ -99,8 +100,8 @@
 	}
 
 	.avatar {
-		width: 10rem;
-		height: 10rem;
+		width: calc(6.25rem + 0px);
+		height: calc(6.25rem + 0px);
 		border-radius: 50%;
 		margin-bottom: 15px;
 		display: block;
@@ -109,12 +110,12 @@
 	}
 
 	.username {
-		font-size: 18px;
+		font-size: calc(1.125rem + 0px);
 
 	}
 
 	.position {
-		font-size: 14px;
+		font-size: calc(0.875rem + 0px);
 		color: #666;
 		margin: 10px auto;
 	}
@@ -130,10 +131,13 @@
 	.info-item {
 		padding: 12px 16px;
 		border-top: 1px solid #eee;
-		font-size: 16px;
+		font-size: calc(1rem + 0px);
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
+		::v-deep .uni-icons {
+			font-size: calc(1.25rem + 0px);
+		}
 	}
 
 

pages/mine/setting/pwdEdit/pwdEdit.vue

@@ -1,4 +1,5 @@
 <template>
+	<page-meta root-font-size="system" />
 	<view class="container">
 		<!-- 旧密码输入框 -->
 		<view class="input-group-header">旧密码：</view>
@@ -103,32 +104,34 @@
 
 <style lang="scss" scoped>
 	.container{
-		padding-top: 1rem;
+		padding-top: 16px;
 		.input-group-header{
-			margin-left: 1rem;
+			font-size: calc(1rem + 0px);
+			margin-left: 16px;
 		}
 		.uni-input-wrapper {
 			display: flex;
 			align-items: center;
-			margin: 1rem;
+			margin: 16px;
 			background-color: #ffffff;
+			::v-deep .uni-input {
+				font-size: calc(28px + .5*(1rem - 16px));
+			}
 			.uni-icon {
+				font-size: calc(24px + .5*(1rem - 16px));
 				margin: 20rpx;
 			}
 		}
 		
 		.submitBtn {
+			font-size: calc(18px + .5*(1rem - 16px));
 			background-color: #007aff;
 			color: white;
 			width: 90%;
-			margin-top: 2rem;
+			margin-top: 32px;
 		}
 	}
 	.uni-eye-active {
 		color: #007aff;
 	}
-
-	
-
-	
 </style>

pages/mine/setting/setting.vue

@@ -1,5 +1,6 @@
 <!-- index.vue -->
 <template>
+	<page-meta root-font-size="system" />
 	<view class="container">
 		<!-- 列表区域 -->
 		<view class="list-item" @click="pwdEdit">
@@ -81,19 +82,23 @@ function checkUpdate() {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	font-size: 1rem;
+	font-size: calc(1rem + 0px);
 	padding: 0.75rem;
 	background-color: #ffffff;
 	border-radius: 10rpx;
 	margin-bottom: 0.75rem;
 	border-bottom: 1px solid gainsboro;
 
-	uni-icons {
+	::v-deep .uni-icons {
+		font-size: calc(1.25rem + 0px) !important;
 		margin-right: 6px;
 	}
 }
 
 .logOut {
 	margin-top: 2rem;
+	button {
+		font-size: calc(18px + .5*(1rem - 16px));
 	}
+}
 </style>