zhgdyunapp/pages/projectEnd/specialOperations/specialCheck.vue

<template>
	<view class="specialOperations">
		<headers  class="fixedheader" :themeType="true" :showBack="true">
			<view class="headerName">
				特种作业
			</view>
		</headers>
		<view class="sp-menu">
			<view class="menu-item" @click="handleNavigateTo(1)">
				<view class="item-icon">
					<image src="@/static/specialOperations/fireWork.png"></image>
				</view>
				<view class="item-text">
					<text>动火作业</text>
				</view>
			</view>
			<view class="menu-item" @click="handleNavigateTo(2)">
				<view class="item-icon">
					<image src="@/static/specialOperations/limitSpaceWork.png"></image>
				</view>
				<view class="item-text">
					<text>受限空间作业</text>
				</view>
			</view>
			<view class="menu-item" @click="handleNavigateTo(3)">
				<view class="item-icon">
					<image src="@/static/specialOperations/bindPlatePlug.png"></image>
				</view>
				<view class="item-text">
					<text>盲板抽堵作业</text>
				</view>
			</view>
			<view class="menu-item" @click="handleNavigateTo(4)">
				<view class="item-icon">
					<image src="@/static/specialOperations/highJob.png"></image>
				</view>
				<view class="item-text">
					<text>高处作业</text>
				</view>
			</view>
			<!-- <view class="menu-item" style="margin-left: 60rpx;"></view>
			<view class="menu-item" style="margin-left: 60rpx;"></view>
			<view class="menu-item" style="margin-right: 60rpx;"></view>
			<view class="menu-item" style="margin-left: 60rpx;"></view>
			<view class="menu-item" style="margin-right: 60rpx;"></view>
			<view class="menu-item" style="margin-left: 60rpx;"></view>
			<view class="menu-item" style="margin-right: 60rpx;"></view> -->
		</view>
	</view>
</template>

<script>
	import headers from '../../../components/headers/headers.vue'
	export default {
		navigationBarTitleText: '页面标题',
		data() {
			return {
				
			};
		},
		methods:{
			handleNavigateTo(val){
				if(val === 1) uni.navigateTo({ url: "./fireWork/checkList" })
				if(val === 2) uni.navigateTo({ url: "./limitSpaceWork/checkList" })
				if(val === 3) uni.navigateTo({ url: "./bindPlatePlug/checkList" })
				if(val === 4) uni.navigateTo({ url: "./highJob/checkList" })
			}
		}
	}
</script>

<style lang="scss">
.specialOperations{
	.fixedheader{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;
	}
	.sp-menu{
		margin: 0 38rpx;
		margin-top: 138rpx;
		// height: 1200rpx;
		// height: 1000rpx;
		// background-color: darkred;
		display: grid;
		grid-gap: 24rpx;
		grid-template-columns: repeat(2, 1fr);
		// grid-template-columns: repeat(auto-fill, 220rpx);
		// place-items: center;
		// justify-content: center;
		.menu-item{
			// width: 220rpx;
			height: 274rpx;
			// background-color: darkblue;
			box-shadow: 0px 8rpx 15rpx 0px rgba(219,229,255,0.6);
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.item-icon{
				// width: 220rpx;
				// height: 220rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 14rpx;
				image{
					width: 66rpx;
					height: 86rpx;
				}
			}
			.item-text{
				align-items: center;
				width: 220rpx;
				height: 54rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				text{
					text-align: center;
					display: flex;
					justify-content: center;
				}
			}
		}
	}
}
</style>