登录注册页：响应式布局+背景图片
登录页需要在各种屏幕尺寸下都有良好的显示效果：桌面端显示背景图片 + 居中卡片，移动端表单占满屏幕宽度。背景图片需要支持可配置化，并且在不同设备上自适应裁切。
响应式布局策略
桌面端（>= 768px）
背景图片全屏显示，表单卡片居中，最大宽度 400px：
┌──────────────────────────────────┐
│ 背景图 │
│ ┌────────────┐ │
│ │ 登录表单 │ │
│ │ max-w-md │ │
│ └────────────┘ │
└──────────────────────────────────┘
text
移动端（< 768px）
无背景图片（或背景色），表单占满屏幕，增加内边距：
┌────────────────┐
│ │
│ 登录表单 │
│ w-full │
│ p-6 │
│ │
│ │
│ │
└────────────────┘
text
Tailwind 响应式实现
<template>
<div class="relative w-full h-screen overflow-hidden">
<!-- 背景图：桌面端显示，移动端隐藏 -->
<div
class="absolute inset-0 hidden md:block bg-cover bg-center"
:style="bgStyle"
/>
<div class="absolute inset-0 hidden md:block bg-black/30" />
<!-- 表单容器 -->
<div class="relative z-10 flex items-center justify-center h-full">
<div class="w-full max-w-md mx-4 p-8
bg-white md:bg-white/90
dark:bg-gray-800 dark:md:bg-gray-800/90
md:rounded-xl md:shadow-2xl md:backdrop-blur">
<LoginForm />
</div>
</div>
</div>
</template>
vue
关键 Tailwind 类：
| 类名 | 作用 |
|---|---|
hidden md:block | 移动端隐藏，桌面端显示 |
mx-4 | 水平外边距 16px，防止表单贴边 |
max-w-md | 最大宽度 28rem（448px） |
md:bg-white/90 | 桌面端白色半透明背景 |
md:rounded-xl | 桌面端圆角 |
md:shadow-2xl | 桌面端阴影 |
md:backdrop-blur | 桌面端毛玻璃效果 |
背景图片配置化
通过路由 meta 或环境变量配置背景图片：
const bgImage = import.meta.env.VITE_LOGIN_BG || '/images/login-bg.jpg'
const bgStyle = computed(() => ({
backgroundImage: `url(${bgImage})`,
}))
typescript
或者使用 Unsplash 等随机图片 API：
const bgStyle = computed(() => ({
backgroundImage: `url(https://source.unsplash.com/random/1920x1080?nature)`,
}))
typescript
背景遮罩层
在背景图片上叠加一层半透明遮罩，确保表单文字的可读性：
<div class="absolute inset-0 bg-black/30" />
vue
bg-black/30 表示黑色 30% 透明度。暗黑模式下可以增加透明度：
<div class="absolute inset-0 bg-black/30 dark:bg-black/50" />
vue
本节小结
- 响应式断点：使用 Tailwind 的
md:前缀区分桌面端和移动端。 - 背景图处理：移动端隐藏背景图，桌面端全屏显示 + 遮罩层。
- 表单卡片：移动端纯白背景，桌面端半透明 + 毛玻璃效果。
- 背景配置：通过环境变量或 meta 配置背景图片 URL。
↑