美化了样式2.0

pages/loginModule/forgetPwd/forgetPwd.wxml

@@ -1,18 +1,21 @@
-<view class="flex-col page">
-  <image
-    class="self-center image"
-    src="./images/logo.png"
-  />
-  <text class="self-center text">欢迎登陆—青橙校园</text>
+<view class="page">
 
-  <view class="flex-col self-stretch group">
-    <text class="self-start font text_2">忘记密码</text>
+<!-- 顶部 Logo 与标题 -->
+<image class="logo" src="/static/logo.jpg" mode="aspectFit" />
+<text class="page-title">欢迎登录 — 丁香校园</text>
+
+<!-- 重置密码卡片 -->
+<view class="card">
+  <text class="card-title">忘记密码</text>
+
+  <view class="form">
 
     <!-- 手机号 -->
-    <view class="flex-col justify-start self-stretch relative section mt-20">
+    <view class="field">
       <input
-        class="flex-col justify-start items-start text-wrapper view input"
+        class="field-input"
         placeholder="请输入手机号"
+        placeholder-class="ph"
         maxlength="11"
         type="number"
         model:value="{{phone}}"
@@ -20,58 +23,55 @@
       />
     </view>
 
-    <view class="flex-col self-stretch group_2 mt-20">
-      <!-- 验证码 + 发送 -->
-      <view class="flex-row items-center self-stretch relative section_2">
-        <input
-          class="flex-col justify-start items-start text-wrapper_2 view_2 input_1"
-          placeholder="请输入验证码"
-          maxlength="6"
-          type="number"
-          model:value="{{code}}"
-          bindinput="onCodeInput"
-        />
-        <text
-          class="flex-col justify-start items-center shrink-0 text-wrapper_3 ml-12 text_6 send-code {{ countdown>0 ? 'disabled' : '' }}"
-          bindtap="{{ countdown>0 ? '' : 'getSmsCode' }}"
-        >{{ codeButtonText }}</text>
-      </view>
-
-      <!-- 新密码 -->
-      <view class="flex-col justify-start self-stretch relative section_1 mt-22">
-        <input
-          class="flex-col justify-start items-start text-wrapper text-wrapper_1 input_2"
-          placeholder="请输入密码"
-          password="true"
-          model:value="{{newPwd}}"
-          bindinput="onNewPwdInput"
-        />
-      </view>
-
-      <!-- 确认密码 -->
-      <view class="flex-col justify-start self-stretch relative section_3 mt-22">
-        <input
-          class="flex-col justify-start items-start text-wrapper text-wrapper_5 input_3"
-          placeholder="请再次输入密码"
-          password="true"
-          model:value="{{confirmPwd}}"
-          bindinput="onConfirmPwdInput"
-        />
-      </view>
-
-      <!-- 登录账号 -->
+    <!-- 验证码 + 发送 -->
+    <view class="field field-row">
+      <input
+        class="field-input flex-1"
+        placeholder="请输入验证码"
+        placeholder-class="ph"
+        maxlength="6"
+        type="number"
+        model:value="{{code}}"
+        bindinput="onCodeInput"
+      />
       <text
-        class="self-end text_9 mt-22 link"
-        bindtap="gotoLogin"
-      >登录账号</text>
+        class="code-btn {{ countdown>0 ? 'disabled' : '' }}"
+        bindtap="{{ countdown>0 ? '' : 'getSmsCode' }}"
+      >{{ codeButtonText }}
+      </text>
+    </view>
 
-      <!-- 重置密码 按钮 -->
-      <view
-        class="flex-col justify-start items-center self-stretch text-wrapper_4 mt-22 reset-button"
-        bindtap="resetPassword"
-      >
-        <text class="text_10">重置密码</text>
-      </view>
+    <!-- 新密码 -->
+    <view class="field">
+      <input
+        class="field-input"
+        placeholder="请输入密码"
+        placeholder-class="ph"
+        password="true"
+        model:value="{{newPwd}}"
+        bindinput="onNewPwdInput"
+      />
+    </view>
+
+    <!-- 确认密码 -->
+    <view class="field field-last">
+      <input
+        class="field-input"
+        placeholder="请再次输入密码"
+        placeholder-class="ph"
+        password="true"
+        model:value="{{confirmPwd}}"
+        bindinput="onConfirmPwdInput"
+      />
+    </view>
+
+    <!-- 登录账号 -->
+    <text class="link-right" bindtap="gotoLogin">登录账号</text>
+
+    <!-- 重置密码 按钮 -->
+    <view class="btn-primary reset-button" bindtap="resetPassword">
+      <text class="btn-primary-text">重置密码</text>
     </view>
   </view>
 </view>
+</view>