<template>
	<div class="bank-login-container">
		<div class="bank-login-card">
			<div class="bank-login-header">
				<h2 class="bank-title">智能银行企业信用系统</h2>
<!--				<p class="bank-subtitle">基于大数据与AI的企业信用智能评估平台</p>-->
			</div>
			<div class="bank-form">
				<div class="bank-form-item">
					<label class="bank-label">企业账号</label>
					<input
						class="bank-input"
						type="text"
						placeholder="请输入企业名称或注册邮箱"
						v-model="login.username"
					>
				</div>
				<div class="bank-form-item">
					<label class="bank-label">密码</label>
					<input
						class="bank-input"
						type="password"
						placeholder="请输入密码"
						v-model="login.password"
					>
				</div>
				<button class="bank-login-btn" @click="onLogin">登 录</button>
				<div class="bank-footer">
<!--					<span @click="router.push('/register')">企业注册</span>-->
<!--					<span @click="router.push('/forget')">忘记密码</span>-->
				</div>
			</div>
		</div>

	</div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { adminRequest } from '~/composables/adminRequest'
const router = useRouter()
const login = reactive({
	username: '',
	password: ''
})
const onLogin = () => {
	adminRequest.post("/api/login", login).then(res =>	{
		const  user = userStore()
		user.userInfo = res.data
		user.isLogin = true
		ElMessage.success("登录成功")
		router.push('/')
	})
}
</script>

<style scoped>
.bank-login-container {
	width: 100%;
	height: 100vh;
	background: linear-gradient(135deg, #2563eb, #1e3a8a);
	display: flex;
	justify-content: center;
	align-items: center;
}

.bank-login-card {
	width: 420px;
	background: #FFF;
	border-radius: 10px;
	box-shadow: 0 4px 30px rgba(30,58,138,0.15);
	padding: 40px 32px;
	z-index: 1;
}

.bank-login-header {
	text-align: center;
	margin-bottom: 32px;
}

.bank-title {
	font-size: 24px;
	color: #2563eb;
	font-weight: 700;
	margin-bottom: 8px;
	letter-spacing: 1px;
}

.bank-subtitle {
	color: #555;
	font-size: 14px;
	letter-spacing: 1px;
}

.bank-form-item {
	margin: 20px 0;
}

.bank-label {
	display: block;
	color: #222;
	font-size: 14px;
	margin-bottom: 8px;
	font-weight: 500;
}

.bank-input {
	width: 100%;
	height: 46px;
	border: 1px solid #c7d2fe;
	border-radius: 4px;
	padding: 0 16px;
	font-size: 14px;
	transition: all 0.3s;
	background: #f8fafc;
}

.bank-input:focus {
	border-color: #2563eb;
	box-shadow: 0 0 0 2px rgba(37,99,235,0.08);
}

.bank-login-btn {
	width: 100%;
	height: 46px;
	background: linear-gradient(90deg, #2563eb 60%, #1e40af 100%);
	color: #fff;
	font-size: 16px;
	border-radius: 4px;
	margin-top: 24px;
	transition: all 0.3s;
	border: none;
	cursor: pointer;
	font-weight: 600;
	letter-spacing: 2px;
}

.bank-login-btn:hover {
	background: #1e40af;
}

.bank-footer {
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
	font-size: 13px;
	color: #2563eb;
	cursor: pointer;
}

.bank-footer span:hover {
	text-decoration: underline;
}

.bank-login-banner {
	position: absolute;
	right: 10%;
	color: white;
	max-width: 400px;
}

.bank-login-banner h3 {
	font-size: 28px;
	margin-bottom: 15px;
}

.bank-login-banner p {
	font-size: 16px;
	opacity: 0.95;
}

.bank-banner-features {
	margin-top: 30px;
}
.bank-banner-features p {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0;
	font-size: 15px;
}
</style>

<route lang="json">
{
"meta": {
"layout": "notFound"
}
}
</route>
