From ae7ab62fc8309adc90b5ee53c4f06b20b2237e37 Mon Sep 17 00:00:00 2001 From: linbin <495561397@qq.com> Date: Tue, 9 Sep 2025 20:23:02 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=A0=B7=E5=BC=8F=E6=8F=90?= =?UTF-8?q?=E7=A4=BA=E8=AF=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 商家端web/样式设计提示词.md | 94 +++++++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 商家端web/样式设计提示词.md diff --git a/商家端web/样式设计提示词.md b/商家端web/样式设计提示词.md new file mode 100644 index 0000000..2560944 --- /dev/null +++ b/商家端web/样式设计提示词.md @@ -0,0 +1,94 @@ +# 样式设计提示词 + +## 整体设计风格 +创建一个现代化的企业级管理系统界面,采用简洁清晰的设计风格,注重用户体验和视觉层次。 + +## 颜色方案 + +### 主色调 +- **头部背景色**: `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. **响应性**: 适配不同设备和屏幕尺寸 + +## 关键特色 +- 深绿色头部体现企业稳重感 +- 蓝色系交互元素提供现代感 +- 细腻的阴影和过渡效果 \ No newline at end of file