uni-zhihuikuangshan/pages/production/statistical_analysis_table/statistical_analysis_table.vue

<template>
	<view class="content">
		<view class="item_box" style="background-color: #638BD5;" @click="go_meitan_cxl()">
			<view class="img">
				<image src="./icon/icon_1.png" mode=""></image>
			</view>
			<view class="text">
				<view class="name">煤炭产销量</view>
				<!-- <view class="tip"></view> -->
			</view>
		</view>
		<view class="item_box" style="background-color: #A3A2E4;">
			<view class="img">
				<image src="./icon/icon_2.png" mode=""></image>
			</view>
			<view class="text">
				<view class="name">车辆使用统计</view>
			</view>
		</view>
		<view class="item_box" style="background-color: #8BC8DA;">
			<view class="img">
				<image src="./icon/icon_3.png" mode=""></image>
			</view>
			<view class="text">
				<view class="name">入井统计</view>
			</view>
		</view>
		<view class="item_box" style="background-color: #FBB47B;">
			<view class="img">
				<image src="./icon/icon_4.png" mode=""></image>
			</view>
			<view class="text">
				<view class="name">天然气及矿井水</view>
			</view>
		</view>
		<view class="item_box" style="background-color:#C883BF;">
			<view class="img">
				<image src="./icon/icon_5.png" mode=""></image>
			</view>
			<view class="text">
				<view class="name">设备管理</view>
			</view>
		</view>
		<view class="item_box" style="background-color: #31B3F7;">
			<view class="img">
				<image src="./icon/icon_6.png" mode=""></image>
			</view>
			<view class="text">
				<view class="name">车辆运行</view>
			</view>
		</view>
		<view class="item_box" style="background-color: #54CC65">
			<view class="img">
				<image src="./icon/icon_7.png" mode=""></image>
			</view>
			<view class="text">
				<view class="name">产销运平衡比对月度分析报告</view>
			</view>
		</view>
		<view class="item_box" style="background-color: #638BD5;">
			<view class="img">
				<image src="./icon/icon_8.png" mode=""></image>
			</view>
			<view class="text">
				<view class="name">天然气及矿井水月度分析报告</view>
			</view>
		</view>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			go_meitan_cxl(){
				uni.navigateTo({
					url:"./meitan_cxl/meitan_cxl"
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		box-sizing: border-box;
		padding: 20rpx 25rpx 0;
		margin-bottom: 100rpx;

		overflow: hidden;

		.item_box {
			float: left;

			width: 220rpx;
			height: 280rpx;

			margin-right: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 16rpx;

			.img {
				box-sizing: border-box;
				padding-top: 60rpx;
				text-align: center;

				image {
					width: 90rpx;
					height: 90rpx;
				}
			}

			.text {
				margin-top: 30rpx;
				text-align: center;
				color: #FFFFFF;
				line-height: 40rpx;

				.name {
					font-size: 28rpx;
				}

				.tip {
					font-size: 24rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		.item_box:nth-child(3n) {
			margin-right: 0;
		}

	}
</style>