From 5a1616f169d75ece07d2d12a8edac3e5f660a920 Mon Sep 17 00:00:00 2001 From: Your Name <123456> Date: 星期四, 08 九月 2022 09:36:16 +0800 Subject: [PATCH] 合并 --- src/views/newHome/index.vue | 42 ++++++++++++++++++++++++++++-------------- 1 files changed, 28 insertions(+), 14 deletions(-) diff --git a/src/views/newHome/index.vue b/src/views/newHome/index.vue index ca2e034..70df9bf 100644 --- a/src/views/newHome/index.vue +++ b/src/views/newHome/index.vue @@ -415,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%; @@ -537,7 +555,6 @@ line-height: 30px; height: 40%; color: #072270; - margin-bottom: 1px; margin-bottom: 2px; } .enTit { @@ -710,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; @@ -790,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; @@ -885,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