*{ padding: 0; margin: 0; box-sizing: border-box; } body{ background: #050715; min-width: 1080px; overflow-x: scroll; } ul,li{ list-style: none; } .main{ display: flex; width: 100vw; } .sidebar{ width: 100px; height: 100vh; display: flex; flex-direction:column; justify-content:space-between; padding: 32px 20px; } .wrapper{ flex: 1; height: 100vh; overflow-y: auto; background: url(../images/bg.jpg) #fff no-repeat; background-size: cover; border-radius: 24px 0 0 24px; } .logo{ width: 56px; height: 56px; } .menu{ justify-content:center; padding-top: 24px; } .menu li{ margin-bottom: 24px; width: 56px; height: 56px; text-align: center; line-height: 56px; background: #fff; overflow: hidden; border-radius: 36px; } .logout{ width: 56px; height: 56px; border-radius: 36px; background: #fff; overflow: hidden; } .operate{ display: flex; justify-content: space-between; position: absolute; z-index: 9; left: calc((100vw - 800px) / 2 + 50px); bottom: 32px; width: 850px; padding: 16px 16px; border-radius: 100px; background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(8px); } .operate .btn{ font-size: 14px; line-height: 16px; border: none; padding: 8px 12px; border-radius: 48px; overflow: hidden; position: relative; } .operate .btn i{ display: inline-block; vertical-align: middle; } .key{ position: absolute; display: flex; justify-content: space-between; top: 0; right: 0; z-index: 8; padding: 12px 0 12px 16px; border-radius: 0 0 0 12px; background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(8px); } .key > span{ display: inline-block; border-radius: 20px; color: #fff; font-size: 12px; padding: 4px 8px; margin-right: 16px; box-sizing: border-box; } .key .color1{ color: #050715; border: 1px solid #050715; } .key .color2{ background: #EF5DA8; } .key .color3{ background: #5D5FEF; } .key .color4{ background: #FFC530; } .key .color5{ background: #16D7CB; } .key .color6{ background: #AD2222; } .key .color7{ background: #460F68; } .container{ padding: 56px 24px; position: relative; }