docs: 添加规范

luoguanghui

2025-03-26 f7d854e455563a0143e83d4890002db1c7fffc5d

 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    # 首页底部链接组件
  ```
  ```

## **样式规范说明**

本项目的适配策略如下：

- **宽度适配**：采用 `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()` 进行转换，以确保在不同分辨率设备上表现一致。