diff --git a/src/pages/index/index.module.scss b/src/pages/index/index.module.scss index 101ea2d..5b4f1c3 100644 --- a/src/pages/index/index.module.scss +++ b/src/pages/index/index.module.scss @@ -34,6 +34,99 @@ color: #ffffff; } +// ===== 游客首页:功能介绍卡 + 底部登录引导(先浏览体验,后自主选择登录) ===== +.guestSection { + padding: 0 24px; +} + +.guestCard { + margin-bottom: 24px; + padding: 28px; + background: $color-bg-white; + border-radius: $radius-lg; + box-shadow: $shadow-card; + display: flex; + align-items: center; +} + +.guestCardIcon { + 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; +} + +.guestCardIconText { + font-size: 32px; +} + +.guestCardBody { + flex: 1; + min-width: 0; +} + +.guestCardTitle { + font-size: 30px; + font-weight: 600; + color: $color-text; +} + +.guestCardDesc { + display: block; + margin-top: 8px; + font-size: 24px; + color: $color-text-secondary; +} + +// 底部登录引导卡:非阻断,用户可继续浏览其他 tab +.guestLoginCard { + margin: 8px 24px 0; + padding: 32px 28px; + background: $color-bg-white; + border-radius: $radius-lg; + box-shadow: $shadow-card; + display: flex; + align-items: center; +} + +.guestLoginTexts { + flex: 1; + min-width: 0; + margin-right: 24px; +} + +.guestLoginTitle { + font-size: 30px; + font-weight: 600; + color: $color-text; +} + +.guestLoginSub { + display: block; + margin-top: 8px; + font-size: 24px; + line-height: 1.5; + color: $color-text-secondary; +} + +.guestLoginCard .guestLoginBtn { + margin-top: 0; + padding: 0 36px; + height: 72px; + flex-shrink: 0; +} + +.guestLoginCard .guestLoginBtnText { + font-size: 26px; + font-weight: 600; + color: #ffffff; +} + // ===== 家庭圈入口:渐变横幅卡 ===== .familyEntry { margin: 24px; diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 1e9df15..d30c166 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -68,12 +68,7 @@ export default function Index() { {loading ? ( ) : guest ? ( - - - navigateTo(ROUTES.LOGIN)}> - 去登录 - - + navigateTo(ROUTES.LOGIN)} /> ) : loadError ? ( ) : ( @@ -115,6 +110,42 @@ function FamilyEntry({ onClick }: { onClick: () => void }) { ) } +// 游客首页:功能介绍可自由浏览,登录引导放底部非阻断(微信审核:先体验后自主选择登录) +function GuestHome({ onLogin }: { onLogin: () => void }) { + const features = [ + { icon: '◉', title: '健康雷达守护', desc: '睡眠呼吸、心率监测,异常实时提醒' }, + { icon: '⚠', title: '跌倒自动告警', desc: '跌倒检测雷达全天值守,紧急联系人速达' }, + { icon: '👪', title: '家庭圈共享', desc: '家人共同守护长辈,告警动态一起看' } + ] + return ( + <> + + + {features.map((f) => ( + + + {f.icon} + + + {f.title} + {f.desc} + + + ))} + + + + 登录后开启守护 + 绑定设备、查看告警动态需要登录,可随时在下方自主选择 + + + 微信登录 + + + + ) +} + function UnhandledAlert({ alert, onClick }: { alert: HomeAlarm; onClick: () => void }) { return (