WFC/fe.wfc.user
2
0
Fork 0
Code Activity

feat:仪表盘占比修改

Browse Source
This commit is contained in:
zhongzm
2025-01-22 21:12:43 +08:00
parent bf35afa9e2
commit 9dee7d17eb
1 changed files with 34 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/views/home/modules/header-banner.vue
View File

@@ -481,19 +481,19 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string =>
.card-wrapper { .card-wrapper {
margin-bottom: 16px; margin-bottom: 16px;
background: linear-gradient(180deg, #4284f5 0%, #0c47a7 100%); background: linear-gradient(180deg, #4284f5 0%, #0c47a7 100%);
padding: 16px 12px; padding: 16px 12px 16px 8px;
color: #fff; color: #fff;
} }
.dashboard-layout { .dashboard-layout {
display: flex; display: flex;
gap: 12px; gap: 4px;
} }
/* 左侧部分样式 */ /* 左侧部分样式 */
.left-section { .left-section {
flex: 0 0 auto; flex: 0 0 auto;
width: 200px; width: 160px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
@@ -507,16 +507,16 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string =>
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
margin-left: -20px; margin-left: -15px;
} }
.gauge-chart { .gauge-chart {
width: 200px; width: 160px;
height: 200px; height: 160px;
} }
.gauge-info { .gauge-info {
margin-top: -16px; margin-top: -12px;
} }
.gauge-title { .gauge-title {
@@ -525,7 +525,7 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string =>
} }
.gauge-value { .gauge-value {
font-size: 18px; font-size: 16px;
font-weight: bold; font-weight: bold;
margin-top: 2px; margin-top: 2px;
} }
@@ -536,11 +536,12 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string =>
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
gap: 6px; gap: 4px;
padding-right: 4px;
} }
.info-section { .info-section {
margin-bottom: 8px; margin-bottom: 6px;
} }
.section-title { .section-title {
@@ -582,19 +583,20 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string =>
/* 移动端适配 */ /* 移动端适配 */
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.card-wrapper { .card-wrapper {
padding: 16px 12px; padding: 16px 8px 16px 6px;
} }
.dashboard-layout { .dashboard-layout {
gap: 12px; gap: 4px;
} }
.right-section { .right-section {
gap: 6px; gap: 4px;
padding-right: 2px;
} }
.info-section { .info-section {
margin-bottom: 8px; margin-bottom: 4px;
} }
.section-title { .section-title {
@@ -612,26 +614,26 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string =>
} }
.left-section { .left-section {
width: 140px; width: 120px;
min-height: 180px; min-height: 180px;
} }
.gauge-container { .gauge-container {
width: 140px; width: 120px;
margin-left: -15px; margin-left: -10px;
} }
.gauge-chart { .gauge-chart {
width: 140px; width: 120px;
height: 140px; height: 120px;
} }
.gauge-info { .gauge-info {
margin-top: -16px; margin-top: -12px;
} }
.gauge-value { .gauge-value {
font-size: 18px; font-size: 16px;
margin-top: 2px; margin-top: 2px;
} }
@@ -649,26 +651,26 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string =>
/* 超小屏幕优化 */ /* 超小屏幕优化 */
@media screen and (max-width: 375px) { @media screen and (max-width: 375px) {
.card-wrapper { .card-wrapper {
padding: 10px 8px; padding: 10px 6px 10px 4px;
} }
.dashboard-layout { .dashboard-layout {
gap: 6px; gap: 4px;
} }
.left-section { .left-section {
width: 120px; width: 100px;
min-height: 160px; min-height: 160px;
} }
.gauge-container { .gauge-container {
width: 120px; width: 100px;
margin-left: -10px; margin-left: -8px;
} }
.gauge-chart { .gauge-chart {
width: 120px; width: 100px;
height: 120px; height: 100px;
} }
.gauge-info { .gauge-info {
@@ -700,5 +702,9 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string =>
.info-value { .info-value {
font-size: 12px; font-size: 12px;
} }
.right-section {
padding-right: 1px;
}
} }
</style> </style>