.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 50; /* adjust this value to make sure the overlay is below the menu but above other elements */ } .home-page{ width:100vw; height:100vh; background:#dcdcdc; background-size: cover; background-repeat: no-repeat; background-position: center center; overflow: hidden; z-index: 50; .section-top{ z-index: 50; position: absolute; top: 17vh; /* 垂直居中 */ left: 45vw; /* 水平居中 */ width: 100%; /* 元素宽度为视口宽度的 50% */ height: 8vh; /* 元素高度为视口高度的 50% */ transform: translate(-50%, -50%); .top-user-info{ display: flex; width:50%; height:60px; position: relative; margin-left:12px; .user-info{ width:100%; height:100%; background-color:#593320; border-radius: 15px; margin-left:20px; display: flex; flex-direction: row; z-index: 60; .header-icon{ height:60px; width:40%; margin-left:5px; display:flex; justify-content: center; align-items: center; .header{ height:50px; width:50px; border-radius: 15px; } } .header-name{ margin-left:5px; width:100%; display: flex; flex-direction: column; .name{ font-size:14px; color:#FFFFFF; margin-left:10px; margin-top:5px; } .option{ color:#593320; background-color:#E9C392; font-size:8px; margin-left:10px; margin-top:8px; padding:2px 3px; border-radius: 10px; width:80px; text-align: center; } } } .sub-menus{ position: absolute; width:89%; margin-left:20px; background-color:#a07c5a; min-height:350px; border-radius: 10px; top:40px; padding-bottom:30px; .mt10{ margin-top:30px; } .menu{ height:30px; width:100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; z-index:99; .icon{ display: flex; width:20px; height:100%; margin-left:10px; justify-content: center; align-items: center; .img{ height:16px; } } .name{ height:100%; display: flex; justify-content: flex-start; align-items: center; margin-left:10px; color:#FFFFFF; font-size:13px; // font-weight: 800; } } .line{ border-bottom: 1px solid #D6B6A2; width:100%; margin-top:5px; margin-bottom: 5px; } .menu-content{ overflow: hidden; .menu-items{ margin-left:10px; .menu-item{ width:40%; overflow: hidden; float:left; margin-top:5px; margin-right: 5px; display:flex; flex-direction:column; justify-content: center; align-items: center; .item{ display:flex; justify-content: center; align-items: center; background:#FFEFE2; width:60px; height:60px; .img{ width:100%; height:100%; } } .name{ width:100%; text-align:center; font-size:12px; color:#FFEFE2; height:30px; line-height: 30px; overflow: hidden; } } } } } } .menu-top{ width:100%; position: absolute; top:-1vh; display: flex; flex-direction: row; justify-content:flex-end; align-items: flex-start; .menu{ height:30px; width:30px; margin-right: 10px; .icon{ width:100%; height:100%; } } } } .section2{ display: flex; position: absolute; top: 37vh; /* 垂直居中 */ left: 50vw; /* 水平居中 */ width: 100%; transform: translate(-50%, -45%); flex-direction: row; .icon{ width:50%; overflow: hidden; display: flex; flex-direction: column; .icon-lay1{ display: flex; flex-direction: row; width:100%; height:6vh; margin-left:12px; // border:1px solid red; .lay-icon{ width:27%; // border:1px solid red; display: flex; justify-content: center; align-items: flex-end; .icon{ width:62px; height:62px; } .black{ background:#000; opacity: 0.4; } } } .lay-margin{ margin-top:5vh; } .lay-margin0{ margin-top:4.5vh; } } .windows{ display: flex; width:40%; z-index: 170; position: relative; } } .section3{ position: absolute; top: 57vh; /* 垂直居中 */ left: 73vw; /* 水平居中 */ width: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: row; height:100px; justify-content: flex-end; align-items: flex-end; position: relative; z-index:59; .tel{ height:60px; width:80px; display: flex; margin-bottom:18px; margin-right: -20px; z-index:50; .img{ height:100%; width:100%; } } .comp{ width:110px; height:80px; margin-bottom:5px; .img{ width:100%; height:100%; } } } .section4{ position: absolute; top: 74vh; /* 垂直居中 */ left: 28vw; /* 水平居中 */ width: 30%; transform: translate(-50%, -50%); z-index: 49; height:300px; .user{ } } } .tooltip { position: absolute; display: inline-block; padding: 10px; background-color: #FFFFFF; opacity: 0.7; color: #000; width: 100px; heigh:50px; border-radius: 60%; text-align: center; animation: bounce 1s infinite; font-size: 14px; font-weight: bold; font-family: "Comic Sans MS", cursive, sans-serif; } .tooltip::after { content: ""; position: absolute; bottom: -13px; /* 箭头位置 */ left: 40%; transform: translateX(-50%); opacity: 0.7; border-width: 7px; border-style: solid; border-color: #FFF transparent transparent transparent; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .tip1{ top: 7vh; left: 20px; } .tip2{ top: 40vh; left: 60%; }