JIALDemo/target/classes/templates/blog/login.html

110 lines
4.2 KiB
HTML
Raw Normal View History

2024-01-11 08:30:14 +08:00
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<title>博客登录界面</title>
<meta name="author" content="JIAL">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="HandheldFriendly" content="true">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="icon" href="/static/image/avatar.jpg" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/static/style/css/main.css">
<link rel="stylesheet" href="/plugins/element-ui/index.css">
<!-- import CSS -->
<link rel="stylesheet" type="text/css" href="css/login.css">
</head>
<body>
<div class="container" id="login-app">
<div class="login-box">
<el-card>
<el-form ref="loginForm" :model="loginForm" style="user-select: none;" :rules="rules">
<el-form-item prop="username">
<el-input v-model="loginForm.username" placeholder="请输入用户名" maxlength="20" type="text" auto-complete="off" clearable>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="loginForm.password" show-password placeholder="请输入密码" clearable maxlength="32">
</el-input>
</el-form-item>
<div class="button-box">
<el-button type="text" style="margin-right: 100px; font-size: 20px" @click="login">登录</el-button>
<el-button type="text" style="font-size: 20px; color: #8c939d" @click="register">注册</el-button>
</div>
</el-form>
</el-card>
</div>
<!-- 底部footer -->
<el-footer class="footer-container" style="position: absolute; top: 640px; left: 550px; ">
<!-- 办案信息展示区域 -->
<div class="case-info" >
<!-- 在这里绑定Vue数据来展示办案信息 -->
<div>Designed by JIAL 2023. Permission granted for redistribution.</div>
<div><a style="text-decoration:none; color: #999" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=64020202000218&amp;token=4adb4592-9573-41b6-ab1c-a23850030e0d" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;" target="_blank" >宁公网安备 64020202000218号</a></div>
<div><a style="text-decoration:none; color: #999" href="https://beian.miit.gov.cn/?token=4adb4592-9573-41b6-ab1c-a23850030e0d#/Integrated/index" target="_blank" >宁ICP备2022000681号</a></div>
</div>
</el-footer>
</div>
<script type="text/javascript" src="/static/style/js/main.js"></script>
<script src="/plugins/vue/vue.js"></script>
<script src="/plugins/element-ui/index.js"></script>
<script src="/plugins/calendar/calendar.js"></script>
<script src="/plugins/axios/axios.min.js"></script>
<script src="/plugins/axios/request.js"></script>
<!-- import JavaScript -->
<script src="js/login.js"></script>
<script>
new Vue({
el: '#login-app',
data() {
return {
loginForm: {
username: "",
password: "",
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ pattern: /^[a-zA-Z0-9]{1,8}$/, message: '用户名只能为字母和数字且不超过8位', trigger: 'blur' },
// 其他验证规则可以根据需要添加
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ pattern: /^[a-zA-Z0-9_]{1,20}$/, message: '密码只能为字母、数字和下划线且不超过20位', trigger: 'blur' },
// 其他验证规则可以根据需要添加
],
},
}
},
computed: {
},
created() {
},
mounted() {
},
methods: {
async init () {
},
login() {
},
register() {
}
}
})
</script>
</body>
</html>