|
|
@@ -79,7 +79,10 @@ const statsList = computed(() => [
|
|
|
|
|
|
// 生成 24小时 Mock 数据
|
|
|
const generateData = () => {
|
|
|
- const hours = ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
|
|
|
+ const hours = []
|
|
|
+ for (let i = 0; i < 24; i++) {
|
|
|
+ hours.push(`${i.toString().padStart(2, '0')}:00`)
|
|
|
+ }
|
|
|
const seriesData1 = [] // DDoS
|
|
|
const seriesData2 = [] // CC
|
|
|
const seriesData3 = [] // WAF
|
|
|
@@ -134,7 +137,9 @@ const chartOption = computed(() => ({
|
|
|
},
|
|
|
axisLabel: {
|
|
|
color: 'rgba(255, 255, 255, 0.5)',
|
|
|
- fontSize: 12
|
|
|
+ fontSize: 10,
|
|
|
+ rotate: 45,
|
|
|
+ interval: 1
|
|
|
}
|
|
|
},
|
|
|
yAxis: {
|
|
|
@@ -229,7 +234,7 @@ const chartOption = computed(() => ({
|
|
|
justify-content: space-between;
|
|
|
box-sizing: border-box;
|
|
|
gap: 10px;
|
|
|
- margin-bottom: 60px;
|
|
|
+ margin-bottom: 22px;
|
|
|
|
|
|
.card {
|
|
|
flex: 1;
|
|
|
@@ -267,15 +272,27 @@ const chartOption = computed(() => ({
|
|
|
|
|
|
.card-icon {
|
|
|
position: absolute;
|
|
|
+ height: 24px;
|
|
|
+ width: 24px;
|
|
|
left: 50%;
|
|
|
top: 0;
|
|
|
transform: translate(-50%, -50%);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
// border-radius: 100px;
|
|
|
// border: 1px solid rgba(64, 64, 64, 0.50);
|
|
|
// background: rgba(255, 255, 255, 0.10);
|
|
|
// box-shadow: -20px 68px 20px 0 rgba(0, 0, 0, 0.00), -13px 43px 18px 0 rgba(0, 0, 0, 0.01), -7px 24px 15px 0 rgba(0, 0, 0, 0.04), -3px 11px 11px 0 rgba(0, 0, 0, 0.07), -1px 3px 6px 0 rgba(0, 0, 0, 0.08);
|
|
|
// backdrop-filter: blur(7.5px);
|
|
|
z-index: 2;
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.value {
|
|
|
@@ -296,16 +313,14 @@ const chartOption = computed(() => ({
|
|
|
text-align: center;
|
|
|
|
|
|
.chart-title {
|
|
|
- font-size: 30px;
|
|
|
- font-weight: 400;
|
|
|
- margin-bottom: 40px;
|
|
|
- letter-spacing: 1px;
|
|
|
color: #FFF;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
}
|
|
|
|
|
|
.chart-container {
|
|
|
width: 100%;
|
|
|
- height: 400px;
|
|
|
+ height: 220px;
|
|
|
position: relative;
|
|
|
|
|
|
.chart {
|