/* ========================================================= * android-adaptive.css — 安卓设备专用自适应样式 * * 适用条件： 时生效 * iOS 设备完全不受此文件影响 * * 功能： * 1. 全局自适应布局（防止超出屏幕） * 2. 文本强制单行不换行 * 3. 底部导航按钮统一尺寸 * 4. 页面切换流畅过渡 * 5. 响应式字体和间距 * * 版本：2026-01-24 * =======================================================*/ /* ========================================================= * 一、页面切换流畅过渡（仅安卓生效，iOS 不应用任何动画） * =======================================================*/ /* 页面淡入动画已禁用，避免底部导航跟着动 */ /* 如需页面切换动画，应只应用于 .container 而非整个 body */ /* 底部导航：禁用所有动画和过渡，完全固定 */ html.is-android .footer a { transition: none !important; } html.is-android .footer a:active { transform: none !important; } /* ========================================================= * 二、安卓专属：全局自适应基础 * =======================================================*/ /* 仅当 html 有 is-android 类时以下样式才生效 */ html.is-android { /* 视口宽度锁定，绝不允许横向滚动 */ width: 100%; max-width: 100vw; overflow-x: hidden; /* 字体大小自动调整 */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* 覆盖 base.css 中的变量，调整按钮和搜索框的间距 */ --search-filter-gap-top: -7px; } html.is-android body { width: 100%; max-width: 100vw; overflow-x: hidden; /* 基础字体使用视口单位，自适应屏幕 */ font-size: clamp(13px, 3.5vw, 16px); line-height: 1.4; } /* ========================================================= * 三、安卓专属：所有容器防溢出 * =======================================================*/ html.is-android .container, html.is-android .search-container, html.is-android .filter-buttons, html.is-android .filter-container, html.is-android .filter-dropdown, html.is-android .dropdown-container, html.is-android .service-list, html.is-android .service-card, html.is-android .service-info, html.is-android .footer { max-width: 100vw; overflow-x: hidden; box-sizing: border-box; } /* ========================================================= * 四、安卓专属：顶部搜索区自适应 * =======================================================*/ html.is-android .search-container { display: flex !important; flex-wrap: nowrap; align-items: center; gap: clamp(6px, 2vw, 12px); padding: clamp(4px, 1.5vw, 8px) clamp(6px, 2vw, 10px); margin-top: 0 !important; margin-right: clamp(4px, 1.5vw, 8px) !important; margin-bottom: clamp(4px, 1.8vw, 10px) !important; margin-left: clamp(-2px, -0.5vw, 0px) !important; position: relative !important; z-index: 0 !important; background: transparent !important; background-color: transparent !important; } html.is-android .search-container .search-bar { flex: 1; min-width: 0; padding: clamp(6px, 1.8vw, 10px) clamp(8px, 2vw, 12px); } html.is-android .search-container input { font-size: clamp(12px, 3.2vw, 14px); min-width: 0; } html.is-android .search-container .links { flex-shrink: 0; gap: clamp(6px, 1.8vw, 10px); } /* 搜索图标自适应 */ html.is-android #iconGroup, html.is-android #iconChannel { width: clamp(32px, 9vw, 40px) !important; height: clamp(32px, 9vw, 40px) !important; } /* ========================================================= * 五、安卓专属：分类按钮自适应（四等分不换行） * =======================================================*/ html.is-android .filter-buttons { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: clamp(4px, 1.5vw, 8px) !important; padding: 0 clamp(4px, 1.5vw, 8px) 0 clamp(1px, 0.8vw, 3px) !important; margin: clamp(-8px, -2vw, -5px) clamp(4px, 1.5vw, 8px) clamp(4px, 1.6vw, 10px) clamp(1px, 0.8vw, 3px) !important; } html.is-android .filter-button { /* 强制适应网格宽度 */ width: 100% !important; min-width: 0 !important; /* 文本绝不换行 */ white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; /* 自适应高度和字体 - 根据屏幕宽度自动调整 */ min-height: clamp(30px, 8vw, 45px) !important; height: auto !important; padding: clamp(6px, 1.5vw, 10px) clamp(8px, 2vw, 14px) !important; font-size: clamp(12px, 3.2vw, 16px) !important; border-radius: clamp(15px, 4vw, 22px) !important; line-height: 1.2 !important; } /* ========================================================= * 六、安卓专属：状态栏自适应（一行不换行，可滚动） * =======================================================*/ html.is-android .filter-container { position: relative !important; z-index: 1000 !important; } html.is-android .filter-dropdown { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* 根据屏幕宽度自动调整高度和间距 */ gap: clamp(4px, 1.5vw, 12px) !important; padding: clamp(3px, 1vw, 5px) clamp(6px, 1.8vw, 12px) !important; margin: clamp(0px, 0.3vw, 1px) clamp(4px, 1.5vw, 8px); min-height: clamp(24px, 6.5vw, 32px) !important; position: relative !important; z-index: 1000 !important; background-color: #fff !important; } html.is-android .filter-dropdown::-webkit-scrollbar { display: none; } html.is-android .dropdown-item { flex: 0 0 auto !important; display: inline-flex !important; align-items: center; gap: clamp(4px, 1.2vw, 10px) !important; white-space: nowrap !important; font-size: clamp(11px, 3vw, 15px) !important; padding: clamp(0px, 0.2vw, 1px) 0 !important; min-height: clamp(18px, 5vw, 26px) !important; } /* .title 容器本身不设置省略，只让内容可以换行或省略 */ html.is-android .dropdown-item .title { display: inline-flex !important; align-items: center !important; gap: clamp(2px, 0.6vw, 5px) !important; font-size: clamp(11px, 3vw, 15px) !important; white-space: nowrap !important; max-width: none !important; overflow: visible !important; } /* 只有 .name 文本部分设置省略 */ html.is-android .dropdown-item .name { font-size: clamp(11px, 3vw, 15px) !important; white-space: nowrap !important; max-width: clamp(40px, 12vw, 70px); overflow: hidden; text-overflow: ellipsis; } /* 筛选栏中的 select 元素自适应 */ html.is-android .dropdown-item select { font-size: clamp(11px, 3vw, 15px) !important; padding: clamp(0px, 0.2vw, 1px) clamp(4px, 1vw, 8px) !important; min-height: clamp(18px, 5vw, 26px) !important; border-radius: clamp(4px, 1vw, 6px) !important; } /* 箭头图标保持正常显示 */ html.is-android .dropdown-item .title .iconfont { max-width: none !important; overflow: visible !important; flex-shrink: 0 !important; font-size: 12px !important; display: inline-block !important; } /* ========================================================= * 七、安卓专属：资料卡片列表自适应 * =======================================================*/ /* 主内容区不设 transform，避免安卓第一次滑动只滚列表不滚整页 */ html.is-android .container { backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; } html.is-android .service-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(4px, 1.5vw, 8px) !important; padding: clamp(6px, 2vw, 10px) clamp(4px, 1.5vw, 8px) clamp(4px, 1.5vw, 8px) clamp(4px, 1.5vw, 8px) !important; } /* 离屏卡片不参与完整布局，减轻滚动时主线程压力 */ @supports (content-visibility: auto) { html.is-android .service-card { content-visibility: auto !important; contain-intrinsic-size: 0 200px !important; } } /* 让 left/right 容器不影响网格布局 */ html.is-android .service-list .left, html.is-android .service-list .right { display: contents !important; } /* 卡片自适应 */ html.is-android .service-card { border-radius: clamp(6px, 1.8vw, 10px) !important; overflow: hidden !important; margin-bottom: 0 !important; border: none !important; outline: none !important; } /* 封面图：正方形比例，自适应 - 强制1:1，覆盖所有其他样式 */ html.is-android .service-card .avatar { position: relative !important; width: 100% !important; padding-bottom: 100% !important; overflow: hidden !important; border: none !important; border-bottom: none !important; border-top: none !important; outline: none !important; box-shadow: none !important; margin-bottom: 0 !important; background-color: transparent !important; height: 0 !important; min-height: 0 !important; max-height: none !important; } html.is-android .service-card .avatar img.cover { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; border-top-left-radius: clamp(6px, 1.8vw, 10px) !important; border-top-right-radius: clamp(6px, 1.8vw, 10px) !important; border-bottom-left-radius: clamp(6px, 1.8vw, 10px) !important; border-bottom-right-radius: clamp(6px, 1.8vw, 10px) !important; border-radius: clamp(6px, 1.8vw, 10px) !important; border: none !important; border-bottom: none !important; border-top: none !important; outline: none !important; box-shadow: none !important; background-color: transparent !important; margin-bottom: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; max-height: none !important; } /* 覆盖 base.css 中的 @supports 规则，强制保持1:1正方形 */ @supports (aspect-ratio: 1 / 1) { html.is-android .service-card .avatar img.cover { height: 100% !important; aspect-ratio: 1 / 1 !important; } } @supports not (aspect-ratio: 1 / 1) { html.is-android .service-card .avatar img.cover { height: 100% !important; } } /* 卡片信息区自适应 - 去除顶部间隙，轻微向上移动 */ html.is-android .service-info { padding: 0 clamp(6px, 1.5vw, 10px) clamp(6px, 1.5vw, 10px) !important; border-top: none !important; border: none !important; margin-top: clamp(-3px, -0.7vw, -2px) !important; padding-top: 0 !important; } /* 移除图片和信息区之间的任何分隔，轻微向上移动 */ html.is-android .service-card .avatar + .service-info { margin-top: clamp(-3px, -0.7vw, -2px) !important; padding-top: 0 !important; } /* ========================================================= * 八、安卓专属：卡片内文本强制单行 * =======================================================*/ /* 名字：单行省略 - 贴近图片 */ html.is-android .service-name { font-size: clamp(15px, 4vw, 18px) !important; font-weight: bold; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin-bottom: clamp(1px, 0.5vw, 3px) !important; margin-top: clamp(8px, 2vw, 10px) !important; padding-top: 0 !important; max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; } /* 编号胶囊 */ html.is-android .service-id { display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(2px, 0.6vw, 4px) !important; margin-bottom: clamp(2px, 0.8vw, 4px) !important; margin-top: clamp(2px, 1vw, 4px) !important; } html.is-android .service-id .num { font-size: clamp(9px, 2.5vw, 11px) !important; padding: clamp(2px, 0.6vw, 3px) clamp(4px, 1vw, 6px) !important; height: clamp(17px, 4.8vw, 21px) !important; white-space: nowrap !important; } /* 认证徽章 */ html.is-android .service-id .badge-svg { height: clamp(17px, 4.8vw, 21px) !important; } html.is-android .service-id .badge-svg img { height: clamp(17px, 4.8vw, 21px) !important; width: auto !important; } html.is-android .service-id span.tag { font-size: clamp(9px, 2.5vw, 11px) !important; padding: clamp(2px, 0.6vw, 3px) clamp(4px, 1vw, 6px) !important; height: clamp(17px, 4.8vw, 21px) !important; white-space: nowrap !important; } /* 地址：单行省略 */ html.is-android .location { font-size: clamp(13px, 3.5vw, 15px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin-top: clamp(7px, 1.8vw, 9px) !important; margin-bottom: clamp(2px, 0.8vw, 4px) !important; } /* 地址图标 */ html.is-android .location .addr-svg, html.is-android .location img.addr-svg { width: clamp(13px, 3.5vw, 16px) !important; height: clamp(13px, 3.5vw, 16px) !important; } /* 特点标签：自适应 */ html.is-android .tags { display: flex; flex-wrap: wrap; gap: clamp(2px, 0.6vw, 4px) !important; margin-top: clamp(6px, 1.6vw, 8px) !important; margin-bottom: 0 !important; } html.is-android .tags .tag { font-size: clamp(9px, 2.5vw, 11px) !important; padding: clamp(2px, 0.6vw, 4px) clamp(6px, 1.5vw, 9px) !important; border-radius: clamp(12px, 3vw, 18px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: clamp(60px, 16vw, 85px) !important; min-height: clamp(18px, 5vw, 23px) !important; text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* ========================================================= * 九、安卓专属：角标自适应 * =======================================================*/ /* 价格角标 */ html.is-android .price-tag { font-size: clamp(10px, 2.8vw, 12px) !important; padding: clamp(1px, 0.5vw, 3px) clamp(3px, 0.9vw, 5px) !important; height: clamp(17px, 4.8vw, 23px) !important; min-width: clamp(34px, 9.5vw, 46px) !important; background-color: rgba(51, 51, 51, 0.55) !important; opacity: 1 !important; } html.is-android .price-tag .icon-jgvs { width: clamp(13px, 3.5vw, 16px) !important; height: clamp(13px, 3.5vw, 16px) !important; } /* 距离角标 */ html.is-android .service-card .distance { position: absolute !important; bottom: 0 !important; left: 0 !important; font-size: clamp(10px, 2.8vw, 12px) !important; padding: clamp(1px, 0.5vw, 3px) clamp(3px, 0.9vw, 5px) !important; height: clamp(21px, 5.6vw, 27px) !important; min-width: clamp(34px, 9.5vw, 46px) !important; background-color: rgba(51, 51, 51, 0.55) !important; opacity: 1 !important; gap: clamp(2px, 0.6vw, 3px) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-top-left-radius: 0 !important; border-top-right-radius: clamp(6px, 1.5vw, 10px) !important; border-bottom-right-radius: 0 !important; border-bottom-left-radius: clamp(6px, 1.5vw, 10px) !important; border-radius: 0 clamp(6px, 1.5vw, 10px) 0 clamp(6px, 1.5vw, 10px) !important; z-index: 5 !important; } html.is-android .service-card .distance .jl { width: 12px !important; height: 12px !important; } /* 置顶角标 */ html.is-android .service-card .pin-badge-svg { width: clamp(34px, 9.5vw, 44px) !important; height: clamp(34px, 9.5vw, 44px) !important; } /* ========================================================= * 十、安卓专属：底部导航统一尺寸 * =======================================================*/ /* 安卓底部导航：固定在屏幕最底部，滚动时绝不移动 */ html.is-android .footer { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; z-index: 99999 !important; height: clamp(55px, 14vw, 67px) !important; padding: clamp(3px, 0.8vw, 5px) 0 calc(clamp(3px, 0.8vw, 5px) + env(safe-area-inset-bottom, 0px)) !important; /* 防止被其他元素影响 */ transform: none !important; will-change: auto !important; -webkit-transform: translateZ(0) !important; backface-visibility: hidden !important; background-color: #fff !important; box-shadow: 0 -1px 4px rgba(0,0,0,0.08) !important; } html.is-android .footer a, html.is-android .footer .nav-item { flex: 1 1 0 !important; min-width: 0 !important; padding: 0 !important; margin: clamp(-2px, -0.5vw, -1px) 0 0 0 !important; transform: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } /* 所有导航图标统一尺寸 */ html.is-android .footer img, html.is-android .footer .nav-item img { width: clamp(28px, 7.5vw, 34px) !important; height: clamp(28px, 7.5vw, 34px) !important; margin-bottom: clamp(2px, 0.5vw, 3px) !important; transform: none !important; } /* 所有导航文字统一样式 */ html.is-android .footer span, html.is-android .footer a span, html.is-android .footer .nav-item span { font-size: clamp(12px, 3.2vw, 14px) !important; line-height: 1.1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; transform: none !important; } /* 确保底部预留空间 */ html.is-android body { padding-bottom: calc(clamp(55px, 14vw, 67px) + clamp(8px, 2.2vw, 14px) + env(safe-area-inset-bottom, 0px)) !important; } /* ========================================================= * 十一、安卓专属：弹层面板自适应 * =======================================================*/ html.is-android .dropdown-container { max-height: 65vh !important; padding: clamp(10px, 3vw, 16px) clamp(8px, 2.5vw, 14px) !important; } /* 特点弹窗容器 - 自适应 */ html.is-android .tags-container { width: 100% !important; max-width: 100vw !important; max-height: 80vh !important; padding: clamp(12px, 3.5vw, 18px) !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } /* 标签列表 - 四列布局 */ html.is-android .tags-container .tags-list { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: clamp(8px, 2.2vw, 12px) !important; justify-items: center !important; width: 100% !important; } html.is-android .tags-container .tag-item { width: 100% !important; max-width: 100% !important; font-size: clamp(12px, 3.2vw, 14px) !important; padding: clamp(8px, 2.2vw, 12px) clamp(4px, 1.2vw, 8px) !important; min-height: clamp(32px, 9vw, 40px) !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; border-radius: 50px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; background-color: #F5F5F5 !important; color: #333 !important; border: none !important; transition: none !important; } /* 特点弹窗按钮选中状态 */ html.is-android .tags-container .tag-item.active { background-color: #FFEFD6 !important; box-shadow: inset 0 0 0 2px #FFB84D !important; color: #333 !important; border: 1px solid #FFB84D !important; transition: none !important; } /* 特点弹窗底部按钮 */ html.is-android .tags-container .tags-buttons { display: flex !important; gap: clamp(10px, 3vw, 16px) !important; margin-top: clamp(12px, 3.5vw, 18px) !important; padding: clamp(10px, 3vw, 14px) !important; width: 100% !important; box-sizing: border-box !important; } html.is-android .tags-container .tags-buttons .tags-button { flex: 1 !important; height: clamp(36px, 10vw, 44px) !important; font-size: clamp(13px, 3.5vw, 15px) !important; white-space: nowrap !important; border-radius: clamp(18px, 5vw, 22px) !important; } /* 地区弹窗（上海）- 完整自适应 */ html.is-android .area-container { width: 100% !important; max-width: 100vw !important; max-height: 70vh !important; height: auto !important; box-sizing: border-box !important; overflow: hidden !important; } html.is-android .area-list { padding: clamp(10px, 3vw, 16px) !important; max-height: 55vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: clamp(8px, 2.2vw, 12px) !important; justify-items: center !important; } /* 地区选项项 */ html.is-android .area-item { width: 100% !important; max-width: 100% !important; min-height: clamp(32px, 9vw, 40px) !important; padding: clamp(8px, 2.2vw, 12px) clamp(4px, 1.2vw, 8px) !important; font-size: clamp(12px, 3.2vw, 14px) !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; border-radius: 50px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; background-color: #F5F5F5 !important; color: #333 !important; border: none !important; transition: none !important; } /* 地区弹窗按钮选中状态 */ html.is-android .area-item.active { background-color: #FFEFD6 !important; box-shadow: inset 0 0 0 2px #FFB84D !important; color: #333 !important; border: 1px solid #FFB84D !important; transition: none !important; } /* 地区弹窗底部按钮 */ html.is-android .area-container .area-actions { display: flex !important; gap: clamp(10px, 3vw, 16px) !important; padding: clamp(10px, 3vw, 14px) !important; width: 100% !important; box-sizing: border-box !important; } html.is-android .area-container .area-actions .btn { flex: 1 !important; height: clamp(36px, 10vw, 44px) !important; font-size: clamp(13px, 3.5vw, 15px) !important; white-space: nowrap !important; border-radius: clamp(18px, 5vw, 22px) !important; } /* 弹层按钮 */ html.is-android .tags-buttons .tags-button, html.is-android .area-actions .btn, html.is-android .distance-actions .btn { height: clamp(32px, 9vw, 40px) !important; font-size: clamp(12px, 3.2vw, 14px) !important; min-width: clamp(80px, 22vw, 110px) !important; } /* 距离面板（附近）- 完整自适应 */ html.is-android .distance-container { width: 100% !important; max-width: 100vw !important; max-height: 90vh !important; padding: clamp(10px, 3vw, 16px) !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } html.is-android .distance-panel { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: visible !important; } /* 每一行布局 */ html.is-android .distance-panel .row { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: clamp(6px, 2vw, 10px) !important; padding: clamp(8px, 2.2vw, 12px) 0 !important; width: 100% !important; box-sizing: border-box !important; } html.is-android .distance-panel .row.between { justify-content: space-between !important; } /* 标签文字 */ html.is-android .distance-panel .label { font-size: clamp(12px, 3.2vw, 15px) !important; white-space: nowrap !important; flex-shrink: 0 !important; min-width: auto !important; max-width: 50% !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* 获取按钮 */ html.is-android .distance-panel .btn-locate { flex-shrink: 0 !important; padding: clamp(6px, 1.8vw, 10px) clamp(10px, 3vw, 16px) !important; font-size: clamp(12px, 3.2vw, 14px) !important; white-space: nowrap !important; min-width: auto !important; height: auto !important; } html.is-android .distance-panel .btn-locate img { width: clamp(14px, 4vw, 18px) !important; height: clamp(14px, 4vw, 18px) !important; margin-right: clamp(4px, 1.2vw, 6px) !important; } /* 输入框容器 */ html.is-android .distance-panel .input-with-icon { flex: 1 !important; min-width: 0 !important; max-width: 100% !important; } /* 距离面板输入框 */ html.is-android .distance-panel input { width: 100% !important; height: clamp(32px, 9vw, 38px) !important; font-size: clamp(12px, 3.2vw, 14px) !important; padding: clamp(6px, 1.8vw, 10px) clamp(8px, 2.5vw, 12px) !important; padding-left: clamp(30px, 8.5vw, 38px) !important; box-sizing: border-box !important; } html.is-android .distance-panel input::placeholder { font-size: clamp(11px, 3vw, 13px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* 搜索图标 */ html.is-android .distance-panel .input-with-icon .search-svg { width: clamp(14px, 4vw, 18px) !important; height: clamp(14px, 4vw, 18px) !important; left: clamp(8px, 2.2vw, 12px) !important; } /* 底部操作按钮 */ html.is-android .distance-panel .distance-actions { display: flex !important; gap: clamp(10px, 3vw, 16px) !important; margin-top: clamp(12px, 3.5vw, 18px) !important; width: 100% !important; } html.is-android .distance-panel .distance-actions .btn { flex: 1 !important; height: clamp(36px, 10vw, 44px) !important; font-size: clamp(13px, 3.5vw, 15px) !important; white-space: nowrap !important; padding: 0 clamp(12px, 3.5vw, 18px) !important; } /* 联想列表 - 全部显示，允许换行 */ html.is-android #place-suggest { max-height: none !important; height: auto !important; overflow: visible !important; position: relative !important; } html.is-android .tips-item { padding: clamp(10px, 2.8vw, 14px) clamp(12px, 3.5vw, 16px) !important; font-size: clamp(13px, 3.5vw, 15px) !important; white-space: normal !important; word-wrap: break-word !important; line-height: 1.4 !important; } html.is-android .tips-item .name { white-space: normal !important; word-wrap: break-word !important; display: block !important; max-width: 100% !important; line-height: 1.4 !important; } /* ========================================================= * 十二、安卓专属：回到顶部按钮自适应 * =======================================================*/ html.is-android .action-button { width: clamp(40px, 11vw, 50px) !important; height: clamp(40px, 11vw, 50px) !important; bottom: clamp(70px, 19vw, 90px) !important; right: clamp(12px, 3.5vw, 20px) !important; } html.is-android .action-button span { font-size: clamp(18px, 5vw, 24px) !important; } /* ========================================================= * 十三、安卓专属：Toast 自适应 * =======================================================*/ html.is-android .toast { font-size: clamp(13px, 3.5vw, 16px) !important; padding: clamp(10px, 3vw, 15px) clamp(16px, 4.5vw, 25px) !important; min-width: clamp(150px, 42vw, 200px) !important; border-radius: clamp(6px, 1.8vw, 8px) !important; } /* ========================================================= * 十四、安卓超窄屏特殊处理（≤320px） * =======================================================*/ @media screen and (max-width: 320px) { html.is-android .search-container { margin-left: clamp(-2px, -0.5vw, 0px) !important; } html.is-android .filter-buttons { gap: 3px !important; } html.is-android .filter-button { font-size: 11px !important; padding: clamp(2px, 0.6vw, 4px) clamp(4px, 1.2vw, 6px) !important; } html.is-android .dropdown-item { gap: 3px !important; } html.is-android .dropdown-item .name { max-width: 35px !important; } /* 超窄屏 .title 容器不省略 */ html.is-android .dropdown-item .title { max-width: none !important; overflow: visible !important; } /* 超窄屏箭头图标保持正常 */ html.is-android .dropdown-item .title .iconfont { max-width: none !important; overflow: visible !important; flex-shrink: 0 !important; display: inline-block !important; } html.is-android .service-name { font-size: clamp(14px, 3.8vw, 17px) !important; } html.is-android .tags .tag { font-size: 9px !important; max-width: 45px !important; } } /* ========================================================= * 十五、安卓宽屏/平板适配（≥600px） * =======================================================*/ @media screen and (min-width: 600px) { html.is-android .service-list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } html.is-android .service-card .avatar img.cover { aspect-ratio: 1 / 1 !important; } } @media screen and (min-width: 900px) { html.is-android .service-list { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } /* ========================================================= * 十六、安卓专属：详情页自适应 * =======================================================*/ /* 详情页顶部 header */ html.is-android .header { padding: clamp(8px, 2.5vw, 14px) clamp(8px, 2.5vw, 14px) !important; } html.is-android .header .title { font-size: clamp(16px, 4.2vw, 20px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html.is-android .header .back-icon { width: clamp(20px, 5.5vw, 26px) !important; height: clamp(20px, 5.5vw, 26px) !important; } /* 详情页信息区 */ html.is-android .info { padding: clamp(4px, 1.2vw, 6px) clamp(1.5px, 0.6vw, 3px) clamp(8px, 2.5vw, 14px) clamp(1.5px, 0.6vw, 3px) !important; } html.is-android .info .content .name { font-size: clamp(18px, 4.8vw, 24px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin-top: clamp(14px, 3.5vw, 20px) !important; } html.is-android .info .content .id { font-size: clamp(13px, 3.5vw, 16px) !important; } /* 详情页标签 */ html.is-android .info .content .tags { gap: clamp(4px, 1.2vw, 6px) !important; margin-top: clamp(-8px, -2vw, -5px) !important; } html.is-android .info .content .tags .tag { font-size: clamp(11px, 3vw, 13px) !important; padding: clamp(3px, 0.9vw, 5px) clamp(6px, 1.8vw, 10px) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; min-height: clamp(20px, 5.5vw, 26px) !important; } /* 详情页操作按钮组 */ html.is-android .info .actions { gap: clamp(4px, 1.2vw, 8px) !important; flex-wrap: wrap !important; } html.is-android .info .action-btn { font-size: clamp(11px, 3vw, 13px) !important; padding: clamp(6px, 1.6vw, 10px) clamp(8px, 2.2vw, 12px) !important; white-space: nowrap !important; min-height: clamp(28px, 7.5vw, 36px) !important; } /* 详情页收藏/预约按钮 */ html.is-android .btn-group { gap: clamp(8px, 2.5vw, 14px) !important; } html.is-android .btn-group button { font-size: clamp(13px, 3.5vw, 16px) !important; padding: clamp(8px, 2.2vw, 12px) clamp(16px, 4.5vw, 24px) !important; } /* 详情页价格信息 */ html.is-android .price-content { padding: clamp(8px, 2.5vw, 14px) !important; } html.is-android .price-info { font-size: clamp(14px, 3.8vw, 18px) !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } /* 详情页地址信息 */ html.is-android .address-info { font-size: clamp(12px, 3.2vw, 14px) !important; } html.is-android .address-row { gap: clamp(6px, 1.8vw, 10px) !important; } html.is-android .copy-btn { font-size: clamp(11px, 3vw, 13px) !important; padding: clamp(3px, 0.9vw, 5px) clamp(8px, 2.2vw, 12px) !important; } /* 详情页图片容器 */ html.is-android .image-container img { max-width: 100% !important; height: auto !important; border-radius: clamp(6px, 1.8vw, 10px) !important; } /* 详情页底部媒体区域与页面底部距离缩小 */ html.is-android .info { padding-bottom: 0 !important; } html.is-android .video-container { padding-bottom: 0 !important; } html.is-android .image-container { /* margin-bottom 由详情页统一间距控制 */ } /* 详情页最后一个媒体元素底部间距 */ html.is-android body.page-detail .info .video-container:last-child, html.is-android body.page-detail .info .image-container:last-child { margin-bottom: clamp(2px, 0.6vw, 4px) !important; padding-bottom: clamp(2px, 0.6vw, 4px) !important; } html.is-android .video-container .video:last-child, html.is-android .image-container .img:last-child { margin-bottom: 0 !important; } /* 详情页 body：没有底部导航，不需要大的底部 padding */ html.is-android body.page-detail { padding-bottom: clamp(8px, 2.5vw, 16px) !important; } /* 详情页弹窗 */ html.is-android .modal-content { width: 90vw !important; max-width: 400px !important; padding: clamp(12px, 3.5vw, 20px) !important; } html.is-android .modal-title { font-size: clamp(16px, 4.2vw, 20px) !important; } html.is-android .modal-body { font-size: clamp(13px, 3.5vw, 15px) !important; } /* ========================================================= * 十七、安卓专属：收藏页自适应 * =======================================================*/ /* 收藏页标题 */ html.is-android .content .title { padding: clamp(6px, 1.8vw, 10px) !important; } html.is-android .content .title .title-text { font-size: clamp(18px, 4.8vw, 22px) !important; white-space: nowrap !important; } html.is-android .content .title .right { gap: clamp(6px, 1.8vw, 10px) !important; } html.is-android .content .title .right .icon { width: clamp(55px, 15vw, 70px) !important; height: clamp(24px, 6.5vw, 30px) !important; font-size: clamp(12px, 3.2vw, 14px) !important; } /* 收藏页空状态 */ html.is-android .empty { margin: clamp(80px, 22vw, 120px) auto clamp(150px, 42vw, 200px) !important; } html.is-android .empty .text { font-size: clamp(13px, 3.5vw, 15px) !important; } /* ========================================================= * 十八、安卓专属：群组页自适应 * =======================================================*/ /* 群组页内容区 */ html.is-android .page-group .content { padding: clamp(6px, 1.8vw, 10px) !important; } html.is-android .page-group .title .title-text { font-size: clamp(18px, 4.8vw, 22px) !important; } /* 群组卡片 */ html.is-android .group-card { padding: clamp(8px, 2.2vw, 12px) !important; border-radius: clamp(8px, 2.2vw, 12px) !important; } html.is-android .group-card .group-name { font-size: clamp(14px, 3.8vw, 17px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } html.is-android .group-card .group-desc { font-size: clamp(12px, 3.2vw, 14px) !important; } /* ========================================================= * 覆盖 base.css 中的 filter-buttons margin 设置 * =======================================================*/ html.is-android .filter-buttons { margin-top: clamp(-8px, -2vw, -5px) !important; margin-left: clamp(1px, 0.8vw, 3px) !important; margin-right: clamp(4px, 1.5vw, 8px) !important; margin-bottom: clamp(2px, 1vw, 6px) !important; } /* ========================================================= * 安卓地址联想结果 - 全部显示，允许换行 * =======================================================*/ html.is-android #place-suggest, html.is-android .distance-panel #place-suggest, html.is-android .distance-container #place-suggest { max-height: none !important; height: auto !important; overflow: visible !important; overflow-y: visible !important; } html.is-android #place-suggest .tips-item, html.is-android #place-suggest > * { padding: clamp(10px, 2.8vw, 14px) clamp(12px, 3.5vw, 16px) !important; font-size: clamp(13px, 3.5vw, 15px) !important; white-space: normal !important; word-wrap: break-word !important; word-break: break-all !important; line-height: 1.4 !important; max-width: 100% !important; box-sizing: border-box !important; } html.is-android #place-suggest .tips-item .name, html.is-android #place-suggest .name { white-space: normal !important; word-wrap: break-word !important; word-break: break-all !important; line-height: 1.4 !important; } /* ========================================================= * 安卓筛选弹窗（推荐）- 一排三个按钮，自适应 * =======================================================*/ html.is-android .recommend-container { width: 100% !important; max-width: 100vw !important; padding: clamp(10px, 3vw, 16px) !important; box-sizing: border-box !important; overflow-x: hidden !important; } html.is-android .recommend-container .recommend-list { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: clamp(8px, 2.2vw, 12px) !important; justify-items: center !important; width: 100% !important; } html.is-android .recommend-container .recommend-item { width: 100% !important; max-width: 100% !important; min-height: clamp(32px, 9vw, 40px) !important; padding: clamp(8px, 2.2vw, 12px) clamp(4px, 1.2vw, 8px) !important; font-size: clamp(12px, 3.2vw, 14px) !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; border-radius: 50px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; background-color: #F5F5F5 !important; color: #333 !important; border: none !important; transition: none !important; } /* 筛选弹窗按钮选中状态 */ html.is-android .recommend-container .recommend-item.active { background-color: #FFEFD6 !important; box-shadow: inset 0 0 0 2px #FFB84D !important; color: #333 !important; border: 1px solid #FFB84D !important; transition: none !important; } /* ========================================================= * 安卓弹窗流畅动画 * =======================================================*/ /* 弹窗滑入动画 */ @keyframes android-popup-slide-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* 遮罩淡入动画 */ @keyframes android-mask-fade-in { from { opacity: 0; } to { opacity: 1; } } /* 所有弹窗容器应用动画 */ html.is-android .dropdown-container { animation: android-popup-slide-in 0.2s ease-out !important; will-change: transform, opacity !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; } /* 地区弹窗 */ html.is-android .area-container { animation: android-popup-slide-in 0.2s ease-out !important; } /* 特点弹窗 */ html.is-android .tags-container { animation: android-popup-slide-in 0.2s ease-out !important; } /* 筛选弹窗 */ html.is-android .recommend-container { animation: android-popup-slide-in 0.2s ease-out !important; } /* 附近弹窗 */ html.is-android .distance-container { animation: android-popup-slide-in 0.2s ease-out !important; } /* 遮罩层动画 */ html.is-android .dropdown-mask { animation: android-mask-fade-in 0.15s ease-out !important; will-change: opacity !important; } /* GPU 加速优化 */ html.is-android .dropdown-container, html.is-android .area-container, html.is-android .tags-container, html.is-android .recommend-container, html.is-android .distance-container { transform: translateZ(0) !important; -webkit-transform: translateZ(0) !important; } /* ========================================================= * 覆盖 base.css 中的 service-info padding（最高优先级） * =======================================================*/ html.is-android .service-info, html.is-android .service-card .service-info { padding-top: 0 !important; padding: 0 clamp(6px, 1.5vw, 10px) clamp(6px, 1.5vw, 10px) !important; margin-top: clamp(-3px, -0.7vw, -2px) !important; } html.is-android .service-card .avatar + .service-info { margin-top: clamp(-3px, -0.7vw, -2px) !important; padding-top: 0 !important; } /* ========================================================= * 统一所有文本元素的上下间距（最高优先级） * =======================================================*/ html.is-android .service-card .location, html.is-android .service-info .location { margin-top: clamp(5px, 1.3vw, 7px) !important; margin-bottom: clamp(2px, 0.8vw, 4px) !important; } html.is-android .service-card .tags, html.is-android .service-info .tags { margin-top: clamp(4px, 1vw, 6px) !important; margin-bottom: 0 !important; } /* ========================================================= * 洋酒页面：搜索框和筛选状态栏靠近（因为没有四个按钮） * =======================================================*/ html.is-android body.page-wine .search-container { margin-bottom: 0 !important; z-index: 0 !important; position: relative !important; background: transparent !important; background-color: transparent !important; } html.is-android body.page-wine .search-container .search-bar { box-shadow: none !important; border: none !important; outline: none !important; } html.is-android body.page-wine .search-container .search-bar input { border: none !important; outline: none !important; } /* 安卓洋酒页：筛选栏往上挪一点点 */ html.is-android body.page-wine .filter-container { position: relative !important; z-index: 1000 !important; transform: translateY(-0.5px) !important; margin-top: -0.5px !important; } html.is-android body.page-wine .filter-dropdown { margin-top: 0 !important; position: relative !important; z-index: 1000 !important; background-color: #fff !important; } /* ========================================================= * 收藏页面：刷新和清空按钮往上移 * =======================================================*/ html.is-android body.page-collect .content .title .right { margin-top: clamp(-3px, -0.8vw, -2px) !important; } /* ========================================================= * 群组页面：群组文字往上移和往左移 * =======================================================*/ html.is-android body.page-group .content .title { padding-top: clamp(4px, 1vw, 6px) !important; padding-left: clamp(4px, 1vw, 6px) !important; margin-bottom: clamp(2px, 0.8vw, 4px) !important; } html.is-android body.page-group .content .title .title-text { margin-top: clamp(-2px, -0.5vw, -1px) !important; margin-left: clamp(-2px, -0.4vw, -1px) !important; transform: none !important; } /* ========================================================= * 详情页面：完整自适应UI（防止文本换行和超出屏幕） * =======================================================*/ /* 内容卡片自适应 */ html.is-android body.page-detail .content { padding: clamp(10px, 2.8vw, 15px) !important; margin: 0 clamp(1.5px, 0.6vw, 3px) !important; max-width: 100vw !important; box-sizing: border-box !important; overflow-x: hidden !important; border-radius: clamp(7px, 2.2vw, 9px) !important; box-shadow: none !important; } /* 名称自适应 */ html.is-android body.page-detail .content .name { font-size: clamp(18px, 4.8vw, 24px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; margin-top: clamp(14px, 3.5vw, 20px) !important; } /* 编号自适应 */ html.is-android body.page-detail .content .id { font-size: clamp(13px, 3.5vw, 16px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; margin-top: clamp(2px, 0.8vw, 4px) !important; } /* 编号数字调大 */ html.is-android body.page-detail .content .id #num { font-size: clamp(14px, 3.8vw, 18px) !important; font-weight: 600 !important; } /* 标签自适应 */ html.is-android body.page-detail .content .tags { gap: clamp(4px, 1.2vw, 6px) !important; flex-wrap: wrap !important; margin-top: clamp(-8px, -2vw, -5px) !important; } html.is-android body.page-detail .content .tags .tag { font-size: clamp(11px, 3vw, 13px) !important; padding: clamp(3px, 0.9vw, 5px) clamp(6px, 1.8vw, 10px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; min-height: clamp(20px, 5.5vw, 26px) !important; } /* 操作按钮自适应 */ html.is-android body.page-detail .actions { gap: clamp(4px, 1.2vw, 8px) !important; flex-wrap: wrap !important; } html.is-android body.page-detail .action-btn { font-size: clamp(11px, 3vw, 13px) !important; padding: clamp(6px, 1.6vw, 10px) clamp(8px, 2.2vw, 12px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; flex: 1 1 0 !important; min-height: clamp(28px, 7.5vw, 36px) !important; } /* 收藏/预约按钮自适应 */ html.is-android body.page-detail .btn-group { gap: clamp(8px, 2.5vw, 14px) !important; flex-wrap: wrap !important; margin-top: clamp(12px, 3.2vw, 17px) !important; } html.is-android body.page-detail .btn-group button { font-size: clamp(13px, 3.5vw, 16px) !important; white-space: nowrap !important; flex: 1 1 0 !important; min-width: 0 !important; } /* 收藏按钮样式 */ html.is-android body.page-detail .btn-group .collect-btn, html.is-android body.page-detail .btn-group .collect-btn.active { padding: clamp(10px, 2.8vw, 14px) clamp(16px, 4.5vw, 24px) !important; min-height: clamp(36px, 9.5vw, 44px) !important; } /* 价格内容卡片自适应 */ html.is-android body.page-detail .price-content { padding: clamp(10px, 2.8vw, 15px) !important; margin: clamp(4px, 1.2vw, 6px) clamp(1.5px, 0.6vw, 3px) clamp(4px, 1.2vw, 6px) clamp(1.5px, 0.6vw, 3px) !important; max-width: 100vw !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: visible !important; border-radius: clamp(7px, 2.2vw, 9px) !important; box-shadow: none !important; } html.is-android body.page-detail .price-info { font-size: clamp(14px, 3.8vw, 18px) !important; gap: clamp(10px, 2.8vw, 20px) !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; padding-top: clamp(4px, 1.2vw, 6px) !important; } html.is-android body.page-detail .price-item { white-space: nowrap !important; flex-shrink: 0 !important; gap: clamp(4px, 1.2vw, 6px) !important; } html.is-android body.page-detail .price-item .price { font-size: clamp(13px, 3.5vw, 17px) !important; } /* 地址信息自适应 */ html.is-android body.page-detail .address-info { font-size: clamp(12px, 3.2vw, 14px) !important; margin-top: clamp(10px, 2.8vw, 14px) !important; overflow: visible !important; min-height: auto !important; } html.is-android body.page-detail .address-row { gap: clamp(6px, 1.8vw, 10px) !important; flex-wrap: wrap !important; margin-top: clamp(2px, 0.6vw, 4px) !important; } html.is-android body.page-detail .location-icon { font-size: clamp(12px, 3.2vw, 14px) !important; flex: 1 1 0 !important; min-width: 0 !important; overflow: hidden !important; gap: clamp(2px, 0.6vw, 3px) !important; margin-top: clamp(2px, 0.6vw, 4px) !important; } html.is-android body.page-detail .location-icon img.loc-icon { margin-right: clamp(2px, 0.6vw, 3px) !important; } /* 距离行不受overflow限制 */ html.is-android body.page-detail .location-icon.location-distance { overflow: visible !important; } html.is-android body.page-detail .location-icon span#address { font-size: clamp(13px, 3.5vw, 15px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; max-width: 100% !important; } html.is-android body.page-detail .copy-btn { font-size: clamp(11px, 3vw, 13px) !important; padding: clamp(3px, 0.9vw, 5px) clamp(8px, 2.2vw, 12px) !important; white-space: nowrap !important; flex-shrink: 0 !important; } /* 距离信息自适应 - 强制显示 */ html.is-android body.page-detail #distance_row, html.is-android body.page-detail .location-icon.location-distance#distance_row, html.is-android body.page-detail .location-icon.location-distance { display: flex !important; visibility: visible !important; opacity: 1 !important; font-size: clamp(13px, 3.5vw, 16px) !important; color: #999 !important; margin-top: clamp(4px, 1.2vw, 6px) !important; margin-left: calc(15px + 6px) !important; } html.is-android body.page-detail .location-icon.location-distance .distance-label, html.is-android body.page-detail .location-icon.location-distance #distance_text { color: #999 !important; font-size: clamp(13px, 3.5vw, 16px) !important; } /* 媒体容器自适应 */ html.is-android body.page-detail .image-container, html.is-android body.page-detail .video-container { margin: clamp(4px, 1.2vw, 6px) clamp(1.5px, 0.6vw, 3px) clamp(4px, 1.2vw, 6px) clamp(1.5px, 0.6vw, 3px) !important; max-width: 100vw !important; box-sizing: border-box !important; overflow-x: hidden !important; } /* 统一图片和视频之间的间距 */ html.is-android body.page-detail .image-container .img, html.is-android body.page-detail .video-container .video { margin-bottom: clamp(4px, 1.2vw, 6px) !important; } html.is-android body.page-detail .image-container .img:last-child, html.is-android body.page-detail .video-container .video:last-child { margin-bottom: 0 !important; } html.is-android body.page-detail .image-container img, html.is-android body.page-detail .video-container video { max-width: 100% !important; height: auto !important; display: block !important; border-radius: clamp(7px, 2.2vw, 9px) !important; } /* 取消资料/媒体加载完成后的淡入过渡，避免安卓上“闪一下” */ html.is-android body.page-detail .image-container .img img, html.is-android body.page-detail .video-container .video { transition: none !important; } /* 视频容器圆角调整 */ html.is-android body.page-detail .video-wrap { border-radius: clamp(7px, 2.2vw, 9px) !important; } /* 详情页：安卓上返回按钮+名称详情栏固定在最上面，下面资料卡片和媒体滑动时顶栏不动 */ html.is-android body.page-detail { transform: none !important; overflow-x: hidden !important; } html.is-android body.page-detail .header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 1000 !important; padding: var(--detail-header-pad-y, clamp(8px, 2.6vw, 16px)) var(--detail-header-pad-x, clamp(12px, 3.8vw, 24px)) !important; padding-top: calc(var(--detail-header-pad-y, clamp(8px, 2.6vw, 16px)) + env(safe-area-inset-top, 0px)) !important; min-height: var(--detail-header-h, clamp(48px, 12vw, 84px)) !important; /* 固定栏不参与文档流，下面内容单独滚动 */ box-shadow: 0 2px 8px rgba(0,0,0,.08) !important; } /* 详情页内容区（资料卡片+媒体）预留顶栏高度；先隐藏卡片，渲染完成后再显示，避免闪一下 */ html.is-android body.page-detail .info { padding-top: calc(var(--detail-header-h, clamp(48px, 12vw, 84px)) + env(safe-area-inset-top, 0px) + var(--detail-header-gap, clamp(2px, 1.2vw, 10px))) !important; visibility: hidden !important; opacity: 0 !important; transition: none !important; } html.is-android body.page-detail.detail-force-show .info { visibility: visible !important; opacity: 1 !important; } html.is-android body.page-detail.detail-ready .info { visibility: visible !important; opacity: 1 !important; } html.is-android body.page-detail .header .title { font-size: clamp(16px, 4.2vw, 22px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* ========================================================= * 最终覆盖：确保安卓底部导航绝对固定，不随页面滚动 * 禁用所有动画、过渡、变换，完全静止 * =======================================================*/ html.is-android .footer, html.is-android body .footer, html.is-android body.page-wine .footer, html.is-android body.page-collect .footer, html.is-android body.page-group .footer, html.is-android body.page-detail .footer { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; z-index: 99999 !important; /* 禁用所有变换和动画 */ transform: none !important; -webkit-transform: none !important; transition: none !important; -webkit-transition: none !important; animation: none !important; -webkit-animation: none !important; } /* 导航按钮也禁用所有动画效果 */ html.is-android .footer a, html.is-android .footer .nav-item, html.is-android .footer img, html.is-android .footer span { transform: none !important; -webkit-transform: none !important; transition: none !important; -webkit-transition: none !important; animation: none !important; -webkit-animation: none !important; } html.is-android .footer a:active, html.is-android .footer a:hover, html.is-android .footer a:focus { transform: none !important; -webkit-transform: none !important; } /* 安卓：滚动锁时补偿 footer 位置，避免弹窗打开后底部导航上移/贴到弹窗里 */ html.is-android body.scroll-locked .footer, html.is-android body.scroll-locked #footer { transform: translateY(var(--scroll-lock-y, 0px)) !important; -webkit-transform: translateY(var(--scroll-lock-y, 0px)) !important; } /* ========================================================= * 防止下拉弹性滚动时 footer 跟着动 * =======================================================*/ /* 安卓：禁用弹性 overscroll，保留触摸滑动。不給 body 加 transform，否则 footer 的 fixed 会失效随内容滚动 */ html.is-android, html.is-android body { overscroll-behavior: none !important; overscroll-behavior-y: none !important; -webkit-overflow-scrolling: touch !important; } /* footer 独立图层（移除 contain 避免影响点击响应） */ html.is-android .footer { backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; } /* 确保导航按钮可点击 */ html.is-android .footer a, html.is-android .footer .nav-item { pointer-events: auto !important; cursor: pointer !important; -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important; touch-action: manipulation !important; } /* ========================================================= * 滚动流畅度优化 - 安卓滑动不卡顿 * =======================================================*/ /* 主内容区：不设 transform/contain，避免安卓把 .container 当成独立滚动层导致第一次只滚列表 */ html.is-android .container { touch-action: pan-y !important; } /* 列表区：不设 transform/contain，整页由 body 滚（搜索栏+卡片一起） */ html.is-android .service-list { touch-action: pan-y !important; } /* 卡片：不阻止滑动，减少滚动时重绘 */ html.is-android .service-card { touch-action: pan-y !important; pointer-events: auto !important; contain: layout style paint; } @supports (content-visibility: auto) { html.is-android .service-card { content-visibility: auto; contain-intrinsic-size: 0 280px; } } /* 图片占位区域固定高度，避免加载时布局抖动 */ html.is-android .service-card .avatar { min-height: 180px; height: auto; aspect-ratio: 3/4; overflow: hidden; contain: layout style; touch-action: pan-y !important; } /* 图片不参与主线程布局计算 */ html.is-android .service-card .avatar img { will-change: opacity; transform: translateZ(0); -webkit-transform: translateZ(0); pointer-events: none !important; } /* 卡片信息区域固定布局 */ html.is-android .service-card .service-info { contain: content; touch-action: pan-y !important; } /* 滚动时隐藏复杂动画 */ html.is-android.is-scrolling .service-card { animation: none !important; transition: none !important; } /* 滚动时不计算离屏图片 */ html.is-android.is-scrolling .service-card .avatar img:not(.loaded) { visibility: hidden; } /* ========================================================= * 修复：切换到“中圈”后第一次滑动只滚卡片列表、不滚整页 * 原因：.container / .service-list 被做成了独立纵向滚动层 * 方案：安卓强制整页由 body 滚动，禁用内部纵向滚动层 * =======================================================*/ /* 1) 确保页面滚动发生在 body/viewport 上（覆盖 base 可能的锁高/锁滚动） */ html.is-android, html.is-android body { height: auto !important; min-height: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; /* 防 base 把 body 固定住导致滚动落到内部容器 */ position: relative !important; } /* 2) 关键：禁止“列表/容器”成为纵向滚动容器（只允许整页滚动） */ html.is-android .container, html.is-android .service-list { height: auto !important; max-height: none !important; overflow: visible !important; overflow-y: visible !important; /* 很关键：如果 base 给它 momentum scroll，会导致优先滚内部 */ -webkit-overflow-scrolling: auto !important; } /* 3) 如果 base 给 .container 做了 100vh/calc 锁高，这里强制解锁 */ html.is-android .container { min-height: 0 !important; } /* 4) 保留横向滚动：不要动 filter-dropdown 的 overflow-x（你的原逻辑继续有效） */ /* 5) 触摸行为：保证在卡片区域滑动也走整页滚动，不被子层“截获” */ html.is-android .service-list, html.is-android .service-card { touch-action: pan-y !important; } html.is-android .content, html.is-android .main { height: auto !important; max-height: none !important; overflow: visible !important; overflow-y: visible !important; -webkit-overflow-scrolling: auto !important; } /* ========================================================= * 修复：资料卡片图片/图标滚动时闪烁（一闪一闪） * 原因：content-visibility + 滚动时 visibility:hidden + avatar 规则冲突 * 方案：安卓列表页关闭这些“卸载/隐藏”优化，保证图片稳定渲染 * =======================================================*/ /* 1) 关闭离屏裁剪渲染（会导致重新进入视口时闪一下） */ html.is-android .service-card { content-visibility: visible !important; contain: none !important; } /* 2) 禁止滚动时把图片隐藏（这条就是闪烁的直接原因之一） */ html.is-android.is-scrolling .service-card .avatar img, html.is-android.is-scrolling .service-card .avatar img.cover, html.is-android.is-scrolling .service-card .avatar img:not(.loaded) { visibility: visible !important; opacity: 1 !important; } /* 3) 统一 avatar：强制回到你前面定义的 1:1，避免后面 3/4 + min-height 冲突引起重排闪烁 */ html.is-android .service-card .avatar { width: 100% !important; height: 0 !important; min-height: 0 !important; padding-bottom: 100% !important; aspect-ratio: auto !important; contain: none !important; } /* 4) 图片保持稳定，不要在滚动时被“单独处理” */ html.is-android .service-card .avatar img, html.is-android .service-card .avatar img.cover { backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; /* 保留 GPU 加速可以，但不要靠它隐藏/卸载 */ transform: translateZ(0) !important; -webkit-transform: translateZ(0) !important; } /* ========================================================= * 最终修复：安卓资料卡片滑动时图片/图标闪烁 * 只追加覆盖，不改原位置 * =======================================================*/ /* 1) 关闭离屏卸载渲染，避免滚动进入视口时“重新绘制闪一下” */ html.is-android .service-card { content-visibility: visible !important; contain: none !important; } /* 2) 禁止滚动态隐藏图片（你之前的 is-scrolling 相关隐藏会导致闪） */ html.is-android.is-scrolling .service-card .avatar img, html.is-android.is-scrolling .service-card .avatar img.cover, html.is-android.is-scrolling .service-card .avatar img:not(.loaded) { visibility: visible !important; opacity: 1 !important; } /* 3) 安卓 WebView 下：去掉图片的 GPU/opacity 优化，避免圆角+overflow 触发白闪 */ html.is-android .service-card .avatar img, html.is-android .service-card .avatar img.cover { will-change: auto !important; transition: none !important; -webkit-transition: none !important; transform: none !important; -webkit-transform: none !important; } /* 4) 统一 avatar 尺寸逻辑，避免你文件里 1:1 和 3/4/min-height 冲突造成重排闪烁 */ html.is-android .service-card .avatar { width: 100% !important; height: 0 !important; min-height: 0 !important; padding-bottom: 100% !important; /* 强制回到 1:1 */ aspect-ratio: auto !important; /* 给个底色，防止解码/重绘瞬间露底 */ background: #f2f2f2 !important; contain: none !important; } /* 5) 防止图片在重绘时出现“透明到不透明”的闪 */ html.is-android .service-card .avatar img, html.is-android .service-card .avatar img.cover { display: block !important; background: transparent !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; } /* 6) 滑到某处图片加载时用淡入代替“闪一下”：保留 opacity 过渡，加载完成加 .loaded 后平滑显示 */ html.is-android .service-card .avatar img.cover { transition: opacity 0.2s ease-out !important; } html.is-android .service-card .avatar img.cover.loaded { opacity: 1 !important; }