feat(home): 首页卡片视觉细化——渐变横幅、状态色块、信息层级
This commit is contained in:
parent
240c235921
commit
e2d7232f3c
|
|
@ -4,6 +4,7 @@
|
|||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
// loading 分支与空态分支共用（error 分支已由 StateView 自带 margin）
|
||||
.stateWrap {
|
||||
margin-top: 80px;
|
||||
display: flex;
|
||||
|
|
@ -11,106 +12,149 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
// ===== 家庭圈入口 =====
|
||||
// ===== 家庭圈入口：渐变横幅卡 =====
|
||||
.familyEntry {
|
||||
margin: 24px;
|
||||
padding-left: 48px;
|
||||
padding: 36px 32px;
|
||||
background: $color-primary-grad;
|
||||
border-radius: $radius-lg;
|
||||
// 品牌绿阴影（spec §5.1 允许的字面量）
|
||||
box-shadow: 0 4px 12px rgba(44, 203, 152, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.familyTexts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.familyIcon {
|
||||
width: 108px;
|
||||
height: 108px;
|
||||
border-radius: $radius-circle;
|
||||
background: $color-primary-grad;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.familyTitle {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.familyEmoji {
|
||||
font-size: 56px;
|
||||
line-height: 1;
|
||||
.familySub {
|
||||
margin-top: 8px;
|
||||
font-size: 24px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
.familyText {
|
||||
margin-top: 12px;
|
||||
font-size: 28px;
|
||||
color: $color-text;
|
||||
.familyArrow {
|
||||
font-size: 36px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
// ===== 未处理告警卡片 =====
|
||||
// ===== 未处理告警卡：左红色块 + 文字块 + 右上圆角标签 =====
|
||||
.unhandledCard {
|
||||
position: relative;
|
||||
margin: 0 24px 24px;
|
||||
padding: 32px;
|
||||
padding: 28px;
|
||||
background: $color-bg-white;
|
||||
border-radius: $radius-lg;
|
||||
box-shadow: $shadow-card;
|
||||
}
|
||||
|
||||
.unhandledTag {
|
||||
position: absolute;
|
||||
top: -16px;
|
||||
left: -8px;
|
||||
padding: 6px 18px;
|
||||
background: $color-danger-light-bg;
|
||||
color: $color-danger-deep;
|
||||
border: 2px solid $color-danger-deep;
|
||||
border-radius: $radius-sm;
|
||||
font-size: 22px;
|
||||
transform: rotate(-4deg);
|
||||
box-shadow: 0 2px 8px rgba(213, 59, 29, 0.15);
|
||||
}
|
||||
|
||||
.unhandledTitle {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
.unhandledRow {
|
||||
margin-top: 16px;
|
||||
.unhandledHead {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rowLabel {
|
||||
font-size: 28px;
|
||||
color: $color-text-secondary;
|
||||
.unhandledIcon {
|
||||
flex-shrink: 0;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: $radius-md;
|
||||
background: $color-danger-light-bg;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.rowValue {
|
||||
font-size: 28px;
|
||||
.unhandledIconText {
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
color: $color-danger-deep;
|
||||
}
|
||||
|
||||
.unhandledTitle {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
// ===== 告警消息列表 =====
|
||||
.unhandledTag {
|
||||
flex-shrink: 0;
|
||||
margin-left: 16px;
|
||||
padding: 4px 16px;
|
||||
background: $color-danger-light-bg;
|
||||
border-radius: $radius-pill;
|
||||
}
|
||||
|
||||
.unhandledTagText {
|
||||
font-size: 22px;
|
||||
color: $color-danger-deep;
|
||||
}
|
||||
|
||||
// 元信息与标题文字左对齐：72 图标 + 20 间距
|
||||
.unhandledMeta {
|
||||
margin-top: 12px;
|
||||
padding-left: 92px;
|
||||
}
|
||||
|
||||
.unhandledMetaText {
|
||||
font-size: 26px;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
||||
// ===== 告警消息列表：左绿色块 + 标题/时间 + 设备名副行 =====
|
||||
.messageList {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.messageCard {
|
||||
margin-bottom: 24px;
|
||||
padding: 32px;
|
||||
padding: 28px;
|
||||
background: $color-bg-white;
|
||||
border-radius: $radius-lg;
|
||||
box-shadow: $shadow-card;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.messageIcon {
|
||||
flex-shrink: 0;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: $radius-md;
|
||||
background: $color-primary-light-bg;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.messageIconText {
|
||||
font-size: 22px;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.messageBody {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.messageHead {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.messageDot {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: $radius-circle;
|
||||
background: $color-danger-deep;
|
||||
margin-right: 12px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.messageTitle {
|
||||
|
|
@ -120,7 +164,14 @@
|
|||
}
|
||||
|
||||
.messageTime {
|
||||
margin-top: 12px;
|
||||
margin-left: 16px;
|
||||
font-size: 24px;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
||||
.messageDevice {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-size: 26px;
|
||||
color: $color-text-secondary;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -78,10 +78,11 @@ export default function Index() {
|
|||
function FamilyEntry({ onClick }: { onClick: () => void }) {
|
||||
return (
|
||||
<View className={styles.familyEntry} onClick={onClick}>
|
||||
<View className={styles.familyIcon}>
|
||||
<Text className={styles.familyEmoji}>👨👩👧</Text>
|
||||
<View className={styles.familyTexts}>
|
||||
<Text className={styles.familyTitle}>家庭圈</Text>
|
||||
<Text className={styles.familySub}>家人共享 · 守护彼此</Text>
|
||||
</View>
|
||||
<Text className={styles.familyText}>家庭圈</Text>
|
||||
<Text className={styles.familyArrow}>›</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
@ -89,18 +90,23 @@ function FamilyEntry({ onClick }: { onClick: () => void }) {
|
|||
function UnhandledAlert({ alert, onClick }: { alert: EventItem; onClick: () => void }) {
|
||||
return (
|
||||
<View className={styles.unhandledCard} onClick={onClick}>
|
||||
<View className={styles.unhandledTag}><Text>未处理</Text></View>
|
||||
<View className={styles.unhandledHead}>
|
||||
<View className={styles.unhandledIcon}>
|
||||
<Text className={styles.unhandledIconText}>!</Text>
|
||||
</View>
|
||||
<Text className={styles.unhandledTitle}>{alert.deviceName || '未知设备'}</Text>
|
||||
<View className={styles.unhandledTag}>
|
||||
<Text className={styles.unhandledTagText}>未处理</Text>
|
||||
</View>
|
||||
</View>
|
||||
{alert.sceneName && (
|
||||
<View className={styles.unhandledRow}>
|
||||
<Text className={styles.rowLabel}>家庭圈：</Text>
|
||||
<Text className={styles.rowValue}>{alert.sceneName}</Text>
|
||||
<View className={styles.unhandledMeta}>
|
||||
<Text className={styles.unhandledMetaText}>{alert.sceneName}</Text>
|
||||
</View>
|
||||
)}
|
||||
{alert.time && (
|
||||
<View className={styles.unhandledRow}>
|
||||
<Text className={styles.rowLabel}>时间：</Text>
|
||||
<Text className={styles.rowValue}>{alert.time}</Text>
|
||||
<View className={styles.unhandledMeta}>
|
||||
<Text className={styles.unhandledMetaText}>{alert.time}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
|
@ -110,11 +116,18 @@ function UnhandledAlert({ alert, onClick }: { alert: EventItem; onClick: () => v
|
|||
function AlertMessageItem({ alert, onClick }: { alert: EventItem; onClick: () => void }) {
|
||||
return (
|
||||
<View className={styles.messageCard} onClick={onClick}>
|
||||
<View className={styles.messageHead}>
|
||||
<View className={styles.messageDot} />
|
||||
<Text className={styles.messageTitle}>告警消息</Text>
|
||||
<View className={styles.messageIcon}>
|
||||
<Text className={styles.messageIconText}>●</Text>
|
||||
</View>
|
||||
<View className={styles.messageBody}>
|
||||
<View className={styles.messageHead}>
|
||||
<Text className={styles.messageTitle}>告警消息</Text>
|
||||
{alert.time && <Text className={styles.messageTime}>{alert.time}</Text>}
|
||||
</View>
|
||||
{alert.deviceName && (
|
||||
<Text className={styles.messageDevice}>{alert.deviceName}</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue