feat: 更新登录页面，优化头像选择和昵称输入界面，增强用户体验

src/pages/login/login.vue

@@ -1,28 +1,40 @@
 <template>
   <CustomNav title="登录" leftType="home" />
   <view class="login-container">
-    <view class="avatar-area">
-      <!-- only available in Weixin Mini Program: chooseAvatar open-type -->
-      <!-- 使用 tap 事件在打开前设置锁，防止重复调用导致 chooseAvatar:fail 错误 -->
-      <button
-        class="avatar-wrapper"
-        :class="{ disabled: isChoosing }"
-        :disabled="isChoosing"
-        open-type="chooseAvatar"
-        @tap="startChooseAvatar"
-        @chooseavatar="onChooseAvatar"
-      >
-        <view class="avatar-frame">
-          <image class="avatar-img" :src="avatarUrl" mode="aspectFill" />
+    <view class="spacer top" />
+    <view class="login-card">
+      <view class="title-section">
+        <text class="page-title">欢迎使用慢病管理APP</text>
+        </view>
+
+      <view class="avatar-area">
+        <text class="section-label">请点击下方选择您的头像</text>
+        <!-- only available in Weixin Mini Program: chooseAvatar open-type -->
+        <!-- 使用 tap 事件在打开前设置锁，防止重复调用导致 chooseAvatar:fail 错误 -->
+        <button
+          class="avatar-wrapper"
+          :class="{ disabled: isChoosing }"
+          :disabled="isChoosing"
+          open-type="chooseAvatar"
+          @tap="startChooseAvatar"
+          @chooseavatar="onChooseAvatar"
+        >
+          <view class="avatar-frame">
+            <image class="avatar-img" :src="avatarUrl" mode="aspectFill" />
+          </view>
+        </button>
         </view>
-      </button>
-    </view>
 
-    <form @submit.prevent="onSubmit">
-      <input class="nickname-input" type="nickname" placeholder="请输入昵称" v-model="nickname" @blur="onNicknameBlur" />
+      <form @submit.prevent="onSubmit">
+        <view class="input-section">
+          <text class="section-label">请输入您的名字</text>
+          <input class="nickname-input" type="nickname" placeholder="请点击此处进行输入" v-model="nickname" @blur="onNicknameBlur" />
+        </view>
 
-      <button form-type="submit" class="login-btn">使用微信登录并完善信息</button>
-    </form>
+        <button form-type="submit" class="login-btn">提交</button>
+      </form>
+    </view>
+    <view class="spacer bottom" />
   </view>
 </template>
 
@@ -108,34 +120,100 @@ function onSubmit() {
 
 <style>
 .login-container {
-  padding: 40rpx;
+  min-height: 100vh;
+  /* 为固定在顶部的 CustomNav 留出空间（状态栏 + 导航栏 44px） */
   padding-top: calc(var(--status-bar-height) + 44px + 40rpx);
+  /* 保留侧边与内部间距，使用 border-box 避免计算误差 */
+  padding-right: 40rpx;
+  padding-left: 40rpx;
+  /* 底部安全区：使用项目中声明的 --window-bottom 或 fallback */
+  padding-bottom: calc(var(--window-bottom, 0px) + 40rpx);
+  box-sizing: border-box;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
+}
+
+/* 让卡片在可用空间内垂直居中（当内容较短时） */
+.spacer {
+  width: 100%;
+}
+
+.spacer.top {
+  flex: 1;
+}
+
+.spacer.bottom {
+  flex: 2;
+}
+
+.login-card {
+  /* remove auto margins; vertical spacing controlled by spacers */
+  background: #fff;
+  border-radius: 20rpx;
+  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
+  padding: 60rpx 30rpx 120rpx 30rpx;
+  width: 100%;
+  max-width: 600rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.title-section {
+  text-align: center;
+  margin-bottom: 60rpx;
+}
+
+.page-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20rpx;
+  display: block;
+}
+
+.subtitle {
+  font-size: 28rpx;
+  color: #666;
+  display: block;
+}
+
+.section-label {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 20rpx;
+  display: block;
+  text-align: center;
 }
 
 .avatar-area {
-  margin-top: 80rpx;
-  margin-bottom: 40rpx;
+  margin-bottom: 60rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .avatar-wrapper {
-  width: 180rpx;
-  height: 180rpx;
-  border-radius: 180rpx;
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 200rpx;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-left: 0px;
-  padding-right: 0px;
+  padding: 0;
+  border: 4rpx solid #07C160;
+  background: #fff;
 }
 
 .avatar-frame {
   width: 100%;
   height: 100%;
-  border-radius: 90rpx;
+  border-radius: 100%;
   overflow: hidden;
   display: flex;
   align-items: center;
@@ -148,22 +226,45 @@ function onSubmit() {
   object-fit: cover;
 }
 
+.avatar-hint {
+  font-size: 24rpx;
+  color: #666;
+  margin-top: 20rpx;
+  text-align: center;
+}
+
+.input-section {
+  width: 100%;
+  margin-bottom: 60rpx;
+}
+
 .nickname-input {
   width: 100%;
-  height: 80rpx;
-  border: 1rpx solid #ddd;
-  border-radius: 8rpx;
-  padding: 0 20rpx;
-  margin-bottom: 30rpx;
+  text-align: center;
+  height: 100rpx;
+  border: 2rpx solid #ddd;
+  border-radius: 12rpx;
+  font-size: 32rpx;
+  background: #f9f9f9;
+  color: #333;
 }
 
 .login-btn {
   width: 100%;
-  height: 80rpx;
-  background-color: #007aff;
+  height: 100rpx;
+  background: linear-gradient(135deg, #07C160 0%, #00A854 100%);
   color: #fff;
-  border-radius: 8rpx;
-  line-height: 80rpx;
+  border-radius: 12rpx;
+  font-size: 36rpx;
+  font-weight: bold;
   text-align: center;
+  line-height: 100rpx;
+  border: none;
+  box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.3);
+}
+
+.login-btn:active {
+  background: linear-gradient(135deg, #00A854 0%, #07C160 100%);
+  transform: scale(0.98);
 }
 </style>