<template>
	<view class="specialOperations">
		<view class="fixedheader">
			<headers  :themeType="true" :showBack="true">
				<view class="headerName">
					材料管理
				</view>
			</headers>
		</view>
		<view class="sp-menu">
			<view class="menu-item" @click="handleNavigateTo(1)">
				<view class="item-icon">
					<image src="@/static/ekashManage.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/ukashManage.png"></image>
				</view>
				<view class="item-text">
					<text>材料出场管理</text>
				</view>
			</view>
		</view>
		<levitatedsphere :x="100" :y="80"></levitatedsphere>
	</view>
</template>

<script>
	import levitatedsphere from "@/components/levitatedsphere/levitatedsphere.vue"
	import headers from '../../../components/headers/headers.vue'
	export default {
		navigationBarTitleText: '页面标题',
		data() {
			return {
				userInfo: {},
				moduleList: [],
				menuList: [],
			};
		},
		onReady() {

		},
		created() {

		},
		mounted() {

		},
		onLoad() {

		},
		methods: {
			handleNavigateTo(val) {
				if (val === 1) {
					uni.navigateTo({
						url: "/pages/projectEnd/ukashManage/ukashManage"
					})
				} else if (val === 2) {
					uni.navigateTo({
						url: "/pages/projectEnd/ekashManage/ekashManage"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.specialOperations {
		.fixedheader {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 2;
		}

		.sp-menu {
			margin: 0 38rpx;
			padding-top: 200rpx;
			// 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>