div+css实现简洁大气的后台管理系统仪表盘页面代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现简洁大气的后台管理系统仪表盘页面代码
代码标签: div css 简洁 大气 后台 管理 系统 仪表盘 页面 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> @import url("https://fonts.googleapis.com/css?family=Inter:400,700,500|Manrope:600"); :root { --primarynavy: #092c4c; --primaryblue: #504ef2; --primaryblue-light: #ecebfd; --primarywhite: #f9f9f9; --greygrey-70: #7e92a2; --grey--grey-50: #d6e1e6; --greygrey-30: #eaeef4; --greygrey-20: #eef5fb; --greygrey-10: #f6fafd; --black: #000000; --zircon: #f6fafde6; --font-size-xxl: 24px; --font-size-xl: 18px; --font-size-l: 16px; --font-size-xl: 14px; --font-size-s: 12px; --font-size-xxxl: 48px; --font-family-inter: "Inter", Helvetica; --font-family-manrope: "Manrope", Helvetica; } * { box-sizing: border-box; } .hidden, .hidden * { pointer-events: none; visibility: hidden; } .dashboard { align-items: flex-start; background-color: var(--greygrey-10); display: flex; min-width: 1366px; } .sidebar-navigation { align-items: flex-start; background-color: var(--zircon); display: flex; height: 820px; justify-content: flex-end; left: 0; min-width: 90px; position: fixed; top: 90px; z-index: 2; } .base-3 { background-color: var(--greygrey-30); height: 820px; margin-left: 19px; width: 1px; } .menu { align-items: flex-start; display: flex; flex-direction: column; gap: 16px; margin-top: 20px; } .button-4 { align-items: center; background-color: var(--primaryblue); border-radius: 50px; display: flex; height: 50px; overflow: hidden; padding: 0 15px; width: 50px; } .icon { height: 20px; width: 20px; } .button { align-items: center; background-color: var(--primarywhite); border-radius: 50px; cursor: pointer; display: flex; height: 50px; overflow: hidden; padding: 0 15px; width: 50px; } .border-1px-greygrey-30 { border: 1px solid var(--greygrey-30); } .overlap-group-3 { align-items: flex-start; background-image: url(//repo.bfw.wiki/bfwrepo/images/admin/icon-53@2x.svg); background-size: 100% 100%; display: flex; height: 20px; justify-content: flex-end; min-width: 20px; } .badge-1 { align-items: flex-start; display: flex; height: 10px; justify-content: center; min-width: 10px; } .badge-2 { background-color: var(--primaryblue); border: 2px solid var(--primarywhite); border-radius: 10px; height: 12px; margin-top: -1px; width: 12px; } .navigation-bar { align-items: flex-start; display: flex; height: 90px; left: 0; min-width: 1366px; position: fixed; top: 0; z-index: 3; } .overlap-group2 { height: 90px; position: relative; width: 1366px; } .logo { align-items: flex-start; background-color: var(--greygrey-10); display: flex; height: 90px; left: 0; position: absolute; top: 0; width: 90px; } .overlap-group1 { height: 90px; position: relative; width: 90px; } .base-container { height: 90px; left: 0; position: absolute; top: 0; width: 90px; } .base-5 { background-color: var(--greygrey-30); height: 1px; left: 0; position: absolute; top: 89px; width: 90px; } .base-4 { background-color: var(--greygrey-30); height: 90px; left: 89px; position: absolute; top: 0; width: 1px; } .logo-1 { align-items: center; background-color: var(--primarynavy); border-radius: 4px; display: flex; height: 46px; left: 22px; overflow: hidden; padding: 0 11px; position: absolute; top: 22px; width: 46px; } .vuesaxboldblur { height: 24px; width: 24px; } .left-bar { align-items: flex-start; background-color: var(--zircon); display: flex; height: 90px; left: 90px; padding: 24px; position: absolute; top: 0; width: 859px; } .headingh3bold { font-family: var(--font-family-inter); font-size: var(--font-size-xxl); font-style: normal; font-weight: 700; letter-spacing: 0; } .valign-text-middle { display: flex; flex-direction: column; justify-content: center; } .dashboard-3 { color: var(--primarynavy); font-weight: 700; height: 40px; line-height: 40px; white-space: nowrap; } .base-6 { background-color: var(--greygrey-30); height: 1px; left: 0; position: absolute; top: 89px; width: 1366px; } .right-bar { align-items: center; background-color: #eef5fbe6; display: flex; height: 90px; left: 949px; padding: 20px 24px; position: absolute; top: 0; width: 417px; } .add-new { align-items: center; background-color: var(--primaryblue); border-radius: 70px; cursor: pointer; display: flex; gap: 12px; justify-content: center; margin-left: 99px; padding-bottom: 10px; padding-left: 20px; padding-right: 16px; padding-top: 10px; } .smallmedium-27 { font-family: var(--font-family-inter); font-size: var(--font-size-xl); font-style: normal; font-weight: 500; letter-spacing: 0; } .button-5 { color: var(--primarywhite); font-weight: 500; line-height: 30px; white-space: nowrap; } .user { align-self: flex-start; background-image: url(//repo.bfw.wiki/bfwrepo/images/admin/avatar@2x.png); background-position: 50% 50%; background-size: cover; border-radius: 100px; cursor: pointer; height: 50px; margin-left: 20px; width: 50px; } .button-6 { align-items: center; background-color: var(--primarywhite); border-radius: 50px; cursor: pointer; display: flex; height: 50px; margin-left: 20px; overflow: hidden; padding: 0 15px; width: 50px; } .overlap-group3 { height: 910px; margin-top: 0; position: relative; width: 1366px; z-index: 1; } .screen-columns-bg { align-items: flex-start; background-color: var(--greygrey-10); display: flex; height: 910px; justify-content: flex-end; left: 0; min-width: 1366px; position: absolute; top: 0; } .base { background-color: var(--greygrey-30); height: 910px; width: 1px; } .right-area { background-color: var(--greygrey-20); height: 910px; margin-left: 859px; width: 417px; } .body { align-items: flex-start; display: flex; height: 820px; left: 90px; min-width: 1276px; position: absolute; top: 90px; } .right-area-1 { align-items: center; background-color: var(--greygrey-20); display: flex; flex-direction: column; min-height: 820px; width: 417px; } .dashboard-customers { align-items: flex-start; display: flex; flex-direction: column; gap: 0; height: 316px; width: 417px; } .dashboard-customers-view-results { align-items: flex-start; align-self: stretch; display: flex; flex-direction: column; height: 238px; } .customer-ignored { align-items: center; display: flex; gap: 0; margin-top: 3px; padding-bottom: 9px; padding-left: 24px; padding-right: 14px; padding-top: 9px; width: 417px; } .edit-2 { align-items: center; border-radius: 50px; display: flex; height: 50px; overflow: hidden; padding: 0 15px; width: 50px; } .customer-2 { align-items: center; display: flex; flex: 1; gap: 16px; min-height: 54px; } .avatar-2 { background-image: url(//repo.bfw.wiki/bfwrepo/images/admin/avatar-2@2x.png); background-position: 50% 50%; background-size: cover; border-radius: 25px; height: 44px; width: 44px; } .details-2 { align-items: flex-start; display: flex; flex: 1; flex-direction: column; gap: 0; min-height: 54px; } .overlap-group { height: 53px; position: relative; width: 269px; } .name { align-items: flex-start; display: flex; gap: 5px; left: 0; position: absolute; top: 0; width: 269px; } .bodybold { font-family: var(--font-family-inter); font-size: var(--font-size-l); font-style: normal; font-weight: 700; letter-spacing: 0; } .last-name { color: var(--primarynavy); flex: 1; font-weight: 700; height: 27px; line-height: 27px; white-space: nowrap; } .first-name-2 { color: var(--primarynavy); font-weight: 700; line-height: 27px; white-space: nowrap; } .smallregular-27 { font-family: var(--font-family-inter); font-size: var(--font-size-xl); font-style: normal; font-weight: 400; letter-spacing: 0; } .email { color: var(--greygrey-70); font-weight: 400; left: 0; line-height: 27px; position: absolute; top: 26px; white-space: nowrap; width: 269px; } .customer-1 { align-items: center; display: flex; flex: 1; gap: 16px; min-height: 54px; } .details-1 { align-items: flex-start; display: flex; flex: 1; flex-direction: column; gap: 0; min-height: 54px; } .first-name-1 { color: var(--primarynavy); font-weight: 700; line-height: 27px; white-space: nowrap; } .avatar-1 { background-image: url(//repo.bfw.wiki/bfwrepo/images/admin/avatar-1@2x.png); background-position: 50% 50%; background-size: cover; border-radius: 25px; height: 44px; width: 44px; } .edit-1 { align-items: center; border-radius: 50px; display: flex; height: 50px; overflow: hidden; padding: 0 15px; width: 50px; } .customer-repeat-link { align-items: center; cursor: pointer; display: flex; gap: 0; padding-bottom: 9px; padding-left: 24px; padding-right: 14px; padding-top: 9px; width: 417px; } .edit { align-items: center; border-radius: 50px; display: flex; height: 50px; overflow: hidden; padding: 0 15px; width: 50px; } .customer { align-items: center; display: flex; flex: 1; gap: 16px; min-height: 54px; } .details { align-items: flex-start; display: flex; flex: 1; flex-direction: column; gap: 0; min-height: 54px; } .first-name { color: var(--primarynavy); font-weight: 700; line-height: 27px; white-space: nowrap; } .avatar { background-color: var(--grey--grey-50); border-radius: 25px; height: 44px; width: 44px; } .title-2 { align-items: flex-start; align-self: stretch; display: flex; height: 78px; padding: 23px 24px; } .customers-1 { color: var(--primarynavy); font-weight: 700; height: 30px; line-height: 30px; min-width: 98px; white-space: nowrap; } .headingh5bold { font-family: var(--font-family-inter); font-size: var(--font-size-xl); font-style: normal; font-weight: 700; letter-spacing: 0; } .view-all-1 { color: var(--primaryblue); cursor: pointer; font-weight: 500; height: 30px; line-height: 30px; margin-left: 217px; min-width: 54px; text-align: right; white-space: nowrap; } .tasks { height: 456px; margin-top: 24px; object-fit: cover; width: 369px; } .left-area { align-items: center; display: flex; flex-direction: column; min-height: 820px; padding: 20px 0; width: 859px; } .row-1 { align-items: flex-start; display: flex; gap: 24px; width: 811px; } .dashboard-recent-deals { align-items: flex-start; background-color: var(--primarywhite); border-radius: 12px; display: flex; flex: 1; flex-direction: column; gap: 0; height: 392px; } .dashboard-recent-deals-view-results { align-items: flex-start; align-self: stretch; display: flex; flex-direction: column; gap: 4px; height: 314px; overflow-y: scroll; } .dashboard-recent-deals-view-results::-webkit-scrollbar { display: none; width: 0; } .deal-ignore { align-items: flex-start; align-self: stretch; display: flex; gap: 12px; min-height: 72px; padding-bottom: 9px; padding-left: 24px; padding-right: 24px; padding-top: 9px; } .detail-3 { align-items: center; display: flex; flex: 1; gap: 16px; min-height: 54px; } .image-4 { background-image: url(//repo.bfw.wiki/bfwrepo/images/admin/image-8@2x.png); background-position: 50% 50%; background-size: cover; border-radius: 25px; height: 44px; width: 44px; } .customer-address-4 { align-items: flex-start; display: flex; flex: 1; flex-direction: column; gap: 0; min-height: 54px; } .line-1 { align-items: flex-start; align-self: stretch; display: flex; gap: 12px; min-height: 27px; } .address { align-items: flex-start; display: flex; flex: 1; gap: 0; min-height: 27px; } .state-2 { color: var(--greygrey-70); font-weight: 400; line-height: 27px; white-space: nowrap; } .city-6 { color: var(--greygrey-70); font-weight: 400; line-height: 27px; white-space: nowrap; } .separator { color: var(--greygrey-70); font-weight: 400; height: 27px; line-height: 27px; white-space: nowrap; width: 10px; } .appointment-date-5 { color: var(--greygrey-70); font-weight: 400; line-height: 27px; text-align: right; white-space: nowrap; } .price { align-items: flex-start; align-self: stretch; display: flex; gap: 0; justify-content: flex-end; min-width: 46px; } .city-5 { color: var(--primarynavy); font-weight: 700; line-height: 27px; white-space: nowrap; } .smallbold-27 { font-family: var(--font-family-inter); font-size: var(--font-size-xl); font-style: normal; font-weight: 700; letter-spacing: 0; } .price-9 { color: var(--primarynavy); font-weight: 700; line-height: 27px; white-space: nowrap; } .street { color: var(--primarynavy); flex: 1; font-weight: 700; height: 27px; line-height: 27px; white-space: nowrap; width: 353px; } .deal-repeat-link { align-items: flex-start; align-self: stretch; cursor: pointer; display: flex; gap: 12px; min-height: 72px; padding-bottom: 9px; padding-left: 24px; padding-right: 24px; padding-top: 9px; } .detail { align-items: center; display: flex; flex: 1; gap: 16px; min-height: 54px; } .customer-address-1 { align-items: flex-start; display: flex; flex: 1; flex-direction: column; gap: 0; min-height: 54px; } .appointment-date-2 { color: var(--greygrey-70); font-weight: 400; line-height: 27px; text-align: right; white-space: nowrap; } .address-1 { align-items: flex-start; align-self: stretch; display: flex; flex: 1; gap: 0; } .address-item { color: var(--greygrey-70); font-weight: 400; height: 27px; line-height: 27px; white-space: nowrap; } .price-5 { align-items: flex-start; align-self: stretch; display: flex; gap: 0; justify-content: flex-end; width: 46px; } .price-6 { color: var(--primarynavy); font-weight: 700; line-height: 27px; white-space: nowrap; } .city { color: var(--primarynavy); font-weight: 700; line-height: 27px; white-space: nowrap; } .street-2 { align-self: stretch; color: var(--primarynavy); flex: 1; font-weight: 700; height: 27px; line-height: 27px; white-space: nowrap; width: 353px; } .image-1 { background-color: var(--greygrey-30); border-radius: 25px; height: 44px; width: 44px; } .detail-1 { align-items: center; display: flex; flex: 1; gap: 16px; min-height: 54px; } .image-2 { background-image: url(//repo.bfw.wiki/bfwrepo/images/admin/image-6@2x.png); background-position: 50% 50%; background-size: cover; border-radius: 25px; height: 44px; width: 44px; } .customer-address-2 { align-items: flex-start; display: flex; flex: 1; flex-direction: column; gap: 0; min-height: 54px; } .state { color: var(--greygrey-70); font-weight: 400; line-height: 27px; white-space: nowrap; } .city-2 { color: var(--greygrey-70); font-weight: 400; line-height: 27px; white-space: nowrap; } .appointment-date-3 { color: var(--greygrey-70); font-weight: 400; line-height: 27px; text-align: right; white-space: nowrap; } .price-7 { color: var(--primarynavy); font-weight: 700; line-height: 27px; white-space: nowrap; } .city-1 { color: var(--primarynavy); font-weight: 700; line-height: 27px; white-space: nowrap; } .detail-2 { align-items: center; display: flex; flex: 1; gap: 16px; min-height: 54px; } .customer-address-3 { align-items: flex-start; display: flex; flex: 1; flex-direction: column; gap: 0; min-height: 54px; } .city-4 { color: var(--greygrey-70); font-weight: 400; line-height: 27px; white-space: nowrap; } .state-1 { color: var(--greygrey-70); font-weight: 400; line-height: 27px; white-space: nowrap; } .appointment-date-4 { color: var(--greygrey-70); font-weight: 400; line-height: 27px; text-align: right; white-space: nowrap; } .city-3 { color: var(--primarynavy); font-weight: 700; line-height: 27px; white-space: nowrap; } .price-8 { color: var(--primarynavy); font-weight: 700; line-height: 27px; white-space: nowrap; } .image-3 { background-image: url(//repo.bfw.wiki/bfwrepo/images/admin/image-7@2x.png); background-position: 50% 50%; background-size: cover; border-radius: 25px; height: 44px; width: 44px; } .title-1 { align-items: flex-start; align-self: stretch; display: flex; height: 78px; min-width: 519px; padding: 23px 24px; } .recent-deals { color: var(--primarynavy); font-weight: 700; height: 30px; line-height: 30px; min-width: 116px; white-space: nowrap; } .view-all { color: var(--primaryblue); cursor: pointer; font-weight: 500; height: 30px; line-height: 30px; margin-left: 301px; min-width: 54px; text-align: right; white-space: nowrap; } .dashboard-next-appointment { align-items: flex-start; background-color: var(--primaryblue); border-radius: 12px; display: flex; flex-direction: column; min-height: 392px; width: 268px; } .title { align-items: flex-start; display: flex; height: 78px; min-width: 268px; padding: 23px 24px; } .next-appointment { color: var(--primarywhite); font-weight: 700; line-height: 30px; min-height: 30px; min-width: 162px; white-space: nowrap; } .badge { align-self: center; background-color: var(--primarywhite); border-radius: 10px; height: 10px; margin-left: 44px; width: 10px; } .overlap-group-1 { height: 432px; position: relative; width: 369px; } .deal { align-items: center; cursor: pointer; display: flex; flex-direction: column; height: 314px; left: 0; position: absolute; top: 0; width: 268px; } .deal-info { align-items: center; display: flex; gap: 12px; width: 220px; } .customer-address { align-items: flex-start; display: flex; flex: 1; flex-direction: column; gap: 0; min-height: 54px; } .line { align-items: flex-start; align-self: stretch; display: flex; gap: 5px; min-height: 27px; } .line-item { color: var(--grey--grey-50); font-weight: 400; line-height: 27px; white-space: nowrap; } .street-1 { color: var(--primarywhite); font-weight: 700; line-height: 27px; white-space: nowrap; } .image { background-color: var(--primaryblue-light); border-radius: 25px; height: 44px; width: 44px; } .flex-row-1 { align-items: center; display: flex; height: 54px; margin-top: 26px; min-width: 220px; } .button-1 { align-items: center; background-color: var(--primarywhite); border-radius: 70px; display: flex; gap: 16px; justify-content: center; margin-left: 15px; overflow: hidden; padding-bottom: 10px; padding-left: 24px; padding-right: 24px; padding-top: 10px; width: 132px; } .button-2 { color: var(--primarynavy); font-weight: 500; line-height: 30px; white-space: nowrap; } .price-1 { align-items: flex-start; display: flex; flex-direction: column; gap: 0; width: 73px; } .price-2 { align-items: flex-start; align-self: stretch; display: flex; gap: 0; min-height: 27px; } .price-3 { color: var(--primarywhite); font-weight: 700; line-height: 27px; white-space: nowrap; } .price-4 { color: var(--primarywhite); font-weight: 700; line-height: 27px; white-space: nowrap; } .label { color: var(--grey--grey-50); font-weight: 400; line-height: 27px; margin-top: -1px; white-space: nowrap; } .appointment-date { align-items: flex-start; display: flex; flex-direction: column; gap: 0; margin-top: 24px; width: 220px; } .appointment-date-1 { color: var(--primarywhite); font-weight: 700; height: 27px; line-height: 27px; white-space: nowrap; } .flex-row { align-items: flex-start; display: flex; margin-top: 24px; min-width: 220px; } .room-area { align-items: flex-start; display: flex; flex-direction: column; gap: 0; height: 54px; width: 103px; } .label-1 { color: var(--grey--grey-50); font-weight: 400; height: 27px; line-height: 27px; margin-top: -1px; white-space: nowrap; } .room-area-1 { align-items: center; align-self: stretch; display: flex; gap: 4px; min-height: 27px; } .room-area-3 { height: 10px; width: 15.43px; } .room-area-2 { color: var(--primarywhite); font-weight: 700; height: 27px; line-height: 27px; white-space: nowrap; width: 30px; } .people { align-items: flex-start; display: flex; flex-direction: column; gap: 0; height: 54px; margin-left: 17px; width: 100px; } .of-people { align-self: stretch; color: var(--primarywhite); font-weight: 700; height: 27px; line-height: 27px; white-space: nowrap; width: 100px; } .background { height: 300px; left: 69px; position: absolute; top: 132px; width: 300px; } .row-2 { align-items: flex-start; display: flex; gap: 24px; margin-top: 24px; width: 811px; } .counter { align-items: flex-start; display: flex; flex-direction: column; gap: 24px; height: 360px; width: 268px; } .dashboard-1 { align-items: flex-start; align-self: stretch; background-color: var(--primarywhite); border-radius: 12px; cursor: pointer; display: flex; min-width: 268px; } .dashboard-2 { align-items: flex-start; display: flex; height: 168px; padding: 23px 24px; width: 268px; } .icon-3 { align-items: center; align-self: center; background-image: url(//repo.bfw.wiki/bfwrepo/images/admin/icon-42@2x.svg); background-size: 100% 100%; border-radius: 100px; display: flex; height: 80px; margin-left: 45px; overflow: hidden; padding: 0 24px; width: 80px; } .vuesaxbold { height: 32px; width: 32px; } .customers-container { align-items: flex-start; display: flex; flex-direction: column; min-height: 120px; width: 95px; } .customers { color: var(--greygrey-70); font-weight: 500; line-height: 30px; min-height: 30px; white-space: nowrap; } .headingh5medium { font-family: var(--font-family-inter); font-size: var(--font-size-xl); font-style: normal; font-weight: 500; letter-spacing: 0; } .manrope-semi-bold-blue-whale-48px { color: var(--primarynavy); font-family: var(--font-family-manrope); font-size: var(--font-size-xxxl); font-style: normal; font-weight: 600; } .s-count { letter-spacing: 0; line-height: 80px; margin-top: 10px; min-height: 80px; white-space: nowrap; } .icon-4 { align-items: center; align-self: center; background-image: url(//repo.bfw.wiki/bfwrepo/images/admin/icon-43@2x.svg); background-size: 100% 100%; border-radius: 100px; display: flex; height: 80px; margin-left: 62px; overflow: hidden; padding: 0 24px; width: 80px; } .deals-container { align-items: flex-start; display: flex; flex-direction: column; min-height: 120px; width: 78px; } .deals { color: var(--greygrey-70); font-weight: 500; line-height: 30px; min-height: 30px; white-space: nowrap; } .dashboard-deal-progress-view-results { align-items: flex-start; background-color: var(--primarywhite); border-radius: 12px; display: flex; flex: 1; flex-direction: column; gap: 0; height: 360px; overflow: hidden; } .deal-1 { align-items: flex-start; align-self: stretch; cursor: pointer; display: flex; flex: 1; flex-direction: column; gap: 0; } .progress-deal { align-items: center; align-self: stretch; background-color: var(--primarywhite); display: flex; flex-direction: column; height: 86px; } .base-1 { background-color: var(--greygrey-30); height: 1px; margin-top: 15px; width: 519px; } .flex-row-2 { align-items: center; display: flex; height: 54px; margin-top: 16px; min-width: 471px; } .detail-4 { align-items: center; display: flex; gap: 16px; } .image-5 { background-image: url(//repo.bfw.wiki/bfwrepo/images/admin/image@2x.svg); background-position: 50% 50%; background-size: cover; border-radius: 25px; height: 44px; width: 44px; } .customer-address-5 { align-items: flex-start; display: flex; flex-direction: column; gap: 0; min-height: 54px; min-width: 174px; } .street-3 { color: var(--primarynavy); font-weight: 700; line-height: 27px; margin-top: -1px; white-space: nowrap; } .line-2 { align-items: flex-start; display: flex; gap: 5px; min-height: 27px; min-width: 144px; } .zip-code { color: var(--greygrey-70); font-weight: 400; line-height: 27px; white-space: nowrap; } .state-3 { color: var(--greygrey-70); font-weight: 400; line-height: 27px; white-space: nowrap; } .city-7 { color: var(--greygrey-70); font-weight: 400; line-height: 27px; white-space: nowrap; } .button-3 { align-items: center; border-radius: 50px; display: flex; height: 50px; overflow: hidden; padding: 0 15px; width: 50px; } .progress { align-items: center; background-color: var(--primaryblue-light); border-radius: 100px; display: flex; gap: 10px; justify-content: center; margin-left: 67px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; padding-top: 10px; } .extra-smallmedium { font-family: var(--font-family-inter); font-size: var(--font-size-s); font-style: normal; font-weight: 500; letter-spacing: 0; } .progress-1 { color: var(--primaryblue); font-weight: 500; line-height: 20px; white-space: nowrap; } .activity-field-embedded-results { align-items: flex-start; align-self: stretch; display: flex; flex: 1; min-width: 519px; } .overlap-group-2 { height: 274px; position: relative; width: 519px; } .activity-list-scroll::-webkit-scrollbar { display: none; width: 0; } .activity-list-scroll { align-items: flex-start; display: flex; flex-direction: column; gap: 18px; height: 274px; left: 0; overflow-y: scroll; padding-bottom: 18px; padding-left: 18px; padding-right: 18px; pad.........完整代码请登录后点击上方下载按钮下载查看
网友评论0