添加菜单、调整样式

2024-11-15 15:44:46 +08:00 · 2024-11-15 15:44:46 +08:00 · 9455295f26
parent 145e2c1c82
commit 9455295f26
10 changed files with 162 additions and 14 deletions
--- a/img/BG.jpg
+++ b/img/BG.jpg
--- a/img/bg1.gif
+++ b/img/bg1.gif
--- a/img/fullScreen.png
+++ b/img/fullScreen.png
--- a/img/icon-center.png
+++ b/img/icon-center.png
--- a/img/line.png
+++ b/img/line.png
--- a/img/logo.png
+++ b/img/logo.png
--- a/img/prevent.png
+++ b/img/prevent.png
--- a/img/project.png
+++ b/img/project.png
--- a/img/shop.png
+++ b/img/shop.png
--- a/index.html
+++ b/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;
-            top: 166px;
+            left: 415px;
+            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">-->
-                数字燃气综合管理系统
-<!--            </span>-->
+            <div class="header-logo">
+                <img src="./img/logo.png" alt="" />
+                <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 === '培训考试'){
-                window.open('http://pxks.histron.cn:18080/');
+            }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://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);
        }