样式规范

CSS 方案

项目采用 UnoCSS + SCSS 的样式方案：

• UnoCSS: 原子化 CSS 引擎，类似 Tailwind CSS
• SCSS: 传统预处理器，用于复杂样式逻辑
• wot-ui 样式变量: UI 组件库主题变量

UnoCSS 配置

配置文件：uno.config.ts

基础配置

// uno.config.ts
import {
  defineConfig,
  presetUno,
  presetAttributify,
  presetIcons,
} from 'unocss'
import presetWot from '@wot-ui/unocss-preset'

export default defineConfig({
  presets: [
    presetUno(),            // 默认预设（Tailwind 兼容）
    presetAttributify(),    // 属性化模式
    presetIcons(),          // 图标支持
    presetWot(),           // wot-ui 预设
  ],
  // 自定义快捷方式
  shortcuts: {
    // 居中 flex
    'flex-center': 'flex items-center justify-center',
    // 两端对齐
    'flex-between': 'flex items-center justify-between',
    // 常用文本样式
    'text-primary': 'text-[--color-primary]',
    'text-secondary': 'text-gray-500',
  },
})

原子类使用指南

布局

<template>
  <!-- Flex 布局 -->
  <view class="flex items-center justify-between p-4">
    <text class="text-lg font-bold">标题</text>
    <button text-sm>按钮</button>
  </view>
  
  <!-- Grid 布局 -->
  <view class="grid grid-cols-3 gap-4">
    <view class="item">1</view>
    <view class="item">2</view>
    <view class="item">3</view>
  </view>
</template>

尺寸

.container {
  /* 固定宽度 */
  w-full;          /* 100% */
  w-screen;        /* 100vw */
  
  /* 固定高度 */
  h-full;          /* 100% */
  h-screen;        /* 100vh */
  
  /* 自定义尺寸 */
  w-100px;
  h-50%;
  
  /* 最大/最小尺寸 */
  max-w-screen-md;
  min-h-screen;
}

间距

/* Padding */
p-4;        /* padding: 1rem */
px-4;       /* padding-left/right: 1rem */
py-2;       /* padding-top/bottom: 0.5rem */

/* Margin */
m-4;        /* margin: 1rem */
mt-4;       /* margin-top: 1rem */
mb-auto;    /* margin-bottom: auto */

/* Gap (Flex/Grid 子元素间距) */
gap-2;      /* gap: 0.5rem */
gap-x-4;    /* column-gap: 1rem */

字体

/* 大小 */
text-xs;    /* 0.75rem */
text-sm;    /* 0.875rem */
text-base;  /* 1rem */
text-lg;    /* 1.125rem */
text-xl;    /* 1.25rem */
text-2xl;   /* 1.5rem */

/* 粗细 */
font-normal;    /* 400 */
font-medium;    /* 500 */
font-semibold;  /* 600 */
font-bold;      /* 700 */

/* 对齐 */
text-left;
text-center;
text-right;

/* 其他 */
leading-tight;     /* 行高紧凑 */
leading-relaxed;   /* 行高宽松 */
tracking-wide;    /* 字间距 */
truncate;         /* 文本截断省略号 */

颜色

/* 命名颜色 */
text-red-500;
bg-blue-100;
border-gray-300;

/* 透明度 */
text-black/50;       /* rgba(0,0,0,0.5) */
bg-white/80;

/* CSS 变量 */
text-[--color-primary];
bg-[--bg-color];

/* 任意值 */
text-[#1890ff];
bg-[rgb(24,144,255)];

边框

border;             /* 1px solid currentColor */
border-2;           /* 2px solid */
border-t;           /* 上边框 */
border-dashed;      /* 虚线 */
rounded;            /* 圆角 */
rounded-full;       /* 圆形 */
rounded-lg;         /* 大圆角 */

显示与定位

/* Display */
block;
inline-block;
inline-flex;
hidden;             /* display: none */

/* 定位 */
relative;
absolute;
fixed;
sticky;
top-0;
left-0;
right-0;
bottom-0;

/* 溢出 */
overflow-hidden;
overflow-auto;
overflow-x-auto;

响应式断点

/* 移动端适配 */
sm:text-base;       /* >= 640px */
md:text-lg;         /* >= 768px */
lg:text-xl;         /* >= 1024px */
xl:text-2xl;        /* >= 1280px */

SCSS 使用

全局变量

在 uni.scss 或组件中定义变量：

/* uni.scss */
$primary-color: #1890ff;
$success-color: #52c41a;
$warning-color: #faad14;
$error-color: #f5222d;
$text-color: #333333;
$text-color-secondary: #666666;
$border-color: #d9d9d9;
$bg-color: #f5f5f5;

/* 安全区域 */
$safe-area-inset-bottom: constant(safe-area-inset-bottom);
$safe-area-inset-bottom-env: env(safe-area-inset-bottom);

在组件中使用

<style lang="scss" scoped>
.container {
  background-color: $bg-color;
  border: 1px solid $border-color;
  padding: $spacing-md;
  
  .title {
    color: $text-color;
    font-size: $font-size-lg;
    font-weight: bold;
  }
  
  &.active {
    background-color: $primary-color;
    color: white;
  }
}
</style>

Mixin（混入）

常用 Mixin 示例：

/* mixins.scss */
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin text-ellipsis($lines: 1) {
  @if $lines == 1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@mixin safe-area-bottom {
  padding-bottom: $safe-area-inset-bottom;
  padding-bottom: $safe-area-inset-bottom-env;
}

/* 使用 */
.card {
  @include flex-center;
  
  .title {
    @include text-ellipsis(2);
  }
}

wot-ui 主题定制

CSS 变量覆盖

通过 CSS 变量自定义 wot-ui 组件样式：

:root {
  --color-primary: #1890ff;
  --color-success: #52c41a;
  --color-warning: #faad14;
  --color-danger: #ff4d4f;
  
  --navbar-height: 44px;
  --tabbar-height: 50px;
}

组件级样式覆盖

<style scoped>
/* 覆盖 wot-ui 组件内部样式（需要 :deep() */
:deep(.wd-button) {
  border-radius: 8px;
}

:deep(.wd-navbar__title) {
  font-weight: 600;
}
</style>

移动端适配

rpx 单位

UniApp 特有单位，根据屏幕宽度自适应：

.box {
  width: 750rpx;      /* 相对于屏幕宽度 */
  height: 200rpx;
  font-size: 28rpx;
  padding: 30rpx;
}

设计稿适配

设计稿宽度 750rpx，换算关系：

• 设计稿 1px = 1rpx
• 在 iPhone 6/7/8 上，1rpx = 0.5px
• 在 iPhone X 及以上，1rpx 根据实际宽度计算

安全区域

底部安全区域适配：

.page-content {
  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

样式最佳实践

1. 优先使用原子类

简单样式直接用 UnoCSS 原子类：

<!-- ✅ 推荐 -->
<view class="flex items-center p-4 bg-white rounded-lg shadow">

<!-- ❌ 不推荐 -->
<view class="container">

2. 复杂样式用 SCSS

需要嵌套、循环、条件等逻辑时使用 SCSS：

.list-item {
  &:nth-child(even) {
    background-color: #fafafa;
  }
  
  &.active {
    .title {
      color: $primary-color;
    }
  }
}

3. BEM 命名

复杂组件使用 BEM 规范：

/* Block */
.card {}

/* Element */
.card__header {}
.card__body {}
.card__footer {}

/* Modifier */
.card--primary {}
.card--hidden {}

4. 避免深层选择器

限制 scoped 样式的深度，提升性能：

/* ❌ 选择器太深 */
.parent .child .grand-child .target {}

/* ✅ 更扁平 */
.target {}

5. 响应式优先

移动端优先设计，使用 min-width 媒体查询：

/* 基础样式（移动端） */
.container {
  padding: 16px;
}

/* 平板及以上 */
@media (min-width: 768px) {
  .container {
    padding: 32px;
  }
}