
<!--前端模板-->
<template>
	<div class="common-layout">
		<el-container>
			<el-aside width="200px">

				<el-menu
					style="height: 100vh"
					router
					background-color="#001020"
					text-color="#fff"
				>
					<div style="width: 100%;height: 30px"></div>

					<el-menu-item
						v-for="r in getFrontList()"
						:key="r.name"
						:index="r.path"
					>
						<component  class="icons" :is="r.icon" />
						<template #title>{{ r.name }}</template>
					</el-menu-item>

				</el-menu>
			</el-aside>

			<el-container>
				<el-header>
					<el-row :gutter="20">

						<el-col :span="22"><div class="grid-content ep-bg-purple" /></el-col>
						<el-col :span="2">
							<div style="height: 20px"></div>
							<el-dropdown>
								<div class="head_r">
									<div class="head_user">
										<div class="head_user_name">{{ state.userInfo.nickName }}</div>
<!--										<div class="head_user_desc">管理员</div>-->
									</div>
								</div>
								<template #dropdown>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item @click="logout">退出登录</el-dropdown-item>
									</el-dropdown-menu>
								</template>
							</el-dropdown>
						</el-col>
					</el-row>
				</el-header>
				<el-main class="main">
					<div class="certificate-container">
						<router-view></router-view>
					</div>
				</el-main>
			</el-container>
		</el-container>

	</div>
</template>
<script setup lang="ts">
import {getFrontList } from '~/utils/utils'
import { useRouter } from "vue-router";
const router = useRouter();
const state = reactive({
	userInfo:{}
})
function init() {
	frontRequest.get("/api/user/userInfo").then(res =>{
		console.log(res)
		state.userInfo = res.data
	})
}
onMounted(()=>{
	init()
})

/**
 * 退出登录
 */
const logout = () => {
	const user = userStore()
	user.frontToken = {}
	user.frontIsLogin = false
	ElMessage.success("退出成功~")
	router.push('/login');
}
</script>
<style scoped>

.main{
	width: 100%;
	height: calc(100vh - 80px);
	background-color: #eeeeee;
}
.icons{
	width: 18px;
	height: 18px;
	margin-right: 5px;
}
.certificate-container {
	position: relative;
	margin: 1rem auto;
	padding: 2.5rem;
	background: rgba(255,255,255,0.95);
	border-radius: 0.2rem;
	z-index: 1;
	.blockchain-decor {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;

	}

	.page-title {
		text-align: center;
		margin-bottom: 2rem;
		color: #1a237e;
		font-size: 2rem;
		position: relative;

		.el-icon-connection {
			font-size: 2.5rem;
			vertical-align: middle;
			margin-right: 0.5rem;
		}

		.sub-title {
			font-size: 1rem;
			color: #666;
			margin-top: 0.5rem;
			font-weight: normal;
		}
	}

	.certificate-form {
		position: relative;
		z-index: 2;

		.form-row {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 1.5rem;
		}

		:deep(.block-input) {
			.el-input__inner {
				background: rgba(245, 247, 250, 0.8);
				border: 1px solid #e0e0e0;
				border-radius: 0.75rem;
				padding-left: 2.5rem;
				transition: all 0.3s ease;

				&:hover {
					border-color: #409EFF;
					box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
				}
			}

			.el-input__prefix {
				left: 12px;
				color: #409EFF;
			}
		}

		.block-textarea {
			:deep(.el-textarea__inner) {
				background: rgba(245, 247, 250, 0.8);
				border-radius: 0.75rem;
				min-height: 100px;
				resize: vertical;
			}
		}

		.form-actions {
			margin-top: 2rem;
			text-align: center;

			.submit-btn {
				padding: 12px 30px;
				font-size: 1rem;
				background: linear-gradient(135deg, #409EFF, #1a237e);
				border: none;
				border-radius: 0.75rem;
				transition: all 0.3s ease;

				&:hover {
					transform: translateY(-2px);
					box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
				}
			}

			.reset-btn {
				padding: 12px 30px;
				background: rgba(245, 247, 250, 0.8);
				border-color: #e0e0e0;
				border-radius: 0.75rem;
			}
		}
	}

	.blockchain-features {
		margin-top: 3rem;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2rem;

		.feature-item {
			text-align: center;
			padding: 1.5rem;
			background: rgba(245, 247, 250, 0.8);
			border-radius: 1rem;
			transition: all 0.3s ease;

			&:hover {
				transform: translateY(-5px);
				box-shadow: 0 6px 16px rgba(0,0,0,0.08);
			}

			i {
				font-size: 2.5rem;
				color: #409EFF;
				margin-bottom: 1rem;
			}

			h3 {
				color: #1a237e;
				margin: 0.5rem 0;
			}

			p {
				color: #666;
				font-size: 0.9rem;
				margin: 0;
			}
		}
	}
}
</style>
