<template>
|
<div class="login-container">
|
<div class="starBg">
|
|
</div>
|
<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: 28px;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';
|
import "amfe-flexible";
|
// 定义接口来定义对象的类型
|
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();
|
const baseSize = 38;
|
/* 设置 rem 函数 */
|
function setRem() {
|
const scale = document.documentElement.clientWidth / 1920; /* 当前页面宽度缩放比例，可根据自己需要修改 */
|
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";/* 设置页面根节点字体大小 */
|
console.log('切换尺寸>>',document.documentElement.style.fontSize)
|
}
|
setRem();/* 初始化 rem */
|
|
window.onresize = () => {
|
setRem();/* 改变窗口大小时重新设置 rem */
|
console.log('执行切换')
|
}
|
});
|
return {
|
logoMini,
|
loginIconTwo,
|
getThemeConfig,
|
...toRefs(state)
|
};
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.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);*/
|
.starBg{
|
width: 1030px;
|
height: 1135px;
|
position: absolute;
|
left: 50%;
|
transform: translateX(-50%);
|
top: 50px;
|
z-index: -1;
|
background: url("../../assets/loginPage/starFalls.gif") no-repeat center;
|
background-size: 100% 100%;
|
opacity: 0.1;
|
-webkit-opacity: 0.1;
|
}
|
.rights {
|
font-size: 12px;
|
color: #fff;
|
position: absolute;
|
bottom: 30px;
|
text-align: center;
|
|
span{
|
font-size: 12px;
|
color: #eee;
|
}
|
}
|
.loginContent {
|
width: 40%;
|
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: 60px 180px 80px;
|
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>
|
