# erp_vue_fe

**Repository Path**: jesony/erp_vue_fe

## Basic Information

- **Project Name**: erp_vue_fe
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-24
- **Last Updated**: 2026-03-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

🎯 核心概念
设计理念：磨砂玻璃创造深度和精致度，同时保持清晰度和可读性
目标用户：商业运营人员/管理员
关键元素：玻璃形态、层次设计、流畅动画、深蓝色主题
🌈 颜色系统
主色调：#00033 (深蓝色)
辅助色：#000051 (稍浅的深蓝色)
玻璃效果：多层次透明度 (0.95, 0.9, 0.8, 0.1)
模糊程度：4级模糊 (10px, 15px, 20px, 40px)
📝 字体系统
主字体：Roboto 系列
等宽字体：JetBrains Mono
字重范围：300-800
字体大小：12px-40px 完整体系
✨ 效果系统
磨砂玻璃：backdrop-filter: blur(20px)
动画时长：0.15s-0.6s
缓动函数：标准和自定义缓动
浮动动画：20秒循环的背景动画
🧩 组件规范
布局组件
侧边栏：磨砂玻璃背景，展开/折叠状态
导航栏：半透明磨砂玻璃效果
内容区域：模糊背景容器
表单组件
输入框：磨砂玻璃背景，聚焦发光效果
按钮：深蓝色渐变，悬停动画
选择器：磨砂玻璃样式
导航组件
菜单项：半透明背景，悬停位移效果
面包屑：磨砂玻璃容器，渐变链接
数据展示
卡片：磨砂玻璃面板，悬停上移
指标：渐变背景，缩放动画
📏 设计令牌
间距系统
spacing: {  scale: { xs: "4px", sm: "8px", md: "16px", lg: "24px", xl: "32px" },  layout: { container: "32px", section: "24px", component: "16px" }}
圆角系统
borderRadius: {  scale: { sm: "4px", md: "8px", lg: "12px", xl: "16px" },  component: { card: "16px", button: "12px", input: "12px" }
阴影系统
shadows: {  glass: {    light: "0 4px 15px rgba(0, 0, 0, 0.08)",    medium: "0 8px 32px rgba(0, 0, 0, 0.08)",    heavy: "0 12px 40px rgba(0, 0, 0, 0.12)"  }}
📱 响应式设计
断点：xs(0px), sm(640px), md(768px), lg(1024px), xl(1280px), 2xl(1536px)
容器宽度：对应各断点的最大宽度
网格系统：12列响应式网格
♿ 无障碍设计
对比度：最小4.5:1，增强7:1
焦点样式：2px 深蓝色边框
动效偏好：支持 prefers-reduced-motion
🔧 设计令牌
玻璃透明度：surface(0.95), container(0.9), overlay(0.1)
模糊级别：subtle(10px), normal(15px), strong(20px), intense(40px)
动画缓动：smooth, bounce 两种主要缓动
🚀 实际应用
这个设计系统完全基于 login.vue 的实际实现，提供了：
✅ 即用即取的设计规范
✅ 一致的视觉语言
✅ 完整的组件库
✅ 响应式设计支持
✅ 无障碍设计规范
设计系统现在可以作为整个应用的视觉基础，确保所有组件都遵循统一的磨砂玻璃风格和深蓝色主题！🎨✨
项目可以运行查看完整的磨砂玻璃风格设计系统效果。