From 52cdea9a329e0835fc30ef8c3ebb7263658cf38d Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期六, 20 八月 2022 10:12:05 +0800
Subject: [PATCH] lct
---
src/views/newHome/index.vue | 687 ++++++++++++++++++++++++++++----------------------------
1 files changed, 346 insertions(+), 341 deletions(-)
diff --git a/src/views/newHome/index.vue b/src/views/newHome/index.vue
index 7b6633b..17d40d9 100644
--- a/src/views/newHome/index.vue
+++ b/src/views/newHome/index.vue
@@ -1,17 +1,13 @@
<template>
<div class="login-container" :key="once">
- <div class="topPanel">
-
- </div>
- <div class="topPanelBg">
-
- </div>
+ <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">
+ <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>
@@ -22,39 +18,36 @@
</div>
</div>
</div>
- <div class="leftCont">
-
- </div>
+ <div class="leftCont"></div>
<div class="topCont">
<div class="topInfo">
- <div class="topTit">
- 新疆国泰新华<br/>安全风险预警监测系统
- </div>
+ <div class="topTit">新疆国泰新华<br />安全风险预警监测系统</div>
<div class="topTime">
<div class="time">
- {{time}}
+ {{ time }}
</div>
<span></span>
<div class="today">
- <div>{{date}}</div>
- <div><span>{{weekDay}}</span><span>{{dayTime}}</span></div>
+ <div>{{ date }}</div>
+ <div>
+ <span>{{ weekDay }}</span
+ ><span>{{ dayTime }}</span>
+ </div>
</div>
</div>
</div>
- <div class="line">
-
- </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">Security risk comprehensive early warning and forecast platform</div>
- </div>
+ <img class="iconImg" src="../../assets/newMenu/icon1.png" />
+ <div>
+ <div class="itemTit1">安全风险综合预警<br />预报平台</div>
+ <div class="enTit1">Security risk comprehensive early warning and forecast platform</div>
+ </div>
</div>
</div>
<img class="bgImg1" src="../../assets/newMenu/card-1.png" />
@@ -129,7 +122,7 @@
</div>
<img class="bgImg" src="../../assets/newMenu/card-5.png" />
</div>
- <div class="grid-content cont-bg-2" v-throttle @click="render('11')">
+ <div class="grid-content cont-bg-2" v-throttle @click="renderToNew('11')">
<div class="toplayer">
<img class="iconImg" src="../../assets/newMenu/icon9.png" />
<div>
@@ -162,9 +155,9 @@
</div>
</div>
<div class="bot-rights">
- <img src="../../assets/newMenu/pic_line1.png">
+ <img src="../../assets/newMenu/pic_line1.png" />
<div>技术支持：苏州国科鸿宇智能科技有限公司</div>
- <img src="../../assets/newMenu/pic_line2.png">
+ <img src="../../assets/newMenu/pic_line2.png" />
</div>
</div>
</template>
@@ -188,8 +181,8 @@
import { useLoginApi } from '/@/api/login';
import { useI18n } from 'vue-i18n';
import screenfull from 'screenfull';
-import router from '../../router'
-import Cookies from 'js-cookie'
+import router from '../../router';
+import Cookies from 'js-cookie';
// 定义接口来定义对象的类型
interface LoginState {
@@ -199,10 +192,10 @@
projectId: string;
once: number;
isScreenfull: boolean;
- time:string;
- date:string;
- weekDay:string;
- dayTime:string
+ time: string;
+ date: string;
+ weekDay: string;
+ dayTime: string;
}
export default defineComponent({
@@ -226,7 +219,7 @@
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
- }
+ };
const state = reactive<LoginState>({
tabsActiveName: 'account',
isScan: false,
@@ -245,20 +238,30 @@
});
// 当前时间
- 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 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({
@@ -319,12 +322,12 @@
});
};
// 去风险大屏
- const toRiskPlatform = ()=>{
+ const toRiskPlatform = () => {
// router.push({
// name: "bigDataScreen"
// });
- window.open('http://39.104.85.193:8585/')
- }
+ window.open('http://39.104.85.193:8585/');
+ };
const throttle = (renderMenu: any, delay: number) => {
let flag = true;
let count = 0;
@@ -371,6 +374,10 @@
return returnMenu.path;
}
};
+
+ const renderToNew = () => {
+ window.open('http://222.92.213.22:18001/smartlab/', '_blank');
+ };
// //点击进入特殊作业
// const toSpecialWorkSys = () => {
// router.push('/layoutPage');
@@ -378,10 +385,11 @@
// 页面加载时
onMounted(() => {
state.once += 1;
- NextLoading.done()
- setInterval(()=>{
- getDateTime()
- },1000)
+ NextLoading.done();
+ getDateTime();
+ setInterval(() => {
+ getDateTime();
+ }, 1000);
// loginBg();
// loginApp()
});
@@ -390,6 +398,7 @@
logoMini,
onLoginOut,
getDateTime,
+ renderToNew,
toRiskPlatform,
onScreenfullClick,
loginIconTwo,
@@ -401,288 +410,286 @@
</script>
<style scoped lang="scss">
- @media screen and (min-width: 1400px) {
- .gridCont {
+@media screen and (min-width: 1400px) {
+ .gridCont {
+ width: 100%;
+ height: 100%;
+ display: grid;
+ grid-gap: 20px;
+ grid-template-columns: repeat(3, 1fr);
+ grid-auto-flow: row;
+ justify-content: center;
+ .toplayer {
width: 100%;
height: 100%;
- display: grid;
- grid-gap: 20px;
- grid-template-columns: repeat(3, 1fr);
- 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;
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ z-index: 99;
- .itemTit {
- font-size: 28px;
- line-height: 34px;
- height: 40%;
- color: #072270;
- }
- .enTit{
- font-size: 18px;
- line-height: 20px;
- color: #072270;
- }
-
- .iconImg {
- width: 88px;
- height: 88px;
- margin-right: 20px;
- }
+ .itemTit {
+ font-size: 28px;
+ line-height: 34px;
+ height: 40%;
+ color: #072270;
}
- .bgImg {
- position: absolute;
- width: 30%;
- height: auto;
- right: -10px;
- top: 15px;
+ .enTit {
+ font-size: 18px;
+ 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: 34px;
- line-height: 42px;
- height: 40%;
- letter-spacing: 1px;
- color: #072270;
- margin-bottom: 12px;
- }
- .enTit1{
- font-size: 22px;
- line-height: 24px;
- color: #072270;
- }
- }
- .bgImg1 {
- position: absolute;
- width: 45%;
- height: auto;
- right: -20px;
- top: 30%;
- }
- }
-
- .bot-rights{
- font-size: 18px;
- color: #333;
+ .bgImg {
+ position: absolute;
+ width: 30%;
+ height: auto;
+ right: -10px;
+ top: 15px;
}
}
- @media screen and (min-width: 1200px) and (max-width: 1400px){
- .gridCont {
+ .grid-content-1 {
+ grid-row-start: 1;
+ grid-row-end: 3;
+
+ .toplayer {
width: 100%;
height: 100%;
- display: grid;
- grid-gap: 15px;
- grid-template-columns: repeat(3, 1fr);
- grid-auto-flow: row;
- justify-content: center;
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: flex;
+ align-items: center;
+ z-index: 99;
- .toplayer{
- width: 100%;
- height: 100%;
- position: absolute;
- left: 0;
- top: 0;
+ & > div {
display: flex;
- align-items: center;
- padding: 0 20px;
- z-index: 99;
-
- .itemTit {
- font-size: 26px;
- line-height: 30px;
- height: 40%;
- color: #072270;
- margin-bottom: 2px;
- }
- .enTit{
- font-size: 14px;
- color: #072270;
- }
-
- .iconImg {
- width: 44px;
- height: 44px;
- margin-right: 10px;
- }
-
+ align-items: flex-start;
}
- .bgImg {
- position: absolute;
- width: 30%;
- height: auto;
- right: -10px;
- top: 15px;
+
+ .itemTit1 {
+ font-size: 34px;
+ line-height: 42px;
+ height: 40%;
+ letter-spacing: 1px;
+ color: #072270;
+ margin-bottom: 12px;
+ }
+ .enTit1 {
+ font-size: 22px;
+ line-height: 24px;
+ color: #072270;
}
}
-
- .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: 28px;
- line-height: 36px;
- height: 40%;
- letter-spacing: 1px;
- color: #072270;
- margin-bottom: 12px;
- }
- .enTit1{
- font-size: 16px;
- color: #072270;
- }
- }
- .bgImg1 {
- position: absolute;
- width: 45%;
- height: auto;
- right: -20px;
- top: 30%;
- }
- }
- .bot-rights{
- font-size: 15px;
- color: #333;
+ .bgImg1 {
+ position: absolute;
+ width: 45%;
+ height: auto;
+ right: -20px;
+ top: 30%;
}
}
- @media screen and (max-width: 1200px){
- .gridCont {
+
+ .bot-rights {
+ font-size: 18px;
+ color: #333;
+ }
+}
+
+@media screen and (min-width: 1200px) and (max-width: 1400px) {
+ .gridCont {
+ width: 100%;
+ height: 100%;
+ display: grid;
+ grid-gap: 15px;
+ grid-template-columns: repeat(3, 1fr);
+ grid-auto-flow: row;
+ justify-content: center;
+
+ .toplayer {
width: 100%;
height: 100%;
- display: grid;
- grid-gap: 10px;
- grid-template-columns: repeat(3, 1fr);
- grid-auto-flow: row;
- justify-content: center;
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ z-index: 99;
- .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: 18px;
- line-height: 22px;
- color: #072270;
- }
- .enTit{
- font-size: 12px;
- line-height: 14px;
- color: #072270;
- }
-
- .iconImg {
- width: 32px;
- height: 32px;
- margin-right: 10px;
- }
+ .itemTit {
+ font-size: 26px;
+ line-height: 30px;
+ height: 40%;
+ color: #072270;
+ margin-bottom: 2px;
}
- .bgImg {
- position: absolute;
- width: 45%;
- height: auto;
- right: -10px;
- top: 15px;
+ .enTit {
+ font-size: 14px;
+ color: #072270;
+ }
+
+ .iconImg {
+ width: 44px;
+ height: 44px;
+ margin-right: 10px;
}
}
-
- .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: 12px;
- color: #333;
+ .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: 28px;
+ line-height: 36px;
+ height: 40%;
+ letter-spacing: 1px;
+ color: #072270;
+ margin-bottom: 12px;
+ }
+ .enTit1 {
+ font-size: 16px;
+ 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%;
+ height: 100%;
+ display: grid;
+ grid-gap: 10px;
+ grid-template-columns: repeat(3, 1fr);
+ 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: 18px;
+ line-height: 22px;
+ color: #072270;
+ }
+ .enTit {
+ font-size: 12px;
+ 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: 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: 12px;
+ color: #333;
+ }
+}
.login-container {
width: 100%;
height: 100%;
@@ -705,13 +712,13 @@
}
}
}
- .topPanelBg{
+ .topPanelBg {
position: absolute;
width: 100%;
height: 60px;
top: 0;
left: 0;
- background: rgba(255,255,255,.8);
+ background: rgba(255, 255, 255, 0.8);
z-index: 9;
}
.topPanelCont {
@@ -730,7 +737,7 @@
display: flex;
align-items: center;
- img{
+ img {
width: 146px;
height: auto;
}
@@ -774,7 +781,7 @@
}
}
}
- .leftCont{
+ .leftCont {
position: absolute;
left: 0;
top: 0;
@@ -784,7 +791,7 @@
background: url('../../assets/newMenu/leftbg.png') no-repeat center;
background-size: 100% 100%;
}
- .topCont{
+ .topCont {
position: absolute;
width: 100%;
height: 200px;
@@ -796,62 +803,62 @@
flex-direction: column;
justify-content: center;
align-items: flex-start;
- .topInfo{
+ .topInfo {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
- .topTit{
+ .topTit {
font-size: 44px;
- font-family: "PingFang SC";
+ font-family: 'PingFang SC';
font-weight: bolder;
text-align: left;
color: #fff;
- text-shadow: 0 3px 8px rgba(0,0,0,.2);
+ text-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}
- .topTime{
+ .topTime {
padding: 15px 10px;
box-sizing: border-box;
- background: rgba(6,64,195,.8);
+ background: rgba(6, 64, 195, 0.8);
border-radius: 8px;
color: #fff;
- font-family: "PingFang SC";
+ font-family: 'PingFang SC';
font-weight: 600;
font-size: 16px;
display: flex;
align-items: center;
- .time{
+ .time {
font-size: 48px;
}
- &>span{
+ & > span {
width: 1px;
height: 40px;
margin: 0 15px;
background: #fff;
}
- .today{
+ .today {
display: flex;
flex-direction: column;
align-items: flex-start;
- span{
+ span {
font-size: 14px;
}
- span:first-of-type{
+ span:first-of-type {
margin-right: 10px;
}
}
}
}
- .line{
+ .line {
width: 120px;
height: 6px;
- background: #00EEFF;
+ background: #00eeff;
}
}
.menuGrid {
@@ -862,7 +869,6 @@
top: 260px;
left: 240px;
.gridCont {
-
.grid-content {
border-radius: 16px;
position: relative;
@@ -872,17 +878,16 @@
border: none;
&:hover {
- background-image: radial-gradient(ellipse farthest-side at 50% 100%,#48A3FF 0%,#fff 120%);
- box-shadow: 8px 8px 24px rgba(20,97,234,.2), -8px -8px 24px #fafafa;
+ 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 #fafafa;
}
}
- .cont-bg-1{
- background: #D9EAFF;
+ .cont-bg-1 {
+ background: #d9eaff;
}
- .cont-bg-2{
- background: #CDD6FF;
+ .cont-bg-2 {
+ background: #cdd6ff;
}
-
/*.grid-content-2{*/
/* background-image: linear-gradient(135deg,#0098F5,#1461EA);*/
@@ -893,7 +898,7 @@
/*}*/
}
}
- .bot-rights{
+ .bot-rights {
width: calc(100vw - 240px);
height: 60px;
position: absolute;
@@ -904,11 +909,11 @@
align-items: center;
justify-content: center;
- img{
+ img {
width: 248px;
height: 8px;
}
- div{
+ div {
margin: 0 20px;
}
}
--
Gitblit v1.9.2