统计图
This commit is contained in:
@@ -2154,6 +2154,184 @@ time {
|
||||
background: rgba(255, 253, 248, 0.9);
|
||||
}
|
||||
|
||||
.stats-chart {
|
||||
margin-top: 24px;
|
||||
border: 1px solid rgba(222, 216, 204, 0.78);
|
||||
border-radius: 8px;
|
||||
padding: 22px;
|
||||
background: rgba(255, 253, 248, 0.88);
|
||||
box-shadow: 0 14px 36px rgba(58, 51, 38, 0.08);
|
||||
}
|
||||
|
||||
.stats-chart-head {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.stats-chart-head h2,
|
||||
.stats-chart-head p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.stats-chart-head h2 {
|
||||
color: #27313a;
|
||||
font-size: 1.18rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.stats-chart-head p {
|
||||
color: var(--muted);
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.stats-chart-body {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(180px, 240px) 1fr;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.pie-chart {
|
||||
width: 100%;
|
||||
max-width: 240px;
|
||||
margin: 0 auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.pie-chart-track,
|
||||
.pie-chart-segment {
|
||||
fill: none;
|
||||
stroke-width: 18;
|
||||
}
|
||||
|
||||
.pie-chart-track {
|
||||
stroke: rgba(222, 216, 204, 0.52);
|
||||
}
|
||||
|
||||
.pie-chart-segment {
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: 60px 60px;
|
||||
transition: stroke-width 0.2s ease;
|
||||
}
|
||||
|
||||
.pie-chart-segment:hover {
|
||||
stroke-width: 20;
|
||||
}
|
||||
|
||||
.pie-chart-total {
|
||||
fill: #27313a;
|
||||
font-size: 1.28rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.pie-chart-label {
|
||||
fill: var(--muted);
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.chart-legend {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.chart-legend-item {
|
||||
display: grid;
|
||||
grid-template-columns: 12px minmax(0, 1fr) auto auto;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border: 1px solid rgba(222, 216, 204, 0.68);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
color: var(--text);
|
||||
background: rgba(255, 255, 255, 0.58);
|
||||
}
|
||||
|
||||
a.chart-legend-item {
|
||||
transition:
|
||||
border-color 0.2s ease,
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
a.chart-legend-item:hover {
|
||||
border-color: rgba(62, 184, 190, 0.42);
|
||||
box-shadow: 0 10px 24px rgba(58, 51, 38, 0.08);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.chart-legend-color {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--chart-color);
|
||||
}
|
||||
|
||||
.chart-legend-label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chart-legend-item strong {
|
||||
color: #27313a;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.chart-legend-percent {
|
||||
min-width: 38px;
|
||||
color: var(--muted);
|
||||
font-size: 0.84rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.line-chart-wrap {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.line-chart {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 520px;
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
.line-chart-axis {
|
||||
stroke: rgba(104, 111, 120, 0.32);
|
||||
stroke-width: 1.4;
|
||||
}
|
||||
|
||||
.line-chart-grid {
|
||||
stroke: rgba(104, 111, 120, 0.16);
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.line-chart-area {
|
||||
fill: rgba(62, 184, 190, 0.18);
|
||||
}
|
||||
|
||||
.line-chart-line {
|
||||
fill: none;
|
||||
stroke: #3eb8be;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke-width: 4;
|
||||
}
|
||||
|
||||
.line-chart-dot {
|
||||
fill: #fffdf8;
|
||||
stroke: #3eb8be;
|
||||
stroke-width: 3;
|
||||
}
|
||||
|
||||
.line-chart-x-label,
|
||||
.line-chart-y-label {
|
||||
fill: var(--muted);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.shuoshuo-page {
|
||||
margin-top: 40px;
|
||||
}
|
||||
@@ -2909,6 +3087,7 @@ meting-js {
|
||||
.post-copyright-card,
|
||||
.twikoo-comments,
|
||||
.table-scroll,
|
||||
.stats-chart,
|
||||
.term-grid a,
|
||||
.pagination-link,
|
||||
.pagination-number
|
||||
@@ -2932,6 +3111,9 @@ meting-js {
|
||||
.page-header-card h1,
|
||||
.content-wrap .page-header-card h1,
|
||||
.sidebar-card h2,
|
||||
.stats-chart-head h2,
|
||||
.chart-legend-item strong,
|
||||
.pie-chart-total,
|
||||
.profile-name,
|
||||
.calendar-summary strong,
|
||||
.schedule-left strong,
|
||||
@@ -2958,6 +3140,19 @@ meting-js {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .chart-legend-item {
|
||||
border-color: rgba(174, 205, 197, 0.16);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .pie-chart-track {
|
||||
stroke: rgba(174, 205, 197, 0.16);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .line-chart-dot {
|
||||
fill: #112023;
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .site-info-list div {
|
||||
border-top-color: rgba(174, 205, 197, 0.16);
|
||||
}
|
||||
@@ -3249,6 +3444,22 @@ meting-js {
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.stats-chart {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.stats-chart-body {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.chart-legend {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.line-chart {
|
||||
min-width: 460px;
|
||||
}
|
||||
|
||||
.article {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user