feat: 新增登录注册忘记密码分享页

.vscode/settings.json

@@ -89,5 +89,8 @@
     "Wechat",
     "WechatMiniprogram",
     "Weixin"
+  ],
+  "i18n-ally.localesPaths": [
+    "src/locale"
   ]
 }

src/App.vue

@@ -33,4 +33,44 @@ image {
   height: 100%;
   vertical-align: middle;
 }
+
+// ==================== 认证页面公共样式 ====================
+// 包含登录、注册、忘记密码等页面的通用样式
+
+// 背景图片区域样式
+.auth-bg-section {
+  background-image: url('/static/login-bg.png');
+  background-size: cover;
+  background-position: top;
+  background-repeat: no-repeat;
+  min-height: 28vh; /* 占据上半部分屏幕 */
+}
+
+// 输入框样式 - 使用特殊化命名避免冲突
+:deep(.bandhu-auth-input-field) {
+  height: 72rpx !important;
+  background: #ffffff !important;
+  border-radius: 8rpx !important;
+  border: 2rpx solid rgba(166, 166, 166, 0.65) !important;
+  padding: 0 24rpx !important;
+  font-size: 28rpx !important;
+  display: flex !important;
+  align-items: center !important;
+}
+
+// 主要按钮样式
+:deep(.bandhu-auth-primary-btn) {
+  height: 88rpx !important;
+  border-radius: 44rpx !important;
+  font-size: 32rpx !important;
+  font-weight: bold !important;
+}
+
+// 次要按钮样式（如获取验证码按钮）
+:deep(.bandhu-auth-secondary-btn) {
+  width: 160rpx !important;
+  height: 72rpx !important;
+  border-radius: 12rpx !important;
+  font-size: 24rpx !important;
+}
 </style>

src/pages.json

@@ -41,7 +41,6 @@
       }
     ]
   },
-  "__esModule": true,
   "pages": [
     {
       "path": "pages/index/index",
@@ -71,6 +70,14 @@
       "path": "pages/demo/i18n",
       "type": "page"
     },
+    {
+      "path": "pages/forgotPassword/forgotPassword",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/income/income",
       "type": "page",
@@ -80,6 +87,14 @@
         "navigationBarBackgroundColor": "#fff"
       }
     },
+    {
+      "path": "pages/login/login",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/mine/mine",
       "type": "page",
@@ -113,6 +128,14 @@
         "navigationStyle": "custom"
       }
     },
+    {
+      "path": "pages/register/register",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/search/search",
       "type": "page",
@@ -121,6 +144,14 @@
         "navigationStyle": "custom"
       }
     },
+    {
+      "path": "pages/share/share",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
     {
       "path": "pages/topChampions/topChampions",
       "type": "page",
@@ -140,4 +171,4 @@
     }
   ],
   "subPackages": []
-}
+}

src/pages/forgotPassword/forgotPassword.vue

@@ -0,0 +1,291 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationStyle: 'custom',
+  },
+}
+</route>
+
+<script lang="ts" setup>
+// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
+// eslint-disable-next-line unused-imports/no-unused-imports
+import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
+
+defineOptions({
+  name: 'ForgotPassword', // 忘记密码
+})
+
+// 获取屏幕边界到安全区域距离
+const systemInfo = uni.getSystemInfoSync()
+const safeAreaInsets = systemInfo.safeAreaInsets
+
+// 步骤控制：1-输入手机号，2-重置密码
+const step = ref(1)
+
+// 表单数据
+const formData = ref({
+  mobile: '',
+  verificationCode: '',
+  newPassword: '',
+  confirmPassword: '',
+})
+
+// 验证码倒计时
+const countdown = ref(0)
+const countdownTimer = ref<NodeJS.Timeout | null>(null)
+
+// 表单验证规则
+const rules = {
+  mobile: [
+    { required: true, message: 'Please enter mobile number' },
+    { pattern: /^1[3-9]\d{9}$/, message: 'Please enter valid mobile number' },
+  ],
+  verificationCode: [
+    { required: true, message: 'Please enter verification code' },
+  ],
+  newPassword: [
+    { required: true, message: 'Please enter new password' },
+    { min: 6, max: 20, message: 'Password should be 6-20 characters' },
+  ],
+  confirmPassword: [
+    { required: true, message: 'Please confirm password' },
+    {
+      validator: (value: string) => {
+        return value === formData.value.newPassword
+      },
+      message: 'Passwords do not match',
+    },
+  ],
+}
+
+// 获取验证码
+function getVerificationCode() {
+  if (!formData.value.mobile) {
+    uni.showToast({
+      title: 'Please enter mobile number first',
+      icon: 'none',
+    })
+    return
+  }
+
+  // TODO: 实现获取验证码逻辑
+  console.log('Get verification code for:', formData.value.mobile)
+
+  // 开始倒计时
+  countdown.value = 60
+  countdownTimer.value = setInterval(() => {
+    countdown.value--
+    if (countdown.value <= 0) {
+      clearInterval(countdownTimer.value!)
+      countdownTimer.value = null
+    }
+  }, 1000)
+}
+
+// 第一步：验证手机号
+function handleStep1() {
+  if (!formData.value.mobile) {
+    uni.showToast({
+      title: 'Please enter mobile number',
+      icon: 'none',
+    })
+    return
+  }
+
+  // TODO: 验证手机号逻辑
+  console.log('Verify mobile:', formData.value.mobile)
+
+  // 跳转到第二步
+  step.value = 2
+  // 预填手机号
+  formData.value.mobile = '88016266123'
+}
+
+// 第二步：重置密码
+function handleResetPassword() {
+  if (!formData.value.verificationCode || !formData.value.newPassword || !formData.value.confirmPassword) {
+    uni.showToast({
+      title: 'Please fill in all fields',
+      icon: 'none',
+    })
+    return
+  }
+
+  if (formData.value.newPassword !== formData.value.confirmPassword) {
+    uni.showToast({
+      title: 'Passwords do not match',
+      icon: 'none',
+    })
+    return
+  }
+
+  // TODO: 实现重置密码逻辑
+  console.log('Reset password:', formData.value)
+
+  uni.showToast({
+    title: 'Password reset successfully',
+    icon: 'success',
+  })
+
+  // 跳转到登录页
+  setTimeout(() => {
+    uni.redirectTo({
+      url: '/pages/login/login',
+    })
+  }, 1500)
+}
+
+// 跳转登录页
+function toLogin() {
+  uni.navigateTo({
+    url: '/pages/login/login',
+  })
+}
+
+// 返回上一页
+function goBack() {
+  if (step.value === 2) {
+    step.value = 1
+  }
+  else {
+    uni.navigateBack()
+  }
+}
+
+// 页面卸载时清理定时器
+onUnmounted(() => {
+  if (countdownTimer.value) {
+    clearInterval(countdownTimer.value)
+  }
+})
+</script>
+
+<template>
+  <view class="forgot-password-page min-h-screen bg-white">
+    <!-- 背景图片区域 -->
+    <view class="auth-bg-section relative">
+      <!-- 自定义导航栏 -->
+      <view :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
+        <view class="h-88rpx flex items-center px-24rpx">
+          <wd-icon name="arrow-left" size="48rpx" color="#333" @click="goBack" />
+        </view>
+      </view>
+
+      <!-- Logo和标语 -->
+      <view class="pb-60rpx pt-60rpx text-center">
+        <view class="mb-20rpx flex items-center justify-center">
+          <image src="/static/logo.png" class="mr-16rpx h-60rpx w-60rpx" />
+        </view>
+      </view>
+    </view>
+
+    <!-- 表单内容区域 -->
+    <view class="flex flex-col px-20rpx">
+      <view class="mb-40rpx" />
+
+      <!-- 第一步：输入手机号 -->
+      <view v-if="step === 1">
+        <wd-form ref="form" :model="formData" :rules="rules">
+          <view class="mb-60rpx">
+            <wd-input
+              v-model="formData.mobile"
+              prop="mobile"
+              placeholder="+88 Mobile number"
+              no-border
+              custom-class="bandhu-auth-input-field"
+            />
+          </view>
+
+          <!-- 重置密码按钮 -->
+          <wd-button
+            type="error"
+            size="large"
+            custom-class="mb-200rpx w-full bandhu-auth-primary-btn"
+            @click="handleStep1"
+          >
+            Reset Password
+          </wd-button>
+        </wd-form>
+      </view>
+
+      <!-- 第二步：重置密码 -->
+      <view v-else>
+        <wd-form ref="form" :model="formData" :rules="rules">
+          <view class="mb-40rpx space-y-32rpx">
+            <wd-input
+              v-model="formData.mobile"
+              prop="mobile"
+
+              no-border disabled
+              custom-class="bandhu-auth-input-field"
+            />
+            <view class="flex items-center gap-20rpx">
+              <wd-input
+                v-model="formData.verificationCode"
+                prop="verificationCode"
+                placeholder="Verification Code"
+                no-border
+                custom-class="flex-1 bandhu-auth-input-field"
+              />
+              <wd-button
+                type="error"
+                plain
+                :disabled="countdown > 0"
+                custom-class="bandhu-auth-secondary-btn"
+                @click="getVerificationCode"
+              >
+                {{ countdown > 0 ? `${countdown}s` : 'Get Code' }}
+              </wd-button>
+            </view>
+            <wd-input
+              v-model="formData.newPassword"
+              prop="newPassword"
+              show-password
+              placeholder="New Password 6-20 characters"
+              no-border
+              custom-class="bandhu-auth-input-field"
+            />
+            <wd-input
+              v-model="formData.confirmPassword"
+              prop="confirmPassword"
+              show-password
+              placeholder="Confirm password"
+              no-border
+              custom-class="bandhu-auth-input-field"
+            />
+          </view>
+
+          <!-- 密码提示 -->
+          <view class="mb-60rpx text-center text-24rpx text-#666">
+            Your password must be different from previous used password
+          </view>
+
+          <!-- 重置密码按钮 -->
+          <wd-button
+            type="error"
+            size="large"
+            custom-class="mb-200rpx w-full bandhu-auth-primary-btn"
+            @click="handleResetPassword"
+          >
+            Reset Password
+          </wd-button>
+        </wd-form>
+      </view>
+
+      <!-- 登录提示 -->
+      <view class="text-center">
+        <text class="text-28rpx text-#666">
+          Already have account?
+        </text>
+        <text class="text-28rpx text-[var(--wot-color-theme)]" @click="toLogin">
+          Login Now
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+// 忘记密码页面特有样式（如果有的话）
+</style>

src/pages/index/index.vue

@@ -196,7 +196,7 @@ function toProductDetail(item) {
     <view class="px-24rpx pb-24rpx">
       <view class="flex items-end justify-between pb-22rpx pt-24rpx">
         <view v-for="(item, index) in navIcons" :key="index" class="flex flex-col items-center" @click="toPage(item.url)">
-          <image :src="item.image" :class="[`h-${item.size}`, `w-${item.size}`]" />
+          <image :src="item.image" :style="`width: ${item.size}; height: ${item.size};`" />
           <view class="mt-14rpx text-center text-22rpx text-#898989 font-bold">
             {{ $t(item.title) }}
           </view>

src/pages/login/login.vue

@@ -0,0 +1,149 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationStyle: 'custom',
+  },
+}
+</route>
+
+<script lang="ts" setup>
+// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
+// eslint-disable-next-line unused-imports/no-unused-imports
+import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
+
+defineOptions({
+  name: 'Login', // 登录
+})
+
+// 获取屏幕边界到安全区域距离
+const systemInfo = uni.getSystemInfoSync()
+const safeAreaInsets = systemInfo.safeAreaInsets
+
+// 表单数据
+const formData = ref({
+  username: '',
+  password: '',
+})
+
+// 表单验证规则
+const rules = {
+  username: [
+    { required: true, message: 'Please enter mobile number or username' },
+  ],
+  password: [
+    { required: true, message: 'Please enter password' },
+    { min: 6, max: 20, message: 'Password should be 6-20 characters' },
+  ],
+}
+
+// 登录处理
+function handleLogin() {
+  // TODO: 实现登录逻辑
+  console.log('Login:', formData.value)
+}
+
+// 跳转注册页
+function toRegister() {
+  uni.navigateTo({
+    url: '/pages/register/register',
+  })
+}
+
+// 跳转忘记密码页
+function toForgotPassword() {
+  uni.navigateTo({
+    url: '/pages/forgotPassword/forgotPassword',
+  })
+}
+
+// 返回上一页
+function goBack() {
+  uni.navigateBack()
+}
+</script>
+
+<template>
+  <view class="login-page min-h-screen bg-white">
+    <!-- 背景图片区域 -->
+    <view class="auth-bg-section relative">
+      <!-- 自定义导航栏 -->
+      <view :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
+        <view class="h-88rpx flex items-center px-24rpx">
+          <wd-icon name="arrow-left" size="48rpx" color="#333" @click="goBack" />
+        </view>
+      </view>
+
+      <!-- Logo和标语 -->
+      <view class="pb-60rpx pt-60rpx text-center">
+        <view class="mb-20rpx flex items-center justify-center">
+          <image src="/static/logo.png" class="mr-16rpx h-60rpx w-60rpx" />
+        </view>
+      </view>
+    </view>
+
+    <!-- 表单内容区域 -->
+    <view class="flex flex-col px-20rpx">
+      <view class="mb-40rpx" />
+
+      <!-- 登录表单 -->
+      <wd-form ref="form" :model="formData" :rules="rules">
+        <view class="mb-40rpx space-y-32rpx">
+          <wd-input
+            v-model="formData.username"
+            prop="username"
+            placeholder="Mobile number / Username"
+            no-border
+            custom-class="bandhu-auth-input-field"
+          />
+          <wd-input
+            v-model="formData.password"
+            prop="password"
+            show-password
+            placeholder="Password 6-20 characters"
+            no-border
+            custom-class="bandhu-auth-input-field"
+          />
+        </view>
+
+        <!-- 登录按钮 -->
+        <wd-button
+          type="error"
+          size="large"
+          custom-class="mb-60rpx w-full bandhu-auth-primary-btn"
+          @click="handleLogin"
+        >
+          Login
+        </wd-button>
+      </wd-form>
+
+      <!-- 注册提示 -->
+      <view class="mb-200rpx text-center">
+        <text class="text-28rpx text-#5C5C5C">
+          Do Not Have An Account Yet?
+        </text>
+        <view class="mt-52rpx">
+          <wd-button
+            type="error"
+            plain
+            custom-style="width: 200rpx; height: 72rpx; border-radius: 36rpx; font-size: 28rpx;"
+            @click="toRegister"
+          >
+            Register
+          </wd-button>
+        </view>
+      </view>
+
+      <!-- 忘记密码 -->
+      <view class="text-center">
+        <text class="text-28rpx text-#5C5C5C" @click="toForgotPassword">
+          Forgot Password?
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+// 登录页面特有样式（如果有的话）
+</style>

src/pages/register/register.vue

@@ -0,0 +1,204 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationStyle: 'custom',
+  },
+}
+</route>
+
+<script lang="ts" setup>
+// 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
+// eslint-disable-next-line unused-imports/no-unused-imports
+import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
+
+defineOptions({
+  name: 'Register', // 注册
+})
+
+// 获取屏幕边界到安全区域距离
+const systemInfo = uni.getSystemInfoSync()
+const safeAreaInsets = systemInfo.safeAreaInsets
+
+// 表单数据
+const formData = ref({
+  username: '',
+  mobile: '',
+  verificationCode: '',
+  password: '',
+  referrerCode: '',
+})
+
+// 验证码倒计时
+const countdown = ref(0)
+const countdownTimer = ref<NodeJS.Timeout | null>(null)
+
+// 表单验证规则
+const rules = {
+  username: [
+    { required: true, message: 'Please enter username' },
+  ],
+  mobile: [
+    { required: true, message: 'Please enter mobile number' },
+    { pattern: /^1[3-9]\d{9}$/, message: 'Please enter valid mobile number' },
+  ],
+  verificationCode: [
+    { required: true, message: 'Please enter verification code' },
+  ],
+  password: [
+    { required: true, message: 'Please enter password' },
+    { min: 6, max: 20, message: 'Password should be 6-20 characters' },
+  ],
+}
+
+// 获取验证码
+function getVerificationCode() {
+  if (!formData.value.mobile) {
+    uni.showToast({
+      title: 'Please enter mobile number first',
+      icon: 'none',
+    })
+    return
+  }
+
+  // TODO: 实现获取验证码逻辑
+  console.log('Get verification code for:', formData.value.mobile)
+
+  // 开始倒计时
+  countdown.value = 60
+  countdownTimer.value = setInterval(() => {
+    countdown.value--
+    if (countdown.value <= 0) {
+      clearInterval(countdownTimer.value!)
+      countdownTimer.value = null
+    }
+  }, 1000)
+}
+
+// 注册处理
+function handleRegister() {
+  // TODO: 实现注册逻辑
+  console.log('Register:', formData.value)
+}
+
+// 跳转登录页
+function toLogin() {
+  uni.navigateTo({
+    url: '/pages/login/login',
+  })
+}
+
+// 返回上一页
+function goBack() {
+  uni.navigateBack()
+}
+
+// 页面卸载时清理定时器
+onUnmounted(() => {
+  if (countdownTimer.value) {
+    clearInterval(countdownTimer.value)
+  }
+})
+</script>
+
+<template>
+  <view class="register-page min-h-screen bg-white">
+    <!-- 背景图片区域 -->
+    <view class="auth-bg-section relative">
+      <!-- 自定义导航栏 -->
+      <view :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
+        <view class="h-88rpx flex items-center px-24rpx">
+          <wd-icon name="arrow-left" size="48rpx" color="#333" @click="goBack" />
+        </view>
+      </view>
+
+      <!-- Logo和标语 -->
+      <view class="pb-40rpx pt-60rpx text-center">
+        <view class="mb-20rpx flex items-center justify-center">
+          <image src="/static/logo.png" class="mr-16rpx h-60rpx w-60rpx" />
+        </view>
+      </view>
+    </view>
+
+    <!-- 表单内容区域 -->
+    <view class="flex flex-col px-20rpx">
+      <view class="mb-40rpx" />
+
+      <!-- 注册表单 -->
+      <wd-form ref="form" :model="formData" :rules="rules">
+        <view class="mb-40rpx space-y-32rpx">
+          <wd-input
+            v-model="formData.username"
+            prop="username"
+            placeholder="Username"
+            no-border
+            custom-class="bandhu-auth-input-field"
+          />
+          <wd-input
+            v-model="formData.mobile"
+            prop="mobile"
+            placeholder="+88 Mobile number"
+            no-border
+            custom-class="bandhu-auth-input-field"
+          />
+          <view class="flex items-center gap-20rpx">
+            <wd-input
+              v-model="formData.verificationCode"
+              prop="verificationCode"
+              placeholder="Verification Code"
+              no-border
+              custom-class="flex-1 bandhu-auth-input-field"
+            />
+            <wd-button
+              type="error"
+              plain
+              :disabled="countdown > 0"
+              custom-class="bandhu-auth-secondary-btn"
+              @click="getVerificationCode"
+            >
+              {{ countdown > 0 ? `${countdown}s` : 'Get Code' }}
+            </wd-button>
+          </view>
+          <wd-input
+            v-model="formData.password"
+            prop="password"
+
+            placeholder="Password 6-20 characters"
+            no-border show-password
+            custom-class="bandhu-auth-input-field"
+          />
+          <wd-input
+            v-model="formData.referrerCode"
+            placeholder="Referrer Code"
+            no-border
+            custom-class="bandhu-auth-input-field"
+          />
+        </view>
+
+        <!-- 注册按钮 -->
+        <wd-button
+          type="error"
+          size="large"
+          custom-class="mb-200rpx w-full bandhu-auth-primary-btn"
+          @click="handleRegister"
+        >
+          Register
+        </wd-button>
+      </wd-form>
+
+      <!-- 登录提示 -->
+      <view class="text-center">
+        <text class="text-28rpx text-#666">
+          Already have account?
+        </text>
+        <text class="ml-10rpx text-28rpx text-[var(--wot-color-theme)]" @click="toLogin">
+          Login Now
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+// 注册页面特有样式（如果有的话）
+</style>

src/pages/share/share.vue

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { onLoad } from '@dcloudio/uni-app'
+import { ref } from 'vue'
+
+// 获取安全区域
+const { safeAreaInsets } = uni.getSystemInfoSync()
+
+// 推荐码
+const referrerCode = ref('BAN678')
+
+// 社交平台配置
+const socialPlatforms = ref([
+  {
+    name: 'facebook',
+    label: 'Facebook',
+    icon: '/static/social/facebook.png', // 占位图片路径
+  },
+  {
+    name: 'whatsapp',
+    label: 'Whatsapp',
+    icon: '/static/social/whatsapp.png', // 占位图片路径
+  },
+  {
+    name: 'instagram',
+    label: 'Instagram',
+    icon: '/static/social/instagram.png', // 占位图片路径
+  },
+  {
+    name: 'twitter',
+    label: 'Twitter',
+    icon: '/static/social/twitter.png', // 占位图片路径
+  },
+])
+
+// 页面加载
+onLoad(() => {
+  // 可以从用户信息中获取推荐码
+  // referrerCode.value = getUserReferrerCode()
+})
+
+// 返回上一页
+function goBack() {
+  uni.navigateBack()
+}
+
+// 复制推荐码
+function copyReferrerCode() {
+  uni.setClipboardData({
+    data: referrerCode.value,
+    success: () => {
+      uni.showToast({
+        title: 'Copied to clipboard',
+        icon: 'success',
+      })
+    },
+  })
+}
+
+// 统一分享处理方法
+function handleShare(platform: string) {
+  const platformNames: Record<string, string> = {
+    facebook: 'Facebook',
+    whatsapp: 'WhatsApp',
+    instagram: 'Instagram',
+    twitter: 'Twitter',
+  }
+
+  uni.showToast({
+    title: `Share to ${platformNames[platform]}`,
+    icon: 'none',
+  })
+}
+</script>
+
+<template>
+  <view class="share-page min-h-screen bg-white">
+    <!-- 背景图片区域 -->
+    <view class="auth-bg-section relative">
+      <!-- 自定义导航栏 -->
+      <view :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
+        <view class="h-88rpx flex items-center px-24rpx">
+          <wd-icon name="arrow-left" size="48rpx" color="#333" @click="goBack" />
+        </view>
+      </view>
+
+      <!-- Logo和标语 -->
+      <view class="pb-40rpx pt-60rpx text-center">
+        <view class="mb-20rpx flex items-center justify-center">
+          <image src="/static/logo.png" class="mr-16rpx h-60rpx w-60rpx" />
+        </view>
+      </view>
+    </view>
+
+    <!-- 主要内容区域 -->
+    <view class="flex flex-col px-20rpx">
+      <view class="mb-40rpx" />
+
+      <!-- 推荐码标题 -->
+      <view class="mb-10rpx text-center">
+        <text class="text-28rpx text-#333 font-medium">
+          My Referrer Code
+        </text>
+      </view>
+
+      <!-- 推荐码显示 -->
+      <view class="mb-60rpx ml-40rpx flex items-center justify-center">
+        <text class="mr-20rpx text-64rpx font-bold tracking-wider">
+          {{ referrerCode }}
+        </text>
+        <wd-icon name="file-copy" size="30rpx" color="#757575" @click="copyReferrerCode" />
+      </view>
+
+      <!-- 二维码区域 -->
+      <view class="mb-80rpx flex justify-center">
+        <view class="rounded-20rpx bg-white p-40rpx" style="box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.1);">
+          <!-- 二维码占位图 -->
+          <view class="h-480rpx w-480rpx flex items-center justify-center border-2rpx border-#e5e5e5 rounded-12rpx bg-#f8f8f8">
+            <view class="text-center">
+              <view class="mb-20rpx text-80rpx">
+                📱
+              </view>
+              <text class="text-28rpx text-#999">
+                QR Code
+              </text>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 分享说明 -->
+      <view class="mb-60rpx px-40rpx text-center">
+        <text class="text-28rpx text-#797979 leading-relaxed">
+          Share your aR code with your friends, they can scan it with their camera to register as your downline.
+        </text>
+      </view>
+
+      <!-- 社交分享按钮 -->
+      <view class="mb-80rpx flex justify-center gap-50rpx">
+        <view
+          v-for="item in socialPlatforms"
+          :key="item.name"
+          class="flex flex-col items-center"
+          @click="handleShare(item.name)"
+        >
+          <view class="mb-20rpx">
+            <image
+              :src="item.icon"
+              class="h-80rpx w-80rpx"
+              mode="aspectFit"
+            />
+          </view>
+          <text class="text-24rpx text-#666 font-medium">
+            {{ item.label }}
+          </text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+// 分享页面特有样式
+.auth-bg-section {
+  background-image: url('/static/login-bg.png');
+  background-size: cover;
+  background-position: top;
+  background-repeat: no-repeat;
+  min-height: 28vh;
+}
+</style>

src/style/index.scss

@@ -21,3 +21,43 @@ page {
   // 修改按钮背景色
   // --wot-button-primary-bg-color: green;
 }
+
+// ==================== 认证页面公共样式 ====================
+// 包含登录、注册、忘记密码等页面的通用样式
+
+// 背景图片区域样式
+.auth-bg-section {
+  background-image: url('/static/login-bg.png');
+  background-size: cover;
+  background-position: top;
+  background-repeat: no-repeat;
+  min-height: 28vh; /* 占据上半部分屏幕 */
+}
+
+// 输入框样式 - 使用特殊化命名避免冲突
+:deep(.bandhu-auth-input-field) {
+  height: 72rpx !important;
+  background: #ffffff !important;
+  border-radius: 8rpx !important;
+  border: 2rpx solid rgba(166, 166, 166, 0.65) !important;
+  padding: 0 24rpx !important;
+  font-size: 28rpx !important;
+  display: flex !important;
+  align-items: center !important;
+}
+
+// 主要按钮样式
+:deep(.bandhu-auth-primary-btn) {
+  height: 88rpx !important;
+  border-radius: 44rpx !important;
+  font-size: 32rpx !important;
+  font-weight: bold !important;
+}
+
+// 次要按钮样式（如获取验证码按钮）
+:deep(.bandhu-auth-secondary-btn) {
+  width: 160rpx !important;
+  height: 72rpx !important;
+  border-radius: 12rpx !important;
+  font-size: 24rpx !important;
+}