From ac1a4a027a7bd88efb32e9da666bdba4b5fa166f Mon Sep 17 00:00:00 2001 From: 648540858 <648540858@qq.com> Date: 星期五, 14 一月 2022 17:04:26 +0800 Subject: [PATCH] 支持国标级联的目录订阅功能 --- web_src/src/components/Login.vue | 185 ++++++++++++++++----------------------------- 1 files changed, 67 insertions(+), 118 deletions(-) diff --git a/web_src/src/components/Login.vue b/web_src/src/components/Login.vue index f047c5d..d823659 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,19 +40,20 @@ data(){ return { isLoging: false, + showPassword: false, + loginLoading: false, username: '', password: '' } }, created(){ - var that = this; - document.onkeydown = function(e) { - var key = window.event.keyCode; - if (key == 13) { - that.login(); + var that = this; + document.onkeydown = function(e) { + var key = window.event.keyCode; + if (key == 13) { + that.login(); + } } - } - }, methods:{ @@ -62,115 +79,47 @@ //璁剧疆鍦ㄧ櫥褰曠姸鎬� this.isLoging = true; - this.$axios.get("/auth/login",{ + this.$axios({ + method: 'get', + url:"/api/user/login", params: loginParam - } ) - .then(function (res) { + }).then(function (res) { console.log(JSON.stringify(res)); - if (res.data == "success") { + if (res.data.code == 0 && res.data.msg == "success") { that.$cookies.set("session", {"username": that.username}) ; //鐧诲綍鎴愬姛鍚� + that.cancelEnterkeyDefaultAction(); that.$router.push('/'); + }else{ + that.isLoging = false; + that.$message({ + showClose: true, + message: '鐧诲綍澶辫触锛岀敤鎴峰悕鎴栧瘑鐮侀敊璇�', + type: 'error' + }); } - }) - .catch(function (error) { - that.$message.error(error.response.statusText); + }).catch(function (error) { + that.$message.error(error.response.data.msg); that.isLoging = false; }); - - - }, - setCookie: function (cname, cvalue, exdays) { - var d = new Date(); - d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); - var expires = "expires=" + d.toUTCString(); - console.info(cname + "=" + cvalue + "; " + expires); - document.cookie = cname + "=" + cvalue + "; " + expires; - console.info(document.cookie); - }, + setCookie: function (cname, cvalue, exdays) { + var d = new Date(); + d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); + var expires = "expires=" + d.toUTCString(); + console.info(cname + "=" + cvalue + "; " + expires); + document.cookie = cname + "=" + cvalue + "; " + expires; + console.info(document.cookie); + }, + cancelEnterkeyDefaultAction: function() { + document.onkeydown = function(e) { + var key = window.event.keyCode; + if (key == 13) { + return false; + } + } + } } } </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