<template>
	<view class="specialOperations">
		<headers  class="fixedheader" :themeType="true" :showBack="true">
			<view class="headerName">
				特种作业
			</view>
		</headers>
		<view class="sp-menu">
			<view class="menu-item" style="margin-left: 60rpx;" @click="handleNavigateTo(1)">
				<view class="item-icon">
					<image src="@/static/specialOperations/fireWork.png" style="width: 50rpx;height: 70rpx;"></image>
				</view>
				<view class="item-text">
					<text>动火作业</text>
				</view>
			</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 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"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.specialOperations{
	.fixedheader{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;
	}
	.sp-menu{
		margin-top: 138rpx;
		width: 100%;
		// height: 1200rpx;
		// height: 1000rpx;
		// background-color: darkred;
		display: grid;
		grid-gap: 10rpx;
		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;
			.item-icon{
				width: 220rpx;
				height: 220rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 220rpx;
					height: 220rpx;
				}
			}
			.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>
