CSS 与样式

XYGo Admin 2025-02-20 61 次阅读

Tailwind CSS 4 + Clay 拟态阴影设计体系

CSS 与样式

技术方案

Tailwind CSS 4：原子化 CSS，通过 @tailwindcss/vite 插件集成
SCSS：全局变量和 Mixin
Clay 拟态设计：项目独创的阴影体系

Clay 拟态阴影

项目的核心视觉特色，通过多层阴影模拟黏土质感：

阴影变量

scss 复制代码

// 卡片阴影
.shadow-clay-card {
  box-shadow:
    16px 16px 32px rgba(165, 175, 190, 0.3),
    -10px -10px 24px rgba(255, 255, 255, 0.9),
    inset 6px 6px 12px rgba(90, 141, 238, 0.03),
    inset -6px -6px 12px rgba(255, 255, 255, 1);
}

// 按钮阴影
.shadow-clay-btn {
  box-shadow:
    12px 12px 24px rgba(90, 141, 238, 0.3),
    -8px -8px 16px rgba(255, 255, 255, 0.4),
    inset 4px 4px 8px rgba(255, 255, 255, 0.4),
    inset -4px -4px 8px rgba(0, 0, 0, 0.05);
}

// 按压效果
.shadow-clay-pressed {
  box-shadow:
    inset 10px 10px 20px #e0e5ec,
    inset -10px -10px 20px #ffffff;
}

// 深层阴影（Hero 区域）
.shadow-clay-deep {
  box-shadow:
    30px 30px 60px #d1d9e6,
    -30px -30px 60px #ffffff,
    inset 10px 10px 20px rgba(90, 141, 238, 0.05),
    inset -10px -10px 20px rgba(255, 255, 255, 0.8);
}

配色体系

scss 复制代码

.text-clay-foreground { color: #32325d; }  // 主文字
.text-clay-muted { color: #8898aa; }       // 次要文字
.text-clay-accent { color: #5a8dee; }      // 强调色
.bg-clay-accent { background: #5a8dee; }   // 强调背景

Tailwind CSS 使用

项目使用 Tailwind CSS v4，通过 Vite 插件自动集成，无需独立配置文件。

常用类名

vue 复制代码

<template>
  <!-- 布局 -->
  <div class="flex items-center gap-4 p-6">
  
  <!-- 圆角卡片 -->
  <div class="bg-white/70 backdrop-blur-xl rounded-[32px] p-8">
  
  <!-- 响应式 -->
  <div class="grid lg:grid-cols-12 gap-8">
  
  <!-- 文字 -->
  <h1 class="font-heading font-black text-3xl text-clay-foreground">
</template>

全局 SCSS

Vite 配置中自动注入两个全局 SCSS 文件：

el-light.scss：Element Plus 主题变量覆盖
mixin.scss：常用 Mixin（响应式断点、文字截断等）