# 样式设计提示词

## 整体设计风格
创建一个现代化的企业级管理系统界面，采用简洁清晰的设计风格，注重用户体验和视觉层次。

## 颜色方案

### 主色调
- **头部背景色**: `rgb(9, 84, 43)` - 深绿色，体现专业稳重
- **页面背景色**: `#f5f5f5` - 浅灰色，减少视觉疲劳

### 功能色彩
- **主要操作色**: `#1890ff` - 蓝色系
  - 悬停状态: `#40a9ff`
  - 选中状态: `#e6f7ff`（背景）
- **成功色**: `#52c41a` - 绿色
  - 悬停状态: `#73d13d`
- **警告色**: `#faad14` - 橙黄色
  - 悬停状态: `#ffc53d`

### 辅助色彩
- **表单背景**: `#fafafa` - 极浅灰
- **边框色**: `#d9d9d9`、`#e8e8e8`
- **文本色**: `#333` - 深灰色
- **白色**: `#fff` - 纯白色用于卡片背景

## 布局特点

### 页面结构
- 全屏布局：`width: 100%`, `height: 100vh`
- 顶部固定头部区域
- 主内容区域可滚动：`overflow-y: auto`

### 间距系统
- 大间距: `30px` (页面边距、区块间距)
- 中间距: `20px` (表单元素间距)
- 小间距: `10px`、`5px` (按钮、图标间距)

## 组件设计

### 按钮样式
```css
.btn {
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
```

### 表单元素
- **输入框**: 圆角 `4px`，边框 `#d9d9d9`
- **聚焦效果**: 蓝色边框 + 阴影效果
- **标签**: 字重 `500`，深灰色 `#333`

## 交互效果

### 动画过渡
- **通用过渡**: `transition: all 0.3s ease`
- **按钮悬停**: 向上移动 `translateY(-2px)`
- **展开动画**: 淡入效果 `fadeIn 0.3s ease-in-out`

### 视觉反馈
- **悬停状态**: 颜色变化 + 轻微位移
- **选中状态**: 背景色变化 + 边框高亮
- **加载状态**: 渐变动画效果

## 响应式设计
- **移动端适配**: `@media (max-width: 768px)`
- **布局调整**: 头部垂直排列，表单单列布局
- **间距优化**: 减少边距和字体大小

## 字体系统
```css
font-family: "Helvetica Neue", Helvetica, "PingFang SC", 
             "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, 
             Arial, sans-serif;
```

## 设计原则
1. **一致性**: 统一的颜色、字体、间距系统
2. **层次性**: 清晰的信息层级和视觉引导
3. **易用性**: 直观的操作反馈和状态提示
4. **专业性**: 企业级应用的稳重可靠感
5. **响应性**: 适配不同设备和屏幕尺寸

## 关键特色
- 深绿色头部体现企业稳重感
- 蓝色系交互元素提供现代感
- 细腻的阴影和过渡效果