74 lines
1.3 KiB
Plaintext
74 lines
1.3 KiB
Plaintext
---
|
||
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` |
|