Browse Source

fix:换背景图

confidence
杜贤金 3 years ago
parent
commit
eb8aeb80f7
  1. BIN
      public/img/bg/logo-bgimg.jpg
  2. BIN
      src/assets/login-logo.png
  3. 174
      src/page/login/index.vue
  4. 2
      src/styles/login.scss

BIN
public/img/bg/logo-bgimg.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 156 KiB

BIN
src/assets/login-logo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

174
src/page/login/index.vue

@ -1,121 +1,127 @@
<template> <template>
<div class="login-container" <div class="login-container" ref="login" @keyup.enter.native="handleLogin">
ref="login"
@keyup.enter.native="handleLogin">
<top-color v-show="false"></top-color> <top-color v-show="false"></top-color>
<div class="login-weaper animated bounceInDown"> <div class="login-weaper animated bounceInDown">
<div class="login-left"> <div class="login-left">
<div class="login-time"> <div class="login-time">
{{time}} {{ time }}
</div> </div>
<img class="img" src="http://static.qnaiot.com/sim/login-mid.png" alt=""> <img class="img" src="../../assets/login-logo.png" alt="" />
<p class="title">{{ $t('login.info') }}</p> <p class="title">{{ $t("login.info") }}</p>
</div> </div>
<div class="login-border"> <div class="login-border">
<div class="login-main"> <div class="login-main">
<h4 class="login-title"> <h4 class="login-title">
{{ $t('login.title') }} {{ $t("login.title") }}
<span>(1.0.0)</span> <span>(1.0.0)</span>
<!-- <top-lang></top-lang> --> <!-- <top-lang></top-lang> -->
</h4> </h4>
<userLogin v-if="activeName==='user'"></userLogin> <userLogin v-if="activeName === 'user'"></userLogin>
<codeLogin v-else-if="activeName==='code'"></codeLogin> <codeLogin v-else-if="activeName === 'code'"></codeLogin>
<thirdLogin v-else-if="activeName==='third'"></thirdLogin> <thirdLogin v-else-if="activeName === 'third'"></thirdLogin>
<div class="login-menu"> <div class="login-menu">
<!-- <a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a> --> <!-- <a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a> -->
<!--<a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>--> <!--<a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>-->
<!-- <a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a> --> <!-- <a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a> -->
<!-- <div></div> --> <!-- <div></div> -->
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import userLogin from "./userlogin"; import userLogin from "./userlogin";
import codeLogin from "./codelogin"; import codeLogin from "./codelogin";
import thirdLogin from "./thirdlogin"; import thirdLogin from "./thirdlogin";
import {mapGetters} from "vuex"; import { mapGetters } from "vuex";
import {dateFormat} from "@/util/date"; import { dateFormat } from "@/util/date";
import {validatenull} from "@/util/validate"; import { validatenull } from "@/util/validate";
import topLang from "@/page/index/top/top-lang"; import topLang from "@/page/index/top/top-lang";
import topColor from "@/page/index/top/top-color"; import topColor from "@/page/index/top/top-color";
import {getQueryString, getTopUrl} from "@/util/util"; import { getQueryString, getTopUrl } from "@/util/util";
export default { export default {
name: "login", name: "login",
components: { components: {
userLogin, userLogin,
codeLogin, codeLogin,
thirdLogin, thirdLogin,
topLang, topLang,
topColor topColor,
}, },
data() { data() {
return { return {
time: "", time: "",
activeName: "user", activeName: "user",
socialForm: { socialForm: {
tenantId: "000000", tenantId: "000000",
source: "", source: "",
code: "", code: "",
state: "", state: "",
} },
}; };
}, },
watch: { watch: {
$route() { $route() {
this.handleLogin();
}
},
created() {
this.handleLogin(); this.handleLogin();
this.getTime();
}, },
mounted() { },
created() {
this.handleLogin();
this.getTime();
},
mounted() {},
computed: {
...mapGetters(["website", "tagWel"]),
},
props: [],
methods: {
getTime() {
setInterval(() => {
this.time = dateFormat(new Date());
}, 1000);
}, },
computed: { handleLogin() {
...mapGetters(["website", "tagWel"]) const topUrl = getTopUrl();
}, const redirectUrl = "/oauth/redirect/";
props: [], this.socialForm.source = getQueryString("source");
methods: { this.socialForm.code = getQueryString("code");
getTime() { this.socialForm.state = getQueryString("state");
setInterval(() => { if (
this.time = dateFormat(new Date()); validatenull(this.socialForm.source) &&
}, 1000); topUrl.includes(redirectUrl)
}, ) {
handleLogin() { let source = topUrl.split("?")[0];
const topUrl = getTopUrl(); source = source.split(redirectUrl)[1];
const redirectUrl = "/oauth/redirect/"; this.socialForm.source = source;
this.socialForm.source = getQueryString("source"); }
this.socialForm.code = getQueryString("code"); if (
this.socialForm.state = getQueryString("state"); !validatenull(this.socialForm.source) &&
if (validatenull(this.socialForm.source) && topUrl.includes(redirectUrl)) { !validatenull(this.socialForm.code) &&
let source = topUrl.split("?")[0]; !validatenull(this.socialForm.state)
source = source.split(redirectUrl)[1]; ) {
this.socialForm.source = source; const loading = this.$loading({
} lock: true,
if (!validatenull(this.socialForm.source) && !validatenull(this.socialForm.code) && !validatenull(this.socialForm.state)) { text: "第三方系统登录中,请稍后。。。",
const loading = this.$loading({ spinner: "el-icon-loading",
lock: true, });
text: '第三方系统登录中,请稍后。。。', this.$store
spinner: "el-icon-loading" .dispatch("LoginBySocial", this.socialForm)
}); .then(() => {
this.$store.dispatch("LoginBySocial", this.socialForm).then(() => {
window.location.href = topUrl.split(redirectUrl)[0]; window.location.href = topUrl.split(redirectUrl)[0];
this.$router.push({path: this.tagWel.value}); this.$router.push({ path: this.tagWel.value });
loading.close(); loading.close();
}).catch(() => { })
.catch(() => {
loading.close(); loading.close();
}); });
}
} }
} },
}; },
};
</script> </script>
<style lang="scss"> <style lang="scss">
@import "@/styles/login.scss"; @import "@/styles/login.scss";
</style> </style>

2
src/styles/login.scss

@ -5,7 +5,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0 auto; margin: 0 auto;
background-image: url("http://static.qnaiot.com/sim/login-bg.jpg"); background-image:url("/img/bg/logo-bgimg.jpg");
background-size: 100% 100%; background-size: 100% 100%;
} }

Loading…
Cancel
Save