| | |
| | | <div class="topPanelBg"></div> |
| | | <div class="topPanelCont"> |
| | | <div class="topLogo"> |
| | | <img src="../../assets/newMenu/toplogo.png" /> |
| | | <!-- <img src="../../assets/newMenu/toplogo.png" />--> |
| | | <span style="font-size: 18px;color: #fff">智能安全数字化平台</span> |
| | | </div> |
| | | <div class="userInfo"> |
| | | <div @click="onScreenfullClick" style="margin-right: 15px; cursor: pointer"> |
| | | <i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i> |
| | | <i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" |
| | | :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i> |
| | | </div> |
| | | <div class="loginOut" @click="onLoginOut">退出登录</div> |
| | | <span></span> |
| | |
| | | <!-- </div>--> |
| | | <!-- <img class="bgImg" src="../../assets/newMenu/card-13.png" />--> |
| | | <!-- </div>--> |
| | | <div class="grid-content cont-bg-2" @click="render('1')"> |
| | | <div class="grid-content cont-bg-1" @click="render('1')"> |
| | | <div class="toplayer"> |
| | | <img class="iconImg" src="../../assets/newMenu/icon11.png" /> |
| | | <div> |
| | |
| | | }); |
| | | } |
| | | }) |
| | | .catch(() => {}); |
| | | .catch(() => { |
| | | }); |
| | | }; |
| | | //选择菜单 |
| | | const render = (value: string) => { |
| | |
| | | top: 60px; |
| | | } |
| | | } |
| | | |
| | | @keyframes moveDown { |
| | | 100% { |
| | | position: absolute; |
| | | top: 0; |
| | | } |
| | | } |
| | | |
| | | @keyframes moveRight { |
| | | 100% { |
| | | position: absolute; |
| | | left: 0; |
| | | } |
| | | } |
| | | |
| | | @keyframes upDown { |
| | | 50% { |
| | | -webkit-transform: translateY(-8px); |
| | |
| | | transform: translateY(0); |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1600px) { |
| | | .gridCont { |
| | | width: 100%; |
| | | display: grid; |
| | | grid-gap: 20px; |
| | | grid-template-columns: repeat(3, 1fr); |
| | | grid-template-columns: repeat(2, 1fr); |
| | | grid-template-rows: repeat(5, 200px); |
| | | grid-auto-flow: row; |
| | | justify-content: center; |
| | | |
| | | .toplayer { |
| | | width: 100%; |
| | | height: 100%; |
| | |
| | | height: 40%; |
| | | color: #072270; |
| | | } |
| | | |
| | | .enTit { |
| | | font-size: 16px; |
| | | line-height: 20px; |
| | |
| | | margin-right: 20px; |
| | | } |
| | | } |
| | | |
| | | .bgImg { |
| | | position: absolute; |
| | | width: 30%; |
| | |
| | | color: #072270; |
| | | margin-bottom: 12px; |
| | | } |
| | | |
| | | .enTit1 { |
| | | font-size: 18px; |
| | | line-height: 24px; |
| | | color: #072270; |
| | | } |
| | | } |
| | | |
| | | .bgImg1 { |
| | | position: absolute; |
| | | width: 45%; |
| | |
| | | width: 100%; |
| | | display: grid; |
| | | grid-gap: 15px; |
| | | grid-template-columns: repeat(3, 1fr); |
| | | grid-template-columns: repeat(2, 1fr); |
| | | grid-template-rows: repeat(5, 120px); |
| | | grid-auto-flow: row; |
| | | justify-content: center; |
| | |
| | | color: #072270; |
| | | margin-bottom: 2px; |
| | | } |
| | | |
| | | .enTit { |
| | | font-size: 12px; |
| | | color: #072270; |
| | |
| | | margin-right: 10px; |
| | | } |
| | | } |
| | | |
| | | .bgImg { |
| | | position: absolute; |
| | | width: 30%; |
| | |
| | | color: #072270; |
| | | margin-bottom: 12px; |
| | | } |
| | | |
| | | .enTit1 { |
| | | font-size: 14px; |
| | | color: #072270; |
| | | } |
| | | } |
| | | |
| | | .bgImg1 { |
| | | position: absolute; |
| | | width: 45%; |
| | |
| | | color: #333; |
| | | } |
| | | } |
| | | |
| | | @media screen and (max-width: 1200px) { |
| | | .gridCont { |
| | | width: 100%; |
| | | display: grid; |
| | | grid-gap: 10px; |
| | | grid-template-columns: repeat(3, 1fr); |
| | | grid-template-columns: repeat(2, 1fr); |
| | | grid-template-rows: repeat(5, 96px); |
| | | grid-auto-flow: row; |
| | | justify-content: center; |
| | |
| | | line-height: 22px; |
| | | color: #072270; |
| | | } |
| | | |
| | | .enTit { |
| | | font-size: 10px; |
| | | line-height: 14px; |
| | |
| | | margin-right: 10px; |
| | | } |
| | | } |
| | | |
| | | .bgImg { |
| | | position: absolute; |
| | | width: 45%; |
| | |
| | | color: #072270; |
| | | margin-bottom: 12px; |
| | | } |
| | | |
| | | .enTit1 { |
| | | font-size: 12px; |
| | | color: #072270; |
| | | } |
| | | } |
| | | |
| | | .bgImg1 { |
| | | position: absolute; |
| | | width: 45%; |
| | |
| | | color: #333; |
| | | } |
| | | } |
| | | |
| | | .login-container { |
| | | width: 100%; |
| | | height: 100%; |
| | | position: relative; |
| | | background: #fff; |
| | | |
| | | .topPanel { |
| | | width: 100%; |
| | | height: 260px; |
| | |
| | | justify-content: center; |
| | | box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); |
| | | } |
| | | |
| | | .topPanelBg { |
| | | position: absolute; |
| | | width: 100%; |
| | |
| | | z-index: 9; |
| | | animation: moveDown 0.6s 1 ease forwards; |
| | | } |
| | | |
| | | .topPanelCont { |
| | | position: absolute; |
| | | width: 100%; |
| | | height: 60px; |
| | | padding: 0 50px; |
| | | padding: 0 50px 0 0; |
| | | top: -60px; |
| | | left: 0; |
| | | display: flex; |
| | |
| | | .topLogo { |
| | | display: flex; |
| | | align-items: center; |
| | | width: 220px; |
| | | |
| | | |
| | | img { |
| | | width: 146px; |
| | | height: auto; |
| | | } |
| | | |
| | | span { |
| | | width: 100%; |
| | | text-align: center; |
| | | } |
| | | } |
| | | |
| | |
| | | height: 20px; |
| | | border-radius: 10px; |
| | | } |
| | | |
| | | div { |
| | | font-size: 15px; |
| | | color: #333333; |
| | |
| | | margin-left: 6px; |
| | | } |
| | | } |
| | | |
| | | span { |
| | | width: 1px; |
| | | height: 20px; |
| | | background: #999; |
| | | margin: 0 15px; |
| | | } |
| | | |
| | | .loginOut { |
| | | font-size: 15px; |
| | | color: #333; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .leftCont { |
| | | position: absolute; |
| | | left: -100px; |
| | |
| | | background-size: 100% 100%; |
| | | animation: moveRight .8s 1 ease forwards; |
| | | } |
| | | |
| | | .topCont { |
| | | position: absolute; |
| | | width: 100%; |
| | |
| | | .time { |
| | | font-size: 48px; |
| | | } |
| | | |
| | | & > span { |
| | | width: 1px; |
| | | height: 40px; |
| | | margin: 0 15px; |
| | | background: #fff; |
| | | } |
| | | |
| | | .today { |
| | | display: flex; |
| | | flex-direction: column; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .line { |
| | | width: 120px; |
| | | height: 6px; |
| | | background: #00eeff; |
| | | } |
| | | } |
| | | |
| | | .menuGrid { |
| | | width: calc(100vw - 220px); |
| | | height: calc(100vh - 320px); |
| | |
| | | position: absolute; |
| | | top: 260px; |
| | | left: 220px; |
| | | overflow: hidden; |
| | | overflow-y: scroll; |
| | | |
| | | .gridCont { |
| | | .grid-content { |
| | | border-radius: 16px; |
| | | border-radius: 8px; |
| | | position: relative; |
| | | overflow: hidden; |
| | | cursor: pointer; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .cont-bg-1 { |
| | | background: #d9eaff; |
| | | } |
| | | |
| | | .cont-bg-2 { |
| | | background: #cdd6ff; |
| | | } |
| | |
| | | /*}*/ |
| | | } |
| | | } |
| | | |
| | | .bot-rights { |
| | | width: calc(100vw - 240px); |
| | | height: 60px; |
| | |
| | | width: 248px; |
| | | height: 8px; |
| | | } |
| | | |
| | | div { |
| | | margin: 0 20px; |
| | | } |