|
|
@@ -1,5 +1,5 @@
|
|
|
-<template>
|
|
|
-<div class="bodyImg">
|
|
|
+
|
|
|
+<!-- <div class="bodyImg">
|
|
|
<div class="container">
|
|
|
<div class="log-paper">
|
|
|
<img src="../assets/img/Land_sbg.png">
|
|
|
@@ -9,11 +9,28 @@
|
|
|
<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>
|
|
|
+</div> -->
|
|
|
+<template>
|
|
|
+ <div class="login" style=" min-width: 650px!important;">
|
|
|
+ <div class="login-paper">
|
|
|
+ <img src="../assets/img/Land_bg.png">
|
|
|
+ </div>
|
|
|
+ <div class="login-content">
|
|
|
+ <div class="img">
|
|
|
+ <img src="../assets/img/Land_sbg.png">
|
|
|
+ </div>
|
|
|
+ <div class="section">
|
|
|
+ <img class="section-icon" src="../assets/img/log.png">
|
|
|
+ <div class="log-text section-text">欢迎登陆私塾家在线人员管理后台</div>
|
|
|
+ <div @click="WxLoginCtl" class="log-qrcode">
|
|
|
+ <div class="section-qrcode" id="login_container"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -47,7 +64,7 @@ export default {
|
|
|
let WxCode = unionid;
|
|
|
this.WxCode = WxCode;
|
|
|
localStorage.setItem("unionid", this.WxCode);
|
|
|
- console.log("获取unionid" + this.WxCode);
|
|
|
+ console.log("获取unionid" + this.WxCode);
|
|
|
this.$store.dispatch("UnionidLogin", {
|
|
|
unionid: this.WxCode
|
|
|
});
|
|
|
@@ -63,10 +80,10 @@ export default {
|
|
|
code: this.WxCode
|
|
|
});
|
|
|
// 清除重定向url中参数ocde,
|
|
|
- window.history.replaceState({}, "", `${location.pathname}`);
|
|
|
- console.log(location.pathname)
|
|
|
+ window.history.replaceState({}, "", `${location.pathname}`);
|
|
|
+ console.log(location.pathname);
|
|
|
}
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -85,157 +102,68 @@ export default {
|
|
|
}
|
|
|
};
|
|
|
</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%;
|
|
|
+<style lang="stylus" scoped>
|
|
|
+@import '../style/index.styl';
|
|
|
+.login-content{
|
|
|
+ display: flex;
|
|
|
+ -webkit-box-pack: justify;
|
|
|
+ -ms-flex-pack: justify;
|
|
|
+ justify-content: space-between;
|
|
|
+ -webkit-box-align: center;
|
|
|
+ -ms-flex-align: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.login
|
|
|
+ position fixed
|
|
|
+ top 0
|
|
|
+ left 0
|
|
|
+ width 100%
|
|
|
+ height 100%
|
|
|
+ min-width 650px
|
|
|
+ &-paper
|
|
|
+ position absolute
|
|
|
+ top 0
|
|
|
+ left 0
|
|
|
+ width 100%
|
|
|
+ height 100%
|
|
|
+ img
|
|
|
+ width 100%
|
|
|
+ height 100%
|
|
|
+ object-fit cover
|
|
|
+ &-content
|
|
|
+ position absolute
|
|
|
+ top 10%
|
|
|
+ left 15%
|
|
|
+ width 70%
|
|
|
+ height 80%
|
|
|
+ background $color-bg-white
|
|
|
+ border-radius 4px
|
|
|
+ box-shadow()
|
|
|
+ flex-row-between()
|
|
|
+ .img
|
|
|
+ margin 10% 0% 10% 10%
|
|
|
+ flex 6
|
|
|
+ img
|
|
|
+ width 100%
|
|
|
+ height 100%
|
|
|
+ object-fit cover
|
|
|
+ .section
|
|
|
+ margin 10%
|
|
|
+ flex 4
|
|
|
+ text-align center
|
|
|
+ &-icon
|
|
|
+ width 50%
|
|
|
+ object-fit cover
|
|
|
+ &-text
|
|
|
+ color $color-text-green
|
|
|
+ font-size $font-size-l
|
|
|
+ margin 5%
|
|
|
+ &-qrcode
|
|
|
+ box-shadow()
|
|
|
+ padding 10px
|
|
|
+@media (min-width: 0px) and (max-width: 960px) {
|
|
|
+ .img {
|
|
|
+ display none
|
|
|
}
|
|
|
}
|
|
|
-@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>
|
|
|
+</style>
|
TheLittlePrince