From bb49f1f0d622e2a4380a80eff93f779409b36b30 Mon Sep 17 00:00:00 2001
From: 648540858 <648540858@qq.com>
Date: 星期五, 10 二月 2023 15:33:00 +0800
Subject: [PATCH] 添加文档
---
web_src/src/components/Login.vue | 146 ++++++++++++++----------------------------------
1 files changed, 43 insertions(+), 103 deletions(-)
diff --git a/web_src/src/components/Login.vue b/web_src/src/components/Login.vue
index 5e75867..37c8a83 100644
--- a/web_src/src/components/Login.vue
+++ b/web_src/src/components/Login.vue
@@ -1,19 +1,35 @@
<template>
<div class="login" id="login">
- <a href="javascript:;" class="log-close"><i class="icons close"></i></a>
- <div class="log-bg">
- <div class="log-cloud cloud1"></div>
- <div class="log-cloud cloud2"></div>
- <div class="log-cloud cloud3"></div>
- <div class="log-cloud cloud4"></div>
+ <div class="limiter">
+ <div class="container-login100">
+ <div class="wrap-login100">
+ <span class="login100-form-title p-b-26">WVP瑙嗛骞冲彴</span>
+ <span class="login100-form-title p-b-48">
+ <i class="fa fa-video-camera"></i>
+ </span>
- <div class="log-logo">Welcome!</div>
- <div class="log-text"></div>
+ <div class="wrap-input100 validate-input" data-validate = "Valid email is: a@b.c">
+ <input :class="'input100 ' + (username==''?'':'has-val')" type="text" v-model="username" name="username">
+ <span class="focus-input100" data-placeholder="鐢ㄦ埛鍚�"></span>
+ </div>
+
+ <div class="wrap-input100 validate-input" data-validate="Enter password">
+ <span class="btn-show-pass">
+ <i :class="'fa ' + (!showPassword?'fa-eye':'fa-eye-slash')" @click="showPassword = !showPassword"></i>
+ </span>
+ <input :class="'input100 ' + (password==''?'':'has-val')" :type="(!showPassword?'password':'text')" v-model="password" name="password">
+ <span class="focus-input100" data-placeholder="瀵嗙爜"></span>
+ </div>
+
+ <div class="container-login100-form-btn">
+ <div class="wrap-login100-form-btn" :class="{'login-loading': isLoging}" v-loading="isLoging" element-loading-background="rgb(0 0 0 / 0%);" element-loading-custom-class="login-loading-class">
+ <div class="login100-form-bgbtn"></div>
+ <button class="login100-form-btn" @click="login">鐧诲綍</button>
+ </div>
+ </div>
+ </div>
</div>
- <div class="log-email" v-loading="isLoging" >
- <input type="text" placeholder="鐢ㄦ埛鍚�" :class="'log-input' + (username==''?' log-input-empty':'')" v-model="username"><input type="password" placeholder="瀵嗙爜" :class="'log-input' + (password==''?' log-input-empty':'')" v-model="password">
- <a href="javascript:;" class="log-btn" @click="login" >鐧诲綍</a>
- </div>
+ </div>
</div>
</template>
@@ -24,6 +40,8 @@
data(){
return {
isLoging: false,
+ showPassword: false,
+ loginLoading: false,
username: '',
password: ''
}
@@ -48,10 +66,6 @@
//鐧诲綍璇锋眰
toLogin(){
-
- //涓�鑸璺熷悗绔簡瑙ｅ瘑鐮佺殑鍔犲瘑瑙勫垯
- //杩欓噷渚嬪瓙鐢ㄧ殑鍝堝笇绠楁硶鏉ヨ嚜./js/sha1.min.js
-
//闇�瑕佹兂鍚庣鍙戦�佺殑鐧诲綍鍙傛暟
let loginParam = {
username: this.username,
@@ -60,15 +74,20 @@
var that = this;
//璁剧疆鍦ㄧ櫥褰曠姸鎬�
this.isLoging = true;
+ let timeoutTask = setTimeout(()=>{
+ that.$message.error("鐧诲綍瓒呮椂");
+ that.isLoging = false;
+ }, 1000)
this.$axios({
- method: 'get',
- url:"/api/user/login",
- params: loginParam
+ method: 'get',
+ url:"/api/user/login",
+ params: loginParam
}).then(function (res) {
+ window.clearTimeout(timeoutTask)
console.log(JSON.stringify(res));
- if (res.data == "success") {
- that.$cookies.set("session", {"username": that.username}) ;
+ if (res.data.code === 0 ) {
+ that.$cookies.set("session", {"username": that.username,"roleId":res.data.data.role.id}) ;
//鐧诲綍鎴愬姛鍚�
that.cancelEnterkeyDefaultAction();
that.$router.push('/');
@@ -81,7 +100,9 @@
});
}
}).catch(function (error) {
- that.$message.error(error.response.statusText);
+ console.log(error)
+ window.clearTimeout(timeoutTask)
+ that.$message.error(error.response.data.msg);
that.isLoging = false;
});
},
@@ -105,84 +126,3 @@
}
</script>
-<style scoped>
-.login{position: fixed; overflow: hidden;left: 50%; margin-left: -250px; top:50%; margin-top: -350px; width: 500px; min-height: 555px; z-index: 10; right: 140px; background: #fff;-webkit-border-radius: 5px;
--moz-border-radius: 5px;
--ms-border-radius: 5px;
--o-border-radius: 5px;
-border-radius: 5px; -webkit-box-shadow: 0px 3px 16px -5px #070707; box-shadow: 0px 3px 16px -5px #070707}
-.log-close{display: block; position: absolute; top:12px; right: 12px; opacity: 1;}
-.log-close:hover .icons{transform: rotate(180deg);}
-.log-close .icons{opacity: 1; transition: all .3s}
-.log-cloud{background-image: url(../assets/login-cloud.png); width: 63px ;height: 40px; position: absolute; z-index: 1}
-.login .cloud1{top:21px; left: -30px; transform: scale(.6); animation: cloud1 20s linear infinite;}
-.login .cloud2{top:87px; right: 20px; animation: cloud2 19s linear infinite;}
-.login .cloud3{top:160px; left: 5px;transform: scale(.8);animation: cloud3 21s linear infinite;}
-.login .cloud4{top:150px; left: -40px;transform: scale(.4);animation: cloud4 19s linear infinite;}
-.log-bg{background: url(../assets/login-bg.jpg); width: 100%; height: 312px; overflow: hidden;}
-.log-logo{height: 80px; margin: 120px auto 25px; text-align: center; color: #1fcab3; font-weight: bold; font-size: 40px;}
-.log-text{color: #57d4c3; font-size: 13px; text-align: center; margin: 0 auto;}
-.log-logo,.log-text{z-index: 2}
-.icons{background:url(../assets/icons.png) no-repeat; display: inline-block;}
-.close{height:16px;width:16px;background-position:-13px 0;}
-.login-email{height:17px;width:29px;background-position:-117px 0;}
-
-.log-btns{padding: 15px 0; margin: 0 auto;}
-.log-btn{width:402px; display: block; text-align: left; line-height: 50px;margin:0 auto 15px; height:50px; color:#fff; font-size:13px;-webkit-border-radius: 5px; background-color: #3B5999;
--moz-border-radius: 5px;
--ms-border-radius: 5px;
--o-border-radius: 5px;
-border-radius: 5px;
-position: relative;}
-.log-btn.tw{background-color: #13B4E9}
-.log-btn.email{background-color: #50E3CE}
-.log-btn:hover,.log-btn:focus{color: #fff; opacity: .8;}
-
-.log-email{text-align: center; margin-top: 20px;}
-.log-email .log-btn{background-color: #50E3CE;text-align: center;}
-.log-input-empty{border: 1px solid #f37474 !important;}
-.isloading{background: #d6d6d6}
-.log-btn .icons{margin-left: 30px; vertical-align: middle;}
-.log-btn .text{left: 95px; line-height: 50px; text-align: left; position: absolute;}
-.log-input{width: 370px;overflow: hidden; padding: 0 15px;font-size: 13px; border: 1px solid #EBEBEB; margin:0 auto 15px; height: 48px; line-height: 48px; -webkit-border-radius: 5px;
--moz-border-radius: 5px;
--ms-border-radius: 5px;
--o-border-radius: 5px;
-border-radius: 5px;}
-.log-input.warn{border: 1px solid #f88787}
-
- @-webkit-keyframes cloud1 {
- 0%{left: 200px}
- 100%{left:-130px;}
-}
-@keyframes cloud1{
- 0%{left: 200px}
- 100%{left:-130px;}
-}
-
- @-webkit-keyframes cloud2 {
- 0%{left:500px;}
- 100%{left:-90px;}
-}
-@keyframes cloud2{
- 0%{left:500px;}
- 100%{left:-90px;}
-}
-
-@-webkit-keyframes cloud3 {
- 0%{left:620px;}
- 100%{left:-70px;}
-}
-@keyframes cloud3{
- 0%{left:620px;}
- 100%{left:-70px;}
-}@-webkit-keyframes cloud4 {
- 0%{left:100px;}
- 100%{left:-70px;}
-}
-@keyframes cloud4{
- 0%{left:100px;}
- 100%{left:-70px;}
-}
-
-</style>
--
Gitblit v1.8.0