添加菜单、调整样式

index.html

@@ -18,7 +18,6 @@
             height: 100vh;
             background: #171a3e;
         }
-
         .box {
             position: fixed;
             width: 1920px;
@@ -29,21 +28,77 @@
             transform-origin: left top;
             left: 50%;
             top: 50%;
+            z-index: 1;
+        }
+        .box::before{
+            content: '';
+            position: fixed;
+            width: 1920px;
+            height: 1080px;
+            /*background: red;*/
+            background: url(./img/bg1.gif) no-repeat;
+            background-size: cover;
+            transform-origin: left top;
+            left: 0;
+            top: 0;
+            opacity: 0.15;
         }
         .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;
+            display: flex;
+            justify-content: space-between;
+            /*align-items: center;*/
+            position: relative;
+            z-index: 99;
+
+        }
+        .header-logo{
+            width: 300px;
+            display: flex;
+            align-items: center;
+            font-weight: 400;
+            font-size: 25px;
+            color: #1594FF;
+            margin-top: -17px;
+            padding-left: 24px;
+        }
+        .header-logo img{
+            width: 86px;
+            height: 31px;
+            /*margin-top: 21px;*/
+            /*margin-left: 24px;*/
+        }
+        .header-box-title{
+            font-weight: bold;
+            font-size: 40px;
+            color: #FFFFFF;
+            line-height: 70px;
+            text-shadow: 0px 1px 0px rgba(0,22,37,0.72), 0px 5px 0px rgba(0,51,95,0.39);
+        }
+        .header-logo-right{
+            width: 300px;
+            display: flex;
+            align-items: center;
+            font-weight: 400;
+            font-size: 25px;
+            color: #1594FF;
+            margin-top: -17px;
+            padding-right: 11px;
+        }
+        .header-logo-right img{
+            width: 31px;
+            height: 31px;
+            margin-left: 10px;
+            cursor: pointer;
+            /*margin-top: 21px;*/
+            /*margin-left: 24px;*/
         }
         /*.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%);*/
@@ -54,8 +109,9 @@
             height: 547px;
             background: url(./img/line.png) no-repeat;
             position: relative;
-            left: 388px;
+            left: 415px;
-            top: 166px;
+            top: 222px;
+            z-index: 2;
         }
         .main-box .center{
             width: 378px;
@@ -83,6 +139,17 @@
             -ms-user-select: none; /* Internet Explorer/Edge */
             user-select: none;
             cursor: pointer;
+            z-index: 999;
+        }
+        .top-center{
+            background: url(./img/prevent.png) no-repeat;
+            top: -185px;
+            left: 305px;
+        }
+        .top-right{
+            background: url(./img/project.png) no-repeat;
+            top: -160px;
+            left: 715px;
         }
         .left-top{
             background: url(./img/Inspection.png) no-repeat;
@@ -99,6 +166,11 @@
             bottom: -64px;
             left: 58px;
         }
+        .left-bottom2{
+            background: url(./img/shop.png) no-repeat;
+            bottom: -40px;
+            left: -167px;
+        }
         .center-bottom{
             background: url(./img/manage-center.png) no-repeat;
             bottom: -127px;
@@ -136,24 +208,44 @@
     <!-- 数据展示的区域 -->
     <div class="box">
         <div class="header-box">
-<!--            <span class="header-box-title">-->
+            <div class="header-logo">
-                数字燃气综合管理系统
+                <img src="./img/logo.png" alt="" />
-<!--            </span>-->
+                <span class="header-logo-text">
+                    驱动创新
+                </span>
+            </div>
+            <div class="header-box-title">
+                数字燃气一体化平台
+            </div>
+            <div class="header-logo-right">
+                <span id="time">2024-09-13 10:19:49</span>
+                <img id="fullScreen" src="./img/fullScreen.png" alt="" />
+            </div>
         </div>
         <div class="main-box">
             <div class="center"></div>
+            <div class="nav-item top-center">双重预防机制</div>
+            <div class="nav-item top-right">工程管理</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 left-bottom2">电子商城</div>
             <div class="nav-item center-bottom">管理中心</div>
             <div class="nav-item right-bottom">气瓶管理</div>
-            <div class="nav-item right-center">培训考试</div>
+            <div class="nav-item right-center">车辆管理</div>
         </div>
     </div>
 </div>
 </body>
 
 </html>
+<script type="text/javascript">
+    (function(c,l,a,r,i,t,y){
+        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+    })(window, document, "clarity", "script", "oythfu4ogz");
+</script>
 <script>
     //控制数据大屏放大与缩小
     let box = document.querySelector('.box');
@@ -166,6 +258,55 @@
         //ww<wh情况: 1920/1920(ww)   1080/1080(wh)
         //ww>wh情况:1920/1920(ww)   1080/1080(wh)
     }
+    // function updateTime() {
+    //     var now = new Date();
+    //     var hours = now.getHours();
+    //     var minutes = now.getMinutes();
+    //     var seconds = now.getSeconds();
+    //     var timeString = hours.toString().padStart(2, '0') + ":" +
+    //         minutes.toString().padStart(2, '0') + ":" +
+    //         seconds.toString().padStart(2, '0');
+    //     document.getElementById("time").innerHTML = timeString;
+    // }
+    function updateTime() {
+        let now = new Date(); // 获取当前日期和时间
+        let year = now.getFullYear(); // 获取年份
+        let month = now.getMonth() + 1; // 获取月份，+1因为getMonth()返回0-11
+        let day = now.getDate(); // 获取日
+        let hours = now.getHours(); // 获取小时
+        let minutes = now.getMinutes(); // 获取分钟
+        let seconds = now.getSeconds(); // 获取秒钟
+
+        // 格式化时间为两位数
+        hours = hours < 10 ? '0' + hours : hours;
+        minutes = minutes < 10 ? '0' + minutes : minutes;
+        seconds = seconds < 10 ? '0' + seconds : seconds;
+
+        // 构建时间字符串
+        const timeStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+
+        // 更新页面上的时间显示
+        document.getElementById('time').textContent = timeStr;
+        // 每秒更新一次时间
+        setTimeout(updateTime, 1000);
+    }
+
+    updateTime()
+
+    function toggleFullScreen() {
+        if (!document.fullscreenElement) {
+            // 进入全屏
+            document.documentElement.requestFullscreen();
+        } else {
+            // 退出全屏
+            if (document.exitFullscreen) {
+                document.exitFullscreen();
+            }
+        }
+    }
+
+    // 绑定一个按钮点击事件来切换全屏
+    document.getElementById('fullScreen').addEventListener('click', toggleFullScreen);
 
     window.onresize = () => {
         box.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
@@ -177,6 +318,7 @@
     //             SCADA:http://iotui.gkyun.net
     //                 气瓶管理:http://nxsz.ts-tac.cn/samr
     //                     培训考试:http://pxks.histron.cn:18080/
+    //                     车辆管理:https://gnss.elink-star.com/autoLogin?username=drwl&password=dr!@12
     navItem.forEach(item => {
         item.onclick = () => {
             if (item.innerHTML === '智慧巡检'){
@@ -189,8 +331,14 @@
                 window.open('http://manage.gkyun.net/');
             }else if (item.innerHTML === '气瓶管理'){
                 window.open('http://test.siteweb.bjgas95.com:8028/gpurl.php');
-            }else if (item.innerHTML === '培训考试'){
+            }else if (item.innerHTML === '车辆管理'){
-                window.open('http://pxks.histron.cn:18080/');
+                window.open('https://gnss.elink-star.com/autoLogin?username=drwl&password=dr!@12');
+            }else if (item.innerHTML === '电子商城'){
+                // window.open('https://gnss.elink-star.com/autoLogin?username=drwl&password=dr!@12');
+            }else if (item.innerHTML === '工程管理'){
+                // window.open('https://gnss.elink-star.com/autoLogin?username=drwl&password=dr!@12');
+            }else if (item.innerHTML === '双重预防机制'){
+                window.open('https://manage.gkyun.net/gis-system');
             }
             console.log(item.innerHTML);
         }