parent
54664b5459
commit
d2faa5f28f
7 changed files with 3785 additions and 13828 deletions
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 7.7 KiB |
@ -0,0 +1,230 @@ |
||||
<template> |
||||
<div class="login_container"> |
||||
<div class="top"> |
||||
<div class="title">{{ setting.title }}</div> |
||||
</div> |
||||
<div class="main-content"> |
||||
<el-row style="display: flex; justify-content: center;"> |
||||
<el-col> |
||||
<el-form :rules="rules" :model="formModel" ref="formRef" size="large" autocomplete="off" |
||||
v-if="isRegister"> |
||||
<el-form-item prop="username"> |
||||
<el-input v-model="formModel.username" :prefix-icon="User" placeholder="请输入账号"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="studentNumb"> |
||||
<el-input v-model="formModel.studentNumb" :prefix-icon="Avatar" |
||||
placeholder="请输入学号"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="name"> |
||||
<el-input v-model="formModel.name" :prefix-icon="Stamp" placeholder="请输入姓名"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="password"> |
||||
<el-input v-model="formModel.password" :prefix-icon="Lock" type="password" |
||||
placeholder="请输入密码"></el-input> |
||||
</el-form-item> |
||||
<el-form-item prop="repassword"> |
||||
<el-input v-model="formModel.repassword" :prefix-icon="Lock" type="password" |
||||
placeholder="请输入再次密码"></el-input> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button style="color: #3ad7e2; background-color: #0e2e5e; width: 150px;" class="button" |
||||
type="primary" auto-insert-space @click="register"> |
||||
注册 |
||||
</el-button> |
||||
<el-button style="color: #3ad7e2;background-color: #0e2e5e;width: 150px;" class="button" |
||||
type="primary" auto-insert-space @click="isRegister = false"> |
||||
返回到登录页 |
||||
</el-button> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
|
||||
</el-form-item> |
||||
<!-- <el-form-item class="flex"> |
||||
<el-link type="info" :underline="false" @click="isRegister = false"> |
||||
← 返回 |
||||
</el-link> |
||||
</el-form-item> --> |
||||
</el-form> |
||||
<el-form :model="formModel" :rules="rules" ref="formRef" size="large" autocomplete="off" v-else |
||||
class="custom-form"> |
||||
<el-form-item prop="username"> |
||||
<div style="display: flex;align-items: center;color: pink; "> |
||||
<div class="left" style="display: flex;align-items: center;"> |
||||
<div style="padding-right: 10px;color: #1084c1;"><el-icon class="bold-icon"> |
||||
<user /> |
||||
</el-icon></div> |
||||
<div style="padding-right: 10px; color: #2592a1;">用户名</div> |
||||
</div> |
||||
<div class="right"> |
||||
<el-input v-model="formModel.username" |
||||
style="border-color: #20bec8; background-color: pink;" |
||||
placeholder="请输入用户名"></el-input> |
||||
</div> |
||||
</div> |
||||
</el-form-item> |
||||
<el-form-item label="学号" prop="studentNumb"> |
||||
<el-input v-model="formModel.studentNumb" :prefix-icon="Avatar" placeholder="请输入学号"></el-input> |
||||
</el-form-item> |
||||
<el-form-item label="密码" prop="password"> |
||||
<el-input name="password" :prefix-icon="Lock" type="password" |
||||
placeholder="请输入密码" v-model="formModel.password"></el-input> |
||||
</el-form-item> |
||||
<el-form-item> |
||||
<el-button class="hexagon-button" type="primary" auto-insert-space>登录</el-button> |
||||
<el-button class="hexagon-button" type="primary" auto-insert-space |
||||
@click="isRegister = true">去注册</el-button> |
||||
</el-form-item> |
||||
|
||||
</el-form> |
||||
</el-col> |
||||
<el-col :span="12" :xs="0"></el-col> |
||||
</el-row> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
// import { ref } from "vue" |
||||
// import { onMounted, reactive, ref, toRefs, watch } from "vue"; |
||||
import settingStore from "@/store/modules/setting"; |
||||
import { User, Lock, Avatar, Stamp } from '@element-plus/icons-vue' |
||||
const setting = settingStore(); |
||||
console.log(setting.title); |
||||
import { ref } from 'vue' |
||||
|
||||
const isRegister = ref(false) |
||||
const formRef=ref() |
||||
const formModel = ref({ |
||||
username: '', |
||||
studentNumb: '', |
||||
name: '', |
||||
password: '', |
||||
repassword: '' |
||||
}) |
||||
// 添加校验规则 |
||||
const rules = { |
||||
username: [ |
||||
{ required: true, message: '请输入用户名', trigger: 'blur' }, |
||||
{ min: 5, max: 30, message: '用户名长度最小五位最大三十位', trigger: ['change', 'blur'] } |
||||
], |
||||
studentNumb:[ |
||||
{ required: true, message: '请输入学号', trigger: 'blur' }, |
||||
{ min: 5, max: 11, message: '学号长度最小五位最大三十位', trigger: ['change', 'blur'] } |
||||
], |
||||
name: [ |
||||
{ required: true, message: '请输入姓名', trigger: 'blur' }, |
||||
], |
||||
password: [ |
||||
{ required: true, message: '请输入密码', trigger: 'blur' }, |
||||
{ |
||||
pattern: /^\S{6,15}$/, |
||||
message: '密码长度最小六位最大十五位', |
||||
trigger: ['change', 'blur'] |
||||
} |
||||
], |
||||
repassword: [ |
||||
{ required: true, message: '请再次输入密码', trigger: 'blur' }, |
||||
{ |
||||
max: 15, |
||||
min: 6, |
||||
pattern: /^\S{6,15}$/, |
||||
message: '密码长度最小六位最大十五位', |
||||
trigger: ['change', 'blur'] |
||||
}, |
||||
{ |
||||
validator: (rule, value, callback) => { |
||||
if (value !== formModel.value.password) { |
||||
callback(new Error('两次输入密码不一致!')) |
||||
} else { |
||||
callback() |
||||
} |
||||
}, |
||||
trigger: 'blur' |
||||
} |
||||
], |
||||
|
||||
} |
||||
const register=async()=>{ |
||||
await formRef.value.validate() |
||||
console.log('开始注册i请求'); |
||||
|
||||
} |
||||
// import { useRouter } from 'vue-router' |
||||
// const router = useRouter() |
||||
// const goToPage=()=>{ |
||||
// router.push('/') |
||||
// } |
||||
|
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.login_container { |
||||
position: relative; |
||||
width: 100%; |
||||
// height: 1080px; |
||||
min-height: 100vh; |
||||
background-color: #091d22; |
||||
background: url("../assets//images/bg2.png") no-repeat; |
||||
background-size: cover; |
||||
|
||||
.top { |
||||
width: 100%; |
||||
// height: 75px; |
||||
text-align: center; |
||||
font-size: 42px; |
||||
line-height: 75px; |
||||
font-style: italic; |
||||
background: url("../assets/images/topbgc.png") no-repeat; |
||||
// background-position: center bottom -10px; |
||||
background-size: cover; |
||||
|
||||
.title { |
||||
color: #fff; |
||||
} |
||||
|
||||
} |
||||
|
||||
.main-content { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
min-height: 100vh; |
||||
margin: 0; |
||||
background: url("../assets/images/login.png") no-repeat; |
||||
background-position: center; |
||||
} |
||||
} |
||||
|
||||
.hexagon-button { |
||||
margin-top: 30px; |
||||
/* 应用clip-path属性来创建六边形形状 */ |
||||
width: 180px; |
||||
height: 50px; |
||||
/* 使用clip-path定义按钮形状 */ |
||||
clip-path: polygon(15% 0, 85% 0, 100% 50%, 85% 100%, 15% 100%, 0 50%); |
||||
/* 模拟边框效果 */ |
||||
box-shadow: 0 0 0 2px cyan; |
||||
background-color: #14213d; |
||||
color: #3ad7e2; |
||||
background-color: #0e2e5e; |
||||
font-size: 18px; |
||||
|
||||
|
||||
} |
||||
|
||||
// .custom-form .el-form-item__label { |
||||
// color: #409eff; |
||||
// /* 标签颜色 */ |
||||
// font-size: 14px; |
||||
// font-weight: bold; |
||||
// } |
||||
// .bold-icon svg { |
||||
// stroke-width: 9; |
||||
// /* 加粗效果 */ |
||||
// } |
||||
.el-form-item__label{ |
||||
color: #0e2e5e; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue