<template> <div id="Login"> <img src="./../../static/img/BGIMG12.png" alt id="Bj" /> <!-- <div id="CityName">重庆市璧山区海绵城市建设监测系统</div> --> <div id="LoginBox"> <!-- <p class="p0"> --> <!-- <img src="./../../static/images/tx_img.png" alt id="HeadIMG" /> --> <!-- </p> --> <!-- <p class="P1">新烽光电工程作业及监控系统</p> --> <p class="P2"> <!-- <img src="./../../static/images/账号.png" alt="账号" class="InputImg" /> --> <input type="text" id="ZH" class="Inputs" v-model="ZH" @keyup="notEmpty(ZH,'ZH')" /> </p> <p class="P2"> <!-- <img src="./../../static/images/账号密码.png" alt="密码" class="InputImg" /> --> <input type="password" id="MM" class="Inputs" v-model="MM" @keyup="notEmpty(MM,'MM')" @keyup.enter="handleLogin" /> </p> <p class="P3" v-if="DLError"> <span style="color: red;">账号密码错误</span> </p> <p class="P4"> <a href="javascript:void(0)" id="DL" @click="handleLogin">登录</a> </p> </div> </div> </template> <script> import { setItem, removeItem, setSession, loginTime, message, getItem } from "./../util/item"; export default { name: "Login", data: function() { return { ZH: "", MM: "", DLError: false }; }, created() { if (this.detectZoom() >= 150) { this.$notify({ type: "warning", title: "界面提醒", duration: 8000, message: "您当前屏幕的缩放比例为 : " + this.detectZoom() + "% , 为了保证您的体验 , 请将屏幕缩放比例调整至100%", position: "bottom-right" }); } }, methods: { detectZoom() { // 查看浏览器缩放比例 var ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefined) { ratio = window.devicePixelRatio; } else if (~ua.indexOf("msie")) { if (screen.deviceXDPI && screen.logicalXDPI) { ratio = screen.deviceXDPI / screen.logicalXDPI; } } else if ( window.outerWidth !== undefined && window.innerWidth !== undefined ) { ratio = window.outerWidth / window.innerWidth; } if (ratio) { ratio = Math.round(ratio * 100); } return ratio; }, notEmpty(value, serial) { // 输入框首字母为非空 if (value.length === 1 && value === " ") { this.serial = ""; this.$message({ type: "warning", message: "首字母不能为空格,请重新输入" }); } }, handleLogin() { // 登录数据提交 // this.$http this.$http .post(this.nozzle.sysLogin, { login: this.ZH, pwd: this.MM }) .then(response => { // setItem("login", this.loginForm); // 获取用户的roleID // 登录状态 if (response.data.code === 1) { localStorage.setItem("USERNO", response.data.data.login); localStorage.setItem("USERName", response.data.data.realName); // 获取权限 this.$http .post(this.nozzle.menuGetCurrentUserMenu) .then(response2 => { if (response2.data.code === 1) { // 登录状态设置 setSession("logins", "true"); // 用户在线状态计时 loginTime(); this.$router.push("/site/previewOfSiteStatus"); sessionStorage.setItem("powerHandle", response2.data.data); } else { message(response2); } }); } else { message(response); } }) .catch(response => { // this.refreshCode(); }); } } }; </script> <style > /* 小屏幕(小于 768px) */ @media (max-width: 1400px) { html, body { min-width: 1366px; } body { width: 100%; height: 100%; position: relative; overflow: auto; } } @media (min-width: 1400px) { html, body { min-width: 1366px; } body { width: 100%; height: 100%; position: relative; overflow: hidden; } } * { padding: 0px; margin: 0px; box-sizing: border-box; } #Bj { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; } #LoginBox { width: 5.32rem; height: 3rem; position: absolute; top: 3.1rem; right: 2.3rem; font-size: 0.16rem; text-align: center; background-color: #061829; opacity: 0.8; border: 2px solid #00ffff; border-radius: 0.35rem; text-align: center; box-sizing: border-box; padding-top: 0.35rem; } .p0 { display: inline-block; width: 100%; height: 1.9rem; } #HeadIMG { width: 1.44rem; height: 1.44rem; margin-top: 0.4rem; } .P1 { display: inline-block; width: 100%; height: 0.6rem; line-height: 0.6rem; text-align: center; color: white; font-size: 0.24rem; position: relative; -webkit-user-select: none; margin-bottom: 0.2rem; } .P2 { display: inline-block; width: 100%; height: 0.7rem; line-height: 0.7rem; position: relative; } #DL { display: inline-block; width: 80%; height: 0.6rem; line-height: 0.6rem; text-decoration: none; margin-top: 0.18rem; -webkit-user-select: none; background: -webkit-linear-gradient(top, #6aaed1 30%, #4a85c0 100%); /* margin-top: 0.1rem; */ border-radius: 0.3rem; color: #fff; font-size: 0.18rem; outline: none; } .InputImg { position: absolute; top: 0.25rem; left: 0.8rem; } .Inputs { width: 80%; height: 0.5rem; display: inline-block; background: rgba(220, 220, 220, 0); line-height: 0.5rem; padding-left: 0.5rem; border: 1px solid white; color: white; border-radius: 0.25rem; outline: none; } .P3 { float: right; padding-right: 0.46rem; } .P4 { display: inline-block; width: 100%; text-align: center; } </style>