---
description: SCSS 样式编写规范，包含移动端适配和 px2rem 规则
globs: "**/*.vue,**/*.scss"
alwaysApply: false
---

# SCSS 样式规范

## px2rem 适配

- 项目使用 `postcss-plugin-px2rem`，rootValue 为 **37.5**
- 设计稿以 **375px** 宽度为基准，直接写 px 值即可自动转换
- 带 `pcm` 选择器前缀的样式**不会**被转换 (PC 端样式)

## 样式写法

- 使用 `<style lang="scss" scoped>` 保证组件样式隔离
- 深层覆盖 Vant 组件样式使用 `::v-deep`:

```scss
::v-deep .van-tabs__wrap {
  .van-tab--active {
    background: #f68804;
  }
}
```

## 常用模式

### 全屏背景图

```scss
.contentBlock {
  height: 940px;
  width: 343px;
  background: url("./../../../assets/images/{template}/content.webp") no-repeat;
  background-size: 100% 100%;
}
```

### 固定定位浮层

```scss
.floatingBox {
  position: fixed;
  right: 0;
  top: 187px;
  z-index: 998;
}
```

### 下载按钮

```scss
.downBtn {
  border-radius: 24px;
  background: #ff6f2e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
```

## 颜色常量 (项目常用)

| 用途 | 色值 |
|------|------|
| 页面背景 | `#141414` |
| 主按钮 | `#ff6f2e` / `#f68804` |
| Tab 背景 | `#2d2c2f` |
| 弹窗按钮 | `#5b92ee` |
| 文字白色 | `#ffffff` |