feat(device-tab): 移除智能设备页悬浮加号,添加设备仅保留功能卡入口
This commit is contained in:
parent
58d0ee8ad7
commit
b8937d942f
|
|
@ -12,9 +12,18 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 绿色衬底:占位高度与浮卡上浮量(-40px)匹配,卡片叠在它上面而不是压进导航栏
|
||||||
|
.heroSpace {
|
||||||
|
height: 64px;
|
||||||
|
background: #2ccb98;
|
||||||
|
margin-bottom: -40px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
// 设备应用家庭信息卡:白色卡片浮在绿色头部下,浅灰行内分隔
|
// 设备应用家庭信息卡:白色卡片浮在绿色头部下,浅灰行内分隔
|
||||||
.familyCard {
|
.familyCard {
|
||||||
margin: -40px 24px 0;
|
margin: 0 24px;
|
||||||
padding: 8px 32px 32px;
|
padding: 8px 32px 32px;
|
||||||
background: $color-bg-white;
|
background: $color-bg-white;
|
||||||
border-radius: $radius-lg;
|
border-radius: $radius-lg;
|
||||||
|
|
@ -31,10 +40,6 @@
|
||||||
border-bottom: 1px solid $color-border;
|
border-bottom: 1px solid $color-border;
|
||||||
}
|
}
|
||||||
|
|
||||||
.familyRow:last-of-type {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.familyLabel {
|
.familyLabel {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
color: $color-text-secondary;
|
color: $color-text-secondary;
|
||||||
|
|
@ -47,6 +52,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.switchBtn {
|
.switchBtn {
|
||||||
|
width: 100%;
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
height: 88px;
|
height: 88px;
|
||||||
background: $color-primary-grad;
|
background: $color-primary-grad;
|
||||||
|
|
@ -172,22 +178,6 @@
|
||||||
.statusText { font-size: 24px; color: $color-primary-deep; }
|
.statusText { font-size: 24px; color: $color-primary-deep; }
|
||||||
.statusTextOff { color: $color-text-secondary; }
|
.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 {
|
.sheetList {
|
||||||
padding-bottom: 16px;
|
padding-bottom: 16px;
|
||||||
|
|
|
||||||
|
|
@ -86,6 +86,9 @@ export default function DeviceList() {
|
||||||
<View className={styles.page}>
|
<View className={styles.page}>
|
||||||
<Navbar title="智能设备" autoBack={false} variant="hero" />
|
<Navbar title="智能设备" autoBack={false} variant="hero" />
|
||||||
|
|
||||||
|
{/* 绿色衬底:承接浮卡的上浮区,避免 -40px 压到导航标题 */}
|
||||||
|
<View className={styles.heroSpace} />
|
||||||
|
|
||||||
{/* 设备应用家庭信息卡 */}
|
{/* 设备应用家庭信息卡 */}
|
||||||
<View className={styles.familyCard}>
|
<View className={styles.familyCard}>
|
||||||
<View className={styles.familyRow}>
|
<View className={styles.familyRow}>
|
||||||
|
|
@ -143,10 +146,6 @@ export default function DeviceList() {
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<View className={styles.fab} onClick={goAdd}>
|
|
||||||
<Text className={styles.fabIcon}>+</Text>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* 切换家庭圈弹层 */}
|
{/* 切换家庭圈弹层 */}
|
||||||
<BottomSheet visible={familySheetOpen} title="切换家庭圈" onClose={closeFamilySheet}>
|
<BottomSheet visible={familySheetOpen} title="切换家庭圈" onClose={closeFamilySheet}>
|
||||||
<View className={styles.sheetList}>
|
<View className={styles.sheetList}>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue