kmt/src/pages/Login.vue

<template>
<div class="bodyImg">
<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 @click="WxLoginCtl" class="log-qrcode">
        <div id="login_container"></div>
        <!-- <img class="log-qrcode-image" src="../assets/img/ssj_qrcode.png"> -->
      </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 {};
  },
  watch: {},
  created() {
    this.getTKByUnionid();
  },
  methods: {
    WxLoginCtl() {
      // this.$router.push({
      //   path: "/aikmt/Redirect_uri",
      //   query: {
      //     unionid: "oPHg8wXraekgH5YKVHvD3H7Ujynw"
      //   }
      // });
    },
    async getTKByUnionid() {
      if (window.location.href.indexOf("unionid") >= 0) {
        // 如果url中包含unionid,则保存到store中
        let unionid = window.location.href.split("?")[1];
        unionid = unionid.substring(8);
        let WxCode = unionid;
        this.WxCode = WxCode;
        localStorage.setItem("unionid", this.WxCode);
        this.$store.dispatch("UnionidLogin", {
          unionid: this.WxCode
        });
      }
      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;
        this.WxCode = WxCode;
        console.log("获取Code" + this.WxCode);
        this.$store.dispatch("GET_TOKEN", {
          code: this.WxCode
        });
      }
      return
    }
  },
  mounted() {
    var obj = new WxLogin({
      self_redirect: false,
      id: "login_container",
      appid: "wxd18ca9555a939281",
      scope: "snsapi_login",
      redirect_uri: encodeURIComponent(
        "https://kmt.sharingschool.com/aijia/manager/index.html"
      ),
      state: "",
      style: "width: 250px",
      href: ""
    });
  }
};
</script>

<style scoped>
body {
  background-image: url(../assets/img/Land_bg.png);
  background-size: 100% auto;
}
.bodyImg{
   background-image: url(../assets/img/Land_bg.png);
  background-size: 100% auto;
  height: 1000px!important;
}
.container {
    max-height: 70%;
  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: 70%;
  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: 100%;
}
*,
::after,
::before {
  box-sizing: content-box;
}
.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>