| | |
| | | <div id="background"> |
| | | <!-- 产品名称 --> |
| | | <div class="text"> |
| | | <div class="logo"></div> |
| | | <div class="logo"> |
| | | <img :src="imgUrl" alt="" /> |
| | | </div> |
| | | <div class="text-r"> |
| | | <h2 class="title font-extra-large">遂昌县智慧执法平台</h2> |
| | | <div class="title font-title-medium"> |
| | |
| | | <script> |
| | | import { isvalidUsername } from "@/utils/validate"; |
| | | import { createNamespacedHelpers } from "vuex"; |
| | | import users from "@/api/users"; |
| | | import {Decrypt,Encrypt} from '@/utils/cryptojs' |
| | | import leafletMapVue from '../systemSetting/device/grid/components/components/leafletMap.vue'; |
| | | |
| | | const { mapActions } = createNamespacedHelpers("users"); |
| | | export default { |
| | | name: "login", |
| | |
| | | }; |
| | | return { |
| | | loginForm: { |
| | | username: "admin", |
| | | password: "macro123", |
| | | username:"", |
| | | password:"", |
| | | }, |
| | | imgUrl:'', |
| | | loginRules: { |
| | | username: [ |
| | | { required: true, trigger: "blur", validator: validateUsername }, |
| | |
| | | pwdType: false, |
| | | }; |
| | | }, |
| | | created() {}, |
| | | created() { |
| | | const pic = JSON.parse(sessionStorage.getItem('pic')); |
| | | if(pic){ |
| | | this.imgUrl = pic.loginPageIconUrl |
| | | }else{ |
| | | this.$axios({ |
| | | method: 'get', |
| | | url: 'sccg/system/portal/logo/search', |
| | | }).then(res => { |
| | | this.imgUrl = res.data.loginPageIconUrl |
| | | }) |
| | | } |
| | | }, |
| | | methods: { |
| | | showPwd() { |
| | | if (!this.pwdType) { |
| | | this.pwdType = true; |
| | | } else { |
| | | this.pwdType = false; |
| | | } |
| | | this.pwdType = !this.pwdType; |
| | | }, |
| | | ...mapActions(["login"]), |
| | | handleLogin() { |
| | | console.log("in login"); |
| | | const { username, password } = this.loginForm; |
| | | let { username, password } = this.loginForm; |
| | | const that = this; |
| | | |
| | | password = Encrypt(password) |
| | | this.$axios |
| | | .post("http://42.193.1.25:8082/sccg/admin/login", { |
| | | password, |
| | | username, |
| | | .post("sccg/admin/login", { |
| | | password, |
| | | username, |
| | | }) |
| | | .then(function (response) { |
| | | console.log(response); |
| | | if (response.code === 200) { |
| | | // 设置toke时间 |
| | | // 保存token |
| | | sessionStorage.setItem('token',response.data.token); |
| | | // 保存token |
| | | sessionStorage.setItem('tokenHead',response.data.tokenHead); |
| | | // 保存用户登录名 |
| | | sessionStorage.setItem('name',username); |
| | | // 跳转到首页 |
| | | that.$router.push("/home"); |
| | | }else{ |
| | | that.$refs.loginForm.validate((valid)=>{ |
| | | if(valid){ |
| | | that.$message({ |
| | | type:'warning', |
| | | message:response.message |
| | | }) |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | .catch(function (error) { |
| | | console.log(error); |
| | | }); |
| | | }, |
| | | } |
| | | }, |
| | | }; |
| | | </script> |
| | |
| | | .color { |
| | | color: red; |
| | | } |
| | | |
| | | #background { |
| | | width: 100vw; |
| | | height: 100vh; |
| | | background: url("@/assets/imgs/login/login_bg.jpg"); |
| | | background: url("@/assets/imgs/login/bk.png"); |
| | | background-size: cover; |
| | | position: relative; |
| | | display: flex; |
| | | min-width: 800px; |
| | | } |
| | | |
| | | .login-form-layout { |
| | | position: absolute; |
| | | top: 20%; |
| | | right: 5%; |
| | | width: 360px; |
| | | &:deep(.el-input__inner) { |
| | | background-color: #fff !important; |
| | | border: 1px solid #dcdfe6 !important; |
| | | } |
| | | } |
| | | |
| | | .text { |
| | | align-self: flex-start; |
| | | position: absolute; |
| | | top: 20%; |
| | | left: 5%; |
| | | display: flex; |
| | | width: 400px; |
| | | width: 420px; |
| | | justify-content: space-between; |
| | | .logo { |
| | | width: 50px; |
| | | height: 50px; |
| | | border-radius: 50%; |
| | | background-color: pink; |
| | | |
| | | .logo > img { |
| | | width: 75px; |
| | | height: 75px; |
| | | border-radius: 4px; |
| | | } |
| | | |
| | | .text-r { |
| | | margin-left: 15px; |
| | | |
| | | .title { |
| | | color: white; |
| | | } |
| | | |
| | | .font-title-medium { |
| | | margin-top: -10px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .login-title { |
| | | text-align: left; |
| | | font-size: 1.2rem; |