/* ========================================================= * android-adaptive.css — 安卓设备专用自适应样式 * * 适用条件： 时生效 * iOS 设备完全不受此文件影响 * * 功能： * 1. 全局自适应布局（防止超出屏幕） * 2. 文本强制单行不换行 * 3. 底部导航按钮统一尺寸 * 4. 页面切换流畅过渡 * 5. 响应式字体和间距 * * 版本：2026-01-24 * =======================================================*/ /* ========================================================= * 一、页面切换流畅过渡（仅安卓生效，iOS 不应用任何动画） * =======================================================*/ /* 页面淡入动画 - 仅安卓 */ @keyframes page-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* 页面容器：仅安卓进入时有淡入效果 */ html.is-android body { animation: page-fade-in 0.25s ease-out; } /* 底部导航切换时的过渡 - 仅安卓 */ html.is-android .footer a { transition: color 0.15s ease, transform 0.15s ease; } html.is-android .footer a:active { transform: scale(0.95); } /* ========================================================= * 二、安卓专属：全局自适应基础 * =======================================================*/ /* 仅当 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; } /* ========================================================= * 七、安卓专属：资料卡片列表自适应 * =======================================================*/ 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; } /* 让 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 { 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; } 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; } html.is-android body.page-wine .filter-dropdown { margin-top: clamp(0px, 0.3vw, 1px) !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 .video-wrap { border-radius: clamp(7px, 2.2vw, 9px) !important; } /* 顶部标题栏自适应 */ html.is-android body.page-detail .header { padding: clamp(6px, 1.8vw, 8px) clamp(12px, 3.2vw, 20px) !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; }