©2020-2024 ioDraw All rights reserved
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body {
background-color: #000000; min-height: 98vh; perspective: 1500px; } div#bgDIV {
width: 100vw; height: 98vh; position: fixed; top: 0; left: 0; z-index: 0; } html
{ height: 100%; } body { margin: 0; padding: 0; font-family: sans-serif;
background: linear-gradient(#141e30, #243b55); } .my-login-box { position:
absolute; top: 50%; left: 50%; width: 400px; padding: 40px; transform: translate
(-50%, -50%); background: rgba(0, 0, 0, .5); box-sizing: border-box; box-shadow:
0 15px 25pxrgba(0, 0, 0, .6); border-radius: 10px; } .my-login-box h2 { margin:
0 0 30px; padding: 0; color: #fff; text-align: center; } .my-login-box
.user-box { position: relative; } .my-login-box .user-box input { width: 100%;
padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px; border: none
; border-bottom: 1px solid #fff; outline: none; background: transparent; }
.my-login-box .user-box label { position: absolute; top: 0; left: 0; padding:
10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: .5s; }
.my-login-box .user-box input:focus ~ label, .my-login-box .user-box
input:valid ~ label { top: -30px; left: 0; color: #03e9f4; font-size: 12px; }
.my-login-box form a { position: relative; display: inline-block; padding: 10px
20px; color: #03e9f4; font-size: 16px; text-decoration: none; text-transform:
uppercase; overflow: hidden; transition: .5s; margin-top: 40px; letter-spacing:
4px} .my-login-box a:hover { background: #03e9f4; color: #fff; border-radius:
5px; box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px
#03e9f4; } .my-login-box a span { position: absolute; display: block; }
.my-login-box a span:nth-child(1) { top: 0; left: -100%; width: 100%; height:
2px; background: linear-gradient(90deg, transparent, #03e9f4); animation:
btn-anim1 1s linear infinite; } @keyframes btn-anim1 { 0% { left: -100%; } 50%,
100% { left: 100%; } } .my-login-box a span:nth-child(2) { top: -100%; right: 0;
width: 2px; height: 100%; background: linear-gradient(180deg, transparent,
#03e9f4); animation: btn-anim2 1s linear infinite; animation-delay: .25s }
@keyframes btn-anim2 { 0% { top: -100%; } 50%, 100% { top: 100%; } }
.my-login-box a span:nth-child(3) { bottom: 0; right: -100%; width: 100%; height
: 2px; background: linear-gradient(270deg, transparent, #03e9f4); animation:
btn-anim3 1s linear infinite; animation-delay: .5s } @keyframes btn-anim3 { 0% {
right: -100%; } 50%, 100% { right: 100%; } } .my-login-box a span:nth-child(4) {
bottom: -100%; left: 0; width: 2px; height: 100%; background: linear-gradient(
360deg, transparent, #03e9f4); animation: btn-anim4 1s linear infinite;
animation-delay: .75s } @keyframes btn-anim4 { 0% { bottom: -100%; } 50%, 100% {
bottom: 100%; } } </style> <title>登录页面</title> </head> <body> <div id="bgDIV"></
div> <div id="app" class="my-login-box"> <h2 style="color: #03e9f4">Login</h2> <
form> <div class="user-box"> <input type="text" name="" required="" v-model="
fromData.username"> <label>Username</label> </div> <div class="user-box"> <input
type="password" name="" required="" v-model="fromData.password"> <label>Password
</label> </div> <div class="user-box"> <input type="text" name="" required=""
v-model="fromData.code"> <label>验证</label> </div> <div id="code"> <img src="
/code" onclick="checkCode(this)" style="float: right;width: 120px;height: 53px;"
/> </div> <a href="#" @click="userlogin" style="margin-top: 7px"> <span></span>
<span></span> <span></span> <span></span> Submit </a> </form> </div> </body> <
script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script>
<script src="js/axios-0.18.0.js"></script> <link rel="stylesheet" href="
element-ui/lib/theme-chalk/index.css"> <script src="js/myBG.js"></script> <
script> const background = new MyBg({ faBoxId: 'bgDIV' }); background.CanvasInit
(); function checkCode(obj) { obj.src="/code?"+new Date().getTime(); } /** *
绑定数据，发送请求 */ new Vue({ el: "#app", data: { fromData: { username: '张山', password:
'123456' } }, methods: { //登录 userlogin(){ axios.post(
"/touristcomplainant/login",this.fromData).then((res)=>{ if(res.data.code===1){
this.$message.success("登录成功"); var str_json=JSON.stringify(res.data.data);
//将登陆时传递过来的对象存入localStorage对象中 localStorage.setItem("touristcomplainant.html",
str_json); location.href = "index.html"; }else{ this.$message.error(res.data.msg
); } }) } } }) </script> </html>