@import '~antd/es/style/themes/default.less'; .bootPage { width: 100%; height: 100%; position: relative; overflow: hidden; background: url('https://panda-water.cn/web4/assets/images/bootPage/背景.jpg') no-repeat top center; background-size: cover; .bootPageMain { display: flex; align-items: center; flex-direction: column; height: 100%; width: 100%; .bootPageHead { height: 150px; display: flex; align-items: center; justify-content: center; color: #ffffff; flex: none; padding-top: 50px; .bootPageTitle { display: flex; flex-direction: column; margin-left: 20px; .bootPageZh, .bootPageEn { font-weight: 500; } .bootPageZh { font-size: 34px; letter-spacing: 5px; } .bootPageEn { font-size: 16px; font-family: -webkit-body; letter-spacing: 1px; } } } .bootPageSection { display: flex; align-items: center; justify-content: center; flex: 1; height: calc(100% - 160px); margin: 20px 0; overflow: auto; &::-webkit-scrollbar { width: 2px; } .bootPageUl { display: flex; width: 1280px; flex-wrap: wrap; justify-content: center; list-style: none; transition: all .5s ease-out; overflow: hidden; padding-top: 10px; .bootPageLi { width: 298px; height: 268.8px; margin: 10px; .bootPageList { width: 100%; height: 100%; border-radius: 4px; transition: all .2s ease-out; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 24px; cursor: pointer; position: relative; &:hover { .listMain { transform: scale(1.1); } } span { margin-top: 20px; font-weight: 500; color: #fff; } .listMain { transition: all 0.2s ease-out; display: flex; align-items: center; flex-direction: column; img { width: 298px; height: 269px; border-radius: 20px; vertical-align: middle; } span { font-weight: 500; color: #fff; } .bootPageName { position: absolute; bottom: 31px; font-weight: 500; } .bootPageNameEng { font-size: 14px; position: absolute; bottom: 11px; } } } } } } } .abs { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .cloudMonitorBtns { position: fixed; height: 120px; width: 100%; bottom: 0px; padding: 0 20px; display: flex; justify-content: end; :global { .cloud-using-anaylysis-btn { cursor: pointer; width: 100px; display: flex; flex-direction: column; justify-content: center; & > img { width: 50px; margin: 0 25px; } & > span { color: #fff; font-size: 14px; width: 100%; text-align: center; } } } } } @media screen and (max-width: 1440px) { .bootPage { .bootPageHead { .bootPageZh { font-size: 26px; } .bootPageEn { font-size: 12px; } } } } @media screen and (min-width: 1440px) and (max-width: 1600px) { .bootPage { .bootPageHead { .bootPageZh { font-size: 30px; } .bootPageEn { font-size: 14px; } } } }