feat: 提交首页

pages/tabbar/components/grid/index.vue

@@ -0,0 +1,74 @@
+<template>
+	<view class="grid" :style="{'grid-template-columns': `repeat(${col}, 1fr)`}">
+		<view class="item" v-for="(item,index) in list" :key="index">
+			<image v-if="item.showMark" src="/static/aidex/images/history-icon.png" mode="" class="rightMark"></image>
+			<view>
+				<image :src="item.image" mode="" :style="{height:imgHeight,width:imgWidth}"></image>
+			</view>
+			<view class="num">
+				{{item.value}}
+			</view>
+			<view class="label">
+				{{item.label}}
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			list: {
+				type: Array,
+				default: () => []
+			},
+			col: {
+				type: Number,
+				default: 2
+			},
+			imgHeight: {
+				type: String,
+				default: '40rpx'
+			},
+			imgWidth: {
+				type: String,
+				default: '40rpx'
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.grid {
+		display: grid;
+		gap: 22rpx;
+		background-color: #fff;
+		border-radius: 30rpx;
+		margin-top: 26rpx;
+		.item {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			background-color: #F4F8F7;
+			padding: 24rpx 0;
+			border-radius: 10rpx;
+			position: relative;
+			.num {
+				font-size: 36rpx;
+				color: #5A5A5A;
+			}
+			.label {
+				font-size: 24rpx;
+				color: #5A5A5A;
+			}
+			.rightMark {
+				position: absolute;
+				right: 0;
+				top: 0;
+				height: 40rpx;
+				width: 40rpx;
+			}
+		}
+	}
+</style>