初始化

2026-09-15 15:46:36 +07:00
commit da39ab9a2a
125 changed files with 25508 additions and 0 deletions
@@ -0,0 +1,73 @@
+---
+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` |