<template>
|
<div class="login-container">
|
<div class="topPanel">
|
<div class="topPanelCont">
|
<div class="topTit">
|
<div>新疆国泰新华</div>
|
<span></span>
|
<div>安全风险预警监测系统</div>
|
</div>
|
<div class="userInfo">
|
<div class="avator">
|
<img src="../../assets/menu/admin.png">
|
<div>admin</div>
|
</div>
|
<span></span>
|
<div class="loginOut" @click="onLoginOut">退出登录</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="menuGrid">
|
<div class="gridCont">
|
<el-row :gutter="20">
|
<el-col :span="6"><div class="grid-content" @click="renderMenu('2')"><div class="itemTit">双重预防系统</div><img class="iconImg" src="../../assets/menu/icon4.png"><img class="bgImg" src="../../assets/menu/card4.png"></div></el-col>
|
<el-col :span="6"><div class="grid-content" @click="renderMenu('3')"><div class="itemTit">特殊作业系统</div><img class="iconImg" src="../../assets/menu/icon7.png"><img class="bgImg" src="../../assets/menu/card7.png"></div></el-col>
|
<el-col :span="6"><div class="grid-content" @click="renderMenu('4')"><div class="itemTit">智能巡检系统</div><img class="iconImg" src="../../assets/menu/icon8.png"><img class="bgImg" src="../../assets/menu/card8.png"></div></el-col>
|
<el-col :span="6">
|
<div class="grid-content" @click="renderMenu('5')">
|
<div class="itemTit">安全风险综合
|
<br>预警预报平台
|
</div>
|
<img class="iconImg" src="../../assets/menu/icon1.png">
|
<img class="bgImg" src="../../assets/menu/card1.png">
|
</div>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="6"><div class="grid-content grid-content-2" @click="renderMenu('6')"><div class="itemTit">应急管理系统</div><img class="iconImg" src="../../assets/menu/icon5.png"><img class="bgImg" src="../../assets/menu/card5.png"></div></el-col>
|
<el-col :span="6"><div class="grid-content grid-content-2" @click="renderMenu('7')"><div class="itemTit">目标责任管理系统</div><img class="iconImg" src="../../assets/menu/icon2.png"><img class="bgImg" src="../../assets/menu/card2.png"></div></el-col>
|
<el-col :span="6"><div class="grid-content grid-content-2" @click="renderMenu('8')"><div class="itemTit">事故管理系统</div><img class="iconImg" src="../../assets/menu/icon6.png"><img class="bgImg" src="../../assets/menu/card6.png"></div></el-col>
|
<el-col :span="6"><div class="grid-content grid-content-2" @click="renderMenu('9')"><div class="itemTit">设备综合管控系统</div><img class="iconImg" src="../../assets/menu/icon9.png"><img class="bgImg" src="../../assets/menu/card9.png"></div></el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="6"><div class="grid-content grid-content-3" @click="renderMenu('10')"><div class="itemTit">安全知识图谱系统</div><img class="iconImg" src="../../assets/menu/icon3.png"><img class="bgImg" src="../../assets/menu/card3.png"></div></el-col>
|
<el-col :span="9"><div class="grid-content grid-content-3" @click="renderMenu('11')"><div class="itemTit">危险化学品全生命周期安全<br>管理系统</div><img class="iconImg" src="../../assets/menu/icon10.png"><img class="bgImg" src="../../assets/menu/card10.png"></div></el-col>
|
<el-col :span="9"><div class="grid-content grid-content-3" @click="renderMenu('1')"><div class="itemTit">基础数据权限管理系统</div><img class="iconImg" src="../../assets/menu/icon11.png"><img class="bgImg" src="../../assets/menu/card11.png"></div></el-col>
|
</el-row>
|
</div>
|
</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 {Session} from "/@/utils/storage";
|
import {useRoute, useRouter} from "vue-router";
|
import {initBackEndControlRoutes} from "/@/router/backEnd";
|
import {useUserInfo} from "/@/stores/userInfo";
|
|
// 定义接口来定义对象的类型
|
interface LoginState {
|
tabsActiveName: string;
|
isScan: boolean;
|
}
|
|
export default defineComponent({
|
name: 'loginIndex',
|
components: {},
|
setup() {
|
const route = useRoute();
|
const router = useRouter();
|
const userInfo = useUserInfo()
|
const { userInfos } = storeToRefs(userInfo);
|
const storesThemeConfig = useThemeConfig();
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
const state = reactive<LoginState>({
|
tabsActiveName: 'account',
|
isScan: false,
|
});
|
// 获取布局配置信息
|
const getThemeConfig = computed(() => {
|
return themeConfig.value;
|
});
|
// 下拉菜单点击时
|
const onLoginOut = () => {
|
console.log('退出登录')
|
};
|
const renderMenu = async (value: string) => {
|
Session.set('projectId',value)
|
userInfos.value.projectId = value
|
await initBackEndControlRoutes();
|
router.push('/home')
|
};
|
// 页面加载时
|
onMounted(() => {
|
NextLoading.done();
|
// loginBg();
|
// loginApp()
|
});
|
return {
|
logoMini,
|
loginIconTwo,
|
getThemeConfig,
|
renderMenu,
|
...toRefs(state),
|
};
|
},
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.login-container {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
background: url("../../assets/menu/bg_home1.jpg") no-repeat center;
|
.topPanel{
|
position: absolute;
|
width: 100%;
|
top: -100px;
|
left: 0;
|
height:100px;
|
background: #fff;
|
display: flex;
|
justify-content: center;
|
box-shadow: 0 8px 32px rgba(0,0,0,.1);
|
animation: showDown .6s 1 ease forwards;
|
|
@keyframes showDown {
|
100%{
|
position: absolute;
|
top: 0;
|
}
|
}
|
.topPanelCont{
|
width: 1200px;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.topTit{
|
font-size: 24px;
|
font-weight: bold;
|
display: flex;
|
align-items: center;
|
color: #333;
|
line-height: 28px;
|
|
&>div:last-of-type{
|
color: #006DF5;
|
}
|
|
span{
|
width: 1px;
|
height: 28px;
|
background: #999;
|
margin: 0 15px;
|
}
|
}
|
|
.userInfo{
|
display: flex;
|
align-items: center;
|
|
.avator{
|
display: flex;
|
justify-content: right;
|
|
img{
|
width: 20px;
|
height: 20px;
|
border-radius: 10px;
|
}
|
div{
|
font-size: 15px;
|
color: #333333;
|
line-height: 20px;
|
margin-left: 6px;
|
}
|
}
|
span{
|
width: 1px;
|
height: 20px;
|
background: #999;
|
margin: 0 15px;
|
}
|
.loginOut{
|
font-size: 15px;
|
color: #333;
|
line-height: 20px;
|
cursor: pointer;
|
|
&:hover{
|
color: #006DF5;
|
}
|
}
|
}
|
}
|
}
|
|
.menuGrid{
|
width: 100%;
|
position: absolute;
|
top: 150px;
|
display: flex;
|
justify-content: center;
|
.gridCont{
|
width: 1200px;
|
.el-row {
|
margin-bottom: 20px;
|
}
|
.el-row:last-child {
|
margin-bottom: 0;
|
}
|
.el-col {
|
border-radius: 8px;
|
}
|
|
.grid-content {
|
border-radius: 10px;
|
height: 234px;
|
padding: 32px;
|
position: relative;
|
background-image: linear-gradient(135deg,#00C0F5,#44b1ff);
|
overflow: hidden;
|
cursor: pointer;
|
transition: .3s;
|
border: none;
|
|
&:hover{
|
box-shadow: 0 8px 32px rgba(20,97,234,.4);
|
}
|
|
.itemTit{
|
font-size: 24px;
|
line-height: 36px;
|
height: 40%;
|
font-family: "PingFang SC";
|
font-weight: lighter;
|
color: #fff;
|
margin-bottom: 25px;
|
}
|
.iconImg{
|
width: 80px;
|
height: 80px;
|
}
|
|
.bgImg{
|
position: absolute;
|
right: 0;
|
bottom: 0;
|
}
|
}
|
|
/*.grid-content-2{*/
|
/* background-image: linear-gradient(135deg,#0098F5,#1461EA);*/
|
/*}*/
|
|
/*.grid-content-3{*/
|
/* background-image: linear-gradient(135deg,#006DF5,#1450EA);*/
|
/*}*/
|
}
|
|
}
|
}
|
</style>
|