修复h5

uniapp/pages/login/login.vue

@@ -22,43 +22,35 @@
 			<view class="form-card">
 				<view class="form">
 					<view class="field">
-						<u-input
+						<input
+							class="field-input"
 							v-model="tenantName"
+							type="text"
 							placeholder="请输入租户名称"
-							border="none"
-							color="#303133"
-							:customStyle="inputStyle"
-							:placeholderStyle="placeholderStyle"
+							placeholder-class="field-placeholder"
 						/>
 					</view>
 
 					<template v-if="loginType === 'phone'">
-						<view class="field">
-							<u-input
+						<view class="field field-phone">
+							<text class="prefix">+86</text>
+							<input
+								class="field-input"
 								v-model="phone"
-								placeholder="请输入手机号"
-								type="number"
+								type="tel"
 								maxlength="11"
-								border="none"
-								color="#303133"
-								:customStyle="inputStyle"
-								:placeholderStyle="placeholderStyle"
-							>
-								<template #prefix>
-									<text class="prefix">+86</text>
-								</template>
-							</u-input>
+								placeholder="请输入手机号"
+								placeholder-class="field-placeholder"
+							/>
 						</view>
 						<view class="field field-row">
-							<u-input
+							<input
+								class="field-input"
 								v-model="smsCode"
-								placeholder="请输入验证码"
 								type="number"
 								maxlength="6"
-								border="none"
-								color="#303133"
-								:customStyle="inputStyle"
-								:placeholderStyle="placeholderStyle"
+								placeholder="请输入验证码"
+								placeholder-class="field-placeholder"
 							/>
 							<text
 								class="code-link"
@@ -70,37 +62,31 @@
 
 					<template v-else>
 						<view class="field">
-							<u-input
+							<input
+								class="field-input"
 								v-model="username"
+								type="text"
 								placeholder="请输入账号"
-								border="none"
-								color="#303133"
-								:customStyle="inputStyle"
-								:placeholderStyle="placeholderStyle"
+								placeholder-class="field-placeholder"
 							/>
 						</view>
 						<view class="field">
-							<u-input
+							<input
+								class="field-input"
 								v-model="password"
-								placeholder="请输入密码"
 								type="password"
-								border="none"
-								color="#303133"
-								:customStyle="inputStyle"
-								:placeholderStyle="placeholderStyle"
+								placeholder="请输入密码"
+								placeholder-class="field-placeholder"
 							/>
 						</view>
-						<!-- 后台开启短信/邮箱登录校验时展示 -->
 						<view v-if="needLoginCode" class="field field-row">
-							<u-input
+							<input
+								class="field-input"
 								v-model="verifyCode"
-								placeholder="请输入登录验证码"
 								type="number"
 								maxlength="8"
-								border="none"
-								color="#303133"
-								:customStyle="inputStyle"
-								:placeholderStyle="placeholderStyle"
+								placeholder="请输入登录验证码"
+								placeholder-class="field-placeholder"
 							/>
 							<text
 								class="code-link"
@@ -180,14 +166,6 @@ const openVerify = ref(false)
 const verifyType = ref('')
 let timer = null
 
-const inputStyle = {
-	backgroundColor: 'transparent',
-	padding: '0 8rpx',
-	height: '96rpx',
-	fontSize: '28rpx'
-}
-const placeholderStyle = 'color: #909399; font-size: 28rpx'
-
 const needLoginCode = computed(() => {
 	return openVerify.value && (verifyType.value === 'sms' || verifyType.value === 'email')
 })
@@ -428,7 +406,8 @@ function goForget() {
 
 .page-inner {
 	padding: 0 48rpx;
-	padding-top: calc(var(--status-bar-height, 44px) + 80rpx);
+	padding-top: calc(env(safe-area-inset-top, 0px) + 80rpx);
+	padding-bottom: env(safe-area-inset-bottom, 0px);
 }
 
 .header {
@@ -488,12 +467,40 @@ function goForget() {
 	background: $color-bg-page;
 	border-radius: $radius-md;
 	padding: 0 24rpx;
-	overflow: hidden;
+	min-height: 96rpx;
+}
+
+.field-input {
+	width: 100%;
+	height: 96rpx;
+	line-height: 96rpx;
+	font-size: 32rpx;
+	color: $color-text;
+	background: transparent;
+	border: none;
+	outline: none;
+	box-sizing: border-box;
+	-webkit-appearance: none;
+}
+
+.field-placeholder {
+	color: $color-text-muted;
+	font-size: 32rpx;
+}
+
+.field-phone {
+	display: flex;
+	align-items: center;
 }
 
 .field-row {
 	display: flex;
 	align-items: center;
+
+	.field-input {
+		flex: 1;
+		min-width: 0;
+	}
 }
 
 .prefix {