199 lines
6.5 KiB
HTML
199 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="icon" href="http://manage.gkyun.net/iconlogo.ico">
|
|
<title>数字燃气综合管理系统</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.container {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: #171a3e;
|
|
}
|
|
|
|
.box {
|
|
position: fixed;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
/*background: red;*/
|
|
background: url(./img/BG.jpg) no-repeat;
|
|
background-size: cover;
|
|
transform-origin: left top;
|
|
left: 50%;
|
|
top: 50%;
|
|
}
|
|
.header-box{
|
|
height: 100px;
|
|
text-align: center;
|
|
line-height: 70px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: bold;
|
|
font-size: 40px;
|
|
color: #FFFFFF;
|
|
text-shadow: 0px 1px 0px rgba(0,22,37,0.72), 0px 5px 0px rgba(0,51,95,0.39);
|
|
background: url(./img/header-title.png) no-repeat;
|
|
-webkit-user-select: none; /* Chrome, Safari, Opera */
|
|
-moz-user-select: none; /* Firefox */
|
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
|
user-select: none;
|
|
}
|
|
/*.header-box-title{*/
|
|
/* background: linear-gradient(0deg, rgba(0,179,255,0.5) 0%, rgba(255,255,255,0.5) 50.2685546875%, rgba(255,255,255,0.5) 83.7890625%, rgba(0,179,255,0.5) 100%);*/
|
|
/*}*/
|
|
.main-box{
|
|
/*margin: 166px auto 0;*/
|
|
width: 1028px;
|
|
height: 547px;
|
|
background: url(./img/line.png) no-repeat;
|
|
position: relative;
|
|
left: 388px;
|
|
top: 166px;
|
|
}
|
|
.main-box .center{
|
|
width: 378px;
|
|
height: 470px;
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 368px;
|
|
background: url(./img/icon-center.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.main-box .nav-item{
|
|
width: 200px;
|
|
height: 280px;
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: end;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 24px;
|
|
color: #FFFFFF;
|
|
line-height: 80px;
|
|
-webkit-user-select: none; /* Chrome, Safari, Opera */
|
|
-moz-user-select: none; /* Firefox */
|
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
|
user-select: none;
|
|
cursor: pointer;
|
|
}
|
|
.left-top{
|
|
background: url(./img/Inspection.png) no-repeat;
|
|
top: -84px;
|
|
left: 36px;
|
|
}
|
|
.left-center{
|
|
background: url(./img/GIS.png) no-repeat;
|
|
top: 121px;
|
|
left: -145px;
|
|
}
|
|
.left-bottom{
|
|
background: url(./img/SCADA.png) no-repeat;
|
|
bottom: -64px;
|
|
left: 58px;
|
|
}
|
|
.center-bottom{
|
|
background: url(./img/manage-center.png) no-repeat;
|
|
bottom: -127px;
|
|
left: 481px;
|
|
}
|
|
.right-bottom{
|
|
background: url(./img/gasBottle.png) no-repeat;
|
|
bottom: -13px;
|
|
right: -72px;
|
|
}
|
|
.right-center{
|
|
background: url(./img/exam.png) no-repeat;
|
|
top: 29px;
|
|
right: -147px;
|
|
}
|
|
.top {
|
|
width: 100px;
|
|
height: 100px;
|
|
background: hotpink;
|
|
margin-left: 50px;
|
|
}
|
|
|
|
.bottom {
|
|
width: 100px;
|
|
height: 100px;
|
|
background: skyblue;
|
|
margin-left: 50px;
|
|
margin-top: 100px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<!-- 数据展示的区域 -->
|
|
<div class="box">
|
|
<div class="header-box">
|
|
<!-- <span class="header-box-title">-->
|
|
数字燃气综合管理系统
|
|
<!-- </span>-->
|
|
</div>
|
|
<div class="main-box">
|
|
<div class="center"></div>
|
|
<div class="nav-item left-top">智慧巡检</div>
|
|
<div class="nav-item left-center">GIS系统</div>
|
|
<div class="nav-item left-bottom">SCADA系统</div>
|
|
<div class="nav-item center-bottom">管理中心</div>
|
|
<div class="nav-item right-bottom">气瓶管理</div>
|
|
<div class="nav-item right-center">培训考试</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|
|
<script>
|
|
//控制数据大屏放大与缩小
|
|
let box = document.querySelector('.box');
|
|
box.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
|
|
//计算缩放的比例啦
|
|
function getScale(w = 1920, h = 1080) {
|
|
const ww = window.innerWidth / w;
|
|
const wh = window.innerHeight / h;
|
|
return ww < wh ? ww : wh;
|
|
//ww<wh情况: 1920/1920(ww) 1080/1080(wh)
|
|
//ww>wh情况:1920/1920(ww) 1080/1080(wh)
|
|
}
|
|
|
|
window.onresize = () => {
|
|
box.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
|
|
}
|
|
let navItem = document.querySelectorAll('.nav-item');
|
|
// 管理中心: http://manage.gkyun.net/
|
|
// GIS系统: https://manage.fdanrangas.com/gis-system
|
|
// 智慧巡检: http://manage.gkyun.net/inspection
|
|
// SCADA:http://iotui.gkyun.net
|
|
// 气瓶管理:http://nxsz.ts-tac.cn/samr
|
|
// 培训考试:http://pxks.histron.cn:18080/
|
|
navItem.forEach(item => {
|
|
item.onclick = () => {
|
|
if (item.innerHTML === '智慧巡检'){
|
|
window.open('http://manage.gkyun.net/inspection');
|
|
}else if (item.innerHTML === 'GIS系统'){
|
|
window.open('https://manage.fdanrangas.com/gis-system');
|
|
}else if (item.innerHTML === 'SCADA系统'){
|
|
window.open('http://iotui.gkyun.net');
|
|
}else if (item.innerHTML === '管理中心'){
|
|
window.open('http://manage.gkyun.net/');
|
|
}else if (item.innerHTML === '气瓶管理'){
|
|
window.open('http://test.siteweb.bjgas95.com:8028/gpurl.php');
|
|
}else if (item.innerHTML === '培训考试'){
|
|
window.open('http://pxks.histron.cn:18080/');
|
|
}
|
|
console.log(item.innerHTML);
|
|
}
|
|
})
|
|
|
|
</script> |