/* ============================================================= 房源页 顶部 5 个统计栏 — 生产外挂层（v5 视觉） ------------------------------------------------------------- 仅在手机端（max-width:768px）生效；PC 端由 houses-pc-top.css 接管， 两者互不干扰。 参考图实测（img_00076ce2da48.jpg, scale 2.413 img-px / css-px）： · 统计格内部顺序 = 图标 → 名称 → 数字（数字在最下面） band1 图标 css_y 130.6-148.0 h 17.8 band2 名称 css_y 156.2-164.5 h 8.7 band3 数字 css_y 172.4-185.7 h 13.3 ★ 最下 · 白卡 1 张，内含 5 个浅色药丸格（圆角 12） · 取色（逐位实测） 总套数 数字 rgb(0,80,239) 底 #e8f1fe 房间 数字 rgb(98,13,219) 底 #f1ebfd 空置 数字 rgb(231,5,17) 底 #feecef 已租 数字 rgb(1,154,56) 底 #ebfdf3 出租率 数字 rgb(240,114,0) 底 #fff4e6 回滚：删 index.html 对本文件的引用即可（DOM 未改、JS 未改）。 ============================================================= */ @media (max-width: 768px) { /* ── 白卡容器 ───────────────────────────────────────────── */ #page-houses .ym-stats-bar.v3 { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 7px !important; align-items: stretch !important; /* 宽度对齐下方卡片：.page-content 已有 padding:14px，这里禁用再加 margin， 否则会变成 double-padding（14+14=28）比兄弟卡片窄 28px。 对齐后 = 362px，与 .ym-filter-bar.v3 / #house-list-container 一致。 */ margin: 0 0 12px !important; padding: 10px !important; background: #fff !important; background-image: none !important; border: 1px solid #eef2f7 !important; border-radius: 16px !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 18px -10px rgba(15, 23, 42, .10) !important; overflow: visible !important; white-space: normal !important; } /* ── 每格 = 浅色药丸格，竖排三段 ─────────────────────────── */ #page-houses .ym-stats-bar.v3 .ym-stat-item { flex: none !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; /* ★ 竖排 */ align-items: center !important; justify-content: center !important; text-align: center !important; padding: 9px 2px 10px !important; border: none !important; border-radius: 12px !important; box-shadow: none !important; position: relative; overflow: hidden; transition: none !important; } #page-houses .ym-stats-bar.v3 .ym-stat-item:hover, #page-houses .ym-stats-bar.v3 .ym-stat-item:active { transform: none !important; box-shadow: none !important; } /* 关掉生产残留的伪元素（顶部高光 / 渐变罩） */ #page-houses .ym-stats-bar.v3 .ym-stat-item::before, #page-houses .ym-stats-bar.v3 .ym-stat-item::after { display: none !important; content: none !important; } /* ① 图标（最上） */ #page-houses .ym-stats-bar.v3 .ym-stat-icon { order: 1 !important; display: block !important; width: 18px !important; height: 18px !important; font-size: 0 !important; /* 隐藏生产 emoji 字形 */ line-height: 0 !important; margin: 0 0 4px !important; overflow: hidden !important; } #page-houses .ym-stats-bar.v3 .ym-stat-icon svg { display: block !important; width: 18px !important; height: 18px !important; } /* ② 名称（中间） */ #page-houses .ym-stats-bar.v3 .ym-stat-label { order: 2 !important; display: block !important; font-size: 10.5px !important; line-height: 1.2 !important; font-weight: 500 !important; letter-spacing: 0 !important; color: #64748b !important; opacity: .85; margin: 0 !important; white-space: nowrap !important; } /* ③ 数字（最下）—— 主信息 */ #page-houses .ym-stats-bar.v3 .ym-stat-value { order: 3 !important; display: block !important; font-size: 17px !important; line-height: 1.15 !important; font-weight: 800 !important; letter-spacing: -.3px !important; margin: 2px 0 0 !important; font-variant-numeric: tabular-nums; } /* ── 五格底色 + 图标/数字同色（逐位实测取色） ───────────── */ #page-houses .ym-stats-bar.v3 .ym-stat-item:nth-child(1) { background: #e8f1fe !important; } #page-houses .ym-stats-bar.v3 .ym-stat-item:nth-child(2) { background: #f1ebfd !important; } #page-houses .ym-stats-bar.v3 .ym-stat-item:nth-child(3) { background: #feecef !important; } #page-houses .ym-stats-bar.v3 .ym-stat-item:nth-child(4) { background: #ebfdf3 !important; } #page-houses .ym-stats-bar.v3 .ym-stat-item:nth-child(5) { background: #fff4e6 !important; } #page-houses .ym-stats-bar.v3 .ym-stat-item:nth-child(1) .ym-stat-icon, #page-houses .ym-stats-bar.v3 .ym-stat-item:nth-child(1) .ym-stat-value { color: #0050ef !important; } #page-houses .ym-stats-bar.v3 .ym-stat-item:nth-child(2) .ym-stat-icon, #page-houses .ym-stats-bar.v3 .ym-stat-item:nth-child(2) .ym-stat-value { color: #620ddb !important; } #page-houses .ym-stats-bar.v3 .ym-stat-item:nth-child(3) .ym-stat-icon, #page-houses .ym-stats-bar.v3 .ym-stat-item:nth-child(3) .ym-stat-value { color: #e70511 !important; } #page-houses .ym-stats-bar.v3 .ym-stat-item:nth-child(4) .ym-stat-icon, #page-houses .ym-stats-bar.v3 .ym-stat-item:nth-child(4) .ym-stat-value { color: #019a38 !important; } #page-houses .ym-stats-bar.v3 .ym-stat-item:nth-child(5) .ym-stat-icon, #page-houses .ym-stats-bar.v3 .ym-stat-item:nth-child(5) .ym-stat-value { color: #f07200 !important; } /* 覆盖生产「空置/已租/出租率 = inherit 白字」的规则 */ #page-houses .ym-stats-bar.v3 .ym-stat-vacant .ym-stat-value, #page-houses .ym-stats-bar.v3 .ym-stat-rented .ym-stat-value, #page-houses .ym-stats-bar.v3 .ym-stat-rate .ym-stat-value { color: #e70511 !important; } #page-houses .ym-stats-bar.v3 .ym-stat-rented .ym-stat-value { color: #019a38 !important; } #page-houses .ym-stats-bar.v3 .ym-stat-rate .ym-stat-value { color: #f07200 !important; } /* 「%」号稍小 */ #page-houses .ym-stats-bar.v3 .ym-stat-rate .ym-stat-value { font-size: 17px !important; } /* ── 点选态：空置/已租 被筛选时保留反馈 ─────────────────── */ #page-houses .ym-stats-bar.v3 .ym-stat-item.active { box-shadow: inset 0 0 0 2px currentColor !important; background-image: none !important; } #page-houses .ym-stats-bar.v3 .ym-stat-item.active .ym-stat-label { color: inherit !important; } }