家谱APP首页样式设计完成，落地80%

2026-07-13 00:23:04 +08:00
commit 1da4d8cf1f
117 changed files with 9476 additions and 0 deletions
@@ -0,0 +1,84 @@
+<template>
+  <view class="page-shell login-page">
+    <view class="ceremony-top">
+      <text class="seal-word">谱</text>
+      <text class="eyebrow">家脉绵延 · 生生不息</text>
+      <text class="brand-title">家谱</text>
+      <text class="brand-subtitle">为家族留存可传承的记忆</text>
+    </view>
+
+    <view class="login-paper">
+      <view class="section-title">登录家谱</view>
+      <text class="form-note">使用已注册手机号和密码登录。</text>
+      <text class="form-label">手机号</text>
+      <input v-model="phone" class="line-input" type="number" maxlength="11" placeholder="请输入手机号" placeholder-class="placeholder" />
+      <text class="form-label">密码</text>
+      <input v-model="password" class="line-input" password placeholder="请输入密码" placeholder-class="placeholder" />
+      <text v-if="errorMessage" class="error-message">{{ errorMessage }}</text>
+      <button class="primary-button login-button" :loading="isSubmitting" :disabled="isSubmitting" @click="login">进入家谱</button>
+      <text class="login-tip">短信登录将在验证码服务联调后开放。</text>
+      <text class="terms">登录即表示同意《用户协议》与《隐私政策》</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { appApi } from '@/utils/api.js'
+import { calcMD5 } from '@/utils/md5.js'
+
+const phone = ref('')
+const password = ref('')
+const isSubmitting = ref(false)
+const errorMessage = ref('')
+
+const login = async () => {
+  if (!/^1\d{10}$/.test(phone.value)) {
+    uni.showToast({ title: '请输入正确手机号', icon: 'none' })
+    return
+  }
+  if (!password.value) {
+    uni.showToast({ title: '请输入登录密码', icon: 'none' })
+    return
+  }
+
+  isSubmitting.value = true
+  errorMessage.value = ''
+  try {
+    await appApi.loginWithPassword({ phone: phone.value, passwordHash: calcMD5(password.value) })
+    uni.reLaunch({ url: '/pages/genealogy/index' })
+  } catch (error) {
+    errorMessage.value = error.message || '登录失败，请稍后重试'
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.login-page { padding-top: 108rpx; }
+
+.ceremony-top {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 40rpx 40rpx 76rpx;
+  background: $brand-red;
+  color: #fff9ed;
+}
+
+.seal-word { display: flex; width: 66rpx; height: 66rpx; align-items: center; justify-content: center; box-sizing: border-box; border: 2rpx solid #f1d494; border-radius: 50%; color: #f5ddaa; font-family: serif; font-size: 37rpx; }
+.eyebrow { margin-top: 24rpx; color: #f8dfad; font-size: 22rpx; letter-spacing: 5rpx; }
+.brand-title { margin-top: 24rpx; font-family: serif; font-size: 68rpx; font-weight: 700; letter-spacing: 16rpx; }
+.brand-subtitle { margin-top: 18rpx; color: #f5deae; font-size: 26rpx; letter-spacing: 3rpx; }
+
+.login-paper { margin: -28rpx 28rpx 0; padding: 48rpx 42rpx; border: 1rpx solid $gold-soft; border-radius: 24rpx; background: $paper-white; }
+.form-note { display: block; margin-top: 14rpx; color: $ink-muted; font-size: 23rpx; }
+.form-label { display: block; margin-top: 40rpx; color: $ink-muted; font-size: 25rpx; }
+.line-input { height: 78rpx; border-bottom: 1rpx solid $gold-soft; color: $ink; font-size: 30rpx; }
+.placeholder { color: #b3a895; }
+.error-message { display: block; margin-top: 22rpx; color: $brand-red; font-size: 23rpx; line-height: 1.5; }
+.login-button { margin-top: 48rpx; }
+.login-tip { display: block; margin-top: 24rpx; color: $ink-muted; font-size: 22rpx; text-align: center; }
+.terms { display: block; margin-top: 16rpx; color: #a39785; font-size: 21rpx; text-align: center; }
+</style>