瓦片组-组件的封装

components/tile-grid/README.md

@@ -0,0 +1,59 @@
+# TileGrid 组件
+
+## 简介
+TileGrid 是一个通用的瓦片网格组件，用于显示一排均匀分布的瓦片图片。
+
+## 功能
+- 支持自定义瓦片数量
+- 支持自定义瓦片图片
+- 自动均匀分布瓦片
+- 响应式布局
+
+## 使用方法
+
+### 1. 导入组件
+```javascript
+import TileGrid from "../../components/tile-grid/tile-grid.vue";
+```
+
+### 2. 注册组件
+```javascript
+export default {
+  components: {
+    TileGrid
+  }
+}
+```
+
+### 3. 在模板中使用
+```vue
+<template>
+  <view class="page">
+    <!-- 使用默认10个瓦片 -->
+    <tile-grid :tile-image="tilesImageEnum.TILE" />
+    
+    <!-- 自定义瓦片数量 -->
+    <tile-grid :tile-count="5" :tile-image="tilesImageEnum.TILE" />
+    
+    <!-- 使用自定义图片 -->
+    <tile-grid :tile-count="8" :tile-image="customTileImage" />
+  </view>
+</template>
+```
+
+## Props 参数
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| tileCount | Number | 10 | 否 | 瓦片数量 |
+| tileImage | String | - | 是 | 瓦片图片URL |
+
+## 样式说明
+- 瓦片网格使用 `flex` 布局，自动均匀分布
+- 每个瓦片图片尺寸为 `75rpx × 48rpx`
+- 瓦片间距通过 `justify-content: space-between` 自动计算
+
+## 注意事项
+- 确保传入的图片URL有效
+- 瓦片数量建议在 1-20 之间，避免过多影响性能
+- 组件会自动适应容器宽度 

components/tile-grid/tile-grid.vue

@@ -0,0 +1,48 @@
+<template>
+  <view class="tile-grid">
+    <view class="tile-item" v-for="(item, index) in tileCount" :key="index">
+      <image :src="tileImage" mode="aspectFit" class="tile-image"></image>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'TileGrid',
+  props: {
+    // 瓦片数量
+    tileCount: {
+      type: Number,
+      default: 10
+    },
+    // 瓦片图片URL
+    tileImage: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tile-grid {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.tile-item {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.tile-image {
+  width: 75rpx;
+  height: 48rpx;
+}
+</style> 

pages/institutionalStructure/institutionalStructure.vue

@@ -1,11 +1,7 @@
 <template>
   <view class="page">
     <custom-navbar title="建制" />
-    <view class="tile">
-      <view class="tile-item" v-for="(item, index)  in 10" :key="index">
-        <image :src="tilesImageEnum.TILE" mode="aspectFit" class="tile-image"></image>
-      </view>
-    </view>
+    <tile-grid :tile-image="tilesImageEnum.TILE" />
     <view class="header">
       <!-- 加载状态 -->
       <view v-if="loading" class="loading">
@@ -43,11 +39,13 @@
 import { tilesImageEnum } from '@/enum/institutionalStructure.js';
 import { getInstitutionalList } from '@/api/institutionalStructure.js';
 import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
+import TileGrid from "../../components/tile-grid/tile-grid.vue";
 import CommonEnum from "../../enum/common";
 
 export default {
   components: {
-    CustomNavbar
+    CustomNavbar,
+    TileGrid
   },
   data() {
     return {
@@ -176,24 +174,7 @@ page {
   padding: 0 11rpx;
   padding-bottom: 40rpx;
 }
-.tile {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  box-sizing: border-box;
-}
-.tile-item {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.tile-image {
-  width: 75rpx;
-  height: 48rpx;
-}
+
 .data{
   background-color: #FFFBF5;
   display: flex;