.container{ margin-top: 100px; background-color: #E5E5E5; min-height: 760px; width: 100%; .banner{ width:480px; } .person_info{ width: 95%; height: 110px; background-color: #FFF; border-radius: 10px; margin: 0 auto; position: relative; top:-20px; .avatar{ width: 80px; height:80px; border-radius: 50%; position: relative; top: -50px; margin: 0 auto; overflow: hidden; img{ width: 100%; height: 100%; } } .info{ display: flex; margin-top: -60px; padding-left: 20px; justify-content: space-between; flex-wrap: wrap; flex-basis: 100%; .name{ display: flex; width: 80px; height:40px; font-size: 18px; font-weight: bold; } .setup{ width: 90px; height: 30px; margin-right: 20px; display: flex; .vi{ padding-left: 20px; display: flex; } } .tel{ display: flex; flex-wrap: wrap; flex-basis: 100%; .telnmu{ padding-left: 5px; } } } } .section1{ width: 100%; min-height: 122px; background-color: #FFF; border-radius: 10px; margin: 35px auto; position: relative; display: flex; .column { flex: 1; /* 每列平均分配空间 */ display: flex; flex-direction: column; /* 列内部元素垂直排列 */ padding: 20px 2px; text-align: center; /* 文本居中 */ } .cell { flex: 1; /* 在列内部,每行平均分配空间 */ font-size: 14px; color: #666666; padding: 0px 1px; /* 内边距 */ } } .section2{ width: 100%; min-height: 132px; background-color: #FFF; border-radius: 10px; margin: -28px auto; position: relative; display: flex; flex-direction: column; /* 子元素垂直排列 */ align-items: center; /* 子元素在交叉轴上居中对齐 */ .row { width: 95%; /* 行宽度占满容器 */ padding: 10px 20px; /* 行内边距 */ text-align: left; /* 文本居中 */ border-bottom: 1px dotted #ccc; /* 每行的底部边框 */ margin-top: 10px; margin-left: 5px; margin-right: 5px; display: flex; flex-wrap: nowrap; } .divider { width: 80%; /* 分割线宽度 */ height: 2px; /* 分割线高度 */ background-color: #000; /* 分割线颜色 */ margin: 20px 0; /* 分割线的上下外边距 */ } } } .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:14px; 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%; }