From 1b9fea7d4af68d8f933b2dc42bf6084b9646f64c Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期二, 04 三月 2025 08:39:55 +0800
Subject: [PATCH] 修改作业等级名称
---
src/views/newHome/index.vue | 1960 ++++++++++++++++++++++++++++++-----------------------------
1 files changed, 1,002 insertions(+), 958 deletions(-)
diff --git a/src/views/newHome/index.vue b/src/views/newHome/index.vue
index 4382f35..0acc77e 100644
--- a/src/views/newHome/index.vue
+++ b/src/views/newHome/index.vue
@@ -1,1023 +1,1067 @@
<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 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" />-->
+ <span style="font-size: 18px;color: #fff">智能安全数字化平台</span>
+ </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="leftCont"></div>
- <div class="topCont">
- <div class="topInfo">
- <div class="topTit">智能安全数字化平台</div>
- <div class="topTime">
- <div class="time">
- {{ time }}
- </div>
- <span></span>
- <div class="today">
- <div>{{ date }}</div>
- <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">智能安全数字化平台</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>
- <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 class="itemTit">安全教育考试系统</div>-->
-<!-- <div class="enTit">Safety Education Examination 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>
+ <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 class="itemTit">安全教育考试系统</div>-->
+ <!-- <div class="enTit">Safety Education Examination 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-1" @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 {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 {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 {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
+ 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
- });
+ 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 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 = async() => {
- // router.push({
- // name: "warningScreen"
- // });
- const routePath = '/warningScreen';
- const resolvedRoute = router.resolve(routePath);
- const fullPath = resolvedRoute.href
- window.open(fullPath, '_blank');
-
- // window.open('http://39.104.85.193:8585/');
- };
-
- const toDoublePrevent = () => {
- window.open('http://8.137.115.153:6801/login');
- };
- const toSmartFactory = () =>{
- window.open('http://117.190.40.54:5522/#/login');
+ // 当前时间
+ 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();
+ }
}
- const toManLocation = () =>{
- window.open('http://117.190.40.54: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 > 0) {
- router.push(linkToFirstMenu(JSON.parse(JSON.stringify(linkToMenu))[0]));
- } else {
- ElMessage({ type: 'warning', message: '你没有该子系统的权限' });
- }
- });
- };
-
- const linkToFirstMenu: any = (value: any) => {
- let returnMenu = value;
- if (returnMenu.children?.length > 0) {
- return linkToFirstMenu(returnMenu.children[0]);
+ })
+ .then(async () => {
+ let res = await useLoginApi().signOut();
+ if (res.data.code === '200') {
+ Session.clear(); // 清除缓存/token等
+ // 使用 reload 时，不需要调用 resetRoute() 重置路由
+ window.location.reload();
} else {
- return returnMenu.path;
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
}
- };
+ })
+ .catch(() => {
+ });
+ };
+ //选择菜单
+ const render = (value: string) => {
+ state.projectId = value;
+ renderMenu();
+ };
- const renderToNew = () => {
- // window.open('http://222.92.213.22:18001/smartlab/', '_blank');
- window.open('http://47.108.222.15:8000/', '_blank');
- };
- // //点击进入特殊作业
- // const toSpecialWorkSys = () => {
- // router.push('/layoutPage');
- // };
- // 页面加载时
- onMounted(() => {
- state.once += 1;
- NextLoading.done();
- getDateTime();
- state.timer = setInterval(() => {
- getDateTime();
- }, 30000);
- // loginBg();
- // loginApp()
- })
-
- onUnmounted(() => {
- clearInterval(state.timer)
+ // 全屏点击时
+ 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 = async () => {
+ // router.push({
+ // name: "warningScreen"
+ // });
+ const routePath = '/warningScreen';
+ const resolvedRoute = router.resolve(routePath);
+ const fullPath = resolvedRoute.href
+ window.open(fullPath, '_blank');
- return {
- render,
- userName,
- logoMini,
- onLoginOut,
- getDateTime,
- renderToNew,
- toRiskPlatform,
- toDoublePrevent,
- toSmartFactory,
- toManLocation,
- onScreenfullClick,
- loginIconTwo,
- getThemeConfig,
- ...toRefs(state)
- };
+ // window.open('http://39.104.85.193:8585/');
+ };
+
+ const toDoublePrevent = () => {
+ window.open('http://8.137.115.153:6801/login');
+ };
+ const toSmartFactory = () => {
+ window.open('http://117.190.40.54:5522/#/login');
}
+ const toManLocation = () => {
+ window.open('http://117.190.40.54: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 > 0) {
+ router.push(linkToFirstMenu(JSON.parse(JSON.stringify(linkToMenu))[0]));
+ } 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');
+ window.open('http://47.108.222.15:8000/', '_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);
- }
- }
+@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;
+ .gridCont {
+ width: 100%;
+ display: grid;
+ grid-gap: 20px;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: repeat(5, 200px);
+ grid-auto-flow: row;
+ justify-content: center;
- .itemTit {
- font-size: 28px;
- line-height: 34px;
- margin-bottom: 2px;
- height: 40%;
- color: #072270;
- }
- .enTit {
- font-size: 16px;
- line-height: 20px;
- color: #072270;
- }
+ .toplayer {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ z-index: 99;
- .iconImg {
- width: 88px;
- height: 88px;
- margin-right: 20px;
- }
- }
- .bgImg {
- position: absolute;
- width: 30%;
- height: auto;
- right: -10px;
- top: 15px;
- }
+ .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;
+ }
}
- .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%;
- }
+ .bgImg {
+ position: absolute;
+ width: 30%;
+ height: auto;
+ right: -10px;
+ top: 15px;
}
+ }
- .bot-rights {
+ .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;
- color: #333;
+ 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 {
+ .gridCont {
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: grid;
+ grid-gap: 15px;
+ grid-template-columns: repeat(2, 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;
- 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;
+ .itemTit1 {
+ font-size: 24px;
+ line-height: 36px;
+ height: 40%;
+ letter-spacing: 1px;
+ color: #072270;
+ margin-bottom: 12px;
+ }
- .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;
- }
+ .enTit1 {
+ font-size: 14px;
+ color: #072270;
+ }
}
- .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);*/
- /*}*/
- }
+ .bgImg1 {
+ position: absolute;
+ width: 45%;
+ height: auto;
+ right: -20px;
+ top: 30%;
}
- .bot-rights {
- width: calc(100vw - 240px);
- height: 60px;
- position: absolute;
- bottom: 0;
- left: 240px;
- z-index: 9999;
+ }
+ .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(2, 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: center;
- justify-content: center;
+ 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 0 0;
+ 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;
+ width: 220px;
+
+
+ img {
+ width: 146px;
+ height: auto;
+ }
+
+ span {
+ width: 100%;
+ text-align: center;
+ }
+ }
+
+ .userInfo {
+ display: flex;
+ align-items: center;
+
+ .avator {
+ display: flex;
+ justify-content: right;
img {
- width: 248px;
- height: 8px;
+ width: 20px;
+ height: 20px;
+ border-radius: 10px;
}
+
div {
- margin: 0 20px;
+ 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;
+
+ .gridCont {
+ .grid-content {
+ border-radius: 8px;
+ 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>
--
Gitblit v1.9.2