From 7be007bd93ae0ec6eee9b0931f8a1de98123889d Mon Sep 17 00:00:00 2001
From: zuozhengqing <a13193816592@163.com>
Date: 星期一, 05 二月 2024 09:58:02 +0800
Subject: [PATCH] 添加登录页
---
src/assets/images/loginBackground.png | 0
package.json | 2
src/assets/images/logo.png | 0
src/components.d.ts | 4 +
src/views/login/loginView.vue | 152 ++++++++++++++++++++++++++++++++++++++++++++++++++
src/router/index.ts | 6 ++
6 files changed, 164 insertions(+), 0 deletions(-)
diff --git a/package.json b/package.json
index 6e767bb..d28f6f1 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,8 @@
"eslint": "^8.49.0",
"eslint-plugin-vue": "^9.17.0",
"husky": "^8.0.3",
+ "less": "^4.2.0",
+ "less-loader": "^12.2.0",
"lint-staged": "^15.0.2",
"npm-run-all2": "^6.1.1",
"prettier": "^3.0.3",
diff --git a/src/assets/images/loginBackground.png b/src/assets/images/loginBackground.png
new file mode 100644
index 0000000..3480736
--- /dev/null
+++ b/src/assets/images/loginBackground.png
Binary files differ
diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
new file mode 100644
index 0000000..cc59fa9
--- /dev/null
+++ b/src/assets/images/logo.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index be5c27d..4e7a305 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -12,10 +12,14 @@
CommonModal: typeof import('./components/CommonModal.vue')['default']
DashboardLayout: typeof import('./components/DashboardLayout.vue')['default']
ElButton: typeof import('element-plus/es')['ElButton']
+ ElCard: typeof import('element-plus/es')['ElCard']
ElCollapse: typeof import('element-plus/es')['ElCollapse']
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
ElDialog: typeof import('element-plus/es')['ElDialog']
+ ElForm: typeof import('element-plus/es')['ElForm']
+ ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElIcon: typeof import('element-plus/es')['ElIcon']
+ ElInput: typeof import('element-plus/es')['ElInput']
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
ElPopover: typeof import('element-plus/es')['ElPopover']
ElProgress: typeof import('element-plus/es')['ElProgress']
diff --git a/src/router/index.ts b/src/router/index.ts
index 08aa943..ec59a01 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,5 +1,6 @@
import { createRouter, createWebHistory } from 'vue-router'
import DashboardView from '../views/dashboard/index.vue'
+import loginView from '../views/login/loginView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@@ -10,6 +11,11 @@
component: DashboardView
},
{
+ path: '/login',
+ name: 'login',
+ component: loginView
+ },
+ {
path: '/:error*',
redirect: '/'
}
diff --git a/src/views/login/loginView.vue b/src/views/login/loginView.vue
new file mode 100644
index 0000000..c6d28f7
--- /dev/null
+++ b/src/views/login/loginView.vue
@@ -0,0 +1,152 @@
+<template>
+ <div class="box_wrap">
+ <el-card class="box-card">
+ <div class="card-top">
+ <img src="@/assets/images/logo.png" />
+ </div>
+ <p>鏅鸿兘鎶ュ伐绯荤粺</p>
+ <div class="card_bottom">
+ <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="25%" class="demo-ruleForm">
+ <el-form-item label="" prop="accountNumber">
+ <el-input v-model.number="ruleForm.accountNumber" style="width: 70%" placeholder="鐢ㄦ埛鍚�" />
+ </el-form-item>
+ <el-form-item label="" prop="pass">
+ <el-input
+ v-model="ruleForm.pass"
+ style="width: 70%"
+ placeholder="瀵嗙爜"
+ type="password"
+ autocomplete="off"
+ />
+ </el-form-item>
+ <!-- <el-form-item label="纭瀵嗙爜" prop="checkPass">
+ <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
+ </el-form-item> -->
+ <el-form-item>
+ <el-button type="primary" @click="submitForm(ruleFormRef)">鐧诲綍</el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+ </el-card>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+
+const ruleFormRef = ref<FormInstance>()
+
+const checkAge = (rule: any, value: any, callback: any) => {
+ if (!value) {
+ return callback(new Error('璇疯緭鍏ョ敤鎴峰悕'))
+ } else {
+ callback()
+ }
+}
+
+const validatePass = (rule: any, value: any, callback: any) => {
+ if (value === '') {
+ callback(new Error('璇疯緭鍏ュ瘑鐮�'))
+ } else {
+ callback()
+ }
+}
+// const validatePass2 = (rule: any, value: any, callback: any) => {
+// if (value === '') {
+// callback(new Error('Please input the password again'))
+// } else if (value !== ruleForm.pass) {
+// callback(new Error("Two inputs don't match!"))
+// } else {
+// callback()
+// }
+// }
+
+const ruleForm = reactive({
+ pass: '',
+ // checkPass: '',
+ accountNumber: ''
+})
+
+const rules = reactive<FormRules<typeof ruleForm>>({
+ pass: [{ validator: validatePass, trigger: 'blur' }],
+ // checkPass: [{ validator: validatePass2, trigger: 'blur' }],
+ accountNumber: [{ validator: checkAge, trigger: 'blur' }]
+})
+
+const submitForm = (formEl: FormInstance | undefined) => {
+ if (!formEl) return
+ formEl.validate((valid) => {
+ if (valid) {
+ console.log('submit!')
+ } else {
+ console.log('error submit!')
+ return false
+ }
+ })
+}
+</script>
+<style scoped lang="less">
+// ::v-deep body {
+// background: #fff;
+// }
+
+.box_wrap {
+ width: 100%;
+ min-height: 100vh;
+ background-image: url('@/assets/images/loginBackground.png');
+ background-size: cover;
+ background-position: center;
+ display: flex;
+ align-items: center;
+
+ .box-card {
+ width: 30%;
+ margin: 0 auto;
+ height: 500px;
+ border-radius: 15px;
+
+ .card-top {
+ text-align: center;
+
+ img {
+ width: 160px;
+ height: 120px;
+ }
+ }
+
+ p {
+ text-align: center;
+ color: #315bac;
+ font-size: 24px;
+ margin-bottom: 20px;
+ }
+
+ .card_bottom {
+ .el-form {
+ .el-form-item {
+ .el-form-item__error {
+ margin-left: 260px;
+ }
+
+ .el-input {
+ .el-input__wrapper {
+ padding-left: 50px;
+ }
+ }
+
+ .el-button {
+ width: 70%;
+ }
+ }
+ }
+ }
+ }
+}
+
+::v-deep .el-form-item__content {
+ display: flex;
+ align-items: center;
+ // justify-content: center;
+}
+</style>
--
Gitblit v1.8.0