From a4bcd1eb9305e2c1b77c7847c2f4a979c0e95e93 Mon Sep 17 00:00:00 2001
From: batman <978517621@qq.com>
Date: 星期一, 13 三月 2023 19:45:50 +0800
Subject: [PATCH] 新修改添加页面
---
src/views/newHome/index.vue | 324 ++++++++++++++++++++++++++++++-----------------------
1 files changed, 185 insertions(+), 139 deletions(-)
diff --git a/src/views/newHome/index.vue b/src/views/newHome/index.vue
index 17d40d9..8450675 100644
--- a/src/views/newHome/index.vue
+++ b/src/views/newHome/index.vue
@@ -14,14 +14,14 @@
<span></span>
<div class="avator">
<img src="../../assets/menu/admin.png" />
- <div>admin</div>
+ <div>{{userName}}</div>
</div>
</div>
</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 }}
@@ -45,19 +45,19 @@
<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 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="render('2')">
+ <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">Double prevention</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" />
@@ -66,8 +66,8 @@
<div class="toplayer">
<img class="iconImg" src="../../assets/newMenu/icon3.png" />
<div>
- <div class="itemTit">智能巡检系统</div>
- <div class="enTit">Intelligent inspection system</div>
+ <div class="itemTit">智能安全巡检系统</div>
+ <div class="enTit">Intelligent Security Patrol System</div>
</div>
</div>
<img class="bgImg" src="../../assets/newMenu/card-8.png" />
@@ -76,8 +76,8 @@
<div class="toplayer">
<img class="iconImg" src="../../assets/newMenu/icon4.png" />
<div>
- <div class="itemTit">特殊作业系统</div>
- <div class="enTit">special work</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" />
@@ -86,8 +86,8 @@
<div class="toplayer">
<img class="iconImg" src="../../assets/newMenu/icon5.png" />
<div>
- <div class="itemTit">目标责任管理系统</div>
- <div class="enTit">Target Responsibility Management</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" />
@@ -97,7 +97,7 @@
<img class="iconImg" src="../../assets/newMenu/icon6.png" />
<div>
<div class="itemTit">安全知识图谱系统</div>
- <div class="enTit">Security Knowledge Graph</div>
+ <div class="enTit">Security Knowledge Graph System</div>
</div>
</div>
<img class="bgImg" src="../../assets/newMenu/card-3.png" />
@@ -107,7 +107,7 @@
<img class="iconImg" src="../../assets/newMenu/icon7.png" />
<div>
<div class="itemTit">设备综合管控系统</div>
- <div class="enTit">Comprehensive equipment control</div>
+ <div class="enTit">Equipment Integrated Management and Control System</div>
</div>
</div>
<img class="bgImg" src="../../assets/newMenu/card-9.png" />
@@ -117,7 +117,7 @@
<img class="iconImg" src="../../assets/newMenu/icon8.png" />
<div>
<div class="itemTit">应急管理系统</div>
- <div class="enTit">Emergency management</div>
+ <div class="enTit">Emergency Management System</div>
</div>
</div>
<img class="bgImg" src="../../assets/newMenu/card-5.png" />
@@ -126,8 +126,8 @@
<div class="toplayer">
<img class="iconImg" src="../../assets/newMenu/icon9.png" />
<div>
- <div class="itemTit">危险化学品全生命周期安全管理系统</div>
- <div class="enTit">Full life cycle of hazardous chemicals</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" />
@@ -136,8 +136,8 @@
<div class="toplayer">
<img class="iconImg" src="../../assets/newMenu/icon10.png" />
<div>
- <div class="itemTit">事故管理系统</div>
- <div class="enTit">Incident Management</div>
+ <div class="itemTit">安全事故管理系统</div>
+ <div class="enTit">Security Incident Management System</div>
</div>
</div>
<img class="bgImg" src="../../assets/newMenu/card-6.png" />
@@ -147,7 +147,7 @@
<img class="iconImg" src="../../assets/newMenu/icon11.png" />
<div>
<div class="itemTit">安全基础信息系统</div>
- <div class="enTit">Basic data permissions</div>
+ <div class="enTit">Basic Security Information System</div>
</div>
</div>
<img class="bgImg" src="../../assets/newMenu/card-11.png" />
@@ -232,6 +232,10 @@
dayTime: '',
isScreenfull: false
});
+
+ const userName = computed(() =>{
+ return userInfos.value.userName
+ })
// 获取布局配置信息
const getThemeConfig = computed(() => {
return themeConfig.value;
@@ -324,9 +328,13 @@
// 去风险大屏
const toRiskPlatform = () => {
// router.push({
- // name: "bigDataScreen"
+ // name: "warningScreen"
// });
window.open('http://39.104.85.193:8585/');
+ };
+
+ const toDoublePrevent = () => {
+ window.open('http://121.239.169.27:6801');
};
const throttle = (renderMenu: any, delay: number) => {
let flag = true;
@@ -395,11 +403,13 @@
});
return {
render,
+ userName,
logoMini,
onLoginOut,
getDateTime,
renderToNew,
toRiskPlatform,
+ toDoublePrevent,
onScreenfullClick,
loginIconTwo,
getThemeConfig,
@@ -410,7 +420,39 @@
</script>
<style scoped lang="scss">
-@media screen and (min-width: 1400px) {
+ @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%;
height: 100%;
@@ -433,11 +475,12 @@
.itemTit {
font-size: 28px;
line-height: 34px;
+ margin-bottom: 2px;
height: 40%;
color: #072270;
}
.enTit {
- font-size: 18px;
+ font-size: 16px;
line-height: 20px;
color: #072270;
}
@@ -477,7 +520,7 @@
}
.itemTit1 {
- font-size: 34px;
+ font-size: 32px;
line-height: 42px;
height: 40%;
letter-spacing: 1px;
@@ -485,7 +528,7 @@
margin-bottom: 12px;
}
.enTit1 {
- font-size: 22px;
+ font-size: 18px;
line-height: 24px;
color: #072270;
}
@@ -505,7 +548,7 @@
}
}
-@media screen and (min-width: 1200px) and (max-width: 1400px) {
+@media screen and (min-width: 1200px) and (max-width: 1600px) {
.gridCont {
width: 100%;
height: 100%;
@@ -527,14 +570,14 @@
z-index: 99;
.itemTit {
- font-size: 26px;
+ font-size: 22px;
line-height: 30px;
height: 40%;
color: #072270;
margin-bottom: 2px;
}
.enTit {
- font-size: 14px;
+ font-size: 12px;
color: #072270;
}
@@ -547,98 +590,6 @@
.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;
@@ -686,6 +637,98 @@
}
}
.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: 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;
}
@@ -703,35 +746,29 @@
display: flex;
justify-content: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
- animation: showDown 0.6s 1 ease forwards;
-
- @keyframes showDown {
- 100% {
- position: absolute;
- top: 0;
- }
- }
}
.topPanelBg {
position: absolute;
width: 100%;
height: 60px;
- top: 0;
+ 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: 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;
@@ -783,26 +820,29 @@
}
.leftCont {
position: absolute;
- left: 0;
+ left: -100px;
top: 0;
- width: 240px;
+ 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: 60px;
+ 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;
@@ -812,7 +852,6 @@
.topTit {
font-size: 44px;
- font-family: 'PingFang SC';
font-weight: bolder;
text-align: left;
color: #fff;
@@ -862,12 +901,12 @@
}
}
.menuGrid {
- width: calc(100vw - 240px);
+ width: calc(100vw - 220px);
height: calc(100vh - 320px);
padding: 20px 20px 0;
position: absolute;
top: 260px;
- left: 240px;
+ left: 220px;
.gridCont {
.grid-content {
border-radius: 16px;
@@ -875,11 +914,18 @@
overflow: hidden;
cursor: pointer;
transition: 0.3s;
- border: none;
+ 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 #fafafa;
+ 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 {
--
Gitblit v1.9.2