css+div实现销售仪表盘数据统计ui效果代码
代码语言:html
所属分类:布局界面
代码描述:css+div实现销售仪表盘数据统计ui效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&display=swap'> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --gray1: hsl(var(--hue),10%,90%); --gray2: hsl(var(--hue),10%,80%); --gray3: hsl(var(--hue),10%,70%); --gray5: hsl(var(--hue),10%,50%); --gray7: hsl(var(--hue),10%,30%); --gray8: hsl(var(--hue),10%,20%); --gray9: hsl(var(--hue),10%,10%); --primary: hsl(var(--hue),90%,55%); --secondary: hsl(253,90%,55%); --tertiary: hsl(283,90%,55%); --trans-dur: 0.3s; font-size: calc(12px + (16 - 12) * (100vw - 320px) / (2560 - 320)); } body, button { color: var(--gray9); font: 1em/1.5 "DM Sans", sans-serif; } body { background-color: var(--gray5); background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; height: 100vh; transition: background-color var(--trans-dur), color var(--trans-dur); } strong { font-weight: 500; } .db { display: grid; grid-gap: 1.5em; padding: 1.5em; width: 100%; } .db__bars { display: grid; grid-template-columns: 2.5em repeat(7,1fr); grid-template-rows: repeat(5,1fr) 2.5em; align-items: center; justify-items: center; position: relative; } .db__bars-cell { text-align: center; width: 100%; } .db__bars-cell-bar { background-image: linear-gradient(var(--primary),var(--secondary),var(--tertiary)); border-radius: 0.25em; margin: auto; overflow: hidden; position: relative; height: 15em; width: 50%; max-width: 3em; } .db__bars-cell-bar-fill { background-color: var(--gray2); position: absolute; top: 0; right: -1px; left: -1px; height: 100%; transition: background-color var(--trans-dur), transform var(--trans-dur) ease-in-out; } .db__bars-cell:nth-child(1) { grid-column: 2; } .db__bars-cell:nth-child(2) { grid-column: 3; } .db__bars-cell:nth-child(3) { grid-column: 4; } .db__bars-cell:nth-child(4) { grid-column: 5; } .db__bars-cell:nth-child(5) { grid-column: 6; } .db__bars-cell:nth-child(6) { grid-column: 7; } .db__bars-cell:nth-child(7) { grid-column: 8; } .db__bars-cell:nth-child(-n + 7) { grid-row: 1 / 6; } .db__bars-cell:nth-child(n + 8):nth-child(-n + 13) { align-self: start; text-align: right; } .db__bars-cell:nth-child(n + 14) { align-self: end; } .db__bubble { background-color: var(--primary); border-radius: 50%; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 50%; width: 12em; height: 12em; transform: translate(-50%,-50%) translate(-3em,-2em); } .db__bubble:nth-child(2) { background-color: var(--secondary); font-size: 0.9em; width: 9rem; height: 9rem; transform: translate(-50%,-50%) translate(5rem,-1rem); } .db__bubble:nth-child(3) { background-color: var(--tertiary); font-size: 0.8em; width: 7rem; height: 7rem; transform: translate(-50%,-50%) translate(1rem,4.5rem); } .db__bubble-text { color: hsl(0,0%,100%); text-align: center; } .db__bubble-value { font-size: 2.25em; } .db__bubbles { position: relative; height: 17em; } .db__cell, .db__select { background-color: hsla(0,0%,100%,0.5); backdrop-filter: blur(20px); box-shadow: 0 0 0 1px hsla(0,0%,100%,0.5) inset, 0 0 0 2px hsla(0,0%,100%,0) inset, 0 0 0.75em hsl(0,0%,0%,0.3); -webkit-backdrop-filter: blur(20px); } .db__cell { border-radius: 0.5em; padding: 1.5em 1.25em; display: flex; flex-direction: column; transition: background-color var(--trans-dur), box-shadow var(--trans-dur); } .db__counter { display: flex; justify-content: space-between; align-items: flex-end; flex-grow: 1; } .db__counter-value, .db__heading, .db__subheading { font-weight: 500; } .db__counter-label { line-height: 1; margin-left: 0.75em; text-align: right; } .db__counter-value { font-size: 2em; line-height: 1; } .db__heading { font-size: 2em; } .db__order { display: flex; padding: 1em 0; } .db__order:not(:last-child) { box-shadow: 0 1px 0 hsla(0,0%,50%,0.3); } .db__order-cat, .db__order-name { margin-right: 1em; } .db__order-cat { background-color: hsla(var(--hue),90%,55%,0.2); border-radius: 50%; display: grid; place-items: center; align-self: center; width: 2.75em; height: 2.75em; transition: background-color var(--trans-dur); } .db__order-cat-icon { color: var(--primary); width: 1.5em; height: 1.5em; transition: color var(--trans-dur); } .db__order-name { flex-grow: 1; } .db__product { display: flex; justify-content: space-between; } .db__product-details { width: 33%; } .db__product-details + .db__product-details { text-align: right; width: 67%; } .db__product-detail-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .db__product-table { border-collapse: collapse; text-align: left; width: 100%; } .db__product-table th, .db__product-table td { padding: 1em 0.5em 1em 0; } .db__product-table th { font-weight: 400; } .db__product-table th:nth-child(odd) { width: 30%; } .db__product-table th:nth-child(even) { width: 20%; } .db__product-table td { max-width: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .db__product-table th, .db__product-table tr:not(:last-child) td { box-shadow: 0 -1px 0 hsla(0,0%,50%,0.3) inset; } .db__product-table thead, .db__product-table td + td { display: none; } .db__progress { background-image: linear-gradient(90deg,var(--primary),var(--secondary),var(--tertiary)); height: 0.25em; margin-bottom: 1.25em; overflow: hidden; position: relative; } .db__progress-fill { background-color: var(--gray2); position: absolute; top: -1px; right: 0; bottom: -1px; left: 0; transition: background-color var(--trans-dur), transform var(--trans-dur) ease-in-out; } .db__select { border-radius: 0.2em; display: inline-flex; align-items: center; margin-right: 1em; padding: 0.75em 1.5em; transition: background-color var(--trans-dur), box-shadow var(--trans-dur), color var(--trans-dur); } .db__select:focus { outline: transparent; } .db__select:focus, .db__select:hover { background-color: hsla(0,0%,100%,0.7); } .db__select:last-child { margin-right: 0; } .db__select::after { box-shadow: -0.125em -0.125em 0 0 currentColor inset; content: ""; display: inline-block; margin-left: 1.25em; width: 0.5em; height: 0.5em; transform: translateY(-0.125em) rotate(45deg); } .db__select-icon { margin-right: 0.75em; width: 1.5em; height: 1.5em; } .db__status { transition: color var(--trans-dur); } .db__status::before { background-color: currentColor; border-radius: 50%; content: ""; display: inline-block; margin-right: 0.5em; width: 0.5em; height: 0.5em; vertical-align: 0.1em; } .db__status--green { color: hsl(123,90%,25%); } .db__status--orange { color: hsl(33,90%,35%); } .db__status--red { color: hsl(3,90%,35%); } .db__subheading { font-size: 1.5em; line-height: 1; margin-bottom: 1.5rem; } .db__toolbar { color: var(--gray1); min-height: 3em; } .db__toolbar-btns { margin-top: 1em; } .db__top-stat { font-size: 1em; font-weight: normal; margin-bottom: 1em; } small, time, .db__bars-cell, .db__product-table th, .db__top-stat { color: var(--gray7); transition: background-color var(--trans-dur), color var(--trans-dur); } /* `:focus-visible` support */ @supports selector(:focus-visible) { .db__select:focus { background-color: hsla(0,0%,100%,0.5); } .db__select:focus-visible, .db__select:hover { background-color: hsla(0,0%,100%,0.7); } } /* Dark theme */ @media (prefers-color-scheme: dark) { body, button { color: var(--gray1); } .db__bars-cell-bar-fill, .db__progress-fill { background-color: var(--gray9); } .db__order-cat { background-color: hsla(var(--hue),90%,65%,0.2); } .db__order-cat-icon { color: hsl(var(--hue),90%,65%); } .db__cell, .db__select { background-color: hsla(var(--hue),10%,10%,0.7); box-shadow: 0 0 0 1px hsla(var(--hue),10%,10%,0.7) inset, 0 0 0 2px hsla(0,0%,100%,0.2) inset, 0 0 0.75em hsl(var(--hue),10%,10%,0.3); } .db__select:focus, .db__select:hover { background-color: hsla(var(--hue),10%,25%,0.7); } .db__status--green { color: hsl(123,90%,40%); } .db__status--orange { color: hsl(33,90%,70%); } .db__status--red { color: hsl(3,90%,70%); } small, time, .db__bars-cell, .db__product-table th, .db__top-stat { color: var(--gray3); } /* `:focus-visible` support */ @supports selector(:focus-visible) { .db__select:focus { background-color: hsla(var(--hue),10%,10%,0.7); } .db__select:focus-visible, .db__select:hover { background-color: hsla(var(--hue),10%,25%,0.7); } } } /* Tablet */ @media (min-width: 768px) { .db { grid-template-columns: 1fr 1fr 2fr; grid-template-areas: "a a g" "b b g" "c d g" "e e h" "e e h" "f f h"; } .db__bubble { width: 16em; height: 16em; transform: translate(-50%,-50%) translate(-4em,-2em); } .db__bubble:nth-child(2) { width: 12rem; height: 12rem; transform: translate(-50%,-50%) translate(6rem,-1rem); } .db__bubble:nth-child(3) { width: 8rem; height: 8rem; transform: translate(-50%,-50%) translate(1rem,6rem); } .db__bubbles { height: 20em; } .db__cell:nth-child(2) { grid-area: b; } .db__cell:nth-child(3) { grid-area: c; } .db__cell:nth-child(4) { grid-area: d; } .db__cell:nth-child(5) { grid-area: e; } .db__cell:nth-child(6) { grid-area: f; } .db__cell:nth-child(7) { grid-area: g; } .db__cell:nth-child(8) { grid-area: h; } .db__product-table thead { display: table-header-group; } .db__product-table td { display: none; } .db__product-table td + td { display: table-cell; } .db__toolbar { grid-area: a; } } /* Desktop */ @media (min-width: 1024px) { .db__toolbar { display: flex; justify-content: space-between; align-items: center; } .db__toolbar-btns { margin-top: 0; } } @media (min-width: 1280px) { .db { grid-template-columns: 1fr 1fr 1fr 2fr; grid-template-areas: "a a a g" "b c d g" "e e e g" "e e e h" "f f f h" "f f f h"; } } </style> </head> <body > <svg display="none"> <symbol id="calendar" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="8,1 8,6" /> <polyline points="16,1 16,6" /> <polyline points="2,10 22,10" /> <circle cx="7" cy="14" r="1" /> <circle cx="12" cy="14" r="1" /> <circle cx="17" cy="14" r="1" /> <circle cx="7" cy="19" r="1" /> <circle cx="12" cy="19" r="1" /> <circle cx="17" cy="19" r="1" /> <rect x="2" y="3" rx="3" ry="3" width="20" height="20" /> </g> </symbol> <symbol id="export" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="8,5 12,1 16,5" /> <polyline points="12,1 12,16" /> <rect x="2" y="10" rx="3" ry="3" width="20" height="13" /> </g> </symbol> <symbol id="hat" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle r="8" cx="12" cy="14" stroke-dasharray="25.13 25.13" stroke-dashoffset="25.13" /> <polygon points="1,14 23,14" /> </g> </symbol> <symbol id="laptop" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="2" rx="3" ry="3" width="18" height="12" /> <polygon points="3,14 21,14 23,22 1,22" /> </g> </symbol> <symbol id="monitor" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="1" y="1" rx="3" ry="3" width="22" height="16" /> <polyline points="1,12 22,12" /> <polyline points="12,19 12,21" /> <polyline points="6,23 18,23" /> </g> </symbol> <symbol id="pants" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polygon points="4,1 20,1 20,23 12,23 12,8 12,8 12,23 4,23" /> </g> </symbol> <symbol id="shirt" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polygon points="8,3 12,6 16,3 23,6 21,11 18,10 20,21 4,21 6,10 3,11 1,6" /> </g> </symbol> <symbol id="smartphone" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="4" y="1" rx="3" ry="3" width="16" height="22" /> <polyline points="10,6 14,6" /> <circle cx="12" cy="18" r="1" /> </g> </symbol> <symbol id="tablet" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="2" y="1" rx="3" ry="3" width="20" height="22" /> <circle cx="12" cy="18" r="1" /> </g> </symbol> </svg> <main class="db"> <div class="db__toolbar"> <h1 class="db__heading">Sales</h1> <div class="db__toolbar-btns"> <button class="db__select" type="button"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0