kmt/src/pages/Login.vue

<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 @click="WxLoginCtl" class="log-qrcode">
        <div id="login_container"></div>
        <!-- <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 {};
  },
  watch: {},
  created() {
    // this.getTKByUnionid()
  },
  methods: {
    WxLoginCtl() {
      // this.$util.messageMethod("success", "前去微信登陆扫码授权");
      this.$router.push({
        path: "/aikmt/Redirect_uri",
        query: {
          unionid: "oPHg8wXraekgH5YKVHvD3H7Ujynw",
          prince: "6666666666666"
        }
      });
    },
    // async getTKByUnionid() {
    //   if (window.location.href.indexOf("unionid") >= 0) {
    //     // 如果url中包含code,则保存到store中
    //     let unionid = window.location.href.split("?")[1];
    //     unionid = unionid.substring(8, code.indexOf("&"));
    //     let WxCode = unionid;
    //     this.WxCode = WxCode;
    //     this.$store.dispatch("UnionidLogin", {
    //      unionid: this.WxCode
    //   });
    //   }
    //  return
    // }
  },
  mounted() {
    var obj = new WxLogin({
      self_redirect: false,
      id: "login_container",
      appid: "wxd18ca9555a939281",
      scope: "snsapi_login",
      redirect_uri: encodeURI(
        "https://kmt.sharingschool.com/aijia/index.html#/aikmt/Redirect_uri"
        // "https://t.sharingschool.com/upload/ceshi/index.html"
      ),
      state: "",
      style: "width: 250px",
      href: ""
    });
  }
};
</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: 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>