style(login): 增强登录页面用户体验和视觉效果

- 添加登录方式切换功能，支持账号登录和免密码登录
- 优化表单布局，统一错误提示管理
- 更新短信验证码发送功能，增加倒计时提示
- 调整登录按钮激活状态逻辑，提升用户体验
- 同步更新CSS样式以支持新功能

.cursor/rules/login-component.mdc

+---
+description: 登录页面组件开发规范和约定
+globs: src/views/User/login.vue,src/assets/css/login/*
+---
+
+# 登录页面开发规范
+
+## 组件结构
+- 主文件: [src/views/User/login.vue](mdc:src/views/User/login.vue)
+- 样式文件: [src/assets/css/login/index.less](mdc:src/assets/css/login/index.less)
+
+## Tab切换功能
+- 支持"账号登录"和"免密码登录"两种模式
+- 使用统一的Tab容器样式，背景色 #F1F4FA
+- 激活状态使用蓝色主题 #1969F9 + 白色背景
+- 所有Tab相关样式写在 .tab-container 类中
+
+## 错误处理模式
+- 使用统一的 errors 对象管理所有错误状态
+- 通过 getErrorClass() 方法动态返回错误样式类
+- 使用 setError(), clearError(), clearAllErrors() 方法管理错误
+- 避免使用多个独立的错误状态变量
+
+## 表单验证
+- 手机号验证统一使用 validateMobile() 方法
+- 支持账号登录和短信登录两种验证逻辑
+- 使用 computed 属性判断登录按钮激活状态
+
+## 短信验证码功能
+- 发送验证码按钮支持倒计时功能（60秒）
+- 倒计时期间按钮不可点击，样式添加 opacity: 0.6
+- 验证码输入框与发送按钮使用 .code-box 布局
+
+## 样式约定
+- 登录框宽度固定 400px，表单宽度 342px
+- 所有输入框高度 43px，圆角 2px
+- 主要颜色：蓝色 #1969F9，灰色 #8391AD
+- 错误状态边框色 #FF1D00
+- 禁止在 .less 和 .css 文件中写注释
+
+## 数据管理
+- 避免使用 watch 监听器，优先使用 computed 属性
+- 统一使用 var 声明变量，禁用 let/const
+- 错误信息统一使用 errorMessage 显示
\ No newline at end of file