From 952e590ac20e67d73e94a5127e36e34a4eda3b16 Mon Sep 17 00:00:00 2001
From: zhongrj <646384940@qq.com>
Date: Fri, 27 Oct 2023 18:31:22 +0800
Subject: [PATCH] 组件封装

---
 static/img/zhsb.png           |    0 
 components/curMenu/index.vue  |    4 
 components/gridMenu/index.vue |   65 +++++++++++++++++++++
 static/img/bmrx.png           |    0 
 pages/home/index.vue          |   54 +++++++++++++++---
 static/img/ggbs.png           |    0 
 6 files changed, 112 insertions(+), 11 deletions(-)

diff --git a/components/curMenu/index.vue b/components/curMenu/index.vue
index 4867076..ee66c6a 100644
--- a/components/curMenu/index.vue
+++ b/components/curMenu/index.vue
@@ -1,9 +1,9 @@
 <template>
 		<view class="menu-box" @click="curMenuClick(curMenu)">
 			<view>
-				<u--image :src="curMenu.imgUrl" :width='curMenu.imgWidth || 54' :height='curMenu.height || 54' shape="circle"></u--image>
+				<u--image :src="curMenu.imgUrl" :width='curMenu.imgWidth || 54' :height='curMenu.imgHeight || 54' shape="circle"></u--image>
 			</view>
-			<view :style="{height: curMenu.height || '56rpx'}">
+			<view :style="{height: curMenu.titleHeight ? curMenu.titleHeight + 'px' : '56rpx'}">
 				{{curMenu.title}}
 			</view>
 		</view>
diff --git a/components/gridMenu/index.vue b/components/gridMenu/index.vue
new file mode 100644
index 0000000..e4e63e7
--- /dev/null
+++ b/components/gridMenu/index.vue
@@ -0,0 +1,65 @@
+<template>
+	<view class="cur-container">
+		<view>
+			{{gridData.title}}
+		</view>
+		<view>
+			<view class="l">
+				{{gridData.data}}
+			</view>
+			<view class="r">
+				<u-icon name="phone-fill" color="#fff"></u-icon>
+				{{gridData.phone}}
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			gridData: {
+				type: Object,
+				default: () => {
+					return {
+						data: '无数据',
+						phone: '无'
+					}
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.cur-container {
+		padding: 10rpx;
+		display: flex;
+		flex-direction: column;
+		
+		& > view:first-child {
+			height: 60%;
+			display: flex;
+			align-items: center;
+			justify-content: flex-start;
+		}
+		
+		& > view:last-child {
+			height: 40%;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			font-size: 24rpx;
+			
+			.l {
+				justify-content: flex-start;
+			}
+			
+			.r {
+				display: flex;
+				justify-content: flex-end;
+				align-items: center;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/home/index.vue b/pages/home/index.vue
index 78a071c..6ee2b1b 100644
--- a/pages/home/index.vue
+++ b/pages/home/index.vue
@@ -26,14 +26,12 @@
 			</view>
 
 			<view class="main-phone">
-				<view></view>
-				<view></view>
-				<view></view>
+				<grid-menu :gridData='item' v-for="(item, index) in gridDataList" :key='index'></grid-menu>
 			</view>
 
-			<view class="main-bt">c
+			<view class="main-bt">
 				<view class="main-live">
-
+					<menu-list :menuData="liveList"></menu-list>
 				</view>
 
 				<view class="main-taska">
@@ -49,11 +47,13 @@
 <script>
 	import tabBar from "@/components/tabBar/tabBar.vue";
 	import menuList from "@/components/menuList/index.vue";
+	import gridMenu from "@/components/gridMenu/index.vue";
 
 	export default {
 		components: {
 			tabBar,
-			menuList
+			menuList,
+			gridMenu
 		},
 
 		data() {
@@ -64,8 +64,7 @@
 					['中国', '美国']
 				],
 				columnData: [],
-				btnList: [
-					{
+				btnList: [{
 						imgUrl: '/static/img/sys.png',
 						title: '扫一扫'
 					},
@@ -73,7 +72,43 @@
 						imgUrl: '/static/img/bs.png',
 						title: '报事'
 					}
-				]
+				],
+				gridDataList: [{
+						title: '物业',
+						data: '无数据',
+						phone: '无'
+					},
+					{
+						title: '综治网格',
+						data: '无数据',
+						phone: '无'
+					},
+					{
+						title: '公安网格',
+						data: '无数据',
+						phone: '无'
+					}
+				],
+				liveList: [
+					{
+						imgUrl: '/static/img/ggbs.png',
+						title: '公共报事',
+						imgWidth: 40,
+						imgHeight: 40
+					},
+					{
+						imgUrl: '/static/img/bmrx.png',
+						title: '便民热线',
+						imgWidth: 40,
+						imgHeight: 40
+					},
+					{
+						imgUrl: '/static/img/zhsb.png',
+						title: '租户上报',
+						imgWidth: 40,
+						imgHeight: 40
+					}
+				],
 			}
 		},
 
@@ -170,6 +205,7 @@
 				position: absolute;
 				top: 66%;
 				width: 100%;
+				color: #000;
 
 				.main-live {
 					height: 180rpx;
diff --git a/static/img/bmrx.png b/static/img/bmrx.png
new file mode 100644
index 0000000..88cf140
--- /dev/null
+++ b/static/img/bmrx.png
Binary files differ
diff --git a/static/img/ggbs.png b/static/img/ggbs.png
new file mode 100644
index 0000000..e7124d5
--- /dev/null
+++ b/static/img/ggbs.png
Binary files differ
diff --git a/static/img/zhsb.png b/static/img/zhsb.png
new file mode 100644
index 0000000..1fd3803
--- /dev/null
+++ b/static/img/zhsb.png
Binary files differ

--
Gitblit v1.9.3