cx-wed/src/components/slgn.vue

<template>
    <div id="app">
        <div class="slgn">
        <div class="header">
            <img src="../assets/Sign-top.png" >
        </div>
        <div class="nav">
            <div class="nav-name">
            <div class="nav-name-top">
                <span>用户登录</span>
            </div>
            <div class="nav-name-waist">
                <span>欢迎登录系统</span>
            </div>
            <div class="nav-name-srk">
                <span>
                <el-input class="srk" placeholder="请输入账号" v-model="username">
                    <i slot="prefix" class="el-icon-user mt"></i>
                </el-input>
                </span>
                <span>
                <el-input class="srk" placeholder="请输入密码" show-password v-model="password">
                    <i slot="prefix" class="el-icon-lock mt"></i>
                </el-input>
                </span>
                <span class="yzm">
                <div class="box_tr" style="width:194px;margin-bottom:0">
                    <el-input class="srk" placeholder="请输入验证码" v-model="captcha" @keyup.enter.native="login()">
                    <i slot="prefix" class="el-icon-bell mt"></i>
                    </el-input>
                </div>
                <img class="imgUrl" :src="imgUrl" @click="getUuid">
                </span>
            </div>
            <div class="nav-name-an">
                <el-button type="warning" @click='login()'>登录</el-button>
            </div>
            </div>
        </div>
        <div class="footer">
            <div class="footer-top">
            <span>Resettlement housing </span>
            <div>management platform</div>
            </div>
            <div class="footer-bottom">
            <ul>
                <li>服务电话：0571-81951752</li>
                <li>邮箱：sunweiherber@163.com</li>
                <li>地址：杭州市拱墅区万融城1幢2203室</li>
            </ul>
            <span>copyright©慈溪市房屋征收管理办公室&杭州兆幅科技有限公司版权所有</span>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'pp',
    data() {
      return {
        input4: '',
        uuid: '',
        imgUrl: "",
        username: '',
        captcha: '',
        password: ''
      }
    },
    mounted() {
      this.getUuid()
      // sessionStorage.clear();
    },
    methods: {
      //获取图片验证码
      getUuid() {
        var s = [];
        var hexDigits = "0123456789abcdef";
        for (var i = 0; i < 36; i++) {
          s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        s[14] = "4";
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
        s[8] = s[13] = s[18] = s[23] = "-";
        var uuid = s.join("");
        this.uuid = uuid;
        //获取验证码图片
        this.$http.get('api/v1/pub/captcha.jpg?uuid=' + uuid, {
          responseType: 'arraybuffer'
        }).then(response => {
          return 'data:image/png;base64,' + btoa(
            new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
          )
        }).then(data => {
          this.imgUrl = data
        })
      },
      // 登录
      login() {
        let params = {
          captcha: this.captcha,
          uuid: this.uuid,
          username: this.username,
          password: this.password
        }
        this.$http.post('/api/v1/pub/login', params).then((res) => {
          window.sessionStorage.setItem("i", 1);
          if (res.status == 200 && res.data.code == 0) {
            window.sessionStorage.setItem('token', res.data.token);
            window.sessionStorage.setItem('dialogVisible', true);
			this.$router.push('/home')
          } else {
            this.getUuid()
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .slgn {
    width: 100%;
    height: 100%;
    background-color: #fff;
    min-width: 1434px;
    min-height: 816px;

 .header {
    display: flex;
    padding: 2%;

  .header-Left {
    padding: 0 1%;
.header-Left-top{
	span {
	   font-size: 30px;
	   display: flex;
	   color: #323333;
	 }
	 h3 {
	   font-size: 16px;
	   font-weight: lighter;
	   border-bottom: 1px solid #323333;
	   padding: 2% 0;
	   color: #323333;
	 }
}

 .header-Left-bottom {
	 span {
	   margin: 1% 0 0 0;
	   display: block;
	 }
	 h3 {
	   font-size: 12px;
	   color: #323333;
	   line-height: 20px;
	   font-weight: bold;
	   font-weight: lighter;
	 }
 }

  }
  .header-right {
    padding: 1%;
    border-left: 1px solid #323333;
	h2 {
	  font-size: 64px;
	  font-weight: 400;
	  color: #323333;
	  opacity: 1;
	}
  }

  }
 .nav {
    background: url(../assets/Sign-background.png) no-repeat;
    background-size: 100%, 100%;
    width: 100%;
    height: 60%;
	.nav-name {
	   width: 22%;
	   height: 80%;
	   background-color: #fff;
	   position: relative;
	   top: 7%;
	   left: 60%;
	   min-width: 422px;
	   min-height: 407px;
	   .nav-name-top {
	      background-color: #323333;
	      width: 100%;
	      height: 16%;
		  span {
		     color: #fff;
		     font-size: 32px;
		     text-align: center;
		     display: block;
		     line-height: 74px;
			 .el-input--prefix{
				/deep/.el-input__inner {
					border: none;
				}
			 } 
		   }
	    }
	   .nav-name-waist {
		   width: 70%;
		   margin: 0% auto;
		   border-bottom: 1px #CCC solid;
		   padding: 2% 0;
		   span {
		      font-size: 16px;
		      border-bottom: 2px #333 solid;
		      padding: 3% 0;
		      color: #333;
		    }
		 }
		.nav-name-srk {
		   padding: 7% 5%;
		   height: 40%;
		   display: flex;
		   flex-direction: column;
		   justify-content: space-around;
		   /deep/.el-input__inner{
		      background-color: #fff0;
			  border: none;
			  &:focus{
				  border: none;
			  }
		    }
		   span {
		      display: flex;
			  .srk {
			    border: 1px solid #cccccc;
			    border-radius: 4px;
				.mt {
				  font-size: 24px;
				  line-height: 40px;
				  padding: 0 2.5%;
				}
			   &:hover {
			      border: 1px solid #e6a23c;
			      .mt {
			        color: #e6a23c;
			      }
			    }
			  }
		    }
			.el-input {
			width: 80%;
			margin: 0 auto;
			}
		 }
		 .nav-name-an {
		    width: 80%;
		    margin: 0 auto;
			 .el-button {
			   width: 100%;
			 }
		  }
	 }
  }

 .footer {
    padding: 2% 0 0 0;
    margin: 0 1%;
	.footer-top {
	   display: flex;
	   border-bottom: 1px solid #707070;
	   padding: 0.5% 0%;
	   span {
	      color: #D58905;
	      font-size: 32px;
	      margin: 0 1% 0 0;
	    }
		div {
		  font-size: 32px;
		  color: #333;
		}
	 }
	.footer-bottom {
	   display: flex;
	   justify-content: space-between;
	   margin: 1.5% 0 0 0;
	   ul {
	      display: flex;
	      color: #333;
	      font-size: 12px;
	      width: 40%;
		  li {
		     margin: 0 2% 0 0;
		   }
	    }
		span {
		   color: #333;
		   font-size: 12px;
		 }
	 }
  }
 .yzm {
    display: flex;
    width: 80%;
    margin: 0 auto;
	.imgUrl {
	   width: 120px;
	   height: 43px;
	   cursor: pointer;
	 }
  }
  }
</style>