登录页+修改密码页面完成

components.d.ts

@@ -7,14 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    WdButton: typeof import('wot-design-uni/components/wd-button/wd-button.vue')['default']
-    WdCellGroup: typeof import('wot-design-uni/components/wd-cell-group/wd-cell-group.vue')['default']
-    WdCheckbox: typeof import('wot-design-uni/components/wd-checkbox/wd-checkbox.vue')['default']
     WdConfigProvider: typeof import('wot-design-uni/components/wd-config-provider/wd-config-provider.vue')['default']
-    WdField: typeof import('wot-design-uni/components/wd-field/wd-field.vue')['default']
-    WdForm: typeof import('wot-design-uni/components/wd-form/wd-form.vue')['default']
-    WdIcon: typeof import('wot-design-uni/components/wd-icon/wd-icon.vue')['default']
-    WdInput: typeof import('wot-design-uni/components/wd-input/wd-input.vue')['default']
     WdNavbar: typeof import('wot-design-uni/components/wd-navbar/wd-navbar.vue')['default']
   }
 }

src/App.vue

@@ -10,4 +10,6 @@ onHide(() => {
   console.log('App Hide')
 })
 </script>
-<style></style>
+<style lang="scss">
+@import '@/styles/index.scss';
+</style>

src/main.ts

@@ -3,6 +3,7 @@ import { setupStore } from '@/stores'
 
 
 
+
 import App from './App.vue'
 export function createApp() {
   const app = createSSRApp(App)

src/pages.json

@@ -19,6 +19,12 @@
       "style": {
         "navigationStyle": "custom"
       }
+    },
+    {
+      "path": "pages/reset-password/index",
+      "style": {
+        "navigationStyle": "custom"
+      }
     }
   ],
   "globalStyle": {

src/pages/login/index.vue

@@ -1,19 +1,55 @@
 <template>
-  <view class="login-content">
+  <view class="auth-content">
     <wd-navbar fixed placeholder :title="title" left-arrow safeAreaInsetTop customClass="navbar" />
     <!-- 背景层 -->
-    <view class="login-bg"></view>
+    <view class="auth-bg"></view>
     <!-- 内容层 -->
-    <view class="login-body">
-      <view class="login-title"> 欢迎登录 </view>
-      <!-- 表单 -->
-      <view class="login-form"> </view>
+    <view class="auth-body">
+      <view class="auth-title"> 欢迎登录 </view>
+
+      <!-- 表单（内部类名不动） -->
+      <view class="auth-form">
+        <form>
+          <view class="form-item">
+            <view class="form-label">账号</view>
+            <view class="form-input">
+              <input
+                class="form-input-inner"
+                type="number"
+                focus
+                maxlength="11"
+                placeholder="请输入账号"
+              />
+            </view>
+          </view>
+
+          <view class="form-item">
+            <view class="form-label">密码</view>
+            <view class="form-input">
+              <input class="form-input-inner" password placeholder="请输入密码" />
+              <view class="forget-password" @click="forgetPassword">忘记密码？</view>
+            </view>
+          </view>
+
+          <view class="form-item">
+            <view class="form-label">验证码</view>
+            <view class="form-input">
+              <input class="form-input-inner" placeholder="请输入验证码" />
+              <button class="get-code">发送验证码</button>
+            </view>
+          </view>
+        </form>
+
+        <view class="submit">
+          <button class="submit-btn">确定</button>
+        </view>
+      </view>
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import projectConfig from '@/config/presets/index.ts'
+import projectConfig from '@/config/presets/index'
 const { title } = projectConfig
 
 const form = reactive({
@@ -21,50 +57,12 @@ const form = reactive({
   password: '',
   code: '',
 })
+
+const forgetPassword = () => {
+  console.log('cc')
+}
 </script>
 
 <style lang="scss" scoped>
-.login-content {
-  position: relative;
-  min-height: 100vh;
-  padding: 0 50rpx;
-  box-sizing: border-box;
-
-  /* 外部组件：navbar */
-  :deep(.navbar) {
-    background-image: var(--login-bg);
-    background-size: 750rpx 800rpx;
-    background-repeat: no-repeat;
-  }
-
-  /* 背景层（不要负 z-index） */
-  .login-bg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 800rpx;
-    background-image: var(--login-bg);
-    background-size: 750rpx 800rpx;
-    background-repeat: no-repeat;
-    z-index: 0;
-  }
-
-  .login-body {
-    position: relative;
-    z-index: 1;
-    padding-top: 80rpx;
-
-    .login-title {
-      margin: 80rpx 0 80rpx;
-      color: var(--font-color-333);
-      font-weight: 600;
-      font-family: 'PingFang SC';
-      font-size: 64rpx;
-    }
-    .login-form {
-      margin: 30px auto;
-    }
-  }
-}
+@import '@/styles/modules/auth-page.scss';
 </style>

src/pages/reset-password/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <view class="auth-content">
+    <wd-navbar fixed placeholder :title="title" left-arrow safeAreaInsetTop customClass="navbar" />
+    <!-- 背景层 -->
+    <view class="auth-bg"></view>
+    <!-- 内容层 -->
+    <view class="auth-body">
+      <view class="auth-title"> 欢迎登录 </view>
+
+      <!-- 表单（内部类名不动） -->
+      <view class="auth-form">
+        <form>
+          <view class="form-item">
+            <view class="form-label">账号</view>
+            <view class="form-input">
+              <input
+                class="form-input-inner"
+                type="number"
+                focus
+                maxlength="11"
+                placeholder="请输入账号"
+              />
+            </view>
+          </view>
+
+          <view class="form-item">
+            <view class="form-label">密码</view>
+            <view class="form-input">
+              <input class="form-input-inner" password placeholder="请输入密码" />
+              <view class="forget-password" @click="forgetPassword">忘记密码？</view>
+            </view>
+          </view>
+
+          <view class="form-item">
+            <view class="form-label">验证码</view>
+            <view class="form-input">
+              <input class="form-input-inner" placeholder="请输入验证码" />
+              <button class="get-code">发送验证码</button>
+            </view>
+          </view>
+        </form>
+
+        <view class="submit">
+          <button class="submit-btn">确定</button>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import projectConfig from '@/config/presets/index'
+const { title } = projectConfig
+
+const form = reactive({
+  phone: '',
+  password: '',
+  code: '',
+})
+
+const forgetPassword = () => {
+  console.log('cc')
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/modules/auth-page.scss';
+</style>

src/style/variables/vars-base.scss

@@ -1,4 +0,0 @@
-:root,
-page {
-  --font-color-333: #333333;
-}

src/styles/base.scss

@@ -0,0 +1,3 @@
+button::after {
+  border: none;
+}

src/styles/index.scss

@@ -0,0 +1 @@
+@import './base.scss';

src/styles/modules/auth-page.scss

@@ -0,0 +1,109 @@
+//* 适用于 登录页/修改密码 等相关页面的样式 */
+
+.auth-content {
+  position: relative;
+  min-height: 100vh;
+  padding: 0 50rpx;
+  box-sizing: border-box;
+
+  /* 外部组件：navbar */
+  :deep(.navbar) {
+    background-image: var(--login-bg);
+    background-size: 750rpx 800rpx;
+    background-repeat: no-repeat;
+  }
+
+  /* 背景层（不要负 z-index） */
+  .auth-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 800rpx;
+    background-image: var(--login-bg);
+    background-size: 750rpx 800rpx;
+    background-repeat: no-repeat;
+    z-index: 0;
+  }
+
+  .auth-body {
+    position: relative;
+    z-index: 1;
+    padding-top: 80rpx;
+
+    .auth-title {
+      margin: 80rpx 0 80rpx;
+      color: var(--font-color-333);
+      font-weight: 600;
+      font-family: 'PingFang SC';
+      font-size: 64rpx;
+    }
+
+    /* 仅改容器名：login-form -> auth-form，其余不动 */
+    .auth-form {
+      margin: 30px auto;
+
+      .form-item {
+        display: flex;
+        padding: 20rpx 0;
+        font-size: 28rpx;
+        color: #303133;
+        box-sizing: border-box;
+        line-height: 70rpx;
+        flex-direction: column;
+        border-bottom: 1rpx solid #e4e7ed;
+
+        .form-label {
+          color: var(--font-color-333);
+          font-size: 16px;
+          justify-content: flex-start;
+        }
+
+        .form-input {
+          display: flex;
+          align-items: center;
+
+          .form-input-inner {
+            flex: 1;
+            height: 70rpx;
+          }
+
+          .forget-password {
+            margin-left: 20rpx;
+            font-size: 26rpx;
+            color: var(--font-color-999);
+          }
+
+          .get-code {
+            margin-left: 20rpx;
+            width: 200rpx;
+            height: 64rpx;
+            line-height: 64rpx;
+            border: none;
+            font-size: 28rpx;
+            color: rgb(var(--main-color-rgb));
+            background: rgba(var(--main-color-rgb), 0.1);
+            border-radius: 16rpx;
+          }
+        }
+      }
+
+      .submit {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 80rpx;
+        width: 100%;
+
+        .submit-btn {
+          flex: 1;
+          background-color: var(--main-color);
+          color: var(--font-color-fff);
+          height: 96rpx;
+          border-radius: 60rpx;
+          font-size: 40rpx;
+        }
+      }
+    }
+  }
+}

src/styles/variables/vars-base.scss

@@ -0,0 +1,9 @@
+:root,
+page {
+  --main-color: #3fa3f1;
+  --main-color-rgb: 63, 163, 241;
+  --font-color-fff: #ffffff;
+  --font-color-333: #333333;
+  --font-color-666: #666666;
+  --font-color-999: #999999;
+}

src/themes/default.ts

@@ -3,9 +3,9 @@ import type { ConfigProviderThemeVars } from 'wot-design-uni'
 export const defaultTheme = {
   theme: 'light',
   themeVars: {
-    colorTheme: '#007aff',
-    buttonPrimaryBgColor: '#e01f1fff',
-    buttonPrimaryColor: '#2c249bc2',
+    colorTheme: '#3FA3F1',
+    buttonPrimaryBgColor: '#3fa3f1',
+    buttonPrimaryColor: '#ffffff',
   },
 } satisfies {
   theme: 'light' | 'dark'

src/uni.scss

@@ -75,6 +75,6 @@ $uni-font-size-subtitle: 18px;
 $uni-color-paragraph: #3f536e; // 文章段落颜色
 $uni-font-size-paragraph: 15px;
 
-@import '@/style/variables/vars-wot.scss';
-@import '@/style/variables/vars-defautl.scss';
-@import '@/style/variables/vars-base.scss';
+@import '@/styles/variables/vars-wot.scss';
+@import '@/styles/variables/vars-defautl.scss';
+@import '@/styles/variables/vars-base.scss';