<template>
|
<div class="login-container" :key="once">
|
<div class="topPanel"></div>
|
<div class="topPanelBg"></div>
|
<div class="topPanelCont">
|
<div class="topLogo">
|
<img src="../../assets/newMenu/toplogo.png" />
|
</div>
|
<div class="userInfo">
|
<div @click="onScreenfullClick" style="margin-right: 15px; cursor: pointer">
|
<i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
|
</div>
|
<div class="loginOut" @click="onLoginOut">退出登录</div>
|
<span></span>
|
<div class="avator">
|
<img src="../../assets/menu/admin.png" />
|
<div>{{userName}}</div>
|
</div>
|
</div>
|
</div>
|
<div class="leftCont"></div>
|
<div class="topCont">
|
<div class="topInfo">
|
<div class="topTit">新疆国泰新华<br />安全风险预警监测系统</div>
|
<div class="topTime">
|
<div class="time">
|
{{ time }}
|
</div>
|
<span></span>
|
<div class="today">
|
<div>{{ date }}</div>
|
<div>
|
<span>{{ weekDay }}</span
|
><span>{{ dayTime }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="line"></div>
|
</div>
|
<div class="menuGrid">
|
<div class="gridCont">
|
<div class="grid-content grid-content-1 cont-bg-1" v-throttle @click="toRiskPlatform">
|
<div class="toplayer">
|
<div>
|
<img class="iconImg" src="../../assets/newMenu/icon1.png" />
|
<div>
|
<div class="itemTit1">智能安全风险综合预警<br />预报平台</div>
|
<div class="enTit1">Intelligent Security Risk Comprehensive Forewarning and Forecasting Platform</div>
|
</div>
|
</div>
|
</div>
|
<img class="bgImg1" src="../../assets/newMenu/card-1.png" />
|
</div>
|
<div class="grid-content cont-bg-1" v-throttle @click="toDoublePrevent">
|
<div class="toplayer">
|
<img class="iconImg" src="../../assets/newMenu/icon2.png" />
|
<div>
|
<div class="itemTit">智能安全双重预防系统</div>
|
<div class="enTit">Intelligent Security Dual Prevention System</div>
|
</div>
|
</div>
|
<img class="bgImg" src="../../assets/newMenu/card-4.png" />
|
</div>
|
<div class="grid-content cont-bg-1" v-throttle @click="render('4')">
|
<div class="toplayer">
|
<img class="iconImg" src="../../assets/newMenu/icon3.png" />
|
<div>
|
<div class="itemTit">智能安全巡检系统</div>
|
<div class="enTit">Intelligent Security Patrol System</div>
|
</div>
|
</div>
|
<img class="bgImg" src="../../assets/newMenu/card-8.png" />
|
</div>
|
<div class="grid-content cont-bg-1" v-throttle @click="render('3')">
|
<div class="toplayer">
|
<img class="iconImg" src="../../assets/newMenu/icon4.png" />
|
<div>
|
<div class="itemTit">智能安全特殊作业系统</div>
|
<div class="enTit">Intelligent Security Special Operating System</div>
|
</div>
|
</div>
|
<img class="bgImg" src="../../assets/newMenu/card-7.png" />
|
</div>
|
<div class="grid-content cont-bg-1" v-throttle @click="toManLocation">
|
<div class="toplayer">
|
<img class="iconImg" src="../../assets/newMenu/icon12.png" />
|
<div>
|
<div class="itemTit">人员定位系统</div>
|
<div class="enTit">Personnel Positioning System</div>
|
</div>
|
</div>
|
<img class="bgImg" src="../../assets/newMenu/card-12.png" />
|
</div>
|
<div class="grid-content cont-bg-2" v-throttle @click="render('12')">
|
<div class="toplayer">
|
<img class="iconImg" src="../../assets/newMenu/icon14.png" />
|
<div>
|
<div class="itemTit">监管数据融合互通系统</div>
|
<div class="enTit">Regulatory Data Integration and Interoperability System</div>
|
</div>
|
</div>
|
<img class="bgImg" src="../../assets/newMenu/card-14.png" />
|
</div>
|
<div class="grid-content cont-bg-2" v-throttle @click="render('7')">
|
<div class="toplayer">
|
<img class="iconImg" src="../../assets/newMenu/icon5.png" />
|
<div>
|
<div class="itemTit">安全目标责任管理系统</div>
|
<div class="enTit">Security Target Responsibility Management System</div>
|
</div>
|
</div>
|
<img class="bgImg" src="../../assets/newMenu/card-2.png" />
|
</div>
|
<div class="grid-content cont-bg-2" v-throttle @click="render('10')">
|
<div class="toplayer">
|
<img class="iconImg" src="../../assets/newMenu/icon6.png" />
|
<div>
|
<div class="itemTit">安全知识图谱系统</div>
|
<div class="enTit">Security Knowledge Graph System</div>
|
</div>
|
</div>
|
<img class="bgImg" src="../../assets/newMenu/card-3.png" />
|
</div>
|
<div class="grid-content cont-bg-2" v-throttle @click="render('9')">
|
<div class="toplayer">
|
<img class="iconImg" src="../../assets/newMenu/icon7.png" />
|
<div>
|
<div class="itemTit">设备综合管控系统</div>
|
<div class="enTit">Equipment Integrated Management and Control System</div>
|
</div>
|
</div>
|
<img class="bgImg" src="../../assets/newMenu/card-9.png" />
|
</div>
|
<div class="grid-content cont-bg-2" v-throttle @click="render('6')">
|
<div class="toplayer">
|
<img class="iconImg" src="../../assets/newMenu/icon8.png" />
|
<div>
|
<div class="itemTit">应急管理系统</div>
|
<div class="enTit">Emergency Management System</div>
|
</div>
|
</div>
|
<img class="bgImg" src="../../assets/newMenu/card-5.png" />
|
</div>
|
<div class="grid-content cont-bg-2" v-throttle @click="renderToNew('11')">
|
<div class="toplayer">
|
<img class="iconImg" src="../../assets/newMenu/icon9.png" />
|
<div>
|
<div class="itemTit">智能安全危险化学品全生命周期管控系统</div>
|
<div class="enTit">Intelligent Security Hazardous Chemicals Life Cycle Safety Management System </div>
|
</div>
|
</div>
|
<img class="bgImg" src="../../assets/newMenu/card-10.png" />
|
</div>
|
<div class="grid-content cont-bg-2" v-throttle @click="render('8')">
|
<div class="toplayer">
|
<img class="iconImg" src="../../assets/newMenu/icon10.png" />
|
<div>
|
<div class="itemTit">安全事故管理系统</div>
|
<div class="enTit">Security Incident Management System</div>
|
</div>
|
</div>
|
<img class="bgImg" src="../../assets/newMenu/card-6.png" />
|
</div>
|
<div class="grid-content cont-bg-2" v-throttle @click="toSmartFactory">
|
<div class="toplayer">
|
<img class="iconImg" src="../../assets/newMenu/icon13.png" />
|
<div>
|
<div class="itemTit">智能工厂系统</div>
|
<div class="enTit">Intelligent Factory System</div>
|
</div>
|
</div>
|
<img class="bgImg" src="../../assets/newMenu/card-13.png" />
|
</div>
|
<div class="grid-content cont-bg-2" @click="render('1')">
|
<div class="toplayer">
|
<img class="iconImg" src="../../assets/newMenu/icon11.png" />
|
<div>
|
<div class="itemTit">安全基础信息系统</div>
|
<div class="enTit">Basic Security Information System</div>
|
</div>
|
</div>
|
<img class="bgImg" src="../../assets/newMenu/card-11.png" />
|
</div>
|
</div>
|
</div>
|
<div class="bot-rights">
|
<img src="../../assets/newMenu/pic_line1.png" />
|
<div>技术支持：苏州国科鸿宇智能科技有限公司</div>
|
<img src="../../assets/newMenu/pic_line2.png" />
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import {toRefs, reactive, computed, defineComponent, onMounted, onUnmounted} 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';
|
import { useRoutesList } from '/@/stores/routesList';
|
import pinia from '/@/stores';
|
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
|
import { ElMessage } from 'element-plus';
|
import { ElMessageBox } from 'element-plus/es';
|
import { useLoginApi } from '/@/api/login';
|
import { useI18n } from 'vue-i18n';
|
import screenfull from 'screenfull';
|
import router from '../../router';
|
import Cookies from 'js-cookie';
|
|
// 定义接口来定义对象的类型
|
interface LoginState {
|
tabsActiveName: string;
|
isScan: boolean;
|
count: number;
|
projectId: string;
|
once: number;
|
isScreenfull: boolean;
|
time: string;
|
date: string;
|
weekDay: string;
|
dayTime: string;
|
timer: null | any
|
}
|
|
export default defineComponent({
|
name: 'loginIndex',
|
components: {},
|
setup() {
|
const { t } = useI18n();
|
const router = useRouter();
|
const userInfo = useUserInfo();
|
const { userInfos } = storeToRefs(userInfo);
|
const routeToStore = useRoutesList(pinia);
|
const { routesList } = storeToRefs(routeToStore);
|
const storesThemeConfig = useThemeConfig();
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
// 时间格式化
|
const timeForm = {
|
hour12: false,
|
year: 'numeric',
|
month: '2-digit',
|
day: '2-digit',
|
hour: '2-digit',
|
minute: '2-digit',
|
second: '2-digit'
|
};
|
const state = reactive<LoginState>({
|
tabsActiveName: 'account',
|
isScan: false,
|
count: 0,
|
projectId: '1',
|
once: 0,
|
time: '',
|
date: '',
|
weekDay: '',
|
dayTime: '',
|
isScreenfull: false,
|
timer: null
|
});
|
|
const userName = computed(() =>{
|
return userInfos.value.userName
|
})
|
// 获取布局配置信息
|
const getThemeConfig = computed(() => {
|
return themeConfig.value;
|
});
|
|
// 当前时间
|
const getDateTime = () => {
|
const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
|
state.time = curTime.slice(10, 16);
|
state.date = curTime.slice(0, 10);
|
let week = ['日', '一', '二', '三', '四', '五', '六'];
|
let day = new Date().getDay();
|
state.weekDay = '星期' + week[day];
|
let curHour = Number(curTime.slice(10, 13));
|
if (curHour >= 5 && curHour <= 10) {
|
state.dayTime = '上午';
|
}
|
if (curHour > 10 && curHour <= 12) {
|
state.dayTime = '中午';
|
}
|
if (curHour > 12 && curHour <= 18) {
|
state.dayTime = '下午';
|
}
|
if (curHour > 18 && curHour <= 22) {
|
state.dayTime = '晚上';
|
}
|
if (curHour > 22) {
|
state.dayTime = '午夜';
|
}
|
};
|
// 下拉菜单点击时
|
const onLoginOut = () => {
|
ElMessageBox({
|
closeOnClickModal: false,
|
closeOnPressEscape: false,
|
title: t('message.user.logOutTitle'),
|
message: t('message.user.logOutMessage'),
|
showCancelButton: true,
|
confirmButtonText: t('message.user.logOutConfirm'),
|
cancelButtonText: t('message.user.logOutCancel'),
|
buttonSize: 'default',
|
beforeClose: (action, instance, done) => {
|
if (action === 'confirm') {
|
instance.confirmButtonLoading = true;
|
instance.confirmButtonText = t('message.user.logOutExit');
|
setTimeout(() => {
|
done();
|
setTimeout(() => {
|
instance.confirmButtonLoading = false;
|
}, 300);
|
}, 700);
|
} else {
|
done();
|
}
|
}
|
})
|
.then(async () => {
|
let res = await useLoginApi().signOut();
|
if (res.data.code === '200') {
|
Session.clear(); // 清除缓存/token等
|
// 使用 reload 时，不需要调用 resetRoute() 重置路由
|
window.location.reload();
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
})
|
.catch(() => {});
|
};
|
//选择菜单
|
const render = (value: string) => {
|
state.projectId = value;
|
renderMenu();
|
};
|
|
// 全屏点击时
|
const onScreenfullClick = () => {
|
if (!screenfull.isEnabled) {
|
ElMessage.warning('暂不不支持全屏');
|
return false;
|
}
|
screenfull.toggle();
|
screenfull.on('change', () => {
|
if (screenfull.isFullscreen) state.isScreenfull = true;
|
else state.isScreenfull = false;
|
});
|
};
|
// 去风险大屏
|
const toRiskPlatform = () => {
|
// router.push({
|
// name: "warningScreen"
|
// });
|
window.open('http://39.104.85.193:8585/');
|
};
|
|
const toDoublePrevent = () => {
|
window.open('http://121.239.169.27:6801');
|
};
|
const toSmartFactory = () =>{
|
window.open('http://10.211.134.139:5522/#/login');
|
}
|
const toManLocation = () =>{
|
window.open('http://124.88.37.66:8081/location_system_5.4.9/login/login.html?company=GUOTAI&version=5.4.9');
|
}
|
const throttle = (renderMenu: any, delay: number) => {
|
let flag = true;
|
let count = 0;
|
return function () {
|
if (!flag) return;
|
flag = false;
|
if (count === 0) {
|
renderMenu.apply();
|
count++;
|
flag = true;
|
} else {
|
setTimeout(() => {
|
renderMenu.apply();
|
flag = true;
|
}, delay);
|
}
|
};
|
};
|
|
//调用菜单方法
|
const renderMenu = throttle(() => {
|
// debugger
|
renderFun();
|
}, 2000);
|
|
//调后台菜单接口
|
const renderFun = async () => {
|
Cookies.set('projectId', state.projectId);
|
userInfos.value.projectId = state.projectId;
|
await initBackEndControlRoutes().then(() => {
|
let linkToMenu = [...routesList.value];
|
if (linkToMenu && linkToMenu.length > 1) {
|
router.push(linkToFirstMenu(JSON.parse(JSON.stringify(linkToMenu))[1]));
|
} else {
|
ElMessage({ type: 'warning', message: '你没有该子系统的权限' });
|
}
|
});
|
};
|
|
const linkToFirstMenu: any = (value: any) => {
|
let returnMenu = value;
|
if (returnMenu.children?.length > 0) {
|
return linkToFirstMenu(returnMenu.children[0]);
|
} else {
|
return returnMenu.path;
|
}
|
};
|
|
const renderToNew = () => {
|
window.open('http://222.92.213.22:18001/smartlab/', '_blank');
|
};
|
// //点击进入特殊作业
|
// const toSpecialWorkSys = () => {
|
// router.push('/layoutPage');
|
// };
|
// 页面加载时
|
onMounted(() => {
|
state.once += 1;
|
NextLoading.done();
|
getDateTime();
|
state.timer = setInterval(() => {
|
getDateTime();
|
}, 30000);
|
// loginBg();
|
// loginApp()
|
})
|
|
onUnmounted(() => {
|
clearInterval(state.timer)
|
});
|
|
return {
|
render,
|
userName,
|
logoMini,
|
onLoginOut,
|
getDateTime,
|
renderToNew,
|
toRiskPlatform,
|
toDoublePrevent,
|
toSmartFactory,
|
toManLocation,
|
onScreenfullClick,
|
loginIconTwo,
|
getThemeConfig,
|
...toRefs(state)
|
};
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
@keyframes showDown {
|
100% {
|
position: absolute;
|
top: 60px;
|
}
|
}
|
@keyframes moveDown {
|
100% {
|
position: absolute;
|
top: 0;
|
}
|
}
|
@keyframes moveRight {
|
100% {
|
position: absolute;
|
left: 0;
|
}
|
}
|
@keyframes upDown {
|
50% {
|
-webkit-transform: translateY(-8px);
|
-ms-transform: translateY(-8px);
|
-o-transform: translateY(-8px);
|
transform: translateY(-8px);
|
}
|
100% {
|
-webkit-transform: translateY(0);
|
-ms-transform: translateY(0);
|
-o-transform: translateY(0);
|
transform: translateY(0);
|
}
|
}
|
@media screen and (min-width: 1600px) {
|
.gridCont {
|
width: 100%;
|
display: grid;
|
grid-gap: 20px;
|
grid-template-columns: repeat(3, 1fr);
|
grid-template-rows: repeat(5, 200px);
|
grid-auto-flow: row;
|
justify-content: center;
|
.toplayer {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
left: 0;
|
top: 0;
|
display: flex;
|
align-items: center;
|
padding: 0 20px;
|
z-index: 99;
|
|
.itemTit {
|
font-size: 28px;
|
line-height: 34px;
|
margin-bottom: 2px;
|
height: 40%;
|
color: #072270;
|
}
|
.enTit {
|
font-size: 16px;
|
line-height: 20px;
|
color: #072270;
|
}
|
|
.iconImg {
|
width: 88px;
|
height: 88px;
|
margin-right: 20px;
|
}
|
}
|
.bgImg {
|
position: absolute;
|
width: 30%;
|
height: auto;
|
right: -10px;
|
top: 15px;
|
}
|
}
|
|
.grid-content-1 {
|
grid-row-start: 1;
|
grid-row-end: 3;
|
|
.toplayer {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
left: 0;
|
top: 0;
|
display: flex;
|
align-items: center;
|
z-index: 99;
|
|
& > div {
|
display: flex;
|
align-items: flex-start;
|
}
|
|
.itemTit1 {
|
font-size: 32px;
|
line-height: 42px;
|
height: 40%;
|
letter-spacing: 1px;
|
color: #072270;
|
margin-bottom: 12px;
|
}
|
.enTit1 {
|
font-size: 18px;
|
line-height: 24px;
|
color: #072270;
|
}
|
}
|
.bgImg1 {
|
position: absolute;
|
width: 45%;
|
height: auto;
|
right: -20px;
|
top: 30%;
|
}
|
}
|
|
.bot-rights {
|
font-size: 18px;
|
color: #333;
|
}
|
}
|
|
@media screen and (min-width: 1200px) and (max-width: 1600px) {
|
.gridCont {
|
width: 100%;
|
display: grid;
|
grid-gap: 15px;
|
grid-template-columns: repeat(3, 1fr);
|
grid-template-rows: repeat(5, 120px);
|
grid-auto-flow: row;
|
justify-content: center;
|
|
.toplayer {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
left: 0;
|
top: 0;
|
display: flex;
|
align-items: center;
|
padding: 0 20px;
|
z-index: 99;
|
|
.itemTit {
|
font-size: 22px;
|
line-height: 30px;
|
height: 40%;
|
color: #072270;
|
margin-bottom: 2px;
|
}
|
.enTit {
|
font-size: 12px;
|
color: #072270;
|
}
|
|
.iconImg {
|
width: 44px;
|
height: 44px;
|
margin-right: 10px;
|
}
|
}
|
.bgImg {
|
position: absolute;
|
width: 30%;
|
height: auto;
|
right: -10px;
|
top: 15px;
|
}
|
}
|
|
.grid-content-1 {
|
grid-row-start: 1;
|
grid-row-end: 3;
|
|
.toplayer {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
left: 0;
|
top: 0;
|
display: flex;
|
align-items: center;
|
z-index: 99;
|
|
& > div {
|
display: flex;
|
align-items: flex-start;
|
}
|
|
.itemTit1 {
|
font-size: 24px;
|
line-height: 36px;
|
height: 40%;
|
letter-spacing: 1px;
|
color: #072270;
|
margin-bottom: 12px;
|
}
|
.enTit1 {
|
font-size: 14px;
|
color: #072270;
|
}
|
}
|
.bgImg1 {
|
position: absolute;
|
width: 45%;
|
height: auto;
|
right: -20px;
|
top: 30%;
|
}
|
}
|
.bot-rights {
|
font-size: 15px;
|
color: #333;
|
}
|
}
|
@media screen and (max-width: 1200px) {
|
.gridCont {
|
width: 100%;
|
display: grid;
|
grid-gap: 10px;
|
grid-template-columns: repeat(3, 1fr);
|
grid-template-rows: repeat(5, 96px);
|
grid-auto-flow: row;
|
justify-content: center;
|
|
.toplayer {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
left: 0;
|
top: 0;
|
display: flex;
|
align-items: center;
|
padding: 0 15px;
|
z-index: 99;
|
|
.itemTit {
|
font-size: 14px;
|
line-height: 22px;
|
color: #072270;
|
}
|
.enTit {
|
font-size: 10px;
|
line-height: 14px;
|
color: #072270;
|
}
|
|
.iconImg {
|
width: 32px;
|
height: 32px;
|
margin-right: 10px;
|
}
|
}
|
.bgImg {
|
position: absolute;
|
width: 45%;
|
height: auto;
|
right: -10px;
|
top: 15px;
|
}
|
}
|
|
.grid-content-1 {
|
grid-row-start: 1;
|
grid-row-end: 3;
|
|
.toplayer {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
left: 0;
|
top: 0;
|
display: flex;
|
align-items: center;
|
z-index: 99;
|
|
& > div {
|
display: flex;
|
align-items: flex-start;
|
}
|
|
.itemTit1 {
|
font-size: 16px;
|
line-height: 36px;
|
height: 40%;
|
letter-spacing: 1px;
|
color: #072270;
|
margin-bottom: 12px;
|
}
|
.enTit1 {
|
font-size: 12px;
|
color: #072270;
|
}
|
}
|
.bgImg1 {
|
position: absolute;
|
width: 45%;
|
height: auto;
|
right: -20px;
|
top: 30%;
|
}
|
}
|
.bot-rights {
|
font-size: 12px;
|
color: #333;
|
}
|
}
|
.login-container {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
background: #fff;
|
.topPanel {
|
width: 100%;
|
height: 260px;
|
background: url('../../assets/newMenu/topbg.jpg') no-repeat center;
|
background-size: 100% 100%;
|
display: flex;
|
justify-content: center;
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
}
|
.topPanelBg {
|
position: absolute;
|
width: 100%;
|
height: 60px;
|
top: -60px;
|
left: 0;
|
background: rgba(255, 255, 255, 0.8);
|
z-index: 9;
|
animation: moveDown 0.6s 1 ease forwards;
|
}
|
.topPanelCont {
|
position: absolute;
|
width: 100%;
|
height: 60px;
|
padding: 0 50px;
|
top: -60px;
|
left: 0;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
z-index: 999;
|
animation: moveDown 0.6s 1 ease forwards;
|
|
.topLogo {
|
display: flex;
|
align-items: center;
|
|
img {
|
width: 146px;
|
height: auto;
|
}
|
}
|
|
.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;
|
}
|
}
|
}
|
}
|
.leftCont {
|
position: absolute;
|
left: -100px;
|
top: 0;
|
width: 220px;
|
height: 100%;
|
z-index: 99;
|
background: url('../../assets/newMenu/leftbg.png') no-repeat center;
|
background-size: 100% 100%;
|
animation: moveRight .8s 1 ease forwards;
|
}
|
.topCont {
|
position: absolute;
|
width: 100%;
|
height: 200px;
|
left: 0;
|
top: 30px;
|
padding: 0 40px 0 120px;
|
z-index: 99999;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: flex-start;
|
animation: showDown 0.6s 1 ease forwards;
|
|
.topInfo {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 10px;
|
|
.topTit {
|
font-size: 44px;
|
font-weight: bolder;
|
text-align: left;
|
color: #fff;
|
text-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
|
}
|
|
.topTime {
|
padding: 15px 10px;
|
box-sizing: border-box;
|
background: rgba(6, 64, 195, 0.8);
|
border-radius: 8px;
|
color: #fff;
|
font-family: 'PingFang SC';
|
font-weight: 600;
|
font-size: 16px;
|
display: flex;
|
align-items: center;
|
|
.time {
|
font-size: 48px;
|
}
|
& > span {
|
width: 1px;
|
height: 40px;
|
margin: 0 15px;
|
background: #fff;
|
}
|
.today {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-start;
|
|
span {
|
font-size: 14px;
|
}
|
|
span:first-of-type {
|
margin-right: 10px;
|
}
|
}
|
}
|
}
|
.line {
|
width: 120px;
|
height: 6px;
|
background: #00eeff;
|
}
|
}
|
.menuGrid {
|
width: calc(100vw - 220px);
|
height: calc(100vh - 320px);
|
padding: 20px 20px 0;
|
position: absolute;
|
top: 260px;
|
left: 220px;
|
overflow: hidden;
|
overflow-y: scroll;
|
.gridCont {
|
.grid-content {
|
border-radius: 16px;
|
position: relative;
|
overflow: hidden;
|
cursor: pointer;
|
transition: 0.3s;
|
border: 2px solid rgba(255,255,255,0);
|
|
&:hover {
|
border-radius: 16px;
|
background-image: radial-gradient(ellipse farthest-side at 50% 100%, #48a3ff 0%, #fff 120%);
|
box-shadow: -8px -8px 24px rgba(20, 97, 234, 0.2), 8px 8px 24px rgba(20, 97, 234, 0.2);
|
border: 2px solid #fff;
|
|
.iconImg{
|
animation: upDown 0.3s 1 ease-in-out forwards;
|
filter: drop-shadow(0 0 12px rgba(20, 97, 234, 0.4));
|
}
|
}
|
}
|
.cont-bg-1 {
|
background: #d9eaff;
|
}
|
.cont-bg-2 {
|
background: #cdd6ff;
|
}
|
|
/*.grid-content-2{*/
|
/* background-image: linear-gradient(135deg,#0098F5,#1461EA);*/
|
/*}*/
|
|
/*.grid-content-3{*/
|
/* background-image: linear-gradient(135deg,#006DF5,#1450EA);*/
|
/*}*/
|
}
|
}
|
.bot-rights {
|
width: calc(100vw - 240px);
|
height: 60px;
|
position: absolute;
|
bottom: 0;
|
left: 240px;
|
z-index: 9999;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
img {
|
width: 248px;
|
height: 8px;
|
}
|
div {
|
margin: 0 20px;
|
}
|
}
|
}
|
</style>
|
