diff --git a/src/views/home/modules/header-banner.vue b/src/views/home/modules/header-banner.vue index 2f31822..151662f 100644 --- a/src/views/home/modules/header-banner.vue +++ b/src/views/home/modules/header-banner.vue @@ -327,7 +327,7 @@ async function mockDataUpdate() { downLimit: speedLimits.value.downLimit } }; -console.log(baseData.value[1].description) + console.log(baseData.value[1].description) // 更新速率限制显示 if (response.rateLimitEnable) { speedLimits.value = { @@ -550,29 +550,50 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string => } .info-section { - margin-bottom: 6px; + margin-bottom: 12px; + display: flex; + flex-direction: column; + align-items: center; } .section-title { font-size: 14px; font-weight: 500; color: #fff; - margin-bottom: 4px; + margin-bottom: 8px; padding-left: 6px; - border-left: 3px solid #fff; + text-align: center; + display: flex; + align-items: center; + justify-content: center; +} + +.section-title::before { + content: ''; + display: inline-block; + width: 3px; + height: 14px; + background-color: #fff; + margin-right: 8px; + border-radius: 2px; } .info-group { background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 6px 8px; + width: 80%; + margin: 0 auto; } .info-item { display: flex; + flex-direction: row; justify-content: space-between; align-items: center; - padding: 4px 0; + padding: 8px 0; + max-width: 300px; + margin: 0 auto; } .info-item:not(:last-child) { @@ -585,7 +606,7 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string => } .info-value { - font-size: 13px; + font-size: 14px; font-weight: 500; } @@ -604,22 +625,31 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string => padding-right: 2px; } - .info-section { - margin-bottom: 4px; - } - .section-title { font-size: 14px; - margin-bottom: 4px; - padding-left: 6px; + margin-bottom: 6px; + } + + .info-section { + margin-bottom: 8px; } .info-group { - padding: 6px 8px; + width: 90%; } .info-item { - padding: 4px 0; + padding: 6px 0; + max-width: 250px; + } + + .info-label { + font-size: 12px; + margin-bottom: 3px; + } + + .info-value { + font-size: 14px; } .left-section { @@ -645,16 +675,6 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string => font-size: 16px; margin-top: 2px; } - - .info-label { - font-size: 12px; - white-space: nowrap; - } - - .info-value { - font-size: 13px; - word-break: break-all; - } } /* 超小屏幕优化 */ @@ -692,28 +712,33 @@ const getDeviceCount = (subTitle?: string, clientNumEnable?: boolean): string => .section-title { font-size: 13px; - margin-bottom: 3px; - padding-left: 4px; + margin-bottom: 4px; } .info-group { - padding: 4px 6px; + width: 95%; } .info-item { - padding: 3px 0; + padding: 4px 0; + max-width: 200px; } .info-label { font-size: 11px; + margin-bottom: 2px; } .info-value { - font-size: 12px; + font-size: 13px; } .right-section { padding-right: 1px; } + + .info-section { + margin-bottom: 6px; + } }