更新记录

1.0.0（2026-01-30） 下载此版本

三套风格迥异、交互精致的登录页模板，开箱即用，支持多端适配。

平台兼容性

uni-app(3.6.15)

登录页模板集合 (Login Templates)

本项目提供了三套风格迥异、交互精致的登录页模板，开箱即用，支持多端适配。

📂 包含模板

1. 极简商务风 (Clean & Minimalist)

文件路径: login-1.vue

专为现代商务应用设计，强调清晰的信息层级和极致的阅读体验。

• 设计风格: 白底黑字，大面积留白，经典排版。
• 交互亮点:
  • ✨ 入场动画: 元素按顺序平滑上浮 (slideUp) 和淡入 (fadeIn)。
  • 🖱️ 触感反馈: 按钮点击缩放，输入框聚焦时边框柔和过渡。
  • 📱 布局优化: 顶部留足安全距离，底部注册入口固定但不会遮挡内容。
• 适用场景: 企业级应用、电商、SaaS 工具类 App。

2. 科技暗黑风 (Dark Tech / Cyberpunk)

文件路径: login-2.vue

面向未来感和科技感强的应用，营造沉浸式的暗色体验。

• 设计风格: 深色背景 (#0f0f13) 搭配霓虹紫/蓝渐变色，背景带有动态光晕。
• 交互亮点:
  • 🌌 动态背景: 顶部带有呼吸感的背景光晕。
  • 🔦 持久聚焦: 输入框采用特殊的 focused 状态管理，聚焦时产生持久的霓虹外发光效果。
  • 🚀 弹性入场: 标题和表单带有弹性的滑入动画，科技感十足。
• 适用场景: 游戏社区、区块链应用、科技资讯、极客工具。

3. 毛玻璃拟态 (Glassmorphism)

文件路径: login-3.vue

采用流行的拟态设计语言，视觉轻盈通透。

• 设计风格: 全屏背景图 + 半透明磨砂玻璃卡片，层次感丰富。
• 交互亮点:
  • 🧊 磨砂质感: 使用 backdrop-filter: blur 实现真实的毛玻璃效果。
  • 🎈 悬浮入场: 登录卡片中心放大上浮 (zoomIn)，营造悬浮感。
  • 💧 细腻反馈: 按钮和输入框拥有细腻的点击回弹和阴影变化。
• 适用场景: 社交 App、生活方式类、艺术/设计类应用。

🚀 使用说明

引入方式

这些模板均为独立的 .vue 页面文件，您可以直接拷贝代码到您的项目中，或者在 pages.json 中注册路由即可预览。

// pages.json 示例
{
  "pages": [
    {
      "path": "pages/login-templates/login-1",
      "style": { "navigationBarTitleText": "极简登录" }
    },
    {
      "path": "pages/login-templates/login-2",
      "style": { "navigationBarTitleText": "科技登录", "navigationBarBackgroundColor": "#0f0f13", "navigationBarTextStyle": "white" }
    },
    {
      "path": "pages/login-templates/login-3",
      "style": { "navigationStyle": "custom" }
    }
  ]
}

自定义修改

所有样式均采用 scoped 编写，互不影响。您可以根据品牌色 (brand color) 轻松替换 CSS 中的颜色变量。

• 修改主题色: 搜索 CSS 中的颜色值（如 #000、#7c3aed、rgba(255,255,255,0.25)）进行替换。
• 替换背景: 在 login-3 中替换 bg-image 的 src 属性即可改变背景图。