<template>
|
<div class="login-container">
|
<div id="particles-js" style="display: flex; align-items: center; justify-content: center">
|
<canvas class="particles-js-canvas-el" style="width: 100%; height: 100%" width="472" height="625"></canvas>
|
</div>
|
<el-row class="loginContent">
|
<el-col :md="12">
|
<div class="loginContL">
|
<div class="apTitleT">新疆国泰新华</div>
|
<div class="apTitleB">安全风险预警监测系统</div>
|
<span></span>
|
</div>
|
</el-col>
|
<el-col :md="12" style="display: flex; justify-content: flex-end">
|
<div class="loginPanel">
|
<div class="welc">WELCOME！</div>
|
<div class="welcc">欢迎登录</div>
|
<!-- <div class="loginInfo">-->
|
<!-- <el-input v-model="input" placeholder="Please input" />-->
|
<!-- </div>-->
|
<div>
|
<el-tabs v-model="tabsActiveName">
|
<AccountLogin />
|
</el-tabs>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
<div class="rights">技术支持：苏州国科鸿宇智能科技有限公司<br/><span>GTXH Intelligent Security Management System V1.0.1</span></div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { toRefs, reactive, computed, defineComponent, onMounted } from 'vue';
|
import { storeToRefs } from 'pinia';
|
import { useThemeConfig } from '/@/stores/themeConfig';
|
import logoMini from '/@/assets/logo-mini.svg';
|
import loginIconTwo from '/@/assets/login-icon-two.svg';
|
import { NextLoading } from '/@/utils/loading';
|
import AccountLogin from '/@/views/loginPage/component/accountLogin.vue';
|
import { loginBg } from '../../../static/loginPage.js/login.js';
|
import { loginApp } from '../../../static/loginPage.js/loginApp.js';
|
|
// 定义接口来定义对象的类型
|
interface LoginState {
|
tabsActiveName: string;
|
isScan: boolean;
|
}
|
|
export default defineComponent({
|
name: 'loginIndex',
|
components: { AccountLogin },
|
setup() {
|
const storesThemeConfig = useThemeConfig();
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
const state = reactive<LoginState>({
|
tabsActiveName: 'account',
|
isScan: false
|
});
|
// 获取布局配置信息
|
const getThemeConfig = computed(() => {
|
return themeConfig.value;
|
});
|
// 页面加载时
|
onMounted(() => {
|
NextLoading.done();
|
loginBg();
|
loginApp();
|
});
|
return {
|
logoMini,
|
loginIconTwo,
|
getThemeConfig,
|
...toRefs(state)
|
};
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
@media screen and (min-width: 1200px){
|
.loginContent{
|
display: flex;
|
justify-content: space-around;
|
padding: 0 200px;
|
}
|
.loginContL {
|
font-size: 60px;
|
font-weight: bold;
|
margin-bottom: 100px;
|
}
|
}
|
@media screen and (min-width: 960px) and (max-width: 1200px){
|
.loginContent{
|
display: flex;
|
justify-content: space-between;
|
padding: 0 40px;
|
}
|
.loginContL {
|
font-size: 40px;
|
font-weight: bold;
|
margin-bottom: 80px;
|
}
|
}
|
.login-container {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
z-index: 999;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
background: url('../../assets/loginPage/login-bg.jpg') no-repeat center;
|
background-size: 100% 100%;
|
/*background-image: radial-gradient(at center, #0075c3, #000b61);*/
|
|
canvas {
|
display: block;
|
vertical-align: bottom;
|
}
|
|
#particles-js {
|
width: 100%;
|
height: 100%;
|
background-size: cover;
|
background-position: 50% 50%;
|
background-repeat: no-repeat;
|
position: absolute;
|
top: 0;
|
left: 0;
|
}
|
.rights {
|
font-size: 1.2rem;
|
color: #fff;
|
position: absolute;
|
bottom: 30px;
|
text-align: center;
|
|
span{
|
font-size: 1rem;
|
color: #eee;
|
}
|
}
|
.loginContent {
|
width: 100%;
|
flex-wrap: wrap;
|
align-items: center;
|
margin-bottom: 60px;
|
|
.loginContL {
|
width: 100%;
|
|
.apTitleT {
|
color: #fff;
|
margin-bottom: 20px;
|
letter-spacing: 4px;
|
}
|
.apTitleB {
|
color: #01d0ff;
|
margin-bottom: 36px;
|
letter-spacing: 4px;
|
}
|
& > span {
|
display: block;
|
width: 120px;
|
height: 8px;
|
background: #01d0ff;
|
}
|
}
|
.loginPanel {
|
width: 65%;
|
padding: 85px 70px;
|
background: #fff;
|
min-width: 450px;
|
border-radius: 15px;
|
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
|
|
.welc {
|
font-size: 36px;
|
font-family: 'PingFang SC';
|
font-weight: normal;
|
color: #999999;
|
letter-spacing: 2px;
|
margin-bottom: 15px;
|
}
|
.welcc {
|
font-size: 32px;
|
font-family: 'PingFang SC';
|
font-weight: lighter;
|
color: #333;
|
letter-spacing: 2px;
|
}
|
}
|
}
|
}
|
</style>
|
