登录页是工作台的门面。打开系统第一件事就是登录 —— 这张脸好不好看，决定了今天开工的心情。以前登录页就是白底 + 两个输入框，和整个航空维修工作台的气质完全不搭。这次重做了一版，配色和文案全部按自己的天空色系重做。

图注：AERO 工作台登录页 —— 淡蓝云海背景，右侧左右分栏白卡，飞机插画配旋转圆环。

打开第一眼看到什么

未登录状态打开 aero.xin：

• 全屏淡蓝天空背景，左上角一朵蓬松云，机翼从云后微微露出；
• 左上角固定 logo + “AERO 工作台” 字样，带一点白色投影；
• 右侧一张 880px 的白色卡片，左边飞机插画，右边登录表单；
• 卡片背后叠了一张微微旋转 -4° 的浅蓝渐变卡，像两张纸叠在一起。

飞机插画和那圈 “一直在转” 的线

左边不是实景照片，是一张扁平矢量的白色客机插画。照片一上就厚重，扁平插画才够轻。

插画卡上叠了两层旋转虚线圆环：一个 130px 顺时针转，一个 175px 逆时针转，速度一快一慢，顶端各带一个发光小点。动画一直转，但很轻，不会抢戏。卡片底部居中写八个字：慎微求真・笃行致远。

图注：扁平客机插画 + 两层反向旋转虚线圆环，底部 “慎微求真・笃行致远”，动起来但不吵。

右边表单长什么样

右侧表单从上到下：

• 顶部 50px logo，下面一行轻字重副标题 “AERO.XIN・个人工作台”；
• 账号输入框（占位 “请输入账号”）；
• 密码输入框；
• 渐变蓝色登录按钮（#6fb0ec → #4a8fd8），字间距 4px；
• 底部一个低调的 “← 返回首页” 文字链接。

去掉了 “账号由管理员在「成员管理」中创建” 这种内部提示 —— 小团队不需要。

图注：表单只留账号、密码两项，登录按钮渐变蓝，返回首页做成低调文字链接。

手机端单独收拾过

桌面端好看不代表手机端能看。小屏（≤760px）上做了三件事：

• 左上角 logo 和 “AERO 工作台” 文字直接隐藏，不抢空间；
• 卡片改单列，飞机插画和标语居中缩小，圆环缩到 90/120px；
• 整页可滚动，小屏不会溢出。

手机端自动切单列，左上角品牌位隐藏，飞机和标语居中，小屏不挤。

访问密码门也一起改了

工作台有三种访问模式：登录、密码门、公开。登录页改漂亮之后，密码门那个页面还是老的白底样式，很突兀。顺手把它也改成同款云海布局 —— 左边飞机插画和圆环完全一样，右边只留一个 “访问密码” 输入框和 “进入” 按钮。

表单 id 全部保留，登录逻辑一行没动。

访问密码门同步改造，同款云海布局，右边只留一个密码输入框。

中间踩过一个坑

把预览 HTML 塞进 PHP 安装包后，线上效果和预览对不上 —— 卡片靠左了、云海背景没了、logo 跑到卡片里。排查半天发现是我新写的样式用了 .login-page、.login-card 这种通用 class 名，和项目原有 style.css 里同名样式撞车，被旧样式覆盖了。

修复办法：所有新样式类名统一加 wb-login- 前缀，关键属性加 !important。这个坑踩过一次以后就记住了：在已有项目里写新页面，类名一定要加项目前缀。

适合谁

• 每天打开工作台超过一次、想让开工第一眼舒服点的维修组长；
• 给团队搭内部系统、但不想让登录页停留在 “默认模板” 的人；

一句话：登录页就是工作台的开机屏 —— 不用花哨，但要顺眼，要让人一眼知道这是给谁用的。