diff --git a/src/pages/device/index.module.scss b/src/pages/device/index.module.scss index ce3a73d..48c6cc4 100644 --- a/src/pages/device/index.module.scss +++ b/src/pages/device/index.module.scss @@ -12,9 +12,18 @@ align-items: center; } +// 绿色衬底:占位高度与浮卡上浮量(-40px)匹配,卡片叠在它上面而不是压进导航栏 +.heroSpace { + height: 64px; + background: #2ccb98; + margin-bottom: -40px; + position: relative; + z-index: 1; +} + // 设备应用家庭信息卡:白色卡片浮在绿色头部下,浅灰行内分隔 .familyCard { - margin: -40px 24px 0; + margin: 0 24px; padding: 8px 32px 32px; background: $color-bg-white; border-radius: $radius-lg; @@ -31,10 +40,6 @@ border-bottom: 1px solid $color-border; } -.familyRow:last-of-type { - border-bottom: none; -} - .familyLabel { font-size: 30px; color: $color-text-secondary; @@ -47,6 +52,7 @@ } .switchBtn { + width: 100%; margin-top: 24px; height: 88px; background: $color-primary-grad; @@ -172,22 +178,6 @@ .statusText { font-size: 24px; color: $color-primary-deep; } .statusTextOff { color: $color-text-secondary; } -.fab { - position: fixed; - right: 40px; - bottom: 60px; - width: 112px; - height: 112px; - border-radius: $radius-circle; - background: $color-primary-grad; - display: flex; - align-items: center; - justify-content: center; - box-shadow: $shadow-fab; -} - -.fabIcon { font-size: 48px; color: #ffffff; font-weight: 300; } - // 切换家庭圈弹层内的列表项 .sheetList { padding-bottom: 16px; diff --git a/src/pages/device/index.tsx b/src/pages/device/index.tsx index e0c007a..a7fc6d6 100644 --- a/src/pages/device/index.tsx +++ b/src/pages/device/index.tsx @@ -86,6 +86,9 @@ export default function DeviceList() { + {/* 绿色衬底:承接浮卡的上浮区,避免 -40px 压到导航标题 */} + + {/* 设备应用家庭信息卡 */} @@ -143,10 +146,6 @@ export default function DeviceList() { )} - - + - - {/* 切换家庭圈弹层 */}