From 23f1bf22c42a904c05cee63e10c9fd8b60dfe8f5 Mon Sep 17 00:00:00 2001 From: Admin <978517621@qq.com> Date: 星期二, 20 九月 2022 14:54:56 +0800 Subject: [PATCH] Default Changelist --- src/views/newHome/index.vue | 51 +++++++++++++++++++++++++++++++++++---------------- 1 files changed, 35 insertions(+), 16 deletions(-) diff --git a/src/views/newHome/index.vue b/src/views/newHome/index.vue index aeddaa1..70df9bf 100644 --- a/src/views/newHome/index.vue +++ b/src/views/newHome/index.vue @@ -14,7 +14,7 @@ <span></span> <div class="avator"> <img src="../../assets/menu/admin.png" /> - <div>admin</div> + <div>{{userName}}</div> </div> </div> </div> @@ -232,6 +232,10 @@ dayTime: '', isScreenfull: false }); + + const userName = computed(() =>{ + return userInfos.value.userName + }) // 获取布局配置信息 const getThemeConfig = computed(() => { return themeConfig.value; @@ -324,7 +328,7 @@ // 去风险大屏 const toRiskPlatform = () => { // router.push({ - // name: "bigDataScreen" + // name: "warningScreen" // }); window.open('http://39.104.85.193:8585/'); }; @@ -395,6 +399,7 @@ }); return { render, + userName, logoMini, onLoginOut, getDateTime, @@ -410,6 +415,24 @@ </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; + } + } @media screen and (min-width: 1400px) { .gridCont { width: 100%; @@ -532,7 +555,6 @@ line-height: 30px; height: 40%; color: #072270; - margin-bottom: 1px; margin-bottom: 2px; } .enTit { @@ -705,35 +727,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 +801,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; @@ -880,7 +899,7 @@ &:hover { 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); } } .cont-bg-1 { -- Gitblit v1.9.2