<template> 
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view class="top-view"></view>
	<view class="center-box">
		<view class="grid-box">
			<view style="width: 100%;height: auto;display: flex;justify-content: space-between;align-items: center;">
				<view style="font-size: 28rpx;font-weight: 600;">证件管理</view> 
			</view>
			<view class="grid-container">
				<view class="grid-item" @click="navigateTo('/pages/certificateManage/certificateInfo/index')">
					<view class="icon-wrapper">
						<image style="width: 120rpx;height: 120rpx;" src="/static/images/my/personalInfo.png"></image>
					</view>
					<text class="icon-text">证件信息</text>
				</view>
				<view class="grid-item" @click="navigateTo('/pages/certificateManage/certificateRecord/index')">
					<view class="icon-wrapper">
						<image style="width: 120rpx;height: 120rpx;" src="/static/images/my/notice.png"></image>
					</view>
					<text class="icon-text">证件记录</text>
				</view>  
				<view class="grid-item" @click="navigateTo('/pages/certificateManage/certificateLifespan/index')">
					<view class="icon-wrapper">
						<image style="width: 120rpx;height: 120rpx;" src="/static/images/my/notice.png"></image>
					</view>
					<text class="icon-text">存证超期</text>
				</view>  
			</view> 
		</view> 
		<view class="grid-box">
			<view style="width: 100%;height: auto;display: flex;justify-content: space-between;align-items: center;">
				<view style="font-size: 28rpx;font-weight: 600;">证照借还管理</view> 
			</view>
			<view class="grid-container">
				<view class="grid-item" @click="navigateTo('/pages/certificateReturnManage/certificateTask/index')">
					<view class="icon-wrapper">
						<image style="width: 120rpx;height: 120rpx;" src="/static/images/my/personalInfo.png"></image>
					</view>
					<text class="icon-text">证件任务记录</text>
				</view>
				<view class="grid-item" @click="navigateTo('/pages/certificateReturnManage/certificateSave/index')">
					<view class="icon-wrapper">
						<image style="width: 120rpx;height: 120rpx;" src="/static/images/my/notice.png"></image>
					</view>
					<text class="icon-text">证件存证</text>
				</view>  
				<view class="grid-item" @click="navigateTo('/pages/certificateReturnManage/certificateTake/index')">
					<view class="icon-wrapper">
						<image style="width: 120rpx;height: 120rpx;" src="/static/images/my/notice.png"></image>
					</view>
					<text class="icon-text">证件取证</text>
				</view>  
			</view> 
		</view> 
	</view>  
</template>

<script> 
export default {
  data() {
    return { 
		fontValue:uni.getStorageSync('fontSize') || 8,
    }
  },
  onShow() {
  	this.getUserInfo()
  },
  onLoad() {
	  
  },
  onUnload() { 
  },
  methods: {  
		//获取用户信息
		getUserInfo(){
			// this.$store.dispatch('GetInfo').then(res => {
			// 	uni.setStorageSync('userId', res.user.userId)
			// 	uni.setStorageSync('userName', res.user.userName)
			// 	uni.setStorageSync('phonenumber', res.user.phonenumber)
			// 	uni.setStorageSync('mobile', res.user.phonenumber) 
			// })
		}, 
		navigateTo(url) {
			uni.navigateTo({
				url
			})
		}
	},
}
</script>

<style lang="scss">
/* #ifndef APP-NVUE */
page {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: #fafcff;
  height: 100%;
}
view {
  font-size: 28rpx;
  line-height: inherit;
}
/* #endif */
 .top-view{
 	width: 100%;
 	height: 14vh;
 	background: linear-gradient( 180deg, #3888FF 0%, rgba(56,136,255,0) 100%);
	position: relative;
 }

.header {
  padding: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10rpx;

  .header-text {
    font-size: 38rpx;
    font-weight: 600;
    color: #fff;
  }
} 

.center-box{
	// margin-top: 30rpx;
	width: 100%; 
	height: 70vh;
	background: rgba(255,255,255,0.3);
	opacity: 0.8;
	border-radius: 48rpx 48rpx 0rpx 0rpx;
	border: 1px solid #fff;
	margin-top: -10vh;
	padding: 20rpx 20rpx; 
	padding-top: 60rpx;
	z-index: 999999;   
	
	.tag-view{
		width: 96%;
		height: auto;
		margin: 0 auto; 
		display: flex;
		margin-bottom: 2vh;
	}
	.tag-view-item{
		width: auto;
		height: 100%;
		color: #333333;
		font-size: 32rpx;
		font-weight: 600;
		margin-right: 40rpx;
		padding-bottom: 10rpx;
	}
	.active{
		border-bottom: 2px solid #3888FF;
		color: #000;
	}
	.main-box{
		width: 96%;
		height: auto;
		margin: 0 auto;
	} 
	.record-item{
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center; 
		border-bottom: 1px solid #eee;
	}
} 
 .grid-box{
 	width: 100%;
 	height: 15vh;
 	margin: 20rpx auto; 
 }
 .grid-container {
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
 	gap: 20px;
 
 	.grid-item {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 
 		.icon-wrapper {
 			// width: 48px;
 			// height: 48px;
 			//border-radius: 24px;
 			//background: #f5f5f5;
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			margin-bottom: 3px;
 		}
 
 		.icon-text {
 			font-size: 28rpx;
 			color: #0F274B;
 		}
 	}
 } 
</style>
