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>
|