🎨 快速样式参考指南

管理端样式速查手册 - 常用类名和使用示例

📋 目录

设计变量
常用组件样式
数据展示类
工具类
动画效果
状态标签
响应式断点

🎨 设计变量

颜色

/* 主题色 */
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

快速样式参考指南.md 18 KB Vēsture Neapstrādāts

🎨 快速样式参考指南

📋 目录

🎨 设计变量

颜色

间距

圆角

阴影

字体

过渡动画

📦 常用组件样式

页面容器

页面标题

工具栏卡片

表格卡片

信息卡片

📊 数据展示类

文本样式

状态标签

空状态

🛠️ 工具类

文本对齐

文本颜色

文本大小

字体粗细

外边距

内边距

Flex 布局

圆角

阴影

过渡动画

鼠标样式

显示/隐藏

溢出处理

🎭 动画效果

入场动画

持续动画

交互动画

💼 实用组件

徽章

状态点

提示框

批量操作栏

📱 响应式断点

🎯 常用场景示例

场景1: 列表页面

场景2: 数据卡片

场景3: 统计卡片

📝 使用建议

1. 优先使用设计变量

2. 使用工具类减少重复代码

3. 引入通用样式文件

🎉 完成

快速样式参考指南.md 18 KB

Vēsture Neapstrādāts