<template>
|
<div class="login-container">
|
<div class="loginContent">
|
<div class="welcc">广域特殊气体泄露在线监测预警系统</div>
|
<div class="loginPanel">
|
<div class="loginGroup">
|
<div style="width: 100%">
|
<div style="width:100%;text-align: center;font-size: 22px;color: #11FEEE">欢迎登录</div>
|
<AccountLogin />
|
</div>
|
</div>
|
</div>
|
</div>
|
<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';
|
|
// 定义接口来定义对象的类型
|
interface LoginState {
|
isScan: boolean;
|
}
|
|
export default defineComponent({
|
name: 'loginIndex',
|
components: { AccountLogin },
|
setup() {
|
const storesThemeConfig = useThemeConfig();
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
const state = reactive<LoginState>({
|
isScan: false
|
});
|
// 获取布局配置信息
|
const getThemeConfig = computed(() => {
|
return themeConfig.value;
|
});
|
// 页面加载时
|
onMounted(() => {
|
NextLoading.done();
|
});
|
return {
|
logoMini,
|
loginIconTwo,
|
getThemeConfig,
|
...toRefs(state)
|
};
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
@media screen and (min-width: 1366px){
|
|
}
|
@media screen and (min-width: 1024px) and (max-width: 1366px){
|
|
}
|
@media screen and (min-width: 960px) and (max-width: 1024px){
|
|
}
|
.login-container {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
z-index: 999;
|
display: flex;
|
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);*/
|
|
.rights {
|
font-size: 12px;
|
color: #fff;
|
position: absolute;
|
bottom: 30px;
|
text-align: center;
|
|
span{
|
font-size: 12px;
|
color: #eee;
|
}
|
}
|
.loginContent {
|
width: 32vw;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
margin-top: -10vh;
|
.welcc {
|
font-size: 40px;
|
font-family: 'PingFang SC';
|
text-align: center;
|
font-weight: 900;
|
color: #11FEEE;
|
white-space: nowrap;
|
z-index: 9999;
|
margin-bottom: 3vh;
|
}
|
.loginPanel {
|
width: 100%;
|
padding: 4vh;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
background: url("../../assets/loginPage/panel-bg.png") no-repeat center;
|
background-size: 100% 100%;
|
|
:deep(.loginGroup){
|
width: 100%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
|
.el-tabs__content{
|
display: flex;
|
justify-content: center;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
