|
@@ -700,9 +700,11 @@ const initChart = async () => {
|
|
|
barGap: 0,
|
|
barGap: 0,
|
|
|
itemStyle: {
|
|
itemStyle: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: '#188df0' },
|
|
|
|
|
|
|
+ { offset: 0, color: '#83bff6' },
|
|
|
|
|
+ { offset: 0.5, color: '#188df0' },
|
|
|
{ offset: 1, color: '#188df0' }
|
|
{ offset: 1, color: '#188df0' }
|
|
|
- ])
|
|
|
|
|
|
|
+ ]),
|
|
|
|
|
+ borderRadius: [5, 5, 0, 0]
|
|
|
},
|
|
},
|
|
|
emphasis: {
|
|
emphasis: {
|
|
|
focus: 'series'
|
|
focus: 'series'
|
|
@@ -714,10 +716,11 @@ const initChart = async () => {
|
|
|
type: 'bar',
|
|
type: 'bar',
|
|
|
itemStyle: {
|
|
itemStyle: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
- { offset: 0, color: '#d3a137' },
|
|
|
|
|
-
|
|
|
|
|
|
|
+ { offset: 0, color: '#ffb600' },
|
|
|
|
|
+ { offset: 0.5, color: '#d3a137' },
|
|
|
{ offset: 1, color: '#d3a137' }
|
|
{ offset: 1, color: '#d3a137' }
|
|
|
- ])
|
|
|
|
|
|
|
+ ]),
|
|
|
|
|
+ borderRadius: [5, 5, 0, 0]
|
|
|
},
|
|
},
|
|
|
emphasis: {
|
|
emphasis: {
|
|
|
focus: 'series'
|
|
focus: 'series'
|
|
@@ -780,26 +783,22 @@ onUnmounted(() => {
|
|
|
|
|
|
|
|
// 渐变色背景
|
|
// 渐变色背景
|
|
|
.stat-card-gradient-1 {
|
|
.stat-card-gradient-1 {
|
|
|
- background:
|
|
|
|
|
- radial-gradient(circle at top left, rgba(121, 164, 255, 0.16), transparent 42%),
|
|
|
|
|
|
|
+ background: radial-gradient(circle at top left, rgba(121, 164, 255, 0.16), transparent 42%),
|
|
|
linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
|
|
linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.stat-card-gradient-2 {
|
|
.stat-card-gradient-2 {
|
|
|
- background:
|
|
|
|
|
- radial-gradient(circle at top left, rgba(118, 186, 255, 0.14), transparent 42%),
|
|
|
|
|
|
|
+ background: radial-gradient(circle at top left, rgba(118, 186, 255, 0.14), transparent 42%),
|
|
|
linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
|
|
linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.stat-card-gradient-3 {
|
|
.stat-card-gradient-3 {
|
|
|
- background:
|
|
|
|
|
- radial-gradient(circle at top left, rgba(96, 154, 241, 0.14), transparent 42%),
|
|
|
|
|
|
|
+ background: radial-gradient(circle at top left, rgba(96, 154, 241, 0.14), transparent 42%),
|
|
|
linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
|
|
linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.stat-card-gradient-4 {
|
|
.stat-card-gradient-4 {
|
|
|
- background:
|
|
|
|
|
- radial-gradient(circle at top left, rgba(137, 176, 242, 0.14), transparent 42%),
|
|
|
|
|
|
|
+ background: radial-gradient(circle at top left, rgba(137, 176, 242, 0.14), transparent 42%),
|
|
|
linear-gradient(180deg, #ffffff 0%, #f4f8fe 100%);
|
|
linear-gradient(180deg, #ffffff 0%, #f4f8fe 100%);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -906,7 +905,11 @@ onUnmounted(() => {
|
|
|
:deep(.el-card__header) {
|
|
:deep(.el-card__header) {
|
|
|
padding: 16px 20px;
|
|
padding: 16px 20px;
|
|
|
border-bottom: 1px solid rgba(223, 232, 245, 0.95);
|
|
border-bottom: 1px solid rgba(223, 232, 245, 0.95);
|
|
|
- background: linear-gradient(90deg, rgba(244, 248, 255, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
|
|
|
|
|
|
|
+ background: linear-gradient(
|
|
|
|
|
+ 90deg,
|
|
|
|
|
+ rgba(244, 248, 255, 0.96) 0%,
|
|
|
|
|
+ rgba(255, 255, 255, 0.98) 100%
|
|
|
|
|
+ );
|
|
|
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.78);
|
|
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.78);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -957,7 +960,11 @@ onUnmounted(() => {
|
|
|
border-radius: 12px;
|
|
border-radius: 12px;
|
|
|
|
|
|
|
|
&:hover {
|
|
&:hover {
|
|
|
- background: linear-gradient(180deg, rgba(244, 248, 255, 0.9) 0%, rgba(237, 244, 255, 0.95) 100%);
|
|
|
|
|
|
|
+ background: linear-gradient(
|
|
|
|
|
+ 180deg,
|
|
|
|
|
+ rgba(244, 248, 255, 0.9) 0%,
|
|
|
|
|
+ rgba(237, 244, 255, 0.95) 100%
|
|
|
|
|
+ );
|
|
|
box-shadow:
|
|
box-shadow:
|
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.86),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.86),
|
|
|
inset 0 -8px 16px rgba(212, 225, 243, 0.22);
|
|
inset 0 -8px 16px rgba(212, 225, 243, 0.22);
|
|
@@ -984,7 +991,11 @@ onUnmounted(() => {
|
|
|
0 4px 10px rgba(58, 90, 145, 0.06);
|
|
0 4px 10px rgba(58, 90, 145, 0.06);
|
|
|
|
|
|
|
|
.chart-item:hover & {
|
|
.chart-item:hover & {
|
|
|
- background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(238, 244, 255, 0.98) 100%);
|
|
|
|
|
|
|
+ background: linear-gradient(
|
|
|
|
|
+ 180deg,
|
|
|
|
|
+ rgba(255, 255, 255, 0.98) 0%,
|
|
|
|
|
+ rgba(238, 244, 255, 0.98) 100%
|
|
|
|
|
+ );
|
|
|
border-color: rgba(201, 217, 239, 0.98);
|
|
border-color: rgba(201, 217, 239, 0.98);
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|