From 2bff5e788d4f7e505961270f0624aa3e78280e25 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期四, 13 十月 2022 14:31:29 +0800
Subject: [PATCH] 目录

---
 src/views/newHome/index.vue |   83 ++++++++++++++++++++++++++++++-----------
 1 files changed, 61 insertions(+), 22 deletions(-)

diff --git a/src/views/newHome/index.vue b/src/views/newHome/index.vue
index d508581..339854e 100644
--- a/src/views/newHome/index.vue
+++ b/src/views/newHome/index.vue
@@ -14,14 +14,14 @@
                 <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="topCont">
             <div class="topInfo">
-                <div class="topTit">新疆国泰新华<br />安全风险预警监测系统</div>
+                <div class="topTit">新疆国泰新华<br />安全风险预警监测系统（试运行）</div>
                 <div class="topTime">
                     <div class="time">
                         {{ time }}
@@ -232,6 +232,10 @@
             dayTime: '',
             isScreenfull: false
         });
+
+        const userName = computed(() =>{
+            return userInfos.value.userName
+        })
         // 获取布局配置信息
         const getThemeConfig = computed(() => {
             return themeConfig.value;
@@ -323,10 +327,10 @@
         };
         // 去风险大屏
         const toRiskPlatform = () => {
-            // router.push({
-            //     name: "bigDataScreen"
-            // });
-            window.open('http://39.104.85.193:8585/');
+            router.push({
+                name: "warningScreen"
+            });
+            // window.open('http://39.104.85.193:8585/');
         };
         const throttle = (renderMenu: any, delay: number) => {
             let flag = true;
@@ -395,6 +399,7 @@
         });
         return {
             render,
+            userName,
             logoMini,
             onLoginOut,
             getDateTime,
@@ -410,6 +415,38 @@
 </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%;
@@ -532,7 +569,6 @@
                 line-height: 30px;
                 height: 40%;
                 color: #072270;
-                margin-bottom: 1px;
                 margin-bottom: 2px;
             }
             .enTit {
@@ -705,35 +741,29 @@
         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 {
         position: absolute;
         width: 100%;
         height: 60px;
-        top: 0;
+        top: -60px;
         left: 0;
         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;
@@ -785,26 +815,29 @@
     }
     .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% 100%;
+        animation: moveRight .8s 1 ease forwards;
     }
     .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;
+        animation: showDown 0.6s 1 ease forwards;
+
         .topInfo {
             width: 100%;
             display: flex;
@@ -814,7 +847,6 @@
 
             .topTit {
                 font-size: 44px;
-                font-family: 'PingFang SC';
                 font-weight: bolder;
                 text-align: left;
                 color: #fff;
@@ -877,11 +909,18 @@
                 overflow: hidden;
                 cursor: pointer;
                 transition: 0.3s;
-                border: none;
+                border: 2px solid rgba(255,255,255,0);
 
                 &:hover {
+                    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 #fafafa;
+                    box-shadow: -8px -8px 24px rgba(20, 97, 234, 0.2), 8px 8px 24px rgba(20, 97, 234, 0.2);
+                    border: 2px solid #fff;
+
+                    .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 {

--
Gitblit v1.9.2