/* =============== Reset & Base =============== */* { margin: 0; padding: 0; box-sizing: border-box; font-family: "PingFang SC";}::-webkit-scrollbar { display: none; }html { scrollbar-width: none; }body { margin: 0; padding: 0; background-color: #EFEEF3; background: linear-gradient(168deg, #FCF1FB 0%, #FFDED4 50.64%, #F9D2FF 99.39%); background-repeat: no-repeat; /* 去掉这一行： background-attachment: fixed; */ background-size: cover; -ms-overflow-style: none;}/* ===== 可调参数（一处总控） ===== */:root{ --search-block-margin-y: 8px; --search-pad-y: 6px; --search-pad-x: 12px; --search-radius: 18px; --search-col-left: clamp(275px, 71vw, 624px); --search-gap: 12px; --gap-filter-to-features: 8px; --filter-btn-h: 44px; --filter-btn-fs: 15px; --filter-btn-radius: 22px; --filter-btn-padx: 18px; --filter-btn-minw: 120px; --filter-btn-maxw: 150px; --actions-gap: 18px; --actions-edge-pad: 15px; --area-actions-gap: 12px; --area-actions-edge-pad: 32px; --tag-item-minh: 20px; --tag-item-pady: 8px; --tag-item-fs: 14px; --tag-item-maxw: 85px; --tag-grid-min: 110px; --tags-buttons-gap-top: 5px; /* ===== 置顶徽标（左上贴边） ===== */ --pin-size: 40px; --pin-gap-x: -1px; --pin-gap-y: -1px;}html, body { overflow-y: scroll; height: 100%;}.container { margin-bottom: 50px; }/* =============== 顶部搜索（输入框与图标分离） =============== */.search-container { display: grid; grid-template-columns: var(--search-col-left) auto; align-items: center; column-gap: var(--search-gap); margin: var(--search-block-margin-y) 10px var(--search-block-margin-y);}.search-container .search-bar { display: flex; align-items: center; background-color: #fff; border-radius: var(--search-radius); padding: var(--search-pad-y) var(--search-pad-x); box-shadow: 0 1px 3px rgba(0,0,0,0.1); cursor: text;}.search-container input { flex: 1; min-width: 0; border: none; outline: none; font-size: 14px; background: transparent;}.search-container .search-icon { margin-right: 8px; color: #666; line-height: 0;}.search-container .links { display: inline-flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 0;}.search-container .links .search-link-img { flex: 0 0 auto; line-height: 0; overflow: visible;}.search-container .links .search-link-img img { width: 33px; height: 33px; border-radius: 10px; object-fit: cover;}#iconGroup, #iconChannel{ width: 35px !important; height: 33px !important; display: block; object-fit: contain !important; border-radius: 0 !important;}@media (max-width: 360px){ .search-container{ grid-template-columns: clamp(200px, 56vw, 460px) auto; column-gap: 10px; }}/* =============== 顶部分类按钮 =============== */.filter-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 8px var(--gap-filter-to-features);}.filter-button { display: inline-flex; align-items: center; justify-content: center; padding: 4px 11px; min-height: 32px; border-radius: 20px; font-size: 14px; cursor: pointer; transition: all 0.3s; border-style: none; background-color: #fff; color: #333; flex: 1 1 20%; box-sizing: border-box;}.filter-button.active { background-color: #FFB84D; color: #fff; }/* =============== 顶部筛选条 & 下拉容器 =============== */.filter-container { position: relative; }.filter-dropdown { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 8px 2px; padding: 5px; justify-content: space-between; border-radius: 7px; background-color: #fff;}.dropdown-item { cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 12px;}.dropdown-item .title span{ color: #999; font-size: 12px; }.dropdown-item .title .name{ margin-right: 1px; }.dropdown-item select{ border-style: none; background-color: #fff; font-size: 12px; color: #ccc;}/* ======= 新：SVG 箭头（默认↑，激活后↓） ======= */.dropdown-item .arrow-svg{ display:inline-block; transform: rotate(180deg); transition: transform .2s ease;}.dropdown-item.active .arrow-svg{ transform: rotate(0deg); }/* 通用下拉容器（贴紧状态栏，覆盖页面） */.dropdown-container{ padding: 20px 15px; background-color: #fff; border-radius: 0 0 15px 15px; margin-top: 5px; display: none; position: absolute; width: 100%; z-index: 9999; font-size: 12px; left: 0; right: 0;}/* =============== 灰色遮罩（top 由 JS 动态设为面板底部） =============== */.dropdown-mask{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.35); z-index: 9990; display: none;}.dropdown-mask::before{ content:""; position:absolute; left:0; right:0; top:-15px; height:15px; background: rgba(0,0,0,.35); border-top-left-radius: 15px; border-top-right-radius: 15px;}/* =============== 地区抽屉（50% 高度，可滚动） =============== */.area-container { padding: 0; height: 50vh; max-height: 50vh; overflow: hidden; display: none;}.area-drawer{ display: grid; grid-template-rows: 1fr auto; height: 50vh; background: #fff; border-radius: 0 0 15px 15px;}.area-list{ overflow: auto; padding: 12px 8px 8px;}.area-item{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 10px; margin: 0 4px 8px; background: #F7F8FC; border-radius: 12px; cursor: pointer; transition: .18s ease;}.area-item.active{ background: #FFEFD6; box-shadow: inset 0 0 0 2px #FFB84D;}.area-item .area-item-name{ color:#333; }.area-item .selected{ color:#FFB84D; }/* —— 上海（地区）按钮条 —— */.area-actions{ display: flex; justify-content: space-between; gap: 5px; padding: 10px var(--area-actions-edge-pad) 20px; border-top: 1px dashed #f0f0f0; background: #fff;}.area-actions .btn{ flex: 0 1 var(--filter-btn-maxw); min-width: var(--filter-btn-minw); height: var(--filter-btn-h); border-radius: var(--filter-btn-radius); font-size: var(--filter-btn-fs); cursor: pointer; transition: .18s ease; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--filter-btn-padx); line-height: calc(var(--filter-btn-h) - 2px);}.area-actions .btn-reset{ border: 2px solid #ffaa00; background: #fff; color: #ffaa00;}.area-actions .btn-ok{ border: 0; background: #ffaa00; color: #fff;}/* =============== 特点（标签） =============== */.tags-container .tags-list{ display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--tag-grid-min), 1fr)); gap: 12px 14px; justify-items: center;}.tags-container .tags-list .tag-item { display: flex; align-items: center; justify-content: center; min-height: var(--tag-item-minh); padding: var(--tag-item-pady) 10px; width: 100%; max-width: var(--tag-item-maxw); border-radius: 18px; text-align: center; cursor: pointer; transition: all 0.2s ease; background-color: #F7F8FC; color: #333; font-size: var(--tag-item-fs);}.tags-container .tags-list .tag-item.active { background-color: #ffaa00; color: #fff;}.tags-container .tags-list .tag-item:hover:not(.active) { background-color: #f0f0f0; }.tags-container.dropdown-container { padding-bottom: 7px; }.tags-container { padding-bottom: 5px; }.tags-container .tags-buttons{ display: flex; justify-content: space-between; gap: var(--actions-gap); margin-top: var(--tags-buttons-gap-top); padding: 12px var(--actions-edge-pad) 12px; background-color: #fff; border-radius: 12px;}.tags-container .tags-buttons .tags-button { flex: 0 1 var(--filter-btn-maxw); min-width: var(--filter-btn-minw); height: var(--filter-btn-h); line-height: calc(var(--filter-btn-h) - 2px); border-radius: var(--filter-btn-radius); font-size: var(--filter-btn-fs); display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--filter-btn-padx); cursor: pointer; transition: all 0.3s ease;}.tags-container .tags-buttons .reset-btn { border: 2px solid #ffaa00; color: #ffaa00; background-color: transparent;}.tags-container .tags-buttons .confirm-btn { background-color: #ffaa00; color: #fff; border: 0;}/* =============== 推荐（按钮风格与标签一致） =============== */.recommend-container .recommend-list{ display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--tag-grid-min), 1fr)); gap: 12px 14px; justify-items: center;}.recommend-container .recommend-list .recommend-item{ display: flex; align-items: center; justify-content: center; min-height: var(--tag-item-minh); padding: var(--tag-item-pady) 10px; width: 100%; max-width: var(--tag-item-maxw); border-radius: 18px; text-align: center; cursor: pointer; transition: all 0.2s ease; background-color: #F7F8FC; color: #333; font-size: var(--tag-item-fs);}.recommend-container .recommend-list .recommend-item.active{ background-color: #ffaa00; color: #fff;}.recommend-container .recommend-list .recommend-item:hover:not(.active){ background-color: #f0f0f0;}/* =============== 列表卡片 =============== */.service-list { display: grid; padding: 10px; grid-template-columns: 1fr 1fr; gap: 10px;}.service-card { position: relative; border-radius: 10px; background-color: #fff; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1); padding-bottom: 5px; margin-bottom: 10px;}.service-card .avatar { position: relative; }/* 仅封面图铺满，角标不拉伸 */.service-card .avatar img.cover{ border-radius: 10px; width: 100%; height: 200px; object-fit: cover;}.service-card .top{ position:absolute; top:0; left:0; color:#E1A581; display:inline-block; }.service-card .top::before{ content:''; position:absolute; inset:0; background-color:orange; z-index:-1; }.service-card .top span{ font-size:40px; z-index:1; }/* 名字上移：减小信息块上内边距 */.service-info { padding: 6px 10px 10px; }.service-name { font-size: 16px; font-weight: bold; margin-bottom: 5px; }.service-id { display:flex; align-items:center; margin-bottom:5px; gap: 1px; }.service-id .num { background-color: #FFB84D; color: white; padding: 3px 8px; border-radius: 15px; font-size: 12px;}/* SVG 徽章（行内徽章，非置顶角标） */.service-id .badge-svg { display: inline-flex; align-items: center; line-height: 0; vertical-align: middle;}.service-id .badge-svg img { width: 54px; height: 18px; display: block;}/* 旧文字徽章（兜底） */.service-id span.tag { color:#fff; padding:2px 8px 3px; border-radius:15px; font-size:12px; }.service-id span.tag span{ background:none; margin-right:3px; color:#fff; font-size:12px; }.service-id span.recommend { background-color: #2AB7F8; }.service-id span.wangpai { background: linear-gradient(180deg, #FF5D01 0%, #FF7E01 100%); }.service-id span.hongpai { background-color: #FF4848; }.service-id span.haoping { background-color: #F27CFF; }.service-id span.xinren { background-color: #0FD4B4; }.location { display:flex; align-items:center; margin-bottom:5px; font-size:14px; color:#9D9D9D; }.location i { margin-right: 5px; color: #f0f0f0; }.location i span{ color:#9D9D9D; }.tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }.tags .tag { padding:3px 8px; border-radius:15px; font-size:12px; }/* 价格角标（默认右上） */.price-tag { position: absolute; top: 0; right: 0; background-color: #333; opacity: 0.5; color: white; padding: 3px 8px; border-radius: 0 0 0 10px; font-size: 12px;}.price-tag .qianbao{ color: #FBD97C; }/* 距离角标 */.distance { position: absolute; bottom: 5px; left: 0; background-color: #333; opacity: 0.5; color: white; padding: 3px 8px; border-radius: 0 5px 0 10px; font-size: 12px; /* NEW: 距离图标与文字对齐 */ display: inline-flex; align-items: center; gap: 4px;}.distance .jl{ height: 1em; width: auto; display: inline-block; vertical-align: -1px;}/* ===== 置顶角标：左上贴边 ===== */.service-card .pin-badge-svg{ position: absolute; top: var(--pin-gap-y); left: var(--pin-gap-x); right: auto; width: var(--pin-size); height: var(--pin-size); z-index: 4; pointer-events: none; display: block;}/* 回到顶部按钮 */.action-button { position: fixed; bottom: 80px; right: 20px; width: 50px; height: 50px; background: linear-gradient(to right, #FE756E, #FB5679); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; box-shadow: 0 4px 8px rgba(0,0,0,0.2); z-index: 500;}.action-button span{ font-size: 24px; }.ml-10{ margin-left: 10px; }/* Toast */.toast-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 12000;}.toast { position: absolute; top: 10%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0,0,0,0.8); color: white; padding: 15px 25px; border-radius: 8px; font-size: 16px; text-align: center; min-width: 200px; opacity: 0; transition: opacity 0.3s ease;}.toast.show { opacity: 0.6; }.footer a { text-decoration: none; color: #666; display: flex; flex-direction: column; align-items: center; padding: 3px 32px 2px;}.footer a:hover,.footer a.active { color: #FFA500; }.footer img { width: 20px; height: 20px; margin-bottom: 5px; }/* =============== 距离面板（统一按钮规格） =============== */.distance-container { }/* 行布局 */.distance-panel .row { display: flex; align-items: center; gap: 10px; padding: 10px 0;}.distance-panel .row.between { justify-content: space-between; }.distance-panel .label { color: #333; min-width: 64px; font-size: 16px; font-weight: 600; }/* 输入 + 放大镜图标 */.input-with-icon { flex: 1; position: relative; display: flex; align-items: center;}.input-with-icon .search-svg{ position: absolute; left: 12px; width: 16px; height: 16px; display: block; pointer-events: none;}.input-with-icon input { flex: 1; height: 38px; padding: 0 12px 0 34px; /* 给放大镜留出空间 */ border: 1px solid #eee; border-radius: 20px; outline: none; background: #F7F8FC; font-size: 14px; /* ★ 防止 iOS 聚焦时整页放大 */}/* 联想抽屉 */#place-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid #eef0f3; border-radius: 10px; overflow: auto; max-height: 50vh; display: none; z-index: 10000; box-shadow: 0 6px 18px rgba(0,0,0,.08);}.tips-item { padding: 10px 12px; border-bottom: 1px dashed #f0f0f0; cursor: pointer;}.tips-item:last-child { border-bottom: none; }.tips-item .name { font-size: 13px; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}/* —— 距离面板按钮条 —— */.distance-actions{ display: flex; justify-content: space-between; gap: 3px; margin-top: 10px; padding: 0 var(--actions-edge-pad); padding-bottom: 0px;}.distance-actions .btn{ flex: 0 1 var(--filter-btn-maxw); min-width: var(--filter-btn-minw); height: var(--filter-btn-h); border-radius: var(--filter-btn-radius); font-size: var(--filter-btn-fs); cursor: pointer; transition: .18s ease; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--filter-btn-padx); line-height: calc(var(--filter-btn-h) - 2px);}.distance-actions .btn-reset { border: 2px solid #ffaa00; background: #fff; color: #ffaa00;}.distance-actions .btn-ok { border: 0; background: #ffaa00; color: #fff;}/* 叠层优先级 */.dropdown-container { z-index: 11000; }#distance-container { z-index: 11000; }.dropdown-mask { z-index: 10990; }.footer { z-index: 800; }/* —— 角标兜底：不拉伸 —— */.service-card .avatar img.pin-badge-svg{ width: var(--pin-size) !important; height: var(--pin-size) !important; object-fit: contain; border-radius: 0 !important;}/* ========================================================= * ANDROID 专属紧凑样式（iOS 保持现状不变） * 通过选择器生效 * =======================================================*//* 1) 全局排版与溢出控制 */html.is-android, html.is-android body { overflow-x: hidden; /* 杜绝横向滚动 */}html.is-android body { font-size: 14px; /* Android 更紧凑；iOS 保持原样 */ line-height: 1.35; text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}/* 2) 图片与视频绝不出框（缩小但不放大） */html.is-android img,html.is-android video,html.is-android canvas { max-width: 100%; height: auto;}/* 3) 变量级收紧：按钮/搜索区/封面图等 */html.is-android :root{ --search-block-margin-y: 6px; --search-pad-y: 5px; --search-pad-x: 10px; --search-radius: 16px; --search-col-left: clamp(240px, 66vw, 560px); --filter-btn-h: 40px; --filter-btn-fs: 14px; --filter-btn-radius: 20px; --filter-btn-padx: 14px; --filter-btn-minw: 98px; --filter-btn-maxw: 132px; --pin-size: 34px; --pin-gap-x: -1px; --pin-gap-y: -1px; --tag-item-fs: 13px; --tag-item-maxw: 80px; --tag-grid-min: 100px;}html.is-android .search-container .search-icon { margin-right: 6px; }html.is-android #iconGroup,html.is-android #iconChannel{ width: 30px !important; height: 30px !important;}/* 卡片封面更矮，避免首屏挤出 */html.is-android .service-card .avatar img.cover{ height: 168px;}/* 价格/距离角标更紧凑 */html.is-android .price-tag,html.is-android .distance{ font-size: 11px; padding: 2px 6px;}/* 抽屉按钮更紧凑，减少遮罩被迫滚动 */html.is-android .area-actions .btn,html.is-android .distance-actions .btn{ height: 38px; line-height: 36px; font-size: 14px;}/* 顶部分类按钮在窄屏避免断词与外溢 */html.is-android .filter-buttons{ gap: 8px; margin: 4px 6px var(--gap-filter-to-features);}html.is-android .filter-button{ min-height: 30px; font-size: 13px; padding: 3px 10px;}/* 联想抽屉在 Android 上略降高度，配合软键盘 */html.is-android #place-suggest{ max-height: 42vh; }/* 兜底：任何容器不允许超出视口宽度 */html.is-android .container,html.is-android .service-list,html.is-android .filter-container{ max-width: 100vw; overflow-x: hidden;}/* ========================================================= * ANDROID · 窄屏自适配补丁（iOS 完全不受影响） * 触发条件：且视口宽度 ≤ 360px * 目标：避免横向挤压；卡片改为单列；封面改为自适应比例；标签更紧凑 * =======================================================*/@media (max-width: 360px) { html.is-android, html.is-android body { overflow-x: hidden; } /* 顶部搜索：左列更窄、整体更紧凑 */ html.is-android .search-container{ grid-template-columns: clamp(200px, 58vw, 480px) auto; column-gap: 8px; margin: 6px 8px; } html.is-android .search-container .search-bar{ padding: 5px 10px; border-radius: 16px; } html.is-android .search-container input{ font-size: 13px; } html.is-android #iconGroup, html.is-android #iconChannel{ width: 28px !important; height: 28px !important; } /* 顶部分类按钮更小，间距更小 */ html.is-android .filter-buttons{ gap: 8px; margin: 4px 6px 6px; } html.is-android .filter-button{ min-height: 30px; font-size: 13px; padding: 3px 10px; flex: 1 1 22%; } /* 状态栏：行内元素更紧凑 */ html.is-android .filter-dropdown{ gap: 8px; margin: 2px 6px; padding: 5px 6px; } html.is-android .dropdown-item{ gap: 6px; font-size: 12px; } html.is-android .dropdown-item .title span{ font-size: 12px; } /* —— 列表改“单列” + 避免两列挤压 —— */ html.is-android .service-list{ grid-template-columns: 1fr; /* 从 2 列切换到 1 列 */ gap: 8px; padding: 8px; } /* 让 left/right 两列的子卡片按文档流合并到单列里 */ html.is-android .service-list .left, html.is-android .service-list .right{ display: contents; } /* 卡片整体更紧凑 */ html.is-android .service-card{ margin-bottom: 8px; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,.08); } /* 名字上移同步：窄屏也降低上内边距 */ html.is-android .service-info{ padding: 5px 10px 8px; } html.is-android .service-name{ font-size: 18px; } /* —— 封面图：不要固定 200px，高度用比例，避免被挤 —— */ @supports (aspect-ratio: 3 / 2) { html.is-android .service-card .avatar img.cover{ height: auto; /* 覆盖原来的固定高度 */ aspect-ratio: 16 / 11; /* 稍矮一些，减少首屏占用 */ object-fit: cover; } } /* 无 aspect-ratio 支持的兜底：用视口宽度近似高度 */ @supports not (aspect-ratio: 3 / 2) { html.is-android .service-card .avatar img.cover{ height: 58vw; /* 单列下以屏宽估高 */ object-fit: cover; } } /* 置顶角标与价格/距离角标更小，避免遮挡 */ html.is-android .service-card .pin-badge-svg{ width: 32px; height: 32px; } html.is-android .price-tag, html.is-android .distance{ font-size: 11px; padding: 2px 6px; border-radius: 0 5px 0 10px; } /* 编号徽章 + 标签更紧凑，避免“彩色豆”把一行撑爆 */ html.is-android .service-id .num{ font-size: 11px; padding: 2px 6px; } html.is-android .tags{ gap: 4px; } html.is-android .tags .tag{ font-size: 12px; padding: 2px 6px; max-width: 44%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 底部导航更贴边更小，避免遮挡内容 */ html.is-android .footer{ height: 48px; font-size: 11px; padding: 4px 0; } html.is-android .footer a{ padding: 2px 24px 2px; } html.is-android .footer img{ width: 18px; height: 18px; } /* 距离面板/联想抽屉：键盘顶起时别太高 */ html.is-android #place-suggest{ max-height: 42vh; } html.is-android .distance-panel .label{ font-size: 15px; } html.is-android .input-with-icon input{ height: 36px; font-size: 13px; }}/* （可选兜底）确保 ≥361px 的安卓强制两列，避免其它样式误改 */@media (min-width: 361px){ html.is-android .service-list{ grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; } html.is-android .service-list .left, html.is-android .service-list .right{ display: block; }}/* 名字上移：安卓常规屏也减小上内边距 */html.is-android .service-info{ padding: 6px 10px 10px; }/* ========================================================= * ANDROID · 超窄屏也保持双列（强制收紧版） * 直接放在 base.css 最底部，覆盖前面规则 * =======================================================*/@media (max-width: 360px) { html.is-android .service-list{ /* 原来此处是 1fr (单列)，改回双列并收紧间距 */ grid-template-columns: 1fr 1fr !important; gap: 6px !important; padding: 6px !important; } /* 防止 left/right 容器把内容拆成单列 */ html.is-android .service-list .left, html.is-android .service-list .right{ display: block !important; } /* 卡片整体更紧凑 */ html.is-android .service-card{ margin-bottom: 6px !important; border-radius: 8px !important; box-shadow: 0 2px 4px rgba(0,0,0,.06) !important; } /* 名字上移同步：强制更小的上内边距 */ html.is-android .service-info{ padding: 4px 10px 8px !important; } html.is-android .service-name{ font-size: 18px !important; } /* 封面图降低高度，给两列腾空间 */ html.is-android .service-card .avatar img.cover{ height: 150px !important; } /* 角标更小更贴边 */ html.is-android .service-card .pin-badge-svg{ width: 30px !important; height: 30px !important; } html.is-android .price-tag, html.is-android .distance{ font-size: 10.5px !important; padding: 2px 5px !important; border-radius: 0 5px 0 8px !important; } /* 编号徽章与标签缩一号，避免换行把卡片拉高 */ html.is-android .service-id .num{ font-size: 11px !important; padding: 2px 6px !important; } html.is-android .tags{ gap: 4px !important; } html.is-android .tags .tag{ font-size: 11.5px !important; padding: 2px 6px !important; max-width: 48% !important; /* 防止单个标签太宽把布局撑裂 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 顶部搜索与分类再收一点，给网格让路 */ html.is-android .search-container{ grid-template-columns: clamp(190px, 56vw, 420px) auto !important; column-gap: 8px !important; margin: 6px 6px !important; } html.is-android .filter-buttons{ gap: 8px !important; margin: 4px 6px 6px !important; } html.is-android .filter-button{ min-height: 28px !important; font-size: 13px !important; padding: 3px 8px !important; flex: 1 1 24% !important; /* 每排更易排满 */ }}/* 保险：≥361px 的安卓强制两列，避免被其他样式意外覆盖 */@media (min-width: 361px){ html.is-android .service-list{ grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding: 10px !important; }}/* ========================================================= * 顶部分类按钮修复：四等分 + 防止错位/折行 * 放在 base.css 最底部，覆盖前面样式 * =======================================================*//* 默认：四等分网格，按钮等宽对齐 */.filter-buttons{ display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; margin: 6px 8px var(--gap-filter-to-features) !important;}.filter-button{ /* 取消之前的 flex 自动伸缩，改为占满格子 */ flex: none !important; width: 100% !important; min-width: 0 !important; /* 文本不换行，超出省略，避免把行撑高 */ white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; /* 视觉微调，防止高度过大 */ min-height: 32px !important; padding: 4px 10px !important; font-size: 14px !important; border-radius: 20px !important;}/* 激活态保持不变（颜色不灰） */.filter-button.active{ background-color: #FFB84D !important; color: #fff !important; border: 0 !important;}/* 安卓：整体再紧凑一点，确保四个刚好一排 */html.is-android .filter-buttons{ gap: 8px !important;}html.is-android .filter-button{ min-height: 30px !important; padding: 3px 8px !important; font-size: 13px !important;}/* 超窄屏（≤360px）：仍保持四等分，不折行不抖动 */@media (max-width: 360px){ .filter-buttons{ grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; margin: 4px 6px 6px !important; } .filter-button{ min-height: 28px !important; padding: 2px 8px !important; font-size: 12.5px !important; }}/* 兜底：如果有历史样式把按钮设成灰或边框，把它们清掉 */.filter-button{ background-color: #fff; color: #333; border: none;}/* === 卡片名字上移（全局）=== */.service-info{ /* 原来是 6px 10px 10px；把顶部内边距压小一点 */ padding: 10px 10px 10px !important;}.service-name{ /* 再微调 1~2 像素的视觉上移 */ margin-top: -3px !important;}/* === 安卓端再紧一点（如果你有 html.is-android 标识）=== */html.is-android .service-info{ padding: 3px 10px 8px !important;}html.is-android .service-name{ margin-top: -2px !important;}/* === 超窄屏（≤360px）兜底，避免抖动与换行拉高 === */@media (max-width: 360px){ .service-info{ padding: 3px 10px 8px !important; } .service-name{ margin-top: -1px !important; line-height: 1.15; /* 名字两行时也更紧凑 */ }}/* 名字固定单行，不换行不抖动（JS 已截断，这里兜底） */.service-name{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}/* === 编号胶囊更紧凑（统一生效）=== */.service-id .num{ display: inline-flex; /* 垂直居中稳 */ align-items: center; height: 20px; /* 固定高度（原来依赖 padding）*/ padding: 0 6px !important; /* 横向留白 */ font-size: 11px !important; /* 字体略小 */ line-height: 1 !important; /* 去掉行高撑高 */ border-radius: 12px !important; /* 胶囊圆角随高度 */}/* 安卓常规屏再收一点点 */html.is-android .service-id .num{ height: 17px !important; padding: 0 5px !important; font-size: 10.5px !important;}/* 超窄屏（≤360px）兜底：避免撑高卡片 */@media (max-width: 360px){ .service-id .num{ height: 16px !important; padding: 0 5px !important; font-size: 10.5px !important; }}/* === 认证徽章统一 20px 高（SVG 与文字版）=== *//* ① SVG 图片徽章：容器与图片统一高度，行高归零避免撑高 */.service-id .badge-svg{ display: inline-flex !important; align-items: center !important; height: 20px !important; line-height: 0 !important; vertical-align: middle !important; /* 与编号胶囊基线对齐 */}.service-id .badge-svg img{ height: 20px !important; /* 统一高度 */ width: auto !important; /* 保持原始宽高比 */ display: block !important;}/* ② 文字版徽章：统一成 20px 胶囊风格，和编号胶囊一致 */.service-id span.tag{ display: inline-flex !important; align-items: center !important; height: 20px !important; /* 固定 20px */ padding: 0 6px !important; /* 横向留白 */ font-size: 11px !important; /* 和编号一致 */ line-height: 1 !important; /* 去掉行高撑高 */ border-radius: 12px !important; /* 跟随 20px 的圆角 */ white-space: nowrap; /* 防止自动换行拉高 */}/* （可选）安卓和 ≤360px 的屏幕再轻微收一点点 */html.is-android .service-id span.tag{ height: 19px !important; padding: 0 5px !important; }@media (max-width: 360px){ .service-id span.tag{ height: 18px !important; padding: 0 5px !important; }}/* 放到 base.css 最后几行，覆盖更稳 */.location .addr-svg{ /* 变成灰色：去饱和 + 调亮度，确保在深色背景也清晰 */ filter: grayscale(1) brightness(0.6) contrast(1.05); opacity: 0.95; /* 可按需 0.8 ~ 1 调整 */}/* 可选：图标和文字都统一灰色语义 */.location{ color:#9D9D9D; }.location span{ color:#9D9D9D; }/* 尽量把彩色/黑色图标洗成 #9D9D9D，近似值 */.location .addr-svg{ filter: grayscale(1) brightness(0) invert(62%) sepia(0%) saturate(0%) hue-rotate(0deg); opacity: .9;}/* ========================= * 特点胶囊（卡片内）紧凑版覆盖 * 放在 base.css 最底部，覆盖原有规则 * ========================= *//* 间距更紧凑 */.tags{ gap: 4px !important;}/* 胶囊更矮、更短、字体小一号；单行省略 */.tags .tag{ padding: 4px 7px !important; /* 高度更矮、横向更短 */ font-size: 11px !important; /* 小一号 */ line-height: 1.1 !important; /* 贴一点，避免撑高 */ border-radius: 12px !important; /* 圆角随高度收一点 */ max-width: 42% !important; /* 限宽更短，避免把一行撑爆 */ white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;}/* 安卓常规屏：再收一点点 */html.is-android .tags .tag{ padding: 2px 5px !important; font-size: 10.5px !important; max-width: 44% !important;}/* 超窄屏（≤360px）：继续收紧，确保两列不抖动 */@media (max-width: 360px){ .tags .tag{ padding: 2px 5px !important; font-size: 10.5px !important; max-width: 45% !important; /* 给字多的腾一丢丢空间 */ }}/* ========== 资料卡片底部更紧凑（让底部边框“往上移”） ========== *//* 1) 卡片底部内/外边距收紧 */.service-card{ padding-bottom: 2 !important; /* 原 5px，贴近底边 */ margin-bottom: 6px !important; /* 原 10px，列表更紧凑一点 */}/* 2) 信息区再压一点底部内边距，避免留白拉低视觉边框 */.service-info{ padding-bottom: 6px !important; /* 原 10px */}/* 3) 距离角标稍微上提，避免压住更靠上的底边 */.service-card .distance{ bottom: 3px !important; /* 原 5px */ border-radius: 0 5px 0 8px !important; /* 贴边时更自然 */}/* 4) 超窄屏再紧一点，防止两列卡片底部留白明显 */@media (max-width: 360px){ .service-card{ margin-bottom: 6px !important; } .service-info{ padding-bottom: 5px !important; } .service-card .distance{ bottom: 2px !important; }}/* ========== 资料卡片 · 名字大一号（含端内细调） ========== */.service-name{ font-size: 16px !important; /* 默认从 16px → 18px */ line-height: 1.2 !important; /* 放大后更紧致 */ margin-bottom: 4px !important;/* 保持行距稳 */}/* Android 常规屏略收一档，避免挤高卡片 */html.is-android .service-name{ font-size: 17px !important;}/* 超窄屏（≤360px）再收一丢丢，保证两列不抖动 */@media (max-width: 360px){ .service-name{ font-size: 17px !important; } html.is-android .service-name{ font-size: 16px !important; }}/* ========== 编号与认证整体下移（与名字拉开一点） ========== */.service-name{ margin-bottom: 7px !important; /* 原 4~5px → 8px，先给名字留空 */}.service-id{ margin-top: 6px !important; /* 在名字下再垫一点间距 */}/* Android：略紧凑，避免卡片增高太多 */html.is-android .service-name{ margin-bottom: 6px !important; }html.is-android .service-id{ margin-top: 5px !important; }/* ≤360px 超窄屏：再收一点，保证双列不抖动 */@media (max-width: 360px){ .service-name{ margin-bottom: 6px !important; } .service-id{ margin-top: 4px !important; }}/* ========== 卡片内“特点标签”上下间距加大（不影响筛选面板） ========== */.service-card .tags{ margin-top: 0px !important; /* 原 5px → 10px */ margin-bottom: 0px !important; /* 新增：卡片信息区与下方留空 */ gap: 6px !important; /* 标签之间稍微松一点（原 4~5px） */}/* Android：略紧凑，避免卡片变高太多 */html.is-android .service-card .tags{ margin-top: 8px !important; margin-bottom: 8px !important; gap: 5px !important;}/* ≤360px 超窄屏：再收一丢丢，确保双列不抖动 */@media (max-width: 360px){ .service-card .tags{ margin-top: 6px !important; margin-bottom: 6px !important; gap: 5px !important; }}/* 价格角标（右上）— 白底 + 深色文字 + 图标对齐 */.price-tag { position: absolute; top: 0; right: 0; background-color: #FFFFFF; /* ✅ 改成白底 */ color: #333; /* ✅ 文字深色 */ padding: 3px 8px; border-radius: 0 0 0 10px; font-size: 12px; opacity: 1; /* ✅ 去掉半透明 */ display: inline-flex; /* ✅ 图标与文字水平对齐 */ align-items: center; gap: 4px;}/* 新图标尺寸（可按需微调） */.price-tag .icon-jgvs { width: 14px; height: 14px; display: block;}/* 旧的“钱包”配色不再需要，可保留不影响；如要彻底清掉可删除这行 *//* .price-tag .qianbao{ color: #FBD97C; } *//* 价格角标（右上）— 小一号 + 不换行 */.price-tag{ position: absolute; top: 0; right: 0; background: rgba(0,0,0,.5); color: #fff; padding: 2px 6px; /* 原 3px 8px → 收紧 */ border-radius: 0 0 0 10px; font-size: 11px; /* 原 12px → 小一号 */ font-weight: 600; /* 略减粗，避免显大 */ letter-spacing: 0; /* 让“168P”更紧凑 */ line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: 2px; /* 图标与文字间距更小 */ white-space: nowrap; /* 避免极窄屏换行 */}/* 图标也缩一号，整体更精致 */.price-tag .icon-jgvs{ width: 12px; /* 原 14px */ height: 12px; display: block;}/* Android 更紧凑（含 ≤360px） */html.is-android .price-tag{ font-size: 10.5px; padding: 2px 5px; border-radius: 0 5px 0 10px;}@media (max-width: 360px){ .price-tag{ font-size: 10.5px; padding: 2px 5px; }}/* ===== 统一收紧资料卡片圆角＋封面图一致 ===== */:root{ /* 你想要的“没那么圆”的程度：6~8px 很耐看 */ --card-radius: 7px;}/* 卡片主体圆角变小，溢出裁切保持 */.service-card{ border-radius: var(--card-radius) !important; overflow: hidden !important; /* 确保内部元素跟随裁切 */ box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 可保留原阴影 */}/* 封面图圆角与卡片同步（避免出现不同弧度） */.service-card .avatar img.cover{ border-radius: var(--card-radius) !important;}/* 右上价格角标：底左角跟随卡片圆角 */.price-tag{ border-radius: 0 0 0 var(--card-radius) !important;}/* 左下距离角标：右上与左下跟随卡片圆角 */.distance{ border-radius: 0 var(--card-radius) 0 var(--card-radius) !important;}/* 可选：置顶角标不需要圆角，维持图形本体 */.service-card .pin-badge-svg{ /* 无需变更，如需更贴合也可保持不变 */}/* 可选：卡片内其他图片（若有）也跟卡片一致 */.service-card img{ border-radius: var(--card-radius);}/* === 价格角标 · 定位/高度/居中 · 最终覆盖版（贴在 base.css 最后）=== */:root{ /* 可按需微调 */ --price-top-offset: -4px; /* 距离卡片顶部：0=完全贴顶；2px=稍微往下 */ --price-right-offset: -4px; /* 距离右侧边缘 */ --price-pad-y: 6px; /* 上下内边距：数值越大越“厚” */ --price-pad-x: 8px; /* 左右内边距 */ --price-font-size: 12px; /* 字号 */}.price-tag{ position: absolute !important; top: var(--price-top-offset) !important; /* ✅ 微微下移 */ right: var(--price-right-offset) !important;/* ✅ 依然贴右上角，可设 0 完全贴边 */ z-index: 5 !important; display: inline-flex !important; /* ✅ 水平垂直居中 */ align-items: center !important; justify-content: center !important; gap: 4px !important; padding: var(--price-pad-y) var(--price-pad-x) !important; /* ✅ 提升上下高度 */ min-height: calc(2 * var(--price-pad-y) + 14px) !important; background: rgba(0,0,0,.55) !important; /* ✅ 灰/深灰背景（半透明） */ color: #fff !important; font-size: var(--price-font-size) !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap !important; border-radius: 0 0 0 var(--card-radius) !important; /* ✅ 左下角跟随卡片圆角 */ box-shadow: none !important; /* 如需更凸显可改为 0 1px 2px rgba(0,0,0,.12) */}/* 图标尺寸与基线对齐：更稳更居中 */.price-tag .icon-jgvs{ width: 14px !important; height: 14px !important; flex: 0 0 14px !important; display: block !important;}/* 安卓更紧凑版（可选） */html.is-android .price-tag{ --price-top-offset: 2px; /* 安卓也保持微下移 */ --price-pad-y: 5px; /* 稍微薄一点避免遮挡 */ font-size: 11px !important;}/* ===== 价格角标 · 永远居中 & 抗大位移（最终覆盖版）===== */:root{ /* 可按需微调 */ --price-top-offset: -5px; /* 往上拉就调更负；0 = 贴顶 */ --price-right-offset: -5px; /* 往右拉就调更负；0 = 贴右 */ --price-height: 0px; /* 角标“厚度”（高度）*/ --price-minw: 4px; /* 最小宽度，防止内容太挤 */ --price-pad-x: 10px; /* 左右内边距 */ --price-font-size: 12px; /* 字号 */ --price-radius: var(--card-radius, 7px);}.price-tag{ /* 定位与偏移：随便拉，内容都在中间 */ position: absolute !important; top: var(--price-top-offset) !important; right: var(--price-right-offset) !important; z-index: 5 !important; /* 尺寸与排版：格子居中法 */ display: grid !important; place-items: center !important; /* ✅ 水平+垂直永远居中 */ height: var(--price-height) !important; min-width: var(--price-minw) !important; padding: 0 var(--price-pad-x) !important; box-sizing: border-box !important; white-space: nowrap !important; /* 视觉：半透明深灰背景 + 白字 + 圆角跟随卡片 */ background: rgba(0,0,0,.55) !important; color: #fff !important; font-size: var(--price-font-size) !important; line-height: 1 !important; border-radius: 0 0 0 var(--price-radius) !important; /* 内容间距（图标与文字） */ column-gap: 6px !important; /* grid 下用列间距更稳 */ grid-auto-flow: column !important; /* 图标-文字一行排 */}/* 图标尺寸与对齐：跟随居中 */.price-tag .icon-jgvs{ width: 14px !important; height: 14px !important; display: block !important;}/* 安卓端：更紧凑但依旧绝对居中 */html.is-android .price-tag{ --price-height: 26px; --price-minw: 50px; --price-pad-x: 8px; --price-font-size: 11px; --price-top-offset: 0px; /* 也可设 2px，按你观感微调 */}/* ≤360px 超窄屏再收一点点 */@media (max-width: 360px){ .price-tag{ --price-height: 26px; --price-minw: 50px; --price-pad-x: 8px; --price-font-size: 11px; }}/* ===== 价格角标 · 文字微下移 + 图标更贴近（最终覆盖）===== *//* 你可以微调下面两个变量来控制“下移”和“间距” */:root{ --price-text-down: 2px; /* 价格文字下移量（1~2px） */ --price-gap-tight: 1px; /* 图标与文字间距（越小越靠近） */}/* 角标容器维持你之前的居中与尺寸逻辑，这里只覆盖间距 */.price-tag{ /* 若你在上文用 grid： */ column-gap: var(--price-gap-tight) !important; /* 若你在别处还是用了 flex，这里也同时收紧 */ gap: var(--price-gap-tight) !important;}/* 图标尺寸保持不变（按需可再微调） */.price-tag .icon-jgvs{ width: 14px !important; height: 14px !important; display: block !important;}/* —— 文字微下移（尽量不用改 HTML）—— * 1) 常见：价格文字包在 // 里 → 精准下移 * 2) 极端：文字是“裸文本节点” → 用万能选择器兜底，但不影响图片 */.price-tag :where(span, b, strong){ display: inline-block !important; transform: translateY(var(--price-text-down)) !important;}/* 兜底：如果文字没有标签包裹，常见图标是，把“非图片”都轻微下移 */.price-tag > :not(img):not(.icon-jgvs){ transform: translateY(var(--price-text-down)) !important; display: inline-block !important;}/* 安卓端继续更紧凑（可选） */html.is-android .price-tag{ --price-gap-tight: 1.5px; --price-text-down: 1.6px;}/* 超窄屏（≤360px）再收一丢丢（可选） */@media (max-width: 360px){ .price-tag{ --price-gap-tight: 1.5px; --price-text-down: 1.6px; }}/* ================================ * A) 页面背景：可调“大小/位置” * - --page-bg-size: cover | contain | 1200px auto | 100% 100% ... * - --page-bg-pos : center top | right 10px top 20px | 30% 0 ... * =================================*/:root{ --page-bg-size: cover; /* 背景大小 */ --page-bg-pos: center top; /* 背景位置 */}body{ background-size: var(--page-bg-size) !important; background-position: var(--page-bg-pos) !important;}/* ================================== * B) 价格角标：仅允许调背景“大小/位置” * —— 不再让价格文字/图标做下移 * 用变量调：位置/高度/左右内边距/最小宽 * ==================================*/:root{ --price-top: 0px; /* 角标距顶部 */ --price-right: 0px; /* 角标距右侧 */ --price-h: -15px; /* 角标高度（背景厚度）*/ --price-minw: 50px; /* 角标最小宽度 */ --price-padx: 2px; /* 左右内边距 */ --price-fs: 11px; /* 字号 */ --price-radius: var(--card-radius, 7px);}/* 角标容器：网格居中，不做 Y 方向位移 */.price-tag{ position: absolute !important; top: var(--price-top) !important; right: var(--price-right) !important; height: var(--price-h) !important; min-width: var(--price-minw) !important; padding: 0 var(--price-padx) !important; display: grid !important; place-items: center !important; grid-auto-flow: column !important; column-gap: 4px !important; background: rgba(0,0,0,.55) !important; color: #fff !important; font-size: var(--price-fs) !important; line-height: 1 !important; white-space: nowrap !important; border-radius: 0 0 0 var(--price-radius) !important; z-index: 5 !important;}/* 图标尺寸（不下移） */.price-tag .icon-jgvs{ width: 14px !important; height: 14px !important; display: block !important;}/* —— 关键：彻底取消之前的“下移”规则 —— */.price-tag > *{ transform: none !important; }.price-tag :where(span, b, strong){ transform: none !important; }.price-tag > :not(img):not(.icon-jgvs){ transform: none !important; }/* Android 可选更紧凑（不影响上下位置逻辑） */html.is-android .price-tag{ --price-h: 24px; --price-minw: 46px; --price-padx: 7px; --price-fs: 11px;}/* ================================ * 距离角标（左下）— 跟价格角标同体系 * 仅调背景的位置/大小，不下移文字/图标 * ================================*/:root{ /* 可按需改数值：位置/高度/左右内边距/最小宽/字号 */ --dist-bottom: 5px; /* 角标距底部 */ --dist-left: 0px; /* 角标距左侧 */ --dist-h: 20px; /* 角标高度（背景厚度）*/ --dist-minw: 50px; /* 最小宽度 */ --dist-padx: 8px; /* 左右内边距 */ --dist-fs: 12px; /* 字号 */}/* 容器：左下固定 + 网格居中，风格与价格角标一致 */.service-card .distance{ position: absolute !important; bottom: var(--dist-bottom) !important; left: var(--dist-left) !important; height: var(--dist-h) !important; min-width: var(--dist-minw) !important; padding: 0 var(--dist-padx) !important; display: grid !important; place-items: center !important; /* 水平+垂直永远居中 */ grid-auto-flow: column !important; column-gap: 4px !important; background: rgba(0,0,0,.55) !important; color: #fff !important; font-size: var(--dist-fs) !important; line-height: 1 !important; white-space: nowrap !important; /* 左下角跟卡片圆角一致（右上/左下都圆） */ border-radius: 0 var(--card-radius) 0 var(--card-radius) !important; z-index: 5 !important; opacity: 1 !important; /* 去掉半透明老规则 */}/* 图标尺寸：与价格角标统一，不做基线下移 */.service-card .distance .jl{ width: 14px !important; height: 14px !important; display: block !important;}/* 关键：彻底取消任何“下移文字”的旧规则 */.service-card .distance > *{ transform: none !important; }.service-card .distance :where(span, b, strong){ transform: none !important; }.service-card .distance > :not(img):not(.jl){ transform: none !important; }/* Android 更紧凑（可选） */html.is-android .service-card .distance{ --dist-h: 24px; --dist-minw: 46px; --dist-padx: 7px; --dist-fs: 11px;}/* ≤360px 更紧凑（可选） */@media (max-width: 360px){ .service-card .distance{ --dist-h: 24px; --dist-minw: 46px; --dist-padx: 7px; --dist-fs: 11px; }}/* ========================= * 卡片偶发“溢出容器”终极补丁（iOS/高倍屏） * 直接贴在 base.css 最后 * ========================= *//* 1) 网格列用 minmax(0,1fr) 防止子像素累计导致右侧超 1px */.service-list{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* 某些内嵌 WebView 会出现横向滚动条，这里彻底关掉 */ overflow-x: hidden !important; -webkit-overflow-scrolling: touch;}/* 2) 卡片自己“兜住一切”：裁剪 + 独立渲染层，避免阴影/角标外溢 */.service-card{ overflow: hidden !important; /* 再次确保裁剪 */ contain: layout paint size style; /* 独立布局/绘制上下文，隔离子像素 */ will-change: transform; /* 提前上 GPU 避免抖动 */ transform: translateZ(0); /* 某些 WebView 需要这个 */ -webkit-mask-image: -webkit-radial-gradient(white, black); /* iOS 圆角裁剪更稳 */}/* 3) 封面图彻底消掉 0.5px 外溢（display:block + 统一半径） */.service-card .avatar img.cover{ display: block !important; width: 100% !important; border-radius: var(--card-radius) !important; image-rendering: -webkit-optimize-contrast;}/* 4) 角标不要负偏移，确保永远在卡片内被裁剪到 */:root{ --price-top-offset: 0px !important; --price-right-offset: 0px !important; --price-height: 26px !important; /* 给足高度但不外溢 */ --price-pad-x: 8px !important; --dist-bottom: 0px !important; --dist-left: 0px !important; --dist-h: 24px !important; --dist-padx: 8px !important;}/* 统一角标为“网格居中”且绝不往外推 */.price-tag{ position: absolute !important; top: var(--price-top-offset) !important; right: var(--price-right-offset) !important; height: var(--price-height) !important; min-width: 48px !important; padding: 0 var(--price-pad-x) !important; display: grid !important; place-items: center !important; grid-auto-flow: column !important; column-gap: 4px !important; border-radius: 0 0 0 var(--card-radius) !important;}.service-card .distance{ position: absolute !important; bottom: var(--dist-bottom) !important; left: var(--dist-left) !important; height: var(--dist-h) !important; min-width: 46px !important; padding: 0 var(--dist-padx) !important; display: grid !important; place-items: center !important; grid-auto-flow: column !important; column-gap: 4px !important; border-radius: 0 var(--card-radius) 0 var(--card-radius) !important;}/* 5) 修正可能来自旧样式的负 margin/偏移（强力兜底） */.price-tag, .service-card .distance, .service-card .pin-badge-svg{ margin: 0 !important; /* 若早期样式给过 transform 位移，这里把它清零 */ transform: none !important;}/* 6) iOS 安全区 + 全局横向禁止，彻底杜绝“探出边界” */html, body{ overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; padding-left: env(safe-area-inset-left, 0) !important; padding-right: env(safe-area-inset-right, 0) !important;}/* 7) 高倍屏 0.5px 边界毛边修正（可选） */@supports (-webkit-touch-callout: none) { .service-card{ /* iOS 特有的像素对齐微调，防止半像素阴影外溢 */ outline: 1px solid transparent; }}/* === 修复卡片被压扁（移除 size containment）=== */.service-card{ contain: paint !important; /* 或者：contain: layout paint; */ /* 保留 overflow:hidden / will-change / translateZ(0) 都没问题 */}/* 顺手把一个无单位的声明补成 px，避免浏览器忽略 */.service-card{ padding-bottom: 2px !important; /* 你现有代码里是 2（无单位），会被丢弃 */}/* ========================================================= * 终极不越界 + 状态栏永不换行（贴在 base.css 最底部） * =======================================================*//* 0) 系统级“横向溢出保险丝” */html, body { width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;}/* 1) 所有主要容器禁止把内容“探出屏外” */.container,.search-container,.filter-buttons,.filter-container,.filter-dropdown,.dropdown-container,.area-drawer,.service-list,.service-card { max-width: 100vw !important; overflow-x: hidden !important;}/* 2) 所有媒体元素永远不超过屏宽 */img, video, canvas, svg { max-width: 100% !important; height: auto;}/* 3) 网格列使用 minmax(0,1fr) 防止 0.5px 累积溢出 */.service-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important;}/* 4) 顶部「状态栏」：永远单行、禁止换行、可横向滑动 */.filter-dropdown { display: flex !important; flex-wrap: nowrap !important; /* ✅ 不换行 */ overflow-x: auto !important; /* ✅ 超出时横向滚动 */ overflow-y: hidden !important; -webkit-overflow-scrolling: touch; /* ✅ iOS 惯性滑动 */ gap: clamp(6px, 2vw, 10px) !important; /* ✅ 间距自动收放 */ padding: 6px clamp(6px, 2vw, 12px) !important; scrollbar-width: none; /* Firefox 隐藏滚动条 */}.filter-dropdown::-webkit-scrollbar { display: none; } /* WebKit 隐藏滚动条 *//* 5) 状态栏内每一项固定为“行内块”，不被压到下一行 */.dropdown-item { flex: 0 0 auto !important; /* ✅ 保持在同一行 */ display: inline-flex !important; align-items: center; gap: clamp(6px, 1.8vw, 10px) !important; white-space: nowrap !important; /* ✅ 文本不换行 */}/* 6) 标题/文本在窄屏自动“微缩”，但不至于太小 */.dropdown-item .title,.dropdown-item .title span,.dropdown-item .name,.dropdown-item select { font-size: clamp(12px, 3.3vw, 14px) !important; /* ✅ 自适应字号 */ line-height: 1.2 !important;}/* 7) 若仍然过长，文本改为省略显示（不撑出容器） */.dropdown-item .title,.dropdown-item .name { max-width: 48vw; /* ✅ 单项最长不超半屏 */ overflow: hidden !important; text-overflow: ellipsis !important;}/* 8) 搜索区同理：单行不换行，极窄屏自动缩字 */.search-container { overflow: hidden !important;}.search-container .search-bar { min-width: 0; /* 允许压缩 */}.search-container input { min-width: 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: clamp(13px, 3.4vw, 14px) !important;}/* 9) 顶部分类按钮区域：网格四等分已启用，这里再防溢出 */.filter-buttons { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; overflow: hidden !important;}.filter-button { min-width: 0 !important; white-space: nowrap !important; text-overflow: ellipsis !important; overflow: hidden !important; font-size: clamp(12px, 3.2vw, 14px) !important;}/* 10) 卡片内易溢出的文字统统省略号 + 禁止换行 */.service-name,.location,.tags .tag,.service-id .num,.service-id .badge-svg,.service-id span.tag { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important;}/* 11) 角标绝不越界（右上价签 / 左下距离） */.price-tag,.service-card .distance,.service-card .pin-badge-svg { max-width: 100% !important; transform: none !important; margin: 0 !important; /* 统一在卡片内部裁切，避免负偏移推出边界 */ position: absolute !important;}.price-tag { top: 0 !important; right: 0 !important;}.service-card .distance { left: 0 !important; bottom: 0 !important;}/* 12) 安卓超窄屏特护：状态栏更紧凑但仍不换行 */@media (max-width: 360px) { html.is-android .filter-dropdown { gap: 6px !important; padding: 4px 6px !important; } html.is-android .dropdown-item { gap: 6px !important; } html.is-android .dropdown-item .title, html.is-android .dropdown-item .title span, html.is-android .dropdown-item .name, html.is-android .dropdown-item select { font-size: clamp(11.5px, 3.6vw, 13px) !important; }}/* ==== 弹层统一样式补丁（覆盖默认） ==== */.dropdown-container{ position: fixed; /* 保证脱离文档流，不被 body 滚动影响 */ left: 0; right: 0; max-height: 70vh; /* 防止过长超出屏幕 */ overflow: auto; background: #fff; /* 避免“看起来像空白” */ z-index: 1001; /* 一定要高于遮罩 999 */ display: none; /* 默认隐藏，JS 再显示 */ box-shadow: 0 10px 24px rgba(0,0,0,.08); border-radius: 0 0 12px 12px; -webkit-overflow-scrolling: touch;}/* 距离面板容器（可选：细化标识） */#distance-container.distance-container{ z-index: 1002; /* 进一步保证距离面板永远在最前 */}/* 遮罩保持在面板之下 */#dropdown-mask.dropdown-mask{ z-index: 999;}/* 联想下拉给个背景和前景层级，避免“看不见” */#place-suggest{ background: #fff; z-index: 1003; /* 在面板里的子层，确保盖住面板内其它元素 */ position: relative;}/* 简单的空白态/列表项可见性优化（可选） */.tips-item{padding:10px 12px;border-bottom:1px solid #f2f3f5}.tips-item:last-child{border-bottom:none}/* === 统一字号 · 最终覆盖补丁（请放在 base.css 最底部）=== */:root{ /* 分类四按钮文字大小（可按需微调）*/ --cat-btn-fs: 15px; /* 状态栏（上海 / 全部 / 区名 / 下拉）统一字号 */ --status-fs: 13px;}/* ① 顶部四个分类按钮放大 */.filter-buttons .filter-button{ font-size: var(--cat-btn-fs) !important; /* 仅文本放大，不改变其它配色与交互 */}/* ② 状态栏文本全部同字号（“上海”、“全部/区名”、下拉选择） */.filter-dropdown,.filter-dropdown .dropdown-item,.filter-dropdown .dropdown-item .title,.filter-dropdown .dropdown-item .title span,.filter-dropdown .dropdown-item .name,.filter-dropdown select{ font-size: var(--status-fs) !important; line-height: 1.2 !important;}/* ③ 安卓与超窄屏也保持一致，不再被早前规则压小 */html.is-android .filter-buttons .filter-button{ font-size: var(--cat-btn-fs) !important;}html.is-android .filter-dropdown,html.is-android .filter-dropdown .dropdown-item,html.is-android .filter-dropdown .dropdown-item .title,html.is-android .filter-dropdown .dropdown-item .title span,html.is-android .filter-dropdown .dropdown-item .name,html.is-android .filter-dropdown select{ font-size: var(--status-fs) !important;}@media (max-width: 360px){ .filter-buttons .filter-button{ font-size: var(--cat-btn-fs) !important; } .filter-dropdown, .filter-dropdown .dropdown-item, .filter-dropdown .dropdown-item .title, .filter-dropdown .dropdown-item .title span, .filter-dropdown .dropdown-item .name, .filter-dropdown select{ font-size: var(--status-fs) !important; }}/* ========================================================= * 资料卡片 · 右上角价格角标（.price-tag）背景框 · 最终覆盖补丁 * —— 放在 base.css 最底部 —— * 你主要会改下面这些变量： * 1) --price-h → 背景“高度”（上下厚度） * 2) --price-minw → 背景“最小宽度”（左右长度的基线） * 3) --price-padx → 左右内边距（会一起影响“宽度”） * 4) --price-fs → 文字字号（可选） * 5) --price-icon → 图标大小（可选） * =======================================================*/:root{ /* ====== 你常改的三件事 ====== */ --price-h: 0px; /* ← 高度（上下厚度）推荐 20~26px */ --price-minw: 0px; /* ← 宽度基线（最小宽度）推荐 42~56px */ --price-padx: 4px; /* ← 左右内边距（同时影响宽度）推荐 4~8px */ /* 可选：字体与图标（不想动就保持现值） */ --price-fs: 11px; /* 角标内文字大小 */ --price-icon: 15px; /* 图标边长 */ /* 位置与圆角（通常不需要改） */ --price-top: 0px; /* 与卡片上边的距离 */ --price-right: 0px; /* 与卡片右边的距离 */ --price-radius: var(--card-radius, 7px); /* 左下圆角跟卡片一致 */}/* ====== 右上价格角标：更小、更紧凑，但始终在卡片内 ====== */.price-tag{ position: absolute !important; top: var(--price-top) !important; right: var(--price-right) !important; /* —— 背景“尺寸” —— */ height: var(--price-h) !important; /* 高度=上下厚度（你最常改） */ min-width: var(--price-minw) !important; /* 宽度=最小宽度（你最常改） */ padding: 0 var(--price-padx) !important; /* 宽度附加=左右内边距（你最常改） */ /* 排版：始终水平+垂直居中，内容不换行 */ display: grid !important; place-items: center !important; grid-auto-flow: column !important; column-gap: 4px !important; white-space: nowrap !important; /* 视觉：半透明深灰背景 + 白字；左下角跟卡片圆角 */ background: rgba(0,0,0,.55) !important; color: #fff !important; font-size: var(--price-fs) !important; line-height: 1 !important; border-radius: 0 0 0 var(--price-radius) !important; z-index: 5 !important; /* 清理历史样式的位移/阴影，确保“框变小”只按上面变量走 */ margin: 0 !important; transform: none !important; box-shadow: none !important;}/* 图标尺寸（保持与文字协调） */.price-tag .icon-jgvs{ width: var(--price-icon) !important; height: var(--price-icon) !important; display: block !important;}/* 兜底：把任何可能残留的“文字下移”类覆盖掉，避免错位 */.price-tag > *{ transform: none !important; }.price-tag :where(span,b,strong){ transform: none !important; }/* ====== 安卓与超窄屏的更紧凑默认（按需保留） ====== */html.is-android .price-tag{ --price-h: 20px; /* 高度再薄一点 */ --price-minw: 44px; /* 宽度再短一点 */ --price-padx: 5px; /* 左右再收一点 */ --price-fs: 10.5px; --price-icon: 11px;}@media (max-width: 360px){ .price-tag{ --price-h: 20px; --price-minw: 44px; --price-padx: 5px; --price-fs: 10.5px; --price-icon: 11px; }}/* ===== 价格角标 · 字重最终覆盖（放在 base.css 最底部）===== */:root{ /* 如需更细，可把 400 改为 300（部分设备会回退为 Regular） */ --price-fw: 550;}.price-tag{ font-weight: var(--price-fw) !important; /* 覆盖早先的 600/加粗 */ letter-spacing: 0; /* 紧一点更显“纤细” */}/* 安卓端也保持一致（可选） */html.is-android .price-tag{ font-weight: var(--price-fw) !important;}/* ===== 价格角标 & 距离角标 · 背景统一加深（最终覆盖）===== */.price-tag,.service-card .distance{ background: rgba(0, 0, 0, 0.5) !important;}/* ===== 距离角标 · 图标再小一号（最终覆盖）===== *//* 默认尺寸：可按需把 11px 改成 10~12px 微调 */:root{ --dist-icon-size: 13px;}/* 安卓上更紧凑一点（可调） */html.is-android{ --dist-icon-size: 10.5px;}/* 超窄屏（≤360px）再小一丢丢（可调） */@media (max-width: 360px){ html.is-android{ --dist-icon-size: 10px; }}/* 统一用变量控制实际尺寸，强制覆盖之前的 14px 设定 */.service-card .distance .jl{ width: var(--dist-icon-size) !important; height: var(--dist-icon-size) !important; display: block !important; /* 如果你想让文字更贴近图标，可解注下一行 */ /* margin-right: 2px !important; */}/* 可选：图标与文字的间距略收紧（按需） */.service-card .distance{ column-gap: 3px !important; /* 你之前是 4px */}/* ===== 价格角标 · 图标与数字更贴（最终覆盖）===== */:root{ /* 想再更近就把 1px 改成 0.5px 或 0 */ --price-gap-tight: 1px;}.price-tag{ /* 你前面有多处 column-gap / gap，这里统一压到最小 */ column-gap: var(--price-gap-tight) !important; gap: var(--price-gap-tight) !important; letter-spacing: 0 !important; /* 数字更紧凑 */}/* 清掉任何可能的内边距/外边距，防止“看起来还在撑距” */.price-tag > *{ margin: 0 !important; padding-inline: 0 !important; /* 有些标签会有左右内边距 */}/* 图标不额外占缝隙 */.price-tag .icon-jgvs{ margin: 0 !important; /* 如果还是觉得有点远，可以解开下一行再微贴 1px */ /* transform: translateX(-0.5px); */}/* 安卓与超窄屏也同一标准（可选：再更近一点点） */html.is-android .price-tag{ --price-gap-tight: 0.5px; }@media (max-width: 360px){ .price-tag{ --price-gap-tight: 0.5px; }}/* ===== 状态栏整体上移（最终覆盖）===== *//* 放在 base.css 最底部，确保覆盖前面所有 margin/padding 设定 */:root{ --status-nudge-y: 4px; /* 调整量：负值=往上，正值=往下 */ --status-top-gap: 4px; /* 状态栏与上方区域的最小安全间距 */}/* 1) 直接把状态栏往上“挪” */.filter-dropdown{ margin-top: var(--status-nudge-y) !important;}/* 2) 同时把上方分类区与状态栏之间的距离略收紧，避免显得松散 */.filter-buttons{ /* 原来是：margin: 6px 8px var(--gap-filter-to-features); */ margin-bottom: var(--status-top-gap) !important;}/* 3) 超窄屏与安卓再微调 1～2px，防止过度挤压视觉 */@media (max-width: 360px){ .filter-dropdown{ margin-top: calc(var(--status-nudge-y) - 1px) !important; } .filter-buttons{ margin-bottom: max(2px, calc(var(--status-top-gap) - 1px)) !important; }}html.is-android .filter-dropdown{ margin-top: calc(var(--status-nudge-y) - 1px) !important;}/* ========================================================= * 地址图标更小 + 基线更稳（最终覆盖补丁，贴在 base.css 最底部） * 可调参数： * --addr-icon-size 图标边长 * --addr-icon-gap 图标与文字的间距 * --addr-icon-dy 文字基线微调（正值=图标略下沉） * =======================================================*/:root{ --addr-icon-size: 14px; /* 默认从 ~14px → 12px，更精致 */ --addr-icon-gap: 2px; /* 与文字的间距 */ --addr-icon-dy: 1px; /* 基线微下移，数值 0~2 之间可微调 */}/* 主规则：适配 /