<template>
  <div class="container">
    <div class="log-paper">
      <img src="../../assets/img/Land_sbg.png">
    </div>
    <div class="log-container">
      <img class="log-icon" src="../../assets/img/log.png">
      <div class="log-text">欢迎登陆私塾家知识管理后台重定向页面啦啦啦啦啦</div>
      <div class="log-qrcode">
        <img class="log-qrcode-image" src="../../assets/img/ssj_qrcode.png">
        <div class="log-qrcode-text">请使用微信扫码登陆</div>
      </div>
    </div>
  </div>
</template>

<script>
// import { mapActions } from "vuex";
// import wx from 'weixin-js-sdk'
// import $ from 'jquery'

export default {
  name: "login",
  data() {
    return {
    };
  },
  created() {
    this.getTKByCode()
    // debugger
  },
  methods: {
	async getTKByCode(){
     if (window.location.href.indexOf('code') >= 0) {
        // 如果url中包含code,则保存到store中
        let code = window.location.href.split("?")[1];
        code = code.substring(5, code.indexOf('&'));
        let WxCode = {code: code}
      }
           this.$store.dispatch('GET_TOKEN', {
             code: "081nx4K50HDkED1WgLI50InQJ50nx4Kb"
        });
	}
  },
  mounted() {}
};
</script>

<style scoped>
body {
  background-image: url(../../assets/img/Land_bg.png);
  background-size: 100% auto;
}
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-width: 70%;
  background: #ffffff;
  -webkit-box-shadow: 0 0 20px 0 rgba(50, 103, 0, 0.2);
  -webkit-border-radius: 4px;
  box-shadow: 0 0 20px 0 rgba(50, 103, 0, 0.2);
  border-radius: 4px;
  padding: 5%;
}
.log-paper {
  width: 45%;
  margin-right: 5%;
  float: left;
}
.log-paper img {
  width: 90%;
}
.log-container {
  width: 50%;
  margin-left: 5%;
  float: right;
  text-align: center;
}
.log-icon {
  width: 40%;
}
.log-text {
  font-size: 1.8em;
  color: #52cc60;
  margin: 0.5rem auto;
}
.log-qrcode {
  width: 80%;
  background: #ffffff;
  -webkit-box-shadow: 0 2px 10px 0 rgba(157, 166, 195, 0.3);
  box-shadow: 0 2px 10px 0 rgba(157, 166, 195, 0.3);
  padding: 10%;
  margin: 5% 10%;
}
.log-qrcode-image {
  width: 80%;
}
.log-qrcode-text {
  margin-top: 1.5rem;
  font-size: 1em;
  color: #808080;
}
@media (min-width: 0px) and (max-width: 767px) {
  .container {
    width: 750px;
  }
  .log-paper {
    width: 0%;
  }
  .log-container {
    width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .container {
    width: 750px;
  }
  .log-paper {
    width: 45%;
    margin-top: 5%;
  }
  .log-container {
    width: 40%;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
  .log-paper {
    width: 45%;
  }
  .log-container {
    width: 40%;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

body {
  background: #f6f7fb;
  -webkit-font-smoothing: subpixel-antialiased;
}
.color-green {
  color: #52cc60 !important;
}
.color-purple {
  color: #612d00 !important;
}
.fontweight {
  font-weight: bold;
}
.text-indent {
  text-indent: 2.6rem;
}
.nodata {
  text-align: center;
  padding: 250px 20px !important;
}
.nodata p {
  padding-top: 50px;
  font-size: 18px;
  color: #65b800;
}

/* 适应1366 */
/* @media screen and (max-width: 1366px) {
  .isShow1 {
    display: none;
  }
  .isShow2 {
    display: block;
  }
  .isShow3 {
    display: none;
  }
  .isShow4 {
    display: block;
  }
} */
</style>
