<template>
|
<div class="login-container">
|
<div class="loginContent">
|
<div class="loginPanel">
|
<div class="welcc">科学研究实验安全风险评估系统</div>
|
<div class="loginGroup">
|
<div class="loginPic">
|
<img src="../../assets/loginPage/login-pic.png">
|
</div>
|
<div style="width: 45%">
|
<el-tabs v-model="tabsActiveName">
|
<AccountLogin />
|
</el-tabs>
|
</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 {
|
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();
|
});
|
return {
|
logoMini,
|
loginIconTwo,
|
getThemeConfig,
|
...toRefs(state)
|
};
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
@media screen and (min-width: 1366px){
|
.loginContent{
|
display: flex;
|
justify-content: space-around;
|
padding: 0 200px;
|
}
|
.loginPic{
|
width: 55%;
|
height: 100%;
|
position: relative;
|
|
img{
|
width: 103%;
|
height: auto;
|
position: absolute;
|
bottom: -180px;
|
right: 15%;
|
margin-top: 40px;
|
}
|
}
|
}
|
@media screen and (min-width: 1024px) and (max-width: 1366px){
|
.loginPic{
|
width: 55%;
|
height: 100%;
|
position: relative;
|
|
img{
|
width: 103%;
|
height: auto;
|
position: absolute;
|
bottom: -80px;
|
right: 0;
|
}
|
}
|
}
|
@media screen and (min-width: 960px) and (max-width: 1024px){
|
.loginContent{
|
display: flex;
|
justify-content: space-between;
|
padding: 0 40px;
|
}
|
.loginPic{
|
width: 55%;
|
height: 100%;
|
position: relative;
|
|
img{
|
width: 103%;
|
height: auto;
|
position: absolute;
|
bottom: -80px;
|
right: 0;
|
}
|
}
|
}
|
.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: 100%;
|
display: flex;
|
justify-content: center;
|
|
.loginPanel {
|
width: 85%;
|
min-height: 56%;
|
padding: 80px 40px;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
align-items: flex-end;
|
background: #fff;
|
min-width: 450px;
|
border-radius: 15px;
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
.welcc {
|
font-size: 52px;
|
font-family: 'PingFang SC';
|
text-align: right;
|
font-weight: 900;
|
color: #485BD4;
|
letter-spacing: 6px;
|
white-space: nowrap;
|
position: relative;
|
z-index: 9999;
|
text-shadow: 0 3px 5px rgba(72,91,212,.4);
|
}
|
|
:deep(.loginGroup){
|
width: 100%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
|
.el-tabs__content{
|
display: flex;
|
justify-content: center;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
