输入框兼容APP端

pages/login/forget.vue

@@ -1,218 +1,327 @@
 <template>
-	<view class="content">
-		<view class="top_bg">
-			<image class="top_close" @click="$navBack()" src="/static/image/login/close_icon.png" mode="scaleToFill" />
-			<view class="top_text">
-				<view>忘记密码</view>
-				<image
-					class="top_icon"
-					src="/static//image/login/dot_icon.png"
-					mode="scaleToFill"
-				/>
-			</view>
-		</view>
-
-		<view class="w pdx-40 main">
-			<u--input class="h-112" v-model="loginParam.phone" placeholder="请输入手机号码" border="bottom"
-				clearable></u--input>
-			<u--input class="h-112 mgt-16" v-model="loginParam.code" placeholder="请输入验证码" border="bottom" clearable>
-				<template slot="suffix">
-					<u-code :seconds="seconds" @end="end" @start="start" change-text="xs" ref="uCode"
-						:keep-running="true" @change="codeChange"></u-code>
-					<u-button :disabled="!isShowCode" @tap="sliderVerify" class="code_btn">{{ tips }}</u-button>
-				</template>
-			</u--input>
-			<u--input class="h-112 mgt-16" v-model="loginParam.password" :password="!isViewPassword" placeholder="请输入密码"
-				border="bottom" clearable>
-				<template slot="suffix">
-					<u-icon @click="isViewPassword = !isViewPassword" :name="isViewPassword ? 'eye-fill' : 'eye-off'"
-						color="#303030" size="24"></u-icon>
-				</template>
-			</u--input>
-			<u--input class="h-112 mgt-16" v-model="loginParam.confirmPwd" :password="!isViewConfirmPwd"
-				placeholder="请确认密码" border="bottom" clearable>
-				<template slot="suffix">
-					<u-icon @click="isViewConfirmPwd = !isViewConfirmPwd"
-						:name="isViewConfirmPwd ? 'eye-fill' : 'eye-off'" color="#303030" size="24"></u-icon>
-				</template>
-			</u--input>
-
-			<u-button :disabled="!isSubmit" class="login" @tap="submit">提交</u-button>
-		</view>
-		<zmm-slider-verify ref="sliderVerify" @success="successHandle" @error="errorHandle"
-			@close="closeHandle"></zmm-slider-verify>
-	</view>
+  <view class="content">
+    <view class="top_bg">
+      <image
+        class="top_close"
+        @click="$navBack()"
+        src="/static/image/login/close_icon.png"
+        mode="scaleToFill"
+      />
+      <view class="top_text">
+        <view>忘记密码</view>
+        <image
+          class="top_icon"
+          src="/static//image/login/dot_icon.png"
+          mode="scaleToFill"
+        />
+      </view>
+    </view>
+
+    <view class="w pdx-40 main">
+      <u--input
+        class="h-112"
+        v-model="loginParam.phone"
+        placeholder="请输入手机号码"
+        border="bottom"
+        clearable
+      ></u--input>
+
+      <!-- #ifndef APP-NVUE -->
+      <u-input
+        class="h-112 mgt-16"
+        v-model="loginParam.code"
+        placeholder="请输入验证码"
+        border="bottom"
+        clearable
+      >
+        <!-- #endif -->
+        <!-- #ifdef APP-NVUE -->
+        <u--input
+          class="h-112 mgt-16"
+          v-model="loginParam.code"
+          placeholder="请输入验证码"
+          border="bottom"
+          clearable
+        >
+          <!-- #endif -->
+
+          <template slot="suffix">
+            <u-code
+              :seconds="seconds"
+              @end="end"
+              @start="start"
+              change-text="xs"
+              ref="uCode"
+              :keep-running="true"
+              @change="codeChange"
+            ></u-code>
+            <u-button
+              :disabled="!isShowCode"
+              @tap="sliderVerify"
+              class="code_btn"
+              >{{ tips }}</u-button
+            >
+          </template>
+
+          <!-- #ifdef APP-NVUE -->
+        </u--input>
+        <!-- #endif -->
+        <!-- #ifndef APP-NVUE -->
+      </u-input>
+      <!-- #endif -->
+
+      <!-- #ifndef APP-NVUE -->
+      <u-input
+        class="h-112 mgt-16"
+        v-model="loginParam.password"
+        :password="!isViewPassword"
+        placeholder="请输入密码"
+        border="bottom"
+        clearable
+      >
+        <!-- #endif -->
+        <!-- #ifdef APP-NVUE -->
+        <u--input
+          class="h-112 mgt-16"
+          v-model="loginParam.password"
+          :password="!isViewPassword"
+          placeholder="请输入密码"
+          border="bottom"
+          clearable
+        >
+          <!-- #endif -->
+          <template slot="suffix">
+            <u-icon
+              @click="isViewPassword = !isViewPassword"
+              :name="isViewPassword ? 'eye-fill' : 'eye-off'"
+              color="#303030"
+              size="24"
+            ></u-icon>
+          </template>
+          <!-- #ifdef APP-NVUE -->
+        </u--input>
+        <!-- #endif -->
+        <!-- #ifndef APP-NVUE -->
+      </u-input>
+      <!-- #endif -->
+
+      <!-- #ifndef APP-NVUE -->
+      <u-input
+        class="h-112 mgt-16"
+        v-model="loginParam.confirmPwd"
+        :password="!isViewConfirmPwd"
+        placeholder="请确认密码"
+        border="bottom"
+        clearable
+      >
+        <!-- #endif -->
+        <!-- #ifdef APP-NVUE -->
+        <u--input
+          class="h-112 mgt-16"
+          v-model="loginParam.confirmPwd"
+          :password="!isViewConfirmPwd"
+          placeholder="请确认密码"
+          border="bottom"
+          clearable
+        >
+          <!-- #endif -->
+          <template slot="suffix">
+            <u-icon
+              @click="isViewConfirmPwd = !isViewConfirmPwd"
+              :name="isViewConfirmPwd ? 'eye-fill' : 'eye-off'"
+              color="#303030"
+              size="24"
+            ></u-icon>
+          </template>
+
+          <!-- #ifdef APP-NVUE -->
+        </u--input>
+        <!-- #endif -->
+        <!-- #ifndef APP-NVUE -->
+      </u-input>
+      <!-- #endif -->
+
+      <u-button :disabled="!isSubmit" class="login" @tap="submit"
+        >提交</u-button
+      >
+    </view>
+    <zmm-slider-verify
+      ref="sliderVerify"
+      @success="successHandle"
+      @error="errorHandle"
+      @close="closeHandle"
+    ></zmm-slider-verify>
+  </view>
 </template>
 
 <script>
-import { isValidPhone, isValidPassword } from '@/utils/index'
+import { isValidPhone, isValidPassword } from "@/utils/index";
 export default {
-	data() {
-		return {
-			isViewPassword: false,
-			isViewConfirmPwd: false,
-			isCode: false,//验证码按钮状态
-			tips: '',// 验证码提示文字
-			seconds: 60,//验证码秒数
-			loginParam: {
-				phone: undefined,
-				code: undefined,
-				password: undefined,
-				confirmPwd: undefined,
-			},
-		}
-	},
-	computed: {
-		isShowCode() {
-			return this.loginParam.phone && !this.isCode
-		},
-		isSubmit() {
-			return this.loginParam.phone && this.loginParam.code &&
-				this.loginParam.password && this.loginParam.confirmPwd
-		}
-
-	},
-	watch: {
-
-	},
-	onLoad() {
-
-	},
-	methods: {
-		//显示验证组件
-		sliderVerify() {
-			if(isValidPhone(this.loginParam.phone)) {
-				this.$refs['sliderVerify'].show()
-			} else {
-				uni.$u.toast('请输入正确手机号');
-			}
-		},
-		//验证通过回调
-		successHandle(e) {
-			console.log(e)
-			this.getCode()
-		},
-		//验证失败回调
-		errorHandle(e) {
-			console.log(e)
-		},
-		//组件关闭回调
-		closeHandle(e) {
-			console.log(e)
-		},
-		codeChange(text) {
-			this.tips = text;
-		},
-		getCode() {
-			if (this.$refs.uCode.canGetCode) {
-				// 模拟向后端请求验证码
-				uni.showLoading({
-					title: '正在获取验证码'
-				})
-				setTimeout(() => {
-					uni.hideLoading();
-					// 这里此提示会被this.start()方法中的提示覆盖
-					uni.$u.toast('验证码已发送');
-					// 通知验证码组件内部开始倒计时
-					this.$refs.uCode.start();
-				}, 2000);
-			} else {
-				uni.$u.toast('倒计时结束后再发送');
-			}
-		},
-		end() {
-			// uni.$u.toast('倒计时结束');
-			this.isCode = false
-		},
-		start() {
-			// uni.$u.toast('倒计时开始');
-			this.isCode = true
-		},
-		submit() {
-			console.log('提交参数 :===>>', this.loginParam);
-		}
-	}
-}
+  data() {
+    return {
+      isViewPassword: false,
+      isViewConfirmPwd: false,
+      isCode: false, //验证码按钮状态
+      tips: "", // 验证码提示文字
+      seconds: 60, //验证码秒数
+      loginParam: {
+        phone: undefined,
+        code: undefined,
+        password: undefined,
+        confirmPwd: undefined,
+      },
+    };
+  },
+  computed: {
+    isShowCode() {
+      return this.loginParam.phone && !this.isCode;
+    },
+    isSubmit() {
+      return (
+        this.loginParam.phone &&
+        this.loginParam.code &&
+        this.loginParam.password &&
+        this.loginParam.confirmPwd
+      );
+    },
+  },
+  watch: {},
+  onLoad() {},
+  methods: {
+    //显示验证组件
+    sliderVerify() {
+      if (isValidPhone(this.loginParam.phone)) {
+        this.$refs["sliderVerify"].show();
+      } else {
+        uni.$u.toast("请输入正确手机号");
+      }
+    },
+    //验证通过回调
+    successHandle(e) {
+      console.log(e);
+      this.getCode();
+    },
+    //验证失败回调
+    errorHandle(e) {
+      console.log(e);
+    },
+    //组件关闭回调
+    closeHandle(e) {
+      console.log(e);
+    },
+    codeChange(text) {
+      this.tips = text;
+    },
+    getCode() {
+      if (this.$refs.uCode.canGetCode) {
+        // 模拟向后端请求验证码
+        uni.showLoading({
+          title: "正在获取验证码",
+        });
+        setTimeout(() => {
+          uni.hideLoading();
+          // 这里此提示会被this.start()方法中的提示覆盖
+          uni.$u.toast("验证码已发送");
+          // 通知验证码组件内部开始倒计时
+          this.$refs.uCode.start();
+        }, 2000);
+      } else {
+        uni.$u.toast("倒计时结束后再发送");
+      }
+    },
+    end() {
+      // uni.$u.toast('倒计时结束');
+      this.isCode = false;
+    },
+    start() {
+      // uni.$u.toast('倒计时开始');
+      this.isCode = true;
+    },
+    submit() {
+      console.log("提交参数 :===>>", this.loginParam);
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
 .content {
-	width: 100vw;
-	height: 100vh;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	position: relative;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
 }
 
 .top_bg {
-	position: relative;
-	width: 100vw;
-	height: 568rpx;
-	flex-shrink: 0;
-	background: linear-gradient(to bottom, #ffd8bf, #ffffff);
-
-	.top_close {
-		position: absolute;
-		top: 128rpx;
-		left: 40rpx;
-		width: 48rpx;
-		height: 48rpx;
-	}
-
-	.top_text {
-		position: absolute;
-		top: 224rpx;
-		left: 64rpx;
-		display: flex;
-		color: #070602;
-		font-family: "MiSans VF";
-		font-size: 52rpx;
-		font-style: normal;
-		font-weight: 600;
-		line-height: normal;
-		letter-spacing: 0.66rpx;
-		text-transform: uppercase;
-	}
-
-	.top_icon {
-		margin-top: -10rpx;
-		margin-left: 8rpx;
-		width: 24rpx;
-		height: 24rpx;
-	}
+  position: relative;
+  width: 100vw;
+  height: 568rpx;
+  flex-shrink: 0;
+  background: linear-gradient(to bottom, #ffd8bf, #ffffff);
+
+  .top_close {
+    position: absolute;
+    top: 128rpx;
+    left: 40rpx;
+    width: 48rpx;
+    height: 48rpx;
+  }
+
+  .top_text {
+    position: absolute;
+    top: 224rpx;
+    left: 64rpx;
+    display: flex;
+    color: #070602;
+    font-family: "MiSans VF";
+    font-size: 52rpx;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+    letter-spacing: 0.66rpx;
+    text-transform: uppercase;
+  }
+
+  .top_icon {
+    margin-top: -10rpx;
+    margin-left: 8rpx;
+    width: 24rpx;
+    height: 24rpx;
+  }
 }
 
 .main {
-	margin-top: -72rpx;
-
-	.login {
-		margin-top: 240rpx;
-		height: 96rpx;
-		width: 100%;
-		flex-shrink: 0;
-		border-radius: 64rpx;
-		background: #FE6505;
-		color: #ffffff;
-		text-align: center;
-		font-family: "MiSans VF";
-		font-size: 36rpx;
-		font-style: normal;
-		font-weight: 500;
-	}
-
-	.code_btn {
-		padding: 0rpx 24rpx;
-		height: 60rpx;
-		border-radius: 32rpx;
-		font-size: 24rpx;
-		color: #fff;
-		font-weight: 400;
-		background: linear-gradient(0deg, #FE6505 0%, #FE6505 100%), #141111;
-	}
-
-	.code_btn_off {
-		background: #fe65054d;
-	}
+  margin-top: -72rpx;
+
+  .login {
+    margin-top: 240rpx;
+    height: 96rpx;
+    width: 100%;
+    flex-shrink: 0;
+    border-radius: 64rpx;
+    background: #fe6505;
+    color: #ffffff;
+    text-align: center;
+    font-family: "MiSans VF";
+    font-size: 36rpx;
+    font-style: normal;
+    font-weight: 500;
+  }
+
+  .code_btn {
+    padding: 0rpx 24rpx;
+    height: 60rpx;
+    border-radius: 32rpx;
+    font-size: 24rpx;
+    color: #fff;
+    font-weight: 400;
+    background: linear-gradient(0deg, #fe6505 0%, #fe6505 100%), #141111;
+  }
+
+  .code_btn_off {
+    background: #fe65054d;
+  }
 }
 </style>

pages/login/index.vue

@@ -1,229 +1,326 @@
 <template>
-	<view class="content">
-		<view class="top_bg">
-			<image class="top_close" @click="$navTo('/pages/my/index','tabbar')" src="/static/image/login/close_icon.png" mode="scaleToFill" />
-			<view class="top_text">
-				<view>欢迎来到众酬帮</view>
-				<image
-					class="top_icon"
-					src="/static//image/login/dot_icon.png"
-					mode="scaleToFill"
-				/>
-			</view>
-		</view>
-
-		<view class="w pdx-40 main">
-			<u--input class="h-112" v-model="loginParam.phone" placeholder="请输入手机号码" border="bottom"
-				clearable></u--input>
-			<u--input v-if="loginParam.loginWay === 'password'" class="h-112 mgt-16" v-model="loginParam.password"
-				:password="!isViewPassword" placeholder="请输入密码" border="bottom" clearable>
-				<template slot="suffix">
-					<u-icon @click="isViewPassword = !isViewPassword" :name="isViewPassword ? 'eye-fill' : 'eye-off'"
-						color="#303030" size="24"></u-icon>
-				</template>
-			</u--input>
-			<u--input v-else class="h-112 mgt-16" v-model="loginParam.code" placeholder="请输入验证码" border="bottom"
-				clearable>
-				<template slot="suffix">
-					<u-code :seconds="seconds" @end="end" @start="start" change-text="xs" ref="uCode"
-						:keep-running="true" @change="codeChange"></u-code>
-					<u-button :disabled="!isShowCode" @tap="sliderVerify" class="code_btn">{{ tips }}</u-button>
-				</template>
-			</u--input>
-			<view class="flex jc_between mgt-32">
-				<view v-if="loginParam.loginWay === 'password'" @click="loginParam.loginWay = 'code'"
-					class="text-24 text-500 text-303030">验证码登录</view>
-				<view v-else @click="loginParam.loginWay = 'password'" class="text-24 text-500 text-303030">密码登录</view>
-				<view class="text-24 text-500 text-303030" @click="$navTo('/pages/login/register')">注册</view>
-			</view>
-
-			<button class="login" @tap="submit">登录</button>
-			<view class="mgt-32 text-24 text-500 text-303030 text-center" @click="$navTo('/pages/login/forget')">忘记密码</view>
-			<view class="mgt-130">
-				<u-divider text="快捷登录"></u-divider>
-			</view>
-			<view class="w flex jc_center mgt-30">
-				<image class="w-80 h-80 " src="/static/image/login/weinxin_icon.png" mode="scaleToFill" />
-			</view>
-
-			<view class="mgt-72 text-24 text-7E7E7E text-500">
-				登录即代表同意
-				<text class="text-303030">《用户协议》</text>和
-				<text class="text-303030">《隐私政策》</text>
-			</view>
-		</view>
-		<zmm-slider-verify ref="sliderVerify" @success="successHandle" @error="errorHandle"
-			@close="closeHandle"></zmm-slider-verify>
-	</view>
+  <view class="content">
+    <view class="top_bg">
+      <image
+        class="top_close"
+        @click="$navTo('/pages/my/index', 'tabbar')"
+        src="/static/image/login/close_icon.png"
+        mode="scaleToFill"
+      />
+      <view class="top_text">
+        <view>欢迎来到众酬帮</view>
+        <image
+          class="top_icon"
+          src="/static//image/login/dot_icon.png"
+          mode="scaleToFill"
+        />
+      </view>
+    </view>
+
+    <view class="w pdx-40 main">
+      <u--input
+        class="h-112"
+        v-model="loginParam.phone"
+        placeholder="请输入手机号码"
+        border="bottom"
+        clearable
+      ></u--input>
+
+      <!-- #ifndef APP-NVUE -->
+      <u-input
+        v-if="loginParam.loginWay === 'password'"
+        class="h-112 mgt-16"
+        v-model="loginParam.password"
+        :password="!isViewPassword"
+        placeholder="请输入密码"
+        border="bottom"
+        clearable
+      >
+        <!-- #endif -->
+        <!-- #ifdef APP-NVUE -->
+        <u--input
+          v-if="loginParam.loginWay === 'password'"
+          class="h-112 mgt-16"
+          v-model="loginParam.password"
+          :password="!isViewPassword"
+          placeholder="请输入密码"
+          border="bottom"
+          clearable
+        >
+          <!-- #endif -->
+          <template slot="suffix">
+            <u-icon
+              @click="isViewPassword = !isViewPassword"
+              :name="isViewPassword ? 'eye-fill' : 'eye-off'"
+              color="#303030"
+              size="24"
+            ></u-icon>
+          </template>
+          <!-- #ifdef APP-NVUE -->
+        </u--input>
+        <!-- #endif -->
+        <!-- #ifndef APP-NVUE -->
+      </u-input>
+      <!-- #endif -->
+
+      <!-- #ifndef APP-NVUE -->
+      <u-input
+        v-else
+        class="h-112 mgt-16"
+        v-model="loginParam.code"
+        placeholder="请输入验证码"
+        border="bottom"
+        clearable
+      >
+        <!-- #endif -->
+        <!-- #ifdef APP-NVUE -->
+        <u--input
+          v-else
+          class="h-112 mgt-16"
+          v-model="loginParam.code"
+          placeholder="请输入验证码"
+          border="bottom"
+          clearable
+        >
+          <!-- #endif -->
+          <template slot="suffix">
+            <u-code
+              :seconds="seconds"
+              @end="end"
+              @start="start"
+              change-text="xs"
+              ref="uCode"
+              :keep-running="true"
+              @change="codeChange"
+            ></u-code>
+            <u-button
+              :disabled="!isShowCode"
+              @tap="sliderVerify"
+              class="code_btn"
+              >{{ tips }}</u-button
+            >
+          </template>
+          <!-- #ifdef APP-NVUE -->
+        </u--input>
+        <!-- #endif -->
+        <!-- #ifndef APP-NVUE -->
+      </u-input>
+      <!-- #endif -->
+
+      <view class="flex jc_between mgt-32">
+        <view
+          v-if="loginParam.loginWay === 'password'"
+          @click="loginParam.loginWay = 'code'"
+          class="text-24 text-500 text-303030"
+          >验证码登录</view
+        >
+        <view
+          v-else
+          @click="loginParam.loginWay = 'password'"
+          class="text-24 text-500 text-303030"
+          >密码登录</view
+        >
+        <view
+          class="text-24 text-500 text-303030"
+          @click="$navTo('/pages/login/register')"
+          >注册</view
+        >
+      </view>
+
+      <button class="login" @tap="submit">登录</button>
+      <view
+        class="mgt-32 text-24 text-500 text-303030 text-center"
+        @click="$navTo('/pages/login/forget')"
+        >忘记密码</view
+      >
+      <view class="mgt-130">
+        <u-divider text="快捷登录"></u-divider>
+      </view>
+      <view class="w flex jc_center mgt-30">
+        <image
+          class="w-80 h-80"
+          src="/static/image/login/weinxin_icon.png"
+          mode="scaleToFill"
+        />
+      </view>
+
+      <view class="mgt-72 text-24 text-7E7E7E text-500">
+        登录即代表同意
+        <text class="text-303030">《用户协议》</text>和
+        <text class="text-303030">《隐私政策》</text>
+      </view>
+    </view>
+    <zmm-slider-verify
+      ref="sliderVerify"
+      @success="successHandle"
+      @error="errorHandle"
+      @close="closeHandle"
+    ></zmm-slider-verify>
+  </view>
 </template>
 
 <script>
-import { isValidPhone, isValidPassword } from '@/utils/index'
+import { isValidPhone, isValidPassword } from "@/utils/index";
 export default {
-	data() {
-		return {
-			isViewPassword: false,
-			isCode: false,//验证码按钮状态
-			tips: '',// 验证码提示文字
-			seconds: 60,//验证码秒数
-			loginParam: {
-				phone: undefined,
-				password: undefined,
-				code: undefined,
-				loginWay: 'password'
-			},
-		}
-	},
-	computed: {
-		isShowCode() {
-			return this.loginParam.phone && !this.isCode
-		}
-
-	},
-	watch: {
-
-	},
-	onLoad() {
-
-	},
-	methods: {
-		//显示验证组件
-		sliderVerify() {
-			if(isValidPhone(this.loginParam.phone)) {
-				this.$refs['sliderVerify'].show()
-			} else {
-				uni.$u.toast('请输入正确手机号');
-			}
-		},
-		//验证通过回调
-		successHandle(e) {
-			console.log(e)
-			this.getCode()
-		},
-		//验证失败回调
-		errorHandle(e) {
-			console.log(e)
-		},
-		//组件关闭回调
-		closeHandle(e) {
-			console.log(e)
-		},
-		codeChange(text) {
-			this.tips = text;
-		},
-		getCode() {
-			if (this.$refs.uCode.canGetCode) {
-				// 模拟向后端请求验证码
-				uni.showLoading({
-					title: '正在获取验证码'
-				})
-				setTimeout(() => {
-					uni.hideLoading();
-					// 这里此提示会被this.start()方法中的提示覆盖
-					uni.$u.toast('验证码已发送');
-					// 通知验证码组件内部开始倒计时
-					this.$refs.uCode.start();
-				}, 2000);
-			} else {
-				uni.$u.toast('倒计时结束后再发送');
-			}
-		},
-		end() {
-			// uni.$u.toast('倒计时结束');
-			this.isCode = false
-		},
-		start() {
-			// uni.$u.toast('倒计时开始');
-			this.isCode = true
-		},
-		submit() {
-			console.log('提交参数 :===>>', this.loginParam);
-			//todo 请求后端接口 
-			// 通过后跳转到个人中心
-			this.$navTo('/pages/my/index','redirect')
-		}
-	}
-}
+  data() {
+    return {
+      isViewPassword: false,
+      isCode: false, //验证码按钮状态
+      tips: "", // 验证码提示文字
+      seconds: 60, //验证码秒数
+      loginParam: {
+        phone: undefined,
+        password: undefined,
+        code: undefined,
+        loginWay: "password",
+      },
+    };
+  },
+  computed: {
+    isShowCode() {
+      return this.loginParam.phone && !this.isCode;
+    },
+  },
+  watch: {},
+  onLoad() {},
+  methods: {
+    //显示验证组件
+    sliderVerify() {
+      if (isValidPhone(this.loginParam.phone)) {
+        this.$refs["sliderVerify"].show();
+      } else {
+        uni.$u.toast("请输入正确手机号");
+      }
+    },
+    //验证通过回调
+    successHandle(e) {
+      console.log(e);
+      this.getCode();
+    },
+    //验证失败回调
+    errorHandle(e) {
+      console.log(e);
+    },
+    //组件关闭回调
+    closeHandle(e) {
+      console.log(e);
+    },
+    codeChange(text) {
+      this.tips = text;
+    },
+    getCode() {
+      if (this.$refs.uCode.canGetCode) {
+        // 模拟向后端请求验证码
+        uni.showLoading({
+          title: "正在获取验证码",
+        });
+        setTimeout(() => {
+          uni.hideLoading();
+          // 这里此提示会被this.start()方法中的提示覆盖
+          uni.$u.toast("验证码已发送");
+          // 通知验证码组件内部开始倒计时
+          this.$refs.uCode.start();
+        }, 2000);
+      } else {
+        uni.$u.toast("倒计时结束后再发送");
+      }
+    },
+    end() {
+      // uni.$u.toast('倒计时结束');
+      this.isCode = false;
+    },
+    start() {
+      // uni.$u.toast('倒计时开始');
+      this.isCode = true;
+    },
+    submit() {
+      console.log("提交参数 :===>>", this.loginParam);
+      //todo 请求后端接口
+      // 通过后跳转到个人中心
+      this.$navTo("/pages/my/index", "redirect");
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
 .content {
-	width: 100vw;
-	height: 100vh;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	position: relative;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
 }
 
 .top_bg {
-	position: relative;
-	width: 100vw;
-	height: 568rpx;
-	flex-shrink: 0;
-	background: linear-gradient(to bottom, #ffd8bf, #ffffff);
-
-	.top_close {
-		position: absolute;
-		top: 128rpx;
-		left: 40rpx;
-		width: 48rpx;
-		height: 48rpx;
-	}
-
-	.top_text {
-		position: absolute;
-		top: 224rpx;
-		left: 64rpx;
-		display: flex;
-		color: #070602;
-		font-family: "MiSans VF";
-		font-size: 52rpx;
-		font-style: normal;
-		font-weight: 600;
-		line-height: normal;
-		letter-spacing: 0.66rpx;
-		text-transform: uppercase;
-	}
-
-	.top_icon {
-		margin-top: -10rpx;
-		margin-left: 8rpx;
-		width: 24rpx;
-		height: 24rpx;
-	}
+  position: relative;
+  width: 100vw;
+  height: 568rpx;
+  flex-shrink: 0;
+  background: linear-gradient(to bottom, #ffd8bf, #ffffff);
+
+  .top_close {
+    position: absolute;
+    top: 128rpx;
+    left: 40rpx;
+    width: 48rpx;
+    height: 48rpx;
+  }
+
+  .top_text {
+    position: absolute;
+    top: 224rpx;
+    left: 64rpx;
+    display: flex;
+    color: #070602;
+    font-family: "MiSans VF";
+    font-size: 52rpx;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+    letter-spacing: 0.66rpx;
+    text-transform: uppercase;
+  }
+
+  .top_icon {
+    margin-top: -10rpx;
+    margin-left: 8rpx;
+    width: 24rpx;
+    height: 24rpx;
+  }
 }
 
 .main {
-	margin-top: -72rpx;
-
-	.login {
-		margin-top: 136rpx;
-		height: 96rpx;
-		width: 100%;
-		flex-shrink: 0;
-		border-radius: 64rpx;
-		background: #FE6505;
-		color: #ffffff;
-		text-align: center;
-		font-family: "MiSans VF";
-		font-size: 36rpx;
-		font-style: normal;
-		font-weight: 500;
-	}
-
-	.code_btn {
-		padding: 0rpx 24rpx;
-		height: 60rpx;
-		border-radius: 32rpx;
-		font-size: 24rpx;
-		color: #fff;
-		font-weight: 400;
-		background: linear-gradient(0deg, #FE6505 0%, #FE6505 100%), #141111;
-	}
-
-	.code_btn_off {
-		background: #fe65054d;
-	}
+  margin-top: -72rpx;
+
+  .login {
+    margin-top: 136rpx;
+    height: 96rpx;
+    width: 100%;
+    flex-shrink: 0;
+    border-radius: 64rpx;
+    background: #fe6505;
+    color: #ffffff;
+    text-align: center;
+    font-family: "MiSans VF";
+    font-size: 36rpx;
+    font-style: normal;
+    font-weight: 500;
+  }
+
+  .code_btn {
+    padding: 0rpx 24rpx;
+    height: 60rpx;
+    border-radius: 32rpx;
+    font-size: 24rpx;
+    color: #fff;
+    font-weight: 400;
+    background: linear-gradient(0deg, #fe6505 0%, #fe6505 100%), #141111;
+  }
+
+  .code_btn_off {
+    background: #fe65054d;
+  }
 }
 </style>

pages/login/register.vue

@@ -1,235 +1,350 @@
 <template>
-	<view class="content">
-		<view class="top_bg">
-			<image class="top_close" @click="$navBack()" src="/static/image/login/close_icon.png" mode="scaleToFill" />
-			<view class="top_text">
-				<view>注册众酬帮</view>
-				<image
-					class="top_icon"
-					src="/static//image/login/dot_icon.png"
-					mode="scaleToFill"
-				/>
-			</view>
-		</view>
-
-		<view class="w pdx-40 main">
-			<u--input class="h-112" v-model="loginParam.inviteCode" placeholder="请输入邀请码" border="bottom"
-				clearable></u--input>
-			<u--input class="h-112" v-model="loginParam.phone" placeholder="请输入手机号码" border="bottom"
-				clearable></u--input>
-			<u--input class="h-112 mgt-16" v-model="loginParam.code" placeholder="请输入验证码" border="bottom" clearable>
-				<template slot="suffix">
-					<u-code :seconds="seconds" @end="end" @start="start" change-text="xs" ref="uCode"
-						:keep-running="true" @change="codeChange"></u-code>
-					<u-button :disabled="!isShowCode" @tap="sliderVerify" class="code_btn">{{ tips }}</u-button>
-				</template>
-			</u--input>
-			<u--input class="h-112 mgt-16" v-model="loginParam.password" :password="!isViewPassword" placeholder="请输入密码"
-				border="bottom" clearable>
-				<template slot="suffix">
-					<u-icon @click="isViewPassword = !isViewPassword" :name="isViewPassword ? 'eye-fill' : 'eye-off'"
-						color="#303030" size="24"></u-icon>
-				</template>
-			</u--input>
-			<u--input class="h-112 mgt-16" v-model="loginParam.confirmPwd" :password="!isViewConfirmPwd"
-				placeholder="请确认密码" border="bottom" clearable>
-				<template slot="suffix">
-					<u-icon @click="isViewConfirmPwd = !isViewConfirmPwd"
-						:name="isViewConfirmPwd ? 'eye-fill' : 'eye-off'" color="#303030" size="24"></u-icon>
-				</template>
-			</u--input>
-
-			<u-button :disabled="!isSubmit" class="login" @tap="submit">提交</u-button>
-
-			<view class="mgt-48 text-24 text-7E7E7E text-500">
-				登录即代表同意
-				<text class="text-303030">《用户协议》</text>和
-				<text class="text-303030">《隐私政策》</text>
-			</view>
-		</view>
-		<zmm-slider-verify ref="sliderVerify" @success="successHandle" @error="errorHandle"
-			@close="closeHandle"></zmm-slider-verify>
-	</view>
+  <view class="content">
+    <view class="top_bg">
+      <image
+        class="top_close"
+        @click="$navBack()"
+        src="/static/image/login/close_icon.png"
+        mode="scaleToFill"
+      />
+      <view class="top_text">
+        <view>注册众酬帮</view>
+        <image
+          class="top_icon"
+          src="/static//image/login/dot_icon.png"
+          mode="scaleToFill"
+        />
+      </view>
+    </view>
+
+    <view class="w pdx-40 main">
+      <u--input
+        class="h-112"
+        v-model="loginParam.inviteCode"
+        placeholder="请输入邀请码"
+        border="bottom"
+        clearable
+      ></u--input>
+
+      <u--input
+        class="h-112"
+        v-model="loginParam.phone"
+        placeholder="请输入手机号码"
+        border="bottom"
+        clearable
+      ></u--input>
+
+      <!-- #ifndef APP-NVUE -->
+      <u-input
+        class="h-112 mgt-16"
+        v-model="loginParam.code"
+        placeholder="请输入验证码"
+        border="bottom"
+        clearable
+      >
+        <!-- #endif -->
+        <!-- #ifdef APP-NVUE -->
+        <u--input
+          class="h-112 mgt-16"
+          v-model="loginParam.code"
+          placeholder="请输入验证码"
+          border="bottom"
+          clearable
+        >
+          <!-- #endif -->
+          <template slot="suffix">
+            <u-code
+              :seconds="seconds"
+              @end="end"
+              @start="start"
+              change-text="xs"
+              ref="uCode"
+              :keep-running="true"
+              @change="codeChange"
+            ></u-code>
+            <u-button
+              :disabled="!isShowCode"
+              @tap="sliderVerify"
+              class="code_btn"
+              >{{ tips }}</u-button
+            >
+          </template>
+          <!-- #ifdef APP-NVUE -->
+        </u--input>
+        <!-- #endif -->
+        <!-- #ifndef APP-NVUE -->
+      </u-input>
+      <!-- #endif -->
+
+      <!-- #ifndef APP-NVUE -->
+      <u-input
+        class="h-112 mgt-16"
+        v-model="loginParam.password"
+        :password="!isViewPassword"
+        placeholder="请输入密码"
+        border="bottom"
+        clearable
+      >
+        <!-- #endif -->
+        <!-- #ifdef APP-NVUE -->
+        <u--input
+          class="h-112 mgt-16"
+          v-model="loginParam.password"
+          :password="!isViewPassword"
+          placeholder="请输入密码"
+          border="bottom"
+          clearable
+        >
+          <!-- #endif -->
+          <template slot="suffix">
+            <u-icon
+              @click="isViewPassword = !isViewPassword"
+              :name="isViewPassword ? 'eye-fill' : 'eye-off'"
+              color="#303030"
+              size="24"
+            ></u-icon>
+          </template>
+          <!-- #ifdef APP-NVUE -->
+        </u--input>
+        <!-- #endif -->
+        <!-- #ifndef APP-NVUE -->
+      </u-input>
+      <!-- #endif -->
+
+      <!-- #ifndef APP-NVUE -->
+      <u-input
+        class="h-112 mgt-16"
+        v-model="loginParam.confirmPwd"
+        :password="!isViewConfirmPwd"
+        placeholder="请确认密码"
+        border="bottom"
+        clearable
+      >
+        <!-- #endif -->
+        <!-- #ifdef APP-NVUE -->
+        <u--input
+          class="h-112 mgt-16"
+          v-model="loginParam.confirmPwd"
+          :password="!isViewConfirmPwd"
+          placeholder="请确认密码"
+          border="bottom"
+          clearable
+        >
+          <!-- #endif -->
+          <template slot="suffix">
+            <u-icon
+              @click="isViewConfirmPwd = !isViewConfirmPwd"
+              :name="isViewConfirmPwd ? 'eye-fill' : 'eye-off'"
+              color="#303030"
+              size="24"
+            ></u-icon>
+          </template>
+
+          <!-- #ifdef APP-NVUE -->
+        </u--input>
+        <!-- #endif -->
+        <!-- #ifndef APP-NVUE -->
+      </u-input>
+      <!-- #endif -->
+
+      <u-button :disabled="!isSubmit" class="login" @tap="submit"
+        >提交</u-button
+      >
+
+      <view class="mgt-48 text-24 text-7E7E7E text-500">
+        登录即代表同意
+        <text class="text-303030">《用户协议》</text>和
+        <text class="text-303030">《隐私政策》</text>
+      </view>
+    </view>
+    <zmm-slider-verify
+      ref="sliderVerify"
+      @success="successHandle"
+      @error="errorHandle"
+      @close="closeHandle"
+    ></zmm-slider-verify>
+  </view>
 </template>
 
 <script>
-import { isValidPhone, isValidPassword } from '@/utils/index'
+import { isValidPhone, isValidPassword } from "@/utils/index";
 export default {
-	data() {
-		return {
-			isViewPassword: false,
-			isViewConfirmPwd: false,
-			isCode: false,//验证码按钮状态
-			tips: '',// 验证码提示文字
-			seconds: 60,//验证码秒数
-			loginParam: {
-				inviteCode: undefined,
-				phone: undefined,
-				code: undefined,
-				password: undefined,
-				confirmPwd: undefined,
-			},
-		}
-	},
-	computed: {
-		isShowCode() {
-			return this.loginParam.phone && !this.isCode
-		},
-		isSubmit() {
-			return this.loginParam.phone && this.loginParam.code &&
-				this.loginParam.password && this.loginParam.confirmPwd
-		}
-
-	},
-	watch: {
-
-	},
-	onLoad() {
-
-	},
-	methods: {
-		//显示验证组件
-		sliderVerify() {
-			if(isValidPhone(this.loginParam.phone)) {
-				this.$refs['sliderVerify'].show()
-			} else {
-				uni.$u.toast('请输入正确手机号');
-			}
-		},
-		//验证通过回调
-		successHandle(e) {
-			console.log(e)
-			this.getCode()
-		},
-		//验证失败回调
-		errorHandle(e) {
-			console.log(e)
-		},
-		//组件关闭回调
-		closeHandle(e) {
-			console.log(e)
-		},
-		codeChange(text) {
-			this.tips = text;
-		},
-		getCode() {
-			if (this.$refs.uCode.canGetCode) {
-				// 模拟向后端请求验证码
-				uni.showLoading({
-					title: '正在获取验证码'
-				})
-				setTimeout(() => {
-					uni.hideLoading();
-					// 这里此提示会被this.start()方法中的提示覆盖
-					uni.$u.toast('验证码已发送');
-					// 通知验证码组件内部开始倒计时
-					this.$refs.uCode.start();
-				}, 2000);
-			} else {
-				uni.$u.toast('倒计时结束后再发送');
-			}
-		},
-		end() {
-			// uni.$u.toast('倒计时结束');
-			this.isCode = false
-		},
-		start() {
-			// uni.$u.toast('倒计时开始');
-			this.isCode = true
-		},
-		submit() {
-			if(isValidPhone(this.loginParam.phone)) return uni.$u.toast('请输入正确手机号');
-			if(isValidPassword(this.loginParam.password)) {
-				if(this.loginParam.password !== this.loginParam.confirmPwd) return uni.$u.toast('两次输入的密码不一致');
-				console.log('提交参数 :===>>', this.loginParam);
-				//todo 请求后端接口 
-
-				// 通过后跳转到个人中心
-				this.$navTo('/pages/my/index','redirect')
-			}
-		}
-	}
-}
+  data() {
+    return {
+      isViewPassword: false,
+      isViewConfirmPwd: false,
+      isCode: false, //验证码按钮状态
+      tips: "", // 验证码提示文字
+      seconds: 60, //验证码秒数
+      loginParam: {
+        inviteCode: undefined,
+        phone: undefined,
+        code: undefined,
+        password: undefined,
+        confirmPwd: undefined,
+      },
+    };
+  },
+  computed: {
+    isShowCode() {
+      return this.loginParam.phone && !this.isCode;
+    },
+    isSubmit() {
+      return (
+        this.loginParam.phone &&
+        this.loginParam.code &&
+        this.loginParam.password &&
+        this.loginParam.confirmPwd
+      );
+    },
+  },
+  watch: {},
+  onLoad() {},
+  methods: {
+    //显示验证组件
+    sliderVerify() {
+      if (isValidPhone(this.loginParam.phone)) {
+        this.$refs["sliderVerify"].show();
+      } else {
+        uni.$u.toast("请输入正确手机号");
+      }
+    },
+    //验证通过回调
+    successHandle(e) {
+      console.log(e);
+      this.getCode();
+    },
+    //验证失败回调
+    errorHandle(e) {
+      console.log(e);
+    },
+    //组件关闭回调
+    closeHandle(e) {
+      console.log(e);
+    },
+    codeChange(text) {
+      this.tips = text;
+    },
+    getCode() {
+      if (this.$refs.uCode.canGetCode) {
+        // 模拟向后端请求验证码
+        uni.showLoading({
+          title: "正在获取验证码",
+        });
+        setTimeout(() => {
+          uni.hideLoading();
+          // 这里此提示会被this.start()方法中的提示覆盖
+          uni.$u.toast("验证码已发送");
+          // 通知验证码组件内部开始倒计时
+          this.$refs.uCode.start();
+        }, 2000);
+      } else {
+        uni.$u.toast("倒计时结束后再发送");
+      }
+    },
+    end() {
+      // uni.$u.toast('倒计时结束');
+      this.isCode = false;
+    },
+    start() {
+      // uni.$u.toast('倒计时开始');
+      this.isCode = true;
+    },
+    submit() {
+      if (isValidPhone(this.loginParam.phone))
+        return uni.$u.toast("请输入正确手机号");
+      if (isValidPassword(this.loginParam.password)) {
+        if (this.loginParam.password !== this.loginParam.confirmPwd)
+          return uni.$u.toast("两次输入的密码不一致");
+        console.log("提交参数 :===>>", this.loginParam);
+        //todo 请求后端接口
+
+        // 通过后跳转到个人中心
+        this.$navTo("/pages/my/index", "redirect");
+      }
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
 .content {
-	width: 100vw;
-	height: 100vh;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	position: relative;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
 }
 
 .top_bg {
-	position: relative;
-	width: 100vw;
-	height: 568rpx;
-	flex-shrink: 0;
-	background: linear-gradient(to bottom, #ffd8bf, #ffffff);
-
-	.top_close {
-		position: absolute;
-		top: 128rpx;
-		left: 40rpx;
-		width: 48rpx;
-		height: 48rpx;
-	}
-
-	.top_text {
-		position: absolute;
-		top: 224rpx;
-		left: 64rpx;
-		display: flex;
-		color: #070602;
-		font-family: "MiSans VF";
-		font-size: 52rpx;
-		font-style: normal;
-		font-weight: 600;
-		line-height: normal;
-		letter-spacing: 0.66rpx;
-		text-transform: uppercase;
-	}
-
-	.top_icon {
-		margin-top: -10rpx;
-		margin-left: 8rpx;
-		width: 24rpx;
-		height: 24rpx;
-	}
+  position: relative;
+  width: 100vw;
+  height: 568rpx;
+  flex-shrink: 0;
+  background: linear-gradient(to bottom, #ffd8bf, #ffffff);
+
+  .top_close {
+    position: absolute;
+    top: 128rpx;
+    left: 40rpx;
+    width: 48rpx;
+    height: 48rpx;
+  }
+
+  .top_text {
+    position: absolute;
+    top: 224rpx;
+    left: 64rpx;
+    display: flex;
+    color: #070602;
+    font-family: "MiSans VF";
+    font-size: 52rpx;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+    letter-spacing: 0.66rpx;
+    text-transform: uppercase;
+  }
+
+  .top_icon {
+    margin-top: -10rpx;
+    margin-left: 8rpx;
+    width: 24rpx;
+    height: 24rpx;
+  }
 }
 
 .main {
-	margin-top: -72rpx;
-
-	.login {
-		margin-top: 112rpx;
-		height: 96rpx;
-		width: 100%;
-		flex-shrink: 0;
-		border-radius: 64rpx;
-		background: #FE6505;
-		color: #ffffff;
-		text-align: center;
-		font-family: "MiSans VF";
-		font-size: 36rpx;
-		font-style: normal;
-		font-weight: 500;
-	}
-
-	.code_btn {
-		padding: 0rpx 24rpx;
-		height: 60rpx;
-		border-radius: 32rpx;
-		font-size: 24rpx;
-		color: #fff;
-		font-weight: 400;
-		background: linear-gradient(0deg, #FE6505 0%, #FE6505 100%), #141111;
-	}
-
-	.code_btn_off {
-		background: #fe65054d;
-	}
+  margin-top: -72rpx;
+
+  .login {
+    margin-top: 112rpx;
+    height: 96rpx;
+    width: 100%;
+    flex-shrink: 0;
+    border-radius: 64rpx;
+    background: #fe6505;
+    color: #ffffff;
+    text-align: center;
+    font-family: "MiSans VF";
+    font-size: 36rpx;
+    font-style: normal;
+    font-weight: 500;
+  }
+
+  .code_btn {
+    padding: 0rpx 24rpx;
+    height: 60rpx;
+    border-radius: 32rpx;
+    font-size: 24rpx;
+    color: #fff;
+    font-weight: 400;
+    background: linear-gradient(0deg, #fe6505 0%, #fe6505 100%), #141111;
+  }
+
+  .code_btn_off {
+    background: #fe65054d;
+  }
 }
 </style>

pages/myMessage/chat.vue

@@ -5,7 +5,7 @@
         @click="$navBack()"
         class="w-48 h-48 abs_left"
         style="left: 32rpx"
-         src="/static/image/common/left_arrow_icon.png"
+        src="/static/image/common/left_arrow_icon.png"
         mode="scaleToFill"
       />
       <view class="text-36 text-500 text-070202">用户昵称123</view>
@@ -61,16 +61,39 @@
       </view>
     </view>
 
-    <view class="input_box">
-      <u--input class="input" placeholder="请输入消息内容">
-        <template slot="suffix">
-          <image
-            class="w-48 h-48 radio-circle"
-            src="/static/image/my/emoji_icon.png"
-            mode="scaleToFill"
-          />
-        </template>
-      </u--input>
+    <view class="input_box" :style="{ bottom: bottomVal }">
+      <!-- #ifndef APP-NVUE -->
+      <u-input
+        class="input"
+        placeholder="请输入消息内容"
+        :adjustPosition="false"
+        @focus="inputBindFocus"
+        @blur="inputBindBlur"
+      >
+        <!-- #endif -->
+        <!-- #ifdef APP-NVUE -->
+        <u--input
+          class="input"
+          placeholder="请输入消息内容"
+          :adjustPosition="false"
+          @focus="inputBindFocus"
+          @blur="inputBindBlur"
+        >
+          <!-- #endif -->
+          <template slot="suffix">
+            <image
+              class="w-48 h-48 radio-circle"
+              src="/static/image/my/emoji_icon.png"
+              mode="scaleToFill"
+            />
+          </template>
+
+          <!-- #ifdef APP-NVUE -->
+        </u--input>
+        <!-- #endif -->
+        <!-- #ifndef APP-NVUE -->
+      </u-input>
+      <!-- #endif -->
     </view>
   </view>
 </template>
@@ -78,10 +101,33 @@
 <script>
 export default {
   data() {
-    return {};
+    return {
+      bottomVal: "",
+    };
   },
   onLoad() {},
-  methods: {},
+  onReady() {
+    uni.onKeyboardHeightChange((res) => {
+      this.bottomVal = res.height + "px";
+      console.log("监听到键盘高度：", res.height);
+    });
+  },
+  methods: {
+    inputBindFocus(e) {
+      // 获取手机键盘的高度，赋值给input 所在盒子的 bottom 值
+      // 注意!!! 这里的 px 至关重要!!! 我搜到的很多解决方案都没有说这里要添加 px
+      // this.$emit("changeBottomVal", e.detail.height + "px");
+      // console.log("e :===>>", e);
+      // this.bottomVal = e.detail.height + "px";
+      // console.log(" inputBindFocus:===>>", this.bottomVal);
+    },
+    inputBindBlur() {
+      // input 失去焦点，键盘隐藏，设置 input 所在盒子的 bottom 值为0
+      // this.$emit("changeBottomVal", 0);
+      this.bottomVal = 0;
+      console.log(" inputBindBlur:===>>", this.bottomVal);
+    },
+  },
 };
 </script>
 
@@ -133,11 +179,14 @@ export default {
 }
 
 .input_box {
-  width: 100vw;
-  padding: 0 32rpx;
-  padding-top: 16rpx;
-  padding-bottom: 84rpx;
-  background-color: #fff;
+  position: absolute; // input 所在盒子设置绝对定位
+  flex-shrink: 0;
+  width: 100%;
+  left: 0;
+  bottom: 0; // 默认 0
+  z-index: 199;
+  padding: 16rpx 32rpx calc(env(safe-area-inset-bottom) + 24rpx);
+  background: #ffffff;
   box-shadow: 0 -12rpx 24rpx 0 #0000000a;
 
   .input {