响应式大屏登录页（Login Page）

本页面基于 Vue3 + Element Plus 实现，适用于 PC 端大屏项目，提供账号密码登录、记住密码、忘记密码等功能，支持响应式布局和自定义样式。

页面集成方式

1. 直接在路由配置中引入本页面：

   // router/index.js
   {
     path: '/login',
     component: () => import('@/frontEnd/pcTerminal/pages/login/login.vue')
   }

2. 页面访问路径：/login

页面结构与交互

• 账号输入：输入手机号/账号，必填。
• 密码输入：输入密码，必填。
• 记住密码：自定义复选框，UI已实现，实际存储逻辑可按需扩展。
• 忘记密码：点击可触发自定义找回逻辑（需开发者实现）。
• 登录按钮：校验通过后调用登录接口，登录成功跳转首页。

表单校验规则

• 账号（mobile）：必填
• 密码（password）：必填
• 可扩展最小长度等校验

const loginRules = {
  mobile: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    // { min: 6, message: "密码长度不能少于6位", trigger: "blur" },
  ],
};

登录流程说明

1. 用户输入账号和密码，点击"登录"按钮。
2. 前端校验表单，校验通过后调用 loginByPassword 接口。
3. 登录成功后，自动跳转到 /home 页面。
4. 登录失败，页面提示错误信息。
5. 记住密码功能仅 UI 实现，实际存储逻辑需开发者补充。
6. 忘记密码逻辑需开发者实现。

页面样式与响应式

• 半透明背景：登录框采用半透明背景，适合大屏背景图。
• 响应式布局：支持 >768px、<=768px、<=480px 不同屏幕自适应。
• 自定义表单样式：重写 Element Plus 表单样式，适配设计风格。
• 按钮与交互：按钮有 hover/active 效果，体验流畅。

/* PC端大屏 */
.login-box { width: 600px; height: 680px; background: rgba(108,4,0,0.5); border: 2px solid #f88584; }
/* 平板 */
@media screen and (max-width: 768px) { .login-box { width: 90%; min-height: 560px; } }
/* 移动端 */
@media screen and (max-width: 480px) { .login-box { padding: 20px 0; } }

注意事项

1. 依赖 Element Plus 组件库。
2. 需提供 @/assets/loginTitle.png 和 @/assets/home_bg.png 图片资源。
3. 登录成功后默认跳转 /home，可自定义。
4. 记住密码功能仅 UI 实现，实际存储逻辑需开发者补充。
5. 忘记密码逻辑需开发者实现。
6. 自动填充输入框样式已做特殊处理，确保与设计一致。

二次开发建议

• 如需扩展表单项、校验规则、登录逻辑等，可直接修改 login.vue。
• 事件、样式、接口均可按需自定义。