| | |
| | | <span></span> |
| | | <div class="avator"> |
| | | <img src="../../assets/menu/admin.png" /> |
| | | <div>admin</div> |
| | | <div>{{userName}}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | dayTime: '', |
| | | isScreenfull: false |
| | | }); |
| | | |
| | | const userName = computed(() =>{ |
| | | return userInfos.value.userName |
| | | }) |
| | | // 获取布局配置信息 |
| | | const getThemeConfig = computed(() => { |
| | | return themeConfig.value; |
| | |
| | | // 去风险大屏 |
| | | const toRiskPlatform = () => { |
| | | // router.push({ |
| | | // name: "bigDataScreen" |
| | | // name: "warningScreen" |
| | | // }); |
| | | window.open('http://39.104.85.193:8585/'); |
| | | }; |
| | |
| | | }); |
| | | return { |
| | | render, |
| | | userName, |
| | | logoMini, |
| | | onLoginOut, |
| | | getDateTime, |
| | |
| | | </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; |
| | |
| | | |
| | | &: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 { |