| | |
| | | <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 }} |
| | |
| | | <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> |
| | |
| | | <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" /> |
| | |
| | | <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" /> |
| | |
| | | <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" /> |
| | |
| | | <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" /> |
| | |
| | | <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" /> |
| | |
| | | <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" /> |
| | |
| | | <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" /> |
| | |
| | | <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" /> |
| | |
| | | <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" /> |
| | |
| | | <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" /> |
| | |
| | | dayTime: '', |
| | | isScreenfull: false |
| | | }); |
| | | |
| | | const userName = computed(() =>{ |
| | | return userInfos.value.userName |
| | | }) |
| | | // 获取布局配置信息 |
| | | const getThemeConfig = computed(() => { |
| | | return themeConfig.value; |
| | |
| | | // 去风险大屏 |
| | | const toRiskPlatform = () => { |
| | | // router.push({ |
| | | // name: "bigDataScreen" |
| | | // name: "warningScreen" |
| | | // }); |
| | | window.open('http://39.104.85.193:8585/'); |
| | | }; |
| | |
| | | }); |
| | | return { |
| | | render, |
| | | userName, |
| | | logoMini, |
| | | onLoginOut, |
| | | getDateTime, |
| | |
| | | </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; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1400px) { |
| | | .gridCont { |
| | | width: 100%; |
| | |
| | | .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; |
| | | } |
| | |
| | | margin-bottom: 12px; |
| | | } |
| | | .enTit1 { |
| | | font-size: 22px; |
| | | font-size: 20px; |
| | | line-height: 24px; |
| | | color: #072270; |
| | | } |
| | |
| | | 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; |
| | |
| | | } |
| | | .leftCont { |
| | | position: absolute; |
| | | left: 0; |
| | | left: -100px; |
| | | top: 0; |
| | | width: 240px; |
| | | 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; |
| | |
| | | |
| | | .topTit { |
| | | font-size: 44px; |
| | | font-family: 'PingFang SC'; |
| | | font-weight: bolder; |
| | | text-align: left; |
| | | color: #fff; |
| | |
| | | |
| | | &:hover { |
| | | 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); |
| | | } |
| | | } |
| | | .cont-bg-1 { |