增加单个机巢页面

chenyao

2025-03-31 295eb3cc87aaa5176d64a4ef985cdad0bfefae9a

 README.md

@@ -124,54 +124,62 @@
  │   │   ├── HomeBottomLink.vue    # 首页底部链接组件
  ```

## **样式规范说明**
## **屏幕适配说明**

本项目的适配策略如下：

- **宽度适配**：采用 `rem`，使用 `postcss-pxtorem` 插件自动转换。
- **高度适配**：采用 `vh`，需使用 `hToV()` 方法进行转换。
- **字体大小适配**：同样使用 `wToR()` 方法，以保证不同屏幕下的良好显示效果。

------

### **📌 类名中的样式**

- **宽度**：自动转换为 `rem`，无需额外处理。
- **高度**：需要使用 `hToV()` 方法进行转换。
本项目的适配策略如下：采用 `rem`，使用 `postcss-pxtorem` 插件自动转换。

示例：

```
<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>
<div :style="{ height: pxToRem(50), width: pxToRem(50) }">test</div>

<script>
import { hToV, wToR } from '@/utils/pxConver';
import { pxToRem } from '@/utils/rem';
export default {
  mounted() {
    this.style = { height: hToV(50), width: wToR(50) };
    this.style = { height: pxToRem(50), width: pxToRem(50) };
  },
};
</script>

<style scoped lang="scss">
  height: 100px; // 自动转换为 10rem
  width: 100px;      // 自动转换为10rem
</style>
```



## **SVG 图标使用指南**

本项目使用 **`vite-plugin-svg-icons`** 插件进行 SVG 图标管理，支持按需加载，减少体积，提高渲染效率。

------

### **📌 字体大小特别说明**
### **📌 1. 添加 SVG 图标**

如果需要设置 **字体大小**，也应使用 `wToR()` 进行转换，以确保在不同分辨率设备上表现一致。
将 **SVG 文件** 拷贝到以下目录：

```
/src/assets/svg/
```

例如，将 `user.svg` 放入该目录。

------

### **📌 2. 在组件中使用 SVG 图标**

使用 `SvgIcon` 组件加载 SVG 图标，并支持**自定义颜色和尺寸**：

```
<SvgIcon name="user" color="red" :size="48" className="userClass" />
```

 🔹 `name`：对应 `/src/assets/svg/` 目录下的 SVG 文件名（无需后缀 `.svg`）。

 🔹 `color`：可选，设置图标颜色。

 🔹 `size`：可选，设置图标大小，单位 `px`。

 🔹 `size`：可选，设置图标类名。