page: 新增页面: 📄 登录页完成

src/router/index.ts

@@ -6,6 +6,11 @@ const routes: Array<RouteRecordRaw> = [
 		name: 'layout',
 		component: () => import(/* webpackChunkName: "Layout" */ '@/views/layout.vue'),
 	},
+	{
+		path: '/login',
+		name: 'login',
+		component: () => import(/* webpackChunkName: "login" */ '@/views/login/index.vue'),
+	},
 ];
 
 const router = createRouter({

src/views/login/index.vue

@@ -0,0 +1,124 @@
+<template>
+	<div class="login">
+		<div class="middle">
+			<div class="left">
+				<img alt="封面" src="@/assets/login/login-l.png" />
+			</div>
+			<div class="right">
+				<div>
+					<div class="logo">
+						<img alt="登录" src="@/assets/login/logo.png" />
+					</div>
+					<el-form ref="ruleFormRef" :model="form" :rules="rules" class="demo-ruleForm" status-icon>
+						<el-form-item prop="username">
+							<el-input v-model="form.username" :prefix-icon="User" />
+						</el-form-item>
+						<el-form-item prop="password">
+							<el-input v-model="form.password" :prefix-icon="Lock" type="password" />
+						</el-form-item>
+						<el-form-item>
+							<el-button class="login-btn" type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
+						</el-form-item>
+					</el-form>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { Lock, User } from '@element-plus/icons-vue';
+import { reactive, ref } from 'vue';
+import type { FormInstance, FormRules } from 'element-plus';
+
+interface RuleForm {
+	username: string;
+	password: string;
+}
+
+const ruleFormRef = ref<FormInstance>();
+const form = reactive({
+	username: 'admin',
+	password: '123456',
+});
+
+const rules = reactive<FormRules<RuleForm>>({
+	username: [{ required: true, message: '请输入账户', trigger: 'blur' }],
+	password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+});
+
+/**
+ * 提交表单
+ * @param formEl
+ */
+const submitForm = async (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	await formEl.validate((valid, fields) => {
+		if (valid) {
+			console.log('submit!');
+		} else {
+			console.log('error submit!', fields);
+		}
+	});
+};
+</script>
+
+<style lang="scss" scoped>
+.login {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100vw;
+	height: 100vh;
+	background-color: #343744;
+
+	.middle {
+		margin: 0 auto;
+		width: 1000px;
+		height: 475px;
+		background-color: #fff;
+	}
+}
+
+//左侧封面
+.left {
+	float: left;
+	width: 60%;
+	height: 100%;
+
+	img {
+		width: 100%;
+		height: 100%;
+	}
+}
+
+// 右侧登录
+.right {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 40%;
+	height: 100%;
+
+	.logo {
+		margin: 0 auto;
+		width: 149px;
+		height: 38px;
+
+		img {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.el-form {
+		margin: 20px 0 0 0;
+	}
+
+	.login-btn {
+		width: 100%;
+		color: #1f1f1f;
+		border-radius: 25px;
+	}
+}
+</style>