| | |
| | | </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%; |
| | |
| | | line-height: 30px; |
| | | height: 40%; |
| | | color: #072270; |
| | | margin-bottom: 1px; |
| | | margin-bottom: 2px; |
| | | } |
| | | .enTit { |
| | |
| | | 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; |
| | |
| | | } |
| | | .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; |