ybxf-security-uniapp/pagesA/fire/data_statistics/index.vue

<template>
	<view class="container uni-container">
		<view class="">
			<uni-row :gutter="24">
				<uni-col :span="11" v-for="(item, index) in tableData" :key="index" style="">
					<view class="demo-layout bg-purple-light">
						<view class="top-title">
							<image :src="item.img" class="img-cl"></image>
							<text class="title-name">{{ item.name }}</text>
						</view>
						<view class="data-value">{{ item.value }}</view>
					</view>
				</uni-col>
			</uni-row>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrlImg = config.baseUrlImg
	export default {
		data() {
			return {
				tableData: [{
						name: '巡查扫码总数',
						value: 786,
						img:`${baseUrlImg}/modal/shaoma.png`
					},
					{
						name: '日均扫码数',
						value: 30,
						img:`${baseUrlImg}/modal/shaoma.png`
					},
					{
						name: '人均扫码数',
						value: 14,
						img:`${baseUrlImg}/modal/shaoma.png`
					},
					{
						name: '设备覆盖率',
						value: 786,
						img:`${baseUrlImg}/modal/sheshi.png`
					},
					{
						name: '设备类型覆盖率',
						value: '86%',
						img:`${baseUrlImg}/modal/sheshi.png`
					},
					{
						name: '发现隐患总数',
						value: 786,
						img:`${baseUrlImg}/modal/jingao.png`
					},
					{
						name: '整改隐患总数',
						value: 786,
						img:`${baseUrlImg}/modal/jingao.png`
					},
					{
						name: '整改隐患平均时间',
						value: 786,
						img:`${baseUrlImg}/modal/jingao.png`
					}
				]
			}
		},
		onShow() {},
		methods: {
			getData() {}
		}
	}
</script>

<style lang="scss" scoped>
	body {
		background-color: #f5f7f9;
	}

	page {
		background-color: #f5f7f9 !important;
	}

	/deep/ .uni-row {
		display: flex;
		flex-wrap: wrap;
	}

	.uni-col {
		flex-grow: 1;
		flex-basis: 50%;
		margin-bottom: 40rpx;
		/* 每个元素占据的宽度为一行的一半 */
	}

	.wrap {
		padding: 12px;
	}

	.demo-layout {
		height: 210rpx;
		border-radius: 24rpx;
	}

	.bg-purple {
		background: #fff;
	}

	.bg-purple-light {
		background: #fff;
	}

	.bg-purple-dark {
		background: #fff;
	}

	.img-cl {
		width: 48rpx;
		height: 48rpx;
		margin:40rpx 10rpx 16rpx 24rpx;
	
	}
	.title-name{
		font-size: 28rpx;
		color: #4CB2B6;
		padding-top: 20rpx;
	}
	.data-value{
		font-size: 44rpx;
		margin-left: 80rpx;
	}
	.top-title{
		display: flex;
		align-items: center;
	}
</style>