You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
230 lines
8.6 KiB
230 lines
8.6 KiB
3 weeks ago
|
<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>
|