From f7d854e455563a0143e83d4890002db1c7fffc5d Mon Sep 17 00:00:00 2001
From: luoguanghui <luoguanghui@0791jx.cn>
Date: Wed, 26 Mar 2025 21:21:20 +0800
Subject: [PATCH] docs: 添加规范
---
README.md | 68 +++++++++++++++++++++++++++++-----
1 files changed, 58 insertions(+), 10 deletions(-)
diff --git a/README.md b/README.md
index cc5cbf3..ac20020 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,3 @@
-
-
-
-
# 指挥调度平台（大屏）
## 项目简介
@@ -12,7 +8,7 @@
- **Node.js**：18 及以上
- **Vue 版本**：Vue 3
-- **依赖管理**： `yarn`
+- **依赖管理**： pnpm
- **Cesium**：用于三维地图可视化
## 项目启动
@@ -27,19 +23,19 @@
### 2. 安装依赖
```sh
-yarn install
+pnpm install
```
### 3. 运行开发环境
```sh
-yarn dev
+pnpm dev
```
### 4. 构建项目
```sh
-yarn build
+pnpm build
```
## 目录结构
@@ -119,11 +115,63 @@
- **示例**：
```
- bash复制编辑pages/
+ pages/
├── Home/
│ ├── Home.vue # 首页主组件
│ ├── HomeTop.vue # 首页顶部组件
│ ├── HomeBottom/
│ │ ├── HomeBottom.vue # 首页底部主组件
│ │ ├── HomeBottomLink.vue # 首页底部链接组件
- ```
\ No newline at end of file
+ ```
+
+## **样式规范说明**
+
+本项目的适配策略如下：
+
+- **宽度适配**：采用 `rem`，使用 `postcss-pxtorem` 插件自动转换。
+- **高度适配**：采用 `vh`，需使用 `hToV()` 方法进行转换。
+- **字体大小适配**：同样使用 `wToR()` 方法，以保证不同屏幕下的良好显示效果。
+
+------
+
+### **📌 类名中的样式**
+
+- **宽度**：自动转换为 `rem`，无需额外处理。
+- **高度**：需要使用 `hToV()` 方法进行转换。
+
+示例：
+
+```
+<style scoped lang="scss">
+ height: hToV(100); // 100px 转换为 vh
+ width: 100px; // 自动转换为 rem
+</style>
+```
+
+------
+
+### **📌 行内样式或 JavaScript 动态设置样式**
+
+- **高度**：使用 `hToV()` 进行 `vh` 适配。
+- **宽度**：使用 `wToR()` 进行 `rem` 适配。
+
+示例：
+
+```
+<div :style="{ height: hToV(50), width: wToR(50) }">test</div>
+
+<script>
+import { hToV, wToR } from '@/utils/pxConver';
+export default {
+ mounted() {
+ this.style = { height: hToV(50), width: wToR(50) };
+ },
+};
+</script>
+```
+
+------
+
+### **📌 字体大小特别说明**
+
+如果需要设置 **字体大小**，也应使用 `wToR()` 进行转换，以确保在不同分辨率设备上表现一致。
\ No newline at end of file
--
Gitblit v1.9.3