快速样式参考指南.md 18 KB
🎨 快速样式参考指南
管理端样式速查手册 - 常用类名和使用示例
📋 目录
🎨 设计变量
颜色
/* 主题色 */
var(--primary-color) /* #3b82f6 蓝色 */
var(--primary-light) /* #60a5fa 浅蓝 */
var(--primary-dark) /* #2563eb 深蓝 */
/* 语义色 */
var(--success-color) /* #22c55e 成功绿 */
var(--warning-color) /* #facc15 警告黄 */
var(--danger-color) /* #ef4444 危险红 */
var(--info-color) /* #a1a1aa 信息灰 */
/* 文本色 */
var(--text-primary) /* #1e293b 主要文本 */
var(--text-secondary) /* #475569 次要文本 */
var(--text-tertiary) /* #94a3b8 三级文本 */
/* 背景色 */
var(--bg-primary) /* #f8fafc 主背景 */
var(--bg-secondary) /* #f1f5f9 次背景 */
var(--bg-tertiary) /* #e2e8f0 三级背景 */
/* 边框色 */
var(--border-color) /* #e2e8f0 标准边框 */
var(--border-light) /* #f1f5f9 浅色边框 */
var(--border-dark) /* #cbd5e1 深色边框 */
间距
var(--spacing-xs) /* 4px */
var(--spacing-sm) /* 8px */
var(--spacing-base) /* 12px */
var(--spacing-md) /* 16px */
var(--spacing-lg) /* 20px */
var(--spacing-xl) /* 24px */
var(--spacing-2xl) /* 32px */
var(--spacing-3xl) /* 40px */
圆角
var(--radius-sm) /* 4px */
var(--radius-base) /* 6px */
var(--radius-md) /* 8px */
var(--radius-lg) /* 12px */
var(--radius-xl) /* 16px */
var(--radius-full) /* 9999px 圆形 */
阴影
var(--shadow-xs) /* 最轻微阴影 */
var(--shadow-sm) /* 轻微阴影 */
var(--shadow-base) /* 标准阴影 */
var(--shadow-md) /* 中等阴影 */
var(--shadow-lg) /* 较强阴影 */
var(--shadow-xl) /* 强阴影 */
var(--shadow-2xl) /* 最强阴影 */
字体
/* 字体大小 */
var(--font-xs) /* 12px */
var(--font-sm) /* 14px */
var(--font-base) /* 16px */
var(--font-md) /* 18px */
var(--font-lg) /* 20px */
var(--font-xl) /* 24px */
var(--font-2xl) /* 28px */
var(--font-3xl) /* 32px */
/* 字体粗细 */
var(--font-light) /* 300 */
var(--font-normal) /* 400 */
var(--font-medium) /* 500 */
var(--font-semibold) /* 600 */
var(--font-bold) /* 700 */
过渡动画
var(--transition-fast) /* 0.15s ease-out */
var(--transition-base) /* 0.2s ease-out */
var(--transition-slow) /* 0.3s ease-out */
📦 常用组件样式
页面容器
<!-- 列表页面容器 -->
<div class="list-container">
<!-- 内容 -->
</div>
页面标题
<!-- 带下划线的页面标题 -->
<h2 class="page-title">用户管理</h2>
工具栏卡片
<!-- 搜索和操作按钮区域 -->
<el-card shadow="never" class="toolbar-card">
<el-button type="primary">新增</el-button>
<el-input placeholder="搜索" />
</el-card>
表格卡片
<!-- 数据表格区域 -->
<el-card shadow="never" class="table-card">
<el-table :data="list">
<!-- 列定义 -->
</el-table>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination />
</div>
</el-card>
信息卡片
<!-- 详情信息卡片 -->
<div class="info-card">
<div class="info-card-title">基本信息</div>
<div class="info-card-content">
<div class="info-row">
<div class="info-label">姓名：</div>
<div class="info-value">张三</div>
</div>
</div>
</div>
📊 数据展示类
文本样式
<!-- 标题突出显示（加粗、15px、主色） -->
<span class="data-highlight">用户姓名</span>
<!-- 金额数字（加粗、15px、蓝色） -->
<span class="amount-text">¥199.00</span>
<!-- 统计数字（加粗、16px、主色） -->
<span class="number-emphasis">1,234</span>
<!-- 描述文字（14px、次要色） -->
<span class="data-description">这是一段描述文字</span>
<!-- 元信息（12px、浅色） -->
<span class="data-meta">2024-10-25 14:30</span>
<!-- 单行文本省略 -->
<span class="text-ellipsis-line">很长的标题会自动省略...</span>
<!-- 两行文本省略 -->
<div class="text-ellipsis-2-lines">
较长的描述文本，超过两行会显示省略号...
</div>
<!-- 三行文本省略 -->
<div class="text-ellipsis-3-lines">
更长的内容描述，最多显示三行，超出部分会显示省略号...
</div>
状态标签
<!-- 成功状态 -->
<el-tag class="status-success" size="small" effect="light">
已完成
</el-tag>
<!-- 警告状态 -->
<el-tag class="status-warning" size="small" effect="light">
待审核
</el-tag>
<!-- 危险/错误状态 -->
<el-tag class="status-danger" size="small" effect="light">
已拒绝
</el-tag>
<!-- 信息状态 -->
<el-tag class="status-info" size="small" effect="light">
进行中
</el-tag>
<!-- 待处理状态 -->
<el-tag class="status-pending" size="small" effect="light">
待处理
</el-tag>
<!-- 处理中状态 -->
<el-tag class="status-processing" size="small" effect="light">
处理中
</el-tag>
<!-- 禁用状态 -->
<el-tag class="status-disabled" size="small" effect="light">
已禁用
</el-tag>
<!-- VIP 金色标签 -->
<el-tag class="vip-tag" size="small">
VIP
</el-tag>
<!-- 热门标签（带脉冲动画） -->
<el-tag class="hot-tag" size="small">
热门
</el-tag>
空状态
<!-- 表格空状态 -->
<template #empty>
<div class="custom-empty-state">
<el-icon class="empty-icon"><User /></el-icon>
<div class="empty-text">暂无数据</div>
<div class="empty-hint">点击"新增"按钮开始添加</div>
</div>
</template>
🛠️ 工具类
文本对齐
<div class="text-left">左对齐</div>
<div class="text-center">居中对齐</div>
<div class="text-right">右对齐</div>
文本颜色
<span class="text-primary">主要文本</span>
<span class="text-secondary">次要文本</span>
<span class="text-tertiary">三级文本</span>
<span class="text-success">成功文本</span>
<span class="text-warning">警告文本</span>
<span class="text-danger">危险文本</span>
<span class="text-info">信息文本</span>
文本大小
<span class="text-xs">12px 文本</span>
<span class="text-sm">14px 文本</span>
<span class="text-base">16px 文本</span>
<span class="text-md">18px 文本</span>
<span class="text-lg">20px 文本</span>
<span class="text-xl">24px 文本</span>
字体粗细
<span class="font-light">细体 300</span>
<span class="font-normal">常规 400</span>
<span class="font-medium">中等 500</span>
<span class="font-semibold">半粗 600</span>
<span class="font-bold">粗体 700</span>
外边距
<!-- 顶部外边距 -->
<div class="mt-xs">上边距 4px</div>
<div class="mt-sm">上边距 8px</div>
<div class="mt-md">上边距 16px</div>
<div class="mt-lg">上边距 20px</div>
<div class="mt-xl">上边距 24px</div>
<!-- 底部外边距 -->
<div class="mb-xs">下边距 4px</div>
<div class="mb-sm">下边距 8px</div>
<div class="mb-md">下边距 16px</div>
<div class="mb-lg">下边距 20px</div>
<div class="mb-xl">下边距 24px</div>
<!-- 左侧外边距 -->
<span class="ml-xs">左边距 4px</span>
<span class="ml-sm">左边距 8px</span>
<span class="ml-md">左边距 16px</span>
<span class="ml-lg">左边距 20px</span>
<!-- 右侧外边距 -->
<span class="mr-xs">右边距 4px</span>
<span class="mr-sm">右边距 8px</span>
<span class="mr-md">右边距 16px</span>
<span class="mr-lg">右边距 20px</span>
内边距
<div class="p-xs">内边距 4px</div>
<div class="p-sm">内边距 8px</div>
<div class="p-md">内边距 16px</div>
<div class="p-lg">内边距 20px</div>
<div class="p-xl">内边距 24px</div>
Flex 布局
<!-- 弹性布局 -->
<div class="flex">Flex 容器</div>
<!-- 居中对齐 -->
<div class="flex-center">垂直水平居中</div>
<!-- 两端对齐 -->
<div class="flex-between">
<span>左侧内容</span>
<span>右侧内容</span>
</div>
<!-- 垂直方向 -->
<div class="flex-col">垂直布局</div>
<!-- 换行 -->
<div class="flex flex-wrap">可换行的 Flex</div>
<!-- Flex 填充 -->
<div class="flex">
<div class="flex-1">占满剩余空间</div>
</div>
圆角
<div class="rounded-sm">4px 圆角</div>
<div class="rounded">6px 圆角</div>
<div class="rounded-md">8px 圆角</div>
<div class="rounded-lg">12px 圆角</div>
<div class="rounded-full">圆形</div>
阴影
<div class="shadow-none">无阴影</div>
<div class="shadow-sm">轻微阴影</div>
<div class="shadow">标准阴影</div>
<div class="shadow-md">中等阴影</div>
<div class="shadow-lg">强阴影</div>
过渡动画
<div class="transition">标准过渡 0.2s</div>
<div class="transition-fast">快速过渡 0.15s</div>
<div class="transition-slow">缓慢过渡 0.3s</div>
鼠标样式
<div class="cursor-pointer">鼠标指针</div>
<div class="cursor-not-allowed">禁止点击</div>
显示/隐藏
<div class="hidden">完全隐藏（display: none）</div>
<div class="invisible">不可见但占位（visibility: hidden）</div>
<div class="visible">可见</div>
溢出处理
<div class="overflow-hidden">隐藏溢出</div>
<div class="overflow-auto">自动滚动条</div>
<div class="overflow-scroll">始终显示滚动条</div>
🎭 动画效果
入场动画
<!-- 淡入 -->
<div class="animate-fade-in">淡入效果</div>
<!-- 从下往上淡入 -->
<div class="animate-fade-in-up">从下往上</div>
<!-- 从上往下淡入 -->
<div class="animate-fade-in-down">从上往下</div>
<!-- 从左滑入 -->
<div class="animate-slide-in-left">从左滑入</div>
<!-- 从右滑入 -->
<div class="animate-slide-in-right">从右滑入</div>
<!-- 缩放进入 -->
<div class="animate-scale-in">缩放进入</div>
<!-- 弹跳进入 -->
<div class="animate-bounce-in">弹跳进入</div>
持续动画
<!-- 脉冲动画 -->
<div class="animate-pulse">脉冲效果</div>
<!-- 弹跳动画 -->
<div class="animate-bounce">弹跳效果</div>
<!-- 旋转动画 -->
<div class="animate-spin">旋转效果</div>
<!-- 闪烁动画 -->
<div class="animate-blink">闪烁效果</div>
交互动画
<!-- 悬停上浮 -->
<div class="hover-lift">鼠标悬停上浮</div>
<!-- 悬停放大 -->
<div class="hover-scale">鼠标悬停放大</div>
<!-- 悬停发光 -->
<div class="hover-glow">鼠标悬停发光</div>
💼 实用组件
徽章
<!-- 数字徽章 -->
<span class="badge">5</span>
<span class="badge badge-primary">新</span>
<span class="badge badge-success">完成</span>
<span class="badge badge-warning">待办</span>
<span class="badge badge-danger">99+</span>
状态点
<!-- 状态指示点 -->
<span class="status-dot status-dot-success"></span> 在线
<span class="status-dot status-dot-warning"></span> 离开
<span class="status-dot status-dot-danger"></span> 离线
<span class="status-dot status-dot-info"></span> 隐身
提示框
<!-- 信息提示框 -->
<div class="tip-box tip-box-info">
<div class="tip-box-icon">ℹ️</div>
<div class="tip-box-content">这是一条信息提示</div>
</div>
<!-- 成功提示框 -->
<div class="tip-box tip-box-success">
<div class="tip-box-icon">✅</div>
<div class="tip-box-content">操作成功</div>
</div>
<!-- 警告提示框 -->
<div class="tip-box tip-box-warning">
<div class="tip-box-icon">⚠️</div>
<div class="tip-box-content">请注意这个警告</div>
</div>
<!-- 危险提示框 -->
<div class="tip-box tip-box-danger">
<div class="tip-box-icon">❌</div>
<div class="tip-box-content">操作失败</div>
</div>
批量操作栏
<div class="batch-actions-bar">
<div class="batch-actions-info">
已选择 <span class="count">5</span> 项
</div>
<div class="batch-actions-buttons">
<el-button type="primary" size="small">批量审核</el-button>
<el-button type="danger" size="small">批量删除</el-button>
</div>
</div>
📱 响应式断点
/* 移动端 */
@media (max-width: 768px) {
/* 小屏幕样式 */
}
/* 平板端 */
@media (max-width: 1024px) {
/* 中等屏幕样式 */
}
/* 超大屏 */
@media (min-width: 1920px) {
/* 大屏幕样式 */
}
🎯 常用场景示例
场景1: 列表页面
<template>
<div class="list-container">
<!-- 页面标题 -->
<h2 class="page-title">用户管理</h2>
<!-- 工具栏 -->
<el-card shadow="never" class="toolbar-card">
<el-row :gutter="20">
<el-col :span="6">
<el-button type="primary">新增用户</el-button>
<el-button>导出</el-button>
</el-col>
<el-col :span="18">
<el-input placeholder="搜索用户" />
</el-col>
</el-row>
</el-card>
<!-- 数据表格 -->
<el-card shadow="never" class="table-card">
<el-table :data="list">
<el-table-column prop="name" label="姓名">
<template #default="{ row }">
<span class="data-highlight">{{ row.name }}</span>
</template>
</el-table-column>
<el-table-column prop="amount" label="金额" align="right">
<template #default="{ row }">
<span class="amount-text">¥{{ row.amount }}</span>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" align="center">
<template #default="{ row }">
<el-tag
:class="row.status === 1 ? 'status-success' : 'status-danger'"
size="small"
effect="light"
>
{{ row.status === 1 ? '正常' : '禁用' }}
</el-tag>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<div class="pagination-container">
<el-pagination />
</div>
</el-card>
</div>
</template>
<style scoped>
@import '@/assets/list-common.css';
</style>
场景2: 数据卡片
<template>
<div class="info-card">
<div class="info-card-title">用户详情</div>
<div class="info-card-content">
<div class="info-row">
<div class="info-label">用户名</div>
<div class="info-value">
<span class="data-highlight">张三</span>
</div>
</div>
<div class="info-row">
<div class="info-label">账户余额</div>
<div class="info-value">
<span class="amount-text">¥1,234.56</span>
</div>
</div>
<div class="info-row">
<div class="info-label">状态</div>
<div class="info-value">
<el-tag class="status-success" size="small" effect="light">
正常
</el-tag>
</div>
</div>
</div>
</div>
</template>
场景3: 统计卡片
<template>
<el-row :gutter="20">
<el-col :span="6">
<div class="info-card hover-lift">
<div class="flex-between">
<div>
<div class="data-meta mb-xs">总用户数</div>
<div class="number-emphasis">1,234</div>
</div>
<el-icon class="text-primary" :size="40"><User /></el-icon>
</div>
</div>
</el-col>
<el-col :span="6">
<div class="info-card hover-lift">
<div class="flex-between">
<div>
<div class="data-meta mb-xs">总收入</div>
<div class="amount-text">¥98,765</div>
</div>
<el-icon class="text-success" :size="40"><Money /></el-icon>
</div>
</div>
</el-col>
</el-row>
</template>
📝 使用建议
1. 优先使用设计变量
✅ 推荐：
.custom-element {
color: var(--primary-color);
padding: var(--spacing-md);
border-radius: var(--radius-base);
}
❌ 不推荐：
.custom-element {
color: #3b82f6;
padding: 16px;
border-radius: 6px;
}
2. 使用工具类减少重复代码
✅ 推荐：
<div class="flex-between mb-lg">
<span class="text-primary font-semibold">标题</span>
<span class="text-secondary text-sm">副标题</span>
</div>
❌ 不推荐：
<div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
<span style="color: #1e293b; font-weight: 600;">标题</span>
<span style="color: #475569; font-size: 14px;">副标题</span>
</div>
3. 引入通用样式文件
<style scoped>
/* 引入列表页面通用样式 */
@import '@/assets/list-common.css';
/* 只写特定页面的样式 */
.custom-class {
/* 自定义样式 */
}
</style>
🎉 完成
现在你已经掌握了管理端所有核心样式的使用方法！
相关文档：
美化方案说明.md- 完整设计方案美化-快速开始.md- 快速上手指南数据展示优化说明.md- 数据展示详解样式优化完成总结.md- 完成总结
核心文件：
src/assets/variables.css- 设计变量src/assets/animations.css- 动画效果src/assets/list-common.css- 通用列表样式src/assets/data-display.css- 数据展示样式
最后更新：2024-10-25 版本：v1.0