马宇豪
2025-03-04 1b9fea7d4af68d8f933b2dc42bf6084b9646f64c
src/views/newHome/index.vue
@@ -4,11 +4,13 @@
        <div class="topPanelBg"></div>
        <div class="topPanelCont">
            <div class="topLogo">
                <img src="../../assets/newMenu/toplogo.png" />
        <!--                <img src="../../assets/newMenu/toplogo.png" />-->
        <span style="font-size: 18px;color: #fff">智能安全数字化平台</span>
            </div>
            <div class="userInfo">
                <div @click="onScreenfullClick" style="margin-right: 15px; cursor: pointer">
                    <i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
          <i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')"
             :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
                </div>
                <div class="loginOut" @click="onLoginOut">退出登录</div>
                <span></span>
@@ -174,7 +176,7 @@
<!--                  </div>-->
<!--                  <img class="bgImg" src="../../assets/newMenu/card-13.png" />-->
<!--                </div>-->
                <div class="grid-content cont-bg-2" @click="render('1')">
        <div class="grid-content cont-bg-1" @click="render('1')">
                    <div class="toplayer">
                        <img class="iconImg" src="../../assets/newMenu/icon11.png" />
                        <div>
@@ -339,7 +341,8 @@
                        });
                    }
                })
                .catch(() => {});
          .catch(() => {
          });
        };
        //选择菜单
        const render = (value: string) => {
@@ -480,18 +483,21 @@
            top: 60px;
        }
    }
    @keyframes moveDown {
        100% {
            position: absolute;
            top: 0;
        }
    }
    @keyframes moveRight {
        100% {
            position: absolute;
            left: 0;
        }
    }
    @keyframes upDown {
        50% {
            -webkit-transform: translateY(-8px);
@@ -506,15 +512,17 @@
            transform: translateY(0);
        }
    }
@media screen and (min-width: 1600px) {
    .gridCont {
        width: 100%;
        display: grid;
        grid-gap: 20px;
        grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 200px);
        grid-auto-flow: row;
        justify-content: center;
        .toplayer {
            width: 100%;
            height: 100%;
@@ -533,6 +541,7 @@
                height: 40%;
                color: #072270;
            }
            .enTit {
                font-size: 16px;
                line-height: 20px;
@@ -545,6 +554,7 @@
                margin-right: 20px;
            }
        }
        .bgImg {
            position: absolute;
            width: 30%;
@@ -581,12 +591,14 @@
                color: #072270;
                margin-bottom: 12px;
            }
            .enTit1 {
                font-size: 18px;
                line-height: 24px;
                color: #072270;
            }
        }
        .bgImg1 {
            position: absolute;
            width: 45%;
@@ -607,7 +619,7 @@
        width: 100%;
        display: grid;
        grid-gap: 15px;
        grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 120px);
        grid-auto-flow: row;
        justify-content: center;
@@ -630,6 +642,7 @@
                color: #072270;
                margin-bottom: 2px;
            }
            .enTit {
                font-size: 12px;
                color: #072270;
@@ -641,6 +654,7 @@
                margin-right: 10px;
            }
        }
        .bgImg {
            position: absolute;
            width: 30%;
@@ -677,11 +691,13 @@
                color: #072270;
                margin-bottom: 12px;
            }
            .enTit1 {
                font-size: 14px;
                color: #072270;
            }
        }
        .bgImg1 {
            position: absolute;
            width: 45%;
@@ -695,12 +711,13 @@
        color: #333;
    }
}
@media screen and (max-width: 1200px) {
    .gridCont {
        width: 100%;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 96px);
        grid-auto-flow: row;
        justify-content: center;
@@ -721,6 +738,7 @@
                line-height: 22px;
                color: #072270;
            }
            .enTit {
                font-size: 10px;
                line-height: 14px;
@@ -733,6 +751,7 @@
                margin-right: 10px;
            }
        }
        .bgImg {
            position: absolute;
            width: 45%;
@@ -769,11 +788,13 @@
                color: #072270;
                margin-bottom: 12px;
            }
            .enTit1 {
                font-size: 12px;
                color: #072270;
            }
        }
        .bgImg1 {
            position: absolute;
            width: 45%;
@@ -787,11 +808,13 @@
        color: #333;
    }
}
.login-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: #fff;
    .topPanel {
        width: 100%;
        height: 260px;
@@ -801,6 +824,7 @@
        justify-content: center;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    }
    .topPanelBg {
        position: absolute;
        width: 100%;
@@ -811,11 +835,12 @@
        z-index: 9;
        animation: moveDown 0.6s 1 ease forwards;
    }
    .topPanelCont {
        position: absolute;
        width: 100%;
        height: 60px;
        padding: 0 50px;
    padding: 0 50px 0 0;
        top: -60px;
        left: 0;
        display: flex;
@@ -827,10 +852,17 @@
        .topLogo {
            display: flex;
            align-items: center;
      width: 220px;
            img {
                width: 146px;
                height: auto;
      }
      span {
        width: 100%;
        text-align: center;
            }
        }
@@ -847,6 +879,7 @@
                    height: 20px;
                    border-radius: 10px;
                }
                div {
                    font-size: 15px;
                    color: #333333;
@@ -854,12 +887,14 @@
                    margin-left: 6px;
                }
            }
            span {
                width: 1px;
                height: 20px;
                background: #999;
                margin: 0 15px;
            }
            .loginOut {
                font-size: 15px;
                color: #333;
@@ -872,6 +907,7 @@
            }
        }
    }
    .leftCont {
        position: absolute;
        left: -100px;
@@ -883,6 +919,7 @@
        background-size: 100% 100%;
        animation: moveRight .8s 1 ease forwards;
    }
    .topCont {
        position: absolute;
        width: 100%;
@@ -927,12 +964,14 @@
                .time {
                    font-size: 48px;
                }
                & > span {
                    width: 1px;
                    height: 40px;
                    margin: 0 15px;
                    background: #fff;
                }
                .today {
                    display: flex;
                    flex-direction: column;
@@ -948,12 +987,14 @@
                }
            }
        }
        .line {
            width: 120px;
            height: 6px;
            background: #00eeff;
        }
    }
    .menuGrid {
        width: calc(100vw - 220px);
        height: calc(100vh - 320px);
@@ -961,11 +1002,10 @@
        position: absolute;
        top: 260px;
        left: 220px;
      overflow: hidden;
      overflow-y: scroll;
        .gridCont {
            .grid-content {
                border-radius: 16px;
        border-radius: 8px;
                position: relative;
                overflow: hidden;
                cursor: pointer;
@@ -984,9 +1024,11 @@
                    }
                }
            }
            .cont-bg-1 {
                background: #d9eaff;
            }
            .cont-bg-2 {
                background: #cdd6ff;
            }
@@ -1000,6 +1042,7 @@
            /*}*/
        }
    }
    .bot-rights {
        width: calc(100vw - 240px);
        height: 60px;
@@ -1015,6 +1058,7 @@
            width: 248px;
            height: 8px;
        }
        div {
            margin: 0 20px;
        }