From 8b08ff0b42d4561429c6e0dd4500b0cf8adef16e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=9D=E5=86=9B=E5=8D=8E?= <kuangjh@3721zh.com>
Date: Wed, 8 Jan 2025 16:00:55 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E6=B3=A8=E5=86=8C=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=A0=B7=E5=BC=8F=E7=BC=96=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Heads.vue |  65 +++++++++++++++
 src/layouts/default.vue  | 168 ++++++++++++++++++++++++++++++++++++---
 src/pages/login.vue      | 148 +++++++++++++++++++++++++++++++++-
 src/pages/register.vue   | 139 ++++++++++++++++++++++++++++++++
 4 files changed, 507 insertions(+), 13 deletions(-)
 create mode 100644 src/components/Heads.vue
 create mode 100644 src/pages/register.vue

diff --git a/src/components/Heads.vue b/src/components/Heads.vue
new file mode 100644
index 0000000..bd5ce2c
--- /dev/null
+++ b/src/components/Heads.vue
@@ -0,0 +1,65 @@
+<template>
+	<div class="head">
+		<div class="head_l">
+			<img src="/icoimg.png" alt="收缩" />
+		</div>
+		<div class="head_r">
+			<img src="/logo.png" alt="头像" class="profile" />
+			<div class="head_user">
+				<div class="head_user_name">Json Taylor</div>
+				<div class="head_user_desc">web Designer</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+
+</script>
+<style scoped>
+	.head{
+		width: 100%;
+		height: 50px;
+		background: #FFFFFF;
+		border-bottom: 1px solid #f6f6f6;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		.head_l{
+			width:40px;
+			height: 40px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+		.head_l img{
+			width: 25px;
+			height: 25px;
+		}
+		.head_r{
+			display: flex;
+			align-items: center;
+			margin-right: 30px;
+			.profile{
+				width: 40px;
+				height: 40px;
+				border-radius: 50%;
+				background: #f6f6f6;
+				color: #333333;
+				font-size: 10px;
+				margin-right: 10px;
+			}
+			.head_user{
+				.head_user_name{
+					color: #333333;
+					font-size: 14px;
+					font-weight: 500;
+				}
+				.head_user_desc{
+					color:#a7a7a7;
+					font-size: 12px;
+					text-align: center;
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 42966cf..f9b3817 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,14 +1,164 @@
 <template>
-	<Navigation />
-	<div class="w-screen flex flex-col items-center justify-center">
-		<router-view v-slot="{ Component }">
-			<transition name="fade" mode="out-in">
-				<component :is="Component" />
-			</transition>
-		</router-view>
+	<div class="main">
+		<div class="nav_left">
+			<div class="logo">
+				<img src="/logo.png" alt="后台管理系统">
+			</div>
+			<div class="nav_list">
+				<div class="nav_title"><img src="/logo.png" alt="图标">导航管理</div>
+				<div class="rArrl"></div>
+			</div>
+			<div class="nav_li">
+				<ul>
+					<li v-for="r of routes" :key="r.path">
+						<img src="/logo.png" alt="图标"><RouterLink style="width: 100%; height: 45px; line-height: 45px" :to="r.path">{{ te(r.name) ? t(r.name) : r.name }}</RouterLink>
+					</li>
+				</ul>
+			</div>
+			<div class="nav_list">
+				<div class="nav_title"><img src="/logo.png" alt="图标">权限管理</div>
+				<div class="rArrl"></div>
+			</div>
+			<div class="nav_list">
+				<div class="nav_title"><img src="/logo.png" alt="图标">模型设置</div>
+				<div class="rArrl"></div>
+			</div>
+			<div class="nav_list">
+				<div class="nav_title"><img src="/logo.png" alt="图标">内容管理</div>
+				<div class="rArrl"></div>
+			</div>
+			<div class="nav_list">
+				<div class="nav_title"><img src="/logo.png" alt="图标">会员管理</div>
+				<div class="rArrl"></div>
+			</div>
+			<div class="nav_list">
+				<div class="nav_title"><img src="/logo.png" alt="图标">模版管理</div>
+				<div class="rArrl"></div>
+			</div>
+		</div>
+		<div class="nav_right">
+			<Heads />
+			<div class="content">
+				<router-view v-slot="{ Component }">
+					<transition name="fade" mode="out-in">
+						<component :is="Component" />
+					</transition>
+				</router-view>
+			</div>
+		</div>
 	</div>
+<!--	<Navigation />-->
+<!--	<div class="w-screen flex flex-col items-center justify-center">-->
+<!--		<router-view v-slot="{ Component }">-->
+<!--			<transition name="fade" mode="out-in">-->
+<!--				<component :is="Component" />-->
+<!--			</transition>-->
+<!--		</router-view>-->
+<!--	</div>-->
 </template>
 
-<style>
-
+<style scoped>
+		.main{
+			width: 100%;
+			display: flex;
+			justify-content: space-between;
+			height: 100vh;
+			overflow: hidden;
+			.nav_left{
+				width: 15%;
+				height: 100vh;
+				background: #111c43;
+				overflow-y: auto;
+				.logo{
+					width: 100%;
+					height: 60px;
+					border-bottom: 0.5px solid #293356;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+				}
+				.logo img{
+					width: 85%;
+					height: 40px;
+					background: #293356;
+					color: #FFFFFF;
+					font-size: 12px;
+				}
+				.nav_list{
+					padding: 10px;
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					height: 45px;
+					.nav_title{
+						font-size: 14px;
+						color: #a3aed1;
+						display: flex;
+						align-items: center;
+					}
+					.nav_title img{
+						width: 20px;
+						height: 20px;
+						color: #333333;
+						margin-right: 8px;
+					}
+					.rArrl{
+						width: 7px;
+						height: 7px;
+						border-top: 1px solid #a3aed1;
+						border-right: 1px solid #a3aed1;
+						margin-top: 9px;
+						-webkit-transform: translate3d(0, -50%, 0) rotate(45deg);
+						transform: translate3d(0, -50%, 0) rotate(45deg);
+					}
+				}
+				.nav_li{
+					width: 100%;
+					padding-left: 16%;
+					background: #1a223f;
+				}
+				.nav_li ul li{
+					font-size: 12px;
+					color: #a3aed1;
+					display: flex;
+					align-items: center;
+					height: 45px;
+					width: 100%;
+				}
+				.nav_li ul li img{
+					width: 20px;
+					height: 20px;
+					color: #333333;
+					margin-right: 8px;
+				}
+			}
+			.nav_right{
+				width: 85%;
+				height: 100vh;
+				background: #f0f1f7;
+				.content{
+					width: 100%;
+					height: auto;
+					overflow-y: auto;
+				}
+			}
+		}
 </style>
+<script setup lang="ts">
+import Heads from '~/components/Heads.vue'
+import { getRoutes } from '@/plugins/router'
+const { te, t } = useI18n()
+const routes = getRoutes()
+	.filter((r) => !r.path.includes('notFound'))
+	.map((r) => {
+		let { path, name } = r
+		if (path === safeResolve('/')) {
+			return { path, name: 'home' }
+		}
+		if (!name) {
+			name = path
+		}
+		return { path, name: name.toString().slice(1).replaceAll('/', ' · ') }
+	})
+const $route = useRoute()
+</script>
diff --git a/src/pages/login.vue b/src/pages/login.vue
index 1f70635..d9aed27 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -1,6 +1,32 @@
 <template>
-	<div class="login-container" >
-		<img :src="state.captchaUrl" />
+	<div class="login-container">
+			<div class="module">
+				<img src="/loginimg.jpg" class="module_img" />
+				<div class="module_r">
+					<div class="module_mian">
+							<div class="module_title">登录帐户</div>
+							<div class="module_desc">输入电子邮件 & 登录密码</div>
+							<div class="module_m">
+								<div class="module_text">电子邮件地址</div>
+								<input class="module_input" type="text" placeholder="8888@163.com" v-model="Email" />
+							</div>
+							<div class="module_m">
+								<div class="module_text">密码</div>
+								<input class="module_input" type="password"  placeholder="输入密码" v-model="Password" />
+							</div>
+							<div class="module_m">
+								<div class="module_text">验证码</div>
+								<div class="module_code">
+									<input class="module_code_input" type="text"  placeholder="输入验证码" v-model="vftcode" />
+									<img class="module_code_img" :src="state.captchaUrl" @click="onCode">
+								</div>
+							</div>
+							<div class="module_radio"><input  type="radio"/>记住密码 </div>
+							<div class="forgetpwd">忘记密码了吗？</div>
+							<button class="module_button">登录</button>
+					</div>
+				</div>
+			</div>
 	</div>
 </template>
 <script setup lang="ts">
@@ -9,16 +35,130 @@ const state = reactive({
 	loginFrom: {}
 })
 const login = reactive({ username: '18796357645', password: '18796357645', captcha: '', uuid: '' })
-
 function init() {
 }
 init()
 </script>
 
 <style scoped>
-.login-container {
+.login-container{
 	width: 100%;
 	height: 100vh;
+	background: #FFFFFF;
+}
+.module{
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	height: 100vh;
+}
+.module_img{
+	width: 60%;
+	height: auto;
+}
+.module_r{
+	width: 40%;
+	background: #e5efee;
+	height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	.module_mian{
+		width: 65%;
+		background: #FFFFFF;
+		height: auto;
+		border-radius: 8px;
+		overflow: hidden;
+		padding-top: 40px;
+		padding-bottom: 40px;
+		.module_title{
+			font-size: 18px;
+			font-weight: 500;
+			text-align: center;
+			color:#333333;
+		}
+		.module_desc{
+			font-size: 12px;
+			text-align: center;
+			color:#a7a7a7;
+			margin-bottom: 20px;
+		}
+		.module_m{
+			margin: 0 auto;
+			width: 80%;
+			height: auto;
+			margin-top: 10px;
+			.module_text{
+				font-size: 14px;
+				color: #333333;
+				margin-bottom: 5px;
+			}
+			.module_input{
+				width: 96%;
+				height: 40px;
+				padding-left: 2%;
+				padding-right: 2%;
+				border:1px solid #eee;
+				border-radius: 5px;
+				font-size: 12px;
+			}
+			.module_code{
+				width: 96%;
+				display: flex;
+				align-items: center;
+				.module_code_input{
+					width: 60%;
+					height: 40px;
+					border-radius: 5px;
+					border:1px solid #eee;
+					font-size: 12px;
+					padding-left: 2%;
+					padding-right: 2%;
+				}
+				.module_code_img{
+					width: 130px;
+					height: 40px;
+					border-radius: 5px;
+					margin-left: 10px;
+				}
+			}
+		}
+		.module_radio{
+			margin: 0 auto;
+			width: 80%;
+			font-size: 14px;
+			color: #333333;
+			display: flex;
+			align-items: center;
+			margin-top: 10px;
+		}
+		.module_radio input{
+			margin-right: 5px;
+		}
+		.forgetpwd{
+			margin: 0 auto;
+			width: 80%;
+			font-size: 14px;
+			color: #328d86;
+			margin-top: 10px;
+		}
+		.module_button{
+			margin: 0 auto;
+			display: block;
+			width: 80%;
+			background:#328d86;
+			color: #FFFFFF;
+			height: 40px;
+			margin-top: 20px;
+			border-radius: 5px;
+			font-weight: 500;
+		}
+		.module_button:active{
+			opacity: 0.4;
+		}
+	}
 }
 </style>
 <route lang="json">
diff --git a/src/pages/register.vue b/src/pages/register.vue
new file mode 100644
index 0000000..d4946f4
--- /dev/null
+++ b/src/pages/register.vue
@@ -0,0 +1,139 @@
+<template>
+		<div class="module">
+				<div class="module_mian">
+					<div class="module_title">注册帐户</div>
+					<div class="module_desc">输入电子邮件 & 密码</div>
+					<div class="module_m">
+						<div class="module_text">电子邮件地址</div>
+						<input class="module_input" type="text" placeholder="8888@163.com" v-model="Email" />
+					</div>
+					<div class="module_m">
+						<div class="module_text">密码</div>
+						<input class="module_input" type="password"  placeholder="输入密码" v-model="Password" />
+					</div>
+					<div class="module_m">
+						<div class="module_text">确认密码</div>
+						<div class="module_code">
+							<input class="module_input" type="password"  placeholder="请再次输入密码" v-model="Password" />
+						</div>
+					</div>
+					<div class="module_m">
+						<div class="module_text">验证码</div>
+						<div class="module_code">
+							<input class="module_code_input" type="text"  placeholder="输入验证码" v-model="vftcode" />
+							<img class="module_code_img" src="/codeimg.png" @click="onCode">
+						</div>
+					</div>
+					<div class="module_radio"><input  type="radio"/>记住密码 </div>
+					<div class="forgetpwd">忘记密码了吗？</div>
+					<button class="module_button">注册</button>
+				</div>
+		</div>
+</template>
+<script setup lang="ts">
+</script>
+<style scoped>
+.module{
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100vh;
+	background: url("e36341619bf8f04dcbdc6b01105a85a.png");
+	background-size: 100% 100%;
+	.module_mian{
+		width: 26%;
+		background: #FFFFFF;
+		height: auto;
+		border-radius: 8px;
+		overflow: hidden;
+		padding-top: 40px;
+		padding-bottom: 40px;
+		.module_title{
+			font-size: 18px;
+			font-weight: 500;
+			text-align: center;
+			color:#333333;
+		}
+		.module_desc{
+			font-size: 12px;
+			text-align: center;
+			color:#a7a7a7;
+			margin-bottom: 20px;
+		}
+		.module_m{
+			margin: 0 auto;
+			width: 80%;
+			height: auto;
+			margin-top: 10px;
+			.module_text{
+				font-size: 14px;
+				color: #333333;
+				margin-bottom: 5px;
+			}
+			.module_input{
+				width: 96%;
+				height: 40px;
+				padding-left: 2%;
+				padding-right: 2%;
+				border:1px solid #eee;
+				border-radius: 5px;
+				font-size: 12px;
+			}
+			.module_code{
+				width: 96%;
+				display: flex;
+				align-items: center;
+				.module_code_input{
+					width: 60%;
+					height: 40px;
+					border-radius: 5px;
+					border:1px solid #eee;
+					font-size: 12px;
+					padding-left: 2%;
+					padding-right: 2%;
+				}
+				.module_code_img{
+					width: 130px;
+					height: 40px;
+					border-radius: 5px;
+					margin-left: 10px;
+				}
+			}
+		}
+		.module_radio{
+			margin: 0 auto;
+			width: 80%;
+			font-size: 14px;
+			color: #333333;
+			display: flex;
+			align-items: center;
+			margin-top: 10px;
+		}
+		.module_radio input{
+			margin-right: 5px;
+		}
+		.forgetpwd{
+			margin: 0 auto;
+			width: 80%;
+			font-size: 14px;
+			color: #328d86;
+			margin-top: 10px;
+		}
+		.module_button{
+			margin: 0 auto;
+			display: block;
+			width: 80%;
+			background:#328d86;
+			color: #FFFFFF;
+			height: 40px;
+			margin-top: 20px;
+			border-radius: 5px;
+			font-weight: 500;
+		}
+		.module_button:active{
+			opacity: 0.4;
+		}
+	}
+}
+</style>