110 lines
4.2 KiB
HTML
110 lines
4.2 KiB
HTML
<!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&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>
|