From f59373dccb4afb37e63f4fe655061d067244860c Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期三, 16 十一月 2022 09:17:11 +0800
Subject: [PATCH] Default Changelist

---
 src/views/newHome/index.vue |  663 +++++++++++++++++++++++++++++++++++++-----------------
 1 files changed, 454 insertions(+), 209 deletions(-)

diff --git a/src/views/newHome/index.vue b/src/views/newHome/index.vue
index 9ceff18..f93269a 100644
--- a/src/views/newHome/index.vue
+++ b/src/views/newHome/index.vue
@@ -1,70 +1,63 @@
 <template>
     <div class="login-container" :key="once">
-        <div class="topPanel">
-
-        </div>
-        <div class="topPanelBg">
-
-        </div>
+        <div class="topPanel"></div>
+        <div class="topPanelBg"></div>
         <div class="topPanelCont">
             <div class="topLogo">
                 <img src="../../assets/newMenu/toplogo.png" />
             </div>
             <div class="userInfo">
-                <div @click="onScreenfullClick" style="margin-right: 15px;cursor: pointer">
+                <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>
                 </div>
                 <div class="loginOut" @click="onLoginOut">退出登录</div>
                 <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="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}}
+                        {{ time }}
                     </div>
                     <span></span>
                     <div class="today">
-                        <div>{{date}}</div>
-                        <div><span>{{weekDay}}</span><span>{{dayTime}}</span></div>
+                        <div>{{ date }}</div>
+                        <div>
+                            <span>{{ weekDay }}</span
+                            ><span>{{ dayTime }}</span>
+                        </div>
                     </div>
                 </div>
             </div>
-            <div class="line">
-
-            </div>
+            <div class="line"></div>
         </div>
         <div class="menuGrid">
             <div class="gridCont">
                 <div class="grid-content grid-content-1 cont-bg-1" v-throttle @click="toRiskPlatform">
                     <div class="toplayer">
                         <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>
+                            <img class="iconImg" src="../../assets/newMenu/icon1.png" />
+                            <div>
+                                <div class="itemTit1">智能安全风险综合预警<br />预报平台</div>
+                                <div class="enTit1">Intelligent Security Risk Comprehensive Forewarning and Forecasting Platform</div>
+                            </div>
                         </div>
                     </div>
                     <img class="bgImg1" src="../../assets/newMenu/card-1.png" />
                 </div>
-                <div class="grid-content cont-bg-1" v-throttle @click="render('2')">
+                <div class="grid-content cont-bg-1" v-throttle @click="toDoublePrevent">
                     <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" />
@@ -73,8 +66,8 @@
                     <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" />
@@ -83,8 +76,8 @@
                     <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" />
@@ -93,8 +86,8 @@
                     <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" />
@@ -104,7 +97,7 @@
                         <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" />
@@ -114,7 +107,7 @@
                         <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" />
@@ -124,17 +117,17 @@
                         <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>
-                <div class="grid-content cont-bg-2" v-throttle @click="render('11')">
+                <div class="grid-content cont-bg-2" v-throttle @click="renderToNew('11')">
                     <div class="toplayer">
                         <img class="iconImg" src="../../assets/newMenu/icon9.png" />
                         <div>
-                            <div class="itemTit">危险化学品全生命周期安全<br />管理系统</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" />
@@ -143,8 +136,8 @@
                     <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" />
@@ -154,7 +147,7 @@
                         <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" />
@@ -162,9 +155,9 @@
             </div>
         </div>
         <div class="bot-rights">
-            <img src="../../assets/newMenu/pic_line1.png">
+            <img src="../../assets/newMenu/pic_line1.png" />
             <div>技术支持:苏州国科鸿宇智能科技有限公司</div>
-            <img src="../../assets/newMenu/pic_line2.png">
+            <img src="../../assets/newMenu/pic_line2.png" />
         </div>
     </div>
 </template>
@@ -188,8 +181,8 @@
 import { useLoginApi } from '/@/api/login';
 import { useI18n } from 'vue-i18n';
 import screenfull from 'screenfull';
-import router from '../../router'
-import Cookies from 'js-cookie'
+import router from '../../router';
+import Cookies from 'js-cookie';
 
 // 定义接口来定义对象的类型
 interface LoginState {
@@ -199,10 +192,10 @@
     projectId: string;
     once: number;
     isScreenfull: boolean;
-    time:string;
-    date:string;
-    weekDay:string;
-    dayTime:string
+    time: string;
+    date: string;
+    weekDay: string;
+    dayTime: string;
 }
 
 export default defineComponent({
@@ -226,7 +219,7 @@
             hour: '2-digit',
             minute: '2-digit',
             second: '2-digit'
-        }
+        };
         const state = reactive<LoginState>({
             tabsActiveName: 'account',
             isScan: false,
@@ -239,26 +232,40 @@
             dayTime: '',
             isScreenfull: false
         });
+
+        const userName = computed(() =>{
+            return userInfos.value.userName
+        })
         // 获取布局配置信息
         const getThemeConfig = computed(() => {
             return themeConfig.value;
         });
 
         // 当前时间
-        const getDateTime = ()=>{
-            const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g,'-')
-            state.time = curTime.slice(10,16)
-            state.date = curTime.slice(0,10)
-            let week = ['日','一','二','三','四','五','六']
-            let day = new Date().getDay()
-            state.weekDay = '星期' + week[day]
-            let curHour = Number(curTime.slice(10,13))
-            if(curHour>=5&&curHour<=10){state.dayTime = '上午'}
-            if(curHour>10&&curHour<=12){state.dayTime = '中午'}
-            if(curHour>12&&curHour<=18){state.dayTime = '下午'}
-            if(curHour>18&&curHour<=22){state.dayTime = '晚上'}
-            if(curHour>22){state.dayTime = '午夜'}
-        }
+        const getDateTime = () => {
+            const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
+            state.time = curTime.slice(10, 16);
+            state.date = curTime.slice(0, 10);
+            let week = ['日', '一', '二', '三', '四', '五', '六'];
+            let day = new Date().getDay();
+            state.weekDay = '星期' + week[day];
+            let curHour = Number(curTime.slice(10, 13));
+            if (curHour >= 5 && curHour <= 10) {
+                state.dayTime = '上午';
+            }
+            if (curHour > 10 && curHour <= 12) {
+                state.dayTime = '中午';
+            }
+            if (curHour > 12 && curHour <= 18) {
+                state.dayTime = '下午';
+            }
+            if (curHour > 18 && curHour <= 22) {
+                state.dayTime = '晚上';
+            }
+            if (curHour > 22) {
+                state.dayTime = '午夜';
+            }
+        };
         // 下拉菜单点击时
         const onLoginOut = () => {
             ElMessageBox({
@@ -319,11 +326,16 @@
             });
         };
         // 去风险大屏
-        const toRiskPlatform = ()=>{
-            router.push({
-                name: "bigDataScreen"
-            });
-        }
+        const toRiskPlatform = () => {
+            // router.push({
+            //     name: "warningScreen"
+            // });
+            window.open('http://39.104.85.193:8585/');
+        };
+
+        const toDoublePrevent = () => {
+           window.open('http://121.239.169.27:6801');
+        };
         const throttle = (renderMenu: any, delay: number) => {
             let flag = true;
             let count = 0;
@@ -370,6 +382,10 @@
                 return returnMenu.path;
             }
         };
+
+        const renderToNew = () => {
+            window.open('http://222.92.213.22:18001/smartlab/', '_blank');
+        };
         // //点击进入特殊作业
         // const toSpecialWorkSys = () => {
         // 	router.push('/layoutPage');
@@ -377,19 +393,23 @@
         // 页面加载时
         onMounted(() => {
             state.once += 1;
-            NextLoading.done()
-            setInterval(()=>{
-                getDateTime()
-            },1000)
+            NextLoading.done();
+            getDateTime();
+            setInterval(() => {
+                getDateTime();
+            }, 1000);
             // loginBg();
             // loginApp()
         });
         return {
             render,
+            userName,
             logoMini,
             onLoginOut,
             getDateTime,
+            renderToNew,
             toRiskPlatform,
+            toDoublePrevent,
             onScreenfullClick,
             loginIconTwo,
             getThemeConfig,
@@ -400,6 +420,319 @@
 </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;
+        }
+    }
+    @keyframes upDown {
+        50% {
+            -webkit-transform: translateY(-8px);
+            -ms-transform: translateY(-8px);
+            -o-transform: translateY(-8px);
+            transform: translateY(-8px);
+        }
+        100% {
+            -webkit-transform: translateY(0);
+            -ms-transform: translateY(0);
+            -o-transform: translateY(0);
+            transform: translateY(0);
+        }
+    }
+@media screen and (min-width: 1400px) {
+    .gridCont {
+        width: 100%;
+        height: 100%;
+        display: grid;
+        grid-gap: 20px;
+        grid-template-columns: repeat(3, 1fr);
+        grid-auto-flow: row;
+        justify-content: center;
+        .toplayer {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            z-index: 99;
+
+            .itemTit {
+                font-size: 28px;
+                line-height: 34px;
+                margin-bottom: 2px;
+                height: 40%;
+                color: #072270;
+            }
+            .enTit {
+                font-size: 16px;
+                line-height: 20px;
+                color: #072270;
+            }
+
+            .iconImg {
+                width: 88px;
+                height: 88px;
+                margin-right: 20px;
+            }
+        }
+        .bgImg {
+            position: absolute;
+            width: 30%;
+            height: auto;
+            right: -10px;
+            top: 15px;
+        }
+    }
+
+    .grid-content-1 {
+        grid-row-start: 1;
+        grid-row-end: 3;
+
+        .toplayer {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            display: flex;
+            align-items: center;
+            z-index: 99;
+
+            & > div {
+                display: flex;
+                align-items: flex-start;
+            }
+
+            .itemTit1 {
+                font-size: 34px;
+                line-height: 42px;
+                height: 40%;
+                letter-spacing: 1px;
+                color: #072270;
+                margin-bottom: 12px;
+            }
+            .enTit1 {
+                font-size: 20px;
+                line-height: 24px;
+                color: #072270;
+            }
+        }
+        .bgImg1 {
+            position: absolute;
+            width: 45%;
+            height: auto;
+            right: -20px;
+            top: 30%;
+        }
+    }
+
+    .bot-rights {
+        font-size: 18px;
+        color: #333;
+    }
+}
+
+@media screen and (min-width: 1200px) and (max-width: 1400px) {
+    .gridCont {
+        width: 100%;
+        height: 100%;
+        display: grid;
+        grid-gap: 15px;
+        grid-template-columns: repeat(3, 1fr);
+        grid-auto-flow: row;
+        justify-content: center;
+
+        .toplayer {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            z-index: 99;
+
+            .itemTit {
+                font-size: 26px;
+                line-height: 30px;
+                height: 40%;
+                color: #072270;
+                margin-bottom: 2px;
+            }
+            .enTit {
+                font-size: 14px;
+                color: #072270;
+            }
+
+            .iconImg {
+                width: 44px;
+                height: 44px;
+                margin-right: 10px;
+            }
+        }
+        .bgImg {
+            position: absolute;
+            width: 30%;
+            height: auto;
+            right: -10px;
+            top: 15px;
+        }
+    }
+
+    .grid-content-1 {
+        grid-row-start: 1;
+        grid-row-end: 3;
+
+        .toplayer {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            display: flex;
+            align-items: center;
+            z-index: 99;
+
+            & > div {
+                display: flex;
+                align-items: flex-start;
+            }
+
+            .itemTit1 {
+                font-size: 28px;
+                line-height: 36px;
+                height: 40%;
+                letter-spacing: 1px;
+                color: #072270;
+                margin-bottom: 12px;
+            }
+            .enTit1 {
+                font-size: 16px;
+                color: #072270;
+            }
+        }
+        .bgImg1 {
+            position: absolute;
+            width: 45%;
+            height: auto;
+            right: -20px;
+            top: 30%;
+        }
+    }
+    .bot-rights {
+        font-size: 15px;
+        color: #333;
+    }
+}
+@media screen and (max-width: 1200px) {
+    .gridCont {
+        width: 100%;
+        height: 100%;
+        display: grid;
+        grid-gap: 10px;
+        grid-template-columns: repeat(3, 1fr);
+        grid-auto-flow: row;
+        justify-content: center;
+
+        .toplayer {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            display: flex;
+            align-items: center;
+            padding: 0 15px;
+            z-index: 99;
+
+            .itemTit {
+                font-size: 18px;
+                line-height: 22px;
+                color: #072270;
+            }
+            .enTit {
+                font-size: 12px;
+                line-height: 14px;
+                color: #072270;
+            }
+
+            .iconImg {
+                width: 32px;
+                height: 32px;
+                margin-right: 10px;
+            }
+        }
+        .bgImg {
+            position: absolute;
+            width: 45%;
+            height: auto;
+            right: -10px;
+            top: 15px;
+        }
+    }
+
+    .grid-content-1 {
+        grid-row-start: 1;
+        grid-row-end: 3;
+
+        .toplayer {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            left: 0;
+            top: 0;
+            display: flex;
+            align-items: center;
+            z-index: 99;
+
+            & > div {
+                display: flex;
+                align-items: flex-start;
+            }
+
+            .itemTit1 {
+                font-size: 24px;
+                line-height: 36px;
+                height: 40%;
+                letter-spacing: 1px;
+                color: #072270;
+                margin-bottom: 12px;
+            }
+            .enTit1 {
+                font-size: 14px;
+                color: #072270;
+            }
+        }
+        .bgImg1 {
+            position: absolute;
+            width: 45%;
+            height: auto;
+            right: -20px;
+            top: 30%;
+        }
+    }
+    .bot-rights {
+        font-size: 12px;
+        color: #333;
+    }
+}
 .login-container {
     width: 100%;
     height: 100%;
@@ -413,41 +746,35 @@
         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{
+    .topPanelBg {
         position: absolute;
         width: 100%;
         height: 60px;
-        top: 0;
+        top: -60px;
         left: 0;
-        background: rgba(255,255,255,.8);
+        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;
             align-items: center;
 
-            img{
+            img {
                 width: 146px;
                 height: auto;
             }
@@ -491,84 +818,86 @@
             }
         }
     }
-    .leftCont{
+    .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% auto;
+        background-size: 100% 100%;
+        animation: moveRight .8s 1 ease forwards;
     }
-    .topCont{
+    .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;
-        .topInfo{
+        animation: showDown 0.6s 1 ease forwards;
+
+        .topInfo {
             width: 100%;
             display: flex;
             align-items: center;
             justify-content: space-between;
             margin-bottom: 10px;
 
-            .topTit{
+            .topTit {
                 font-size: 44px;
-                font-family: "PingFang SC";
                 font-weight: bolder;
                 text-align: left;
                 color: #fff;
-                text-shadow: 0 3px 8px rgba(0,0,0,.2);
+                text-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
             }
 
-            .topTime{
+            .topTime {
                 padding: 15px 10px;
                 box-sizing: border-box;
-                background: rgba(6,64,195,.8);
+                background: rgba(6, 64, 195, 0.8);
                 border-radius: 8px;
                 color: #fff;
-                font-family: "PingFang SC";
+                font-family: 'PingFang SC';
                 font-weight: 600;
                 font-size: 16px;
                 display: flex;
                 align-items: center;
 
-                .time{
+                .time {
                     font-size: 48px;
                 }
-                &>span{
+                & > span {
                     width: 1px;
                     height: 40px;
                     margin: 0 15px;
                     background: #fff;
                 }
-                .today{
+                .today {
                     display: flex;
                     flex-direction: column;
                     align-items: flex-start;
 
-                    span{
+                    span {
                         font-size: 14px;
                     }
 
-                    span:first-of-type{
+                    span:first-of-type {
                         margin-right: 10px;
                     }
                 }
             }
         }
-        .line{
+        .line {
             width: 120px;
             height: 6px;
-            background: #00EEFF;
+            background: #00eeff;
         }
     }
     .menuGrid {
@@ -579,113 +908,31 @@
         top: 260px;
         left: 240px;
         .gridCont {
-            width: 100%;
-            height: 100%;
-            display: grid;
-            grid-gap: 20px;
-            grid-template-columns: repeat(3, 1fr);
-            grid-auto-flow: row;
-            justify-content: center;
-
             .grid-content {
                 border-radius: 16px;
                 position: relative;
                 overflow: hidden;
                 cursor: pointer;
                 transition: 0.3s;
-                border: none;
-                .toplayer{
-                    width: 100%;
-                    height: 100%;
-                    position: absolute;
-                    left: 0;
-                    top: 0;
-                    display: flex;
-                    align-items: center;
-                    padding: 0 20px;
-                    z-index: 99;
-                }
+                border: 2px solid rgba(255,255,255,0);
+
                 &:hover {
-                    background-image: radial-gradient(ellipse farthest-side at 50% 100%,#48A3FF 0%,#fff 120%);
-                    box-shadow:  8px 8px 24px rgba(20,97,234,.2), -8px -8px 24px #fafafa;
-                }
+                    border-radius: 16px;
+                    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 rgba(20, 97, 234, 0.2);
+                    border: 2px solid #fff;
 
-                .itemTit {
-                    font-size: 29px;
-                    line-height: 36px;
-                    height: 40%;
-                    font-family: 'PingFang SC';
-                    font-weight: 600;
-                    color: #072270;
-                    margin-bottom: 2px;
-                }
-                .enTit{
-                    font-size: 18px;
-                    color: #072270;
-                    font-family: 'PingFang SC';
-                    font-weight: 600;
-                }
-                .enTit1{
-                    font-size: 22px;
-                    color: #072270;
-                    font-family: 'PingFang SC';
-                    font-weight: 600;
-                }
-                .itemTit1 {
-                    font-size: 36px;
-                    line-height: 48px;
-                    height: 40%;
-                    font-family: 'PingFang SC';
-                    font-weight: 600;
-                    letter-spacing: 1px;
-                    color: #072270;
-                    margin-bottom: 18px;
-                }
-                .iconImg {
-                    width: 88px;
-                    height: 88px;
-                    margin-right: 20px;
-                }
-                .bgImg1 {
-                    position: absolute;
-                    width: 45%;
-                    height: auto;
-                    right: -20px;
-                    top: 30%;
-                }
-                .bgImg {
-                    position: absolute;
-                    width: 30%;
-                    height: auto;
-                    right: -10px;
-                    top: 15px;
-                }
-            }
-            .cont-bg-1{
-                background: #D9EAFF;
-            }
-            .cont-bg-2{
-                background: #CDD6FF;
-            }
-            .grid-content-1{
-                grid-row-start: 1;
-                grid-row-end: 3;
-
-                .toplayer{
-                    width: 100%;
-                    height: 100%;
-                    position: absolute;
-                    left: 0;
-                    top: 0;
-                    display: flex;
-                    align-items: center;
-                    z-index: 99;
-
-                    &>div{
-                        display: flex;
-                        align-items: flex-start;
+                    .iconImg{
+                        animation: upDown 0.3s 1 ease-in-out forwards;
+                        filter: drop-shadow(0 0 12px rgba(20, 97, 234, 0.4));
                     }
                 }
+            }
+            .cont-bg-1 {
+                background: #d9eaff;
+            }
+            .cont-bg-2 {
+                background: #cdd6ff;
             }
 
             /*.grid-content-2{*/
@@ -697,7 +944,7 @@
             /*}*/
         }
     }
-    .bot-rights{
+    .bot-rights {
         width: calc(100vw - 240px);
         height: 60px;
         position: absolute;
@@ -708,13 +955,11 @@
         align-items: center;
         justify-content: center;
 
-        img{
+        img {
             width: 248px;
             height: 8px;
         }
-        div{
-            font-size: 18px;
-            color: #333;
+        div {
             margin: 0 20px;
         }
     }

--
Gitblit v1.9.2