/* V107：同 PC 版，说明色再加深一档（#4d5663 → #39414f）。 手机端小字号更多（11.5px 的免责声明、12px 的快捷按钮）， 且开启背景图后 body 底会透出图，浅色字更容易糊。 深色主题下由 theme.css 的 html[data-theme="dark"] 翻成浅字。 */ :root{--loan-mu:#39414f;} /* 手机版（/m/）样式 · 辛集房产信息网 */ .mbody{background:var(--chip);padding-bottom:calc(64px + env(safe-area-inset-bottom))} /* ---------- 顶部 ---------- */ .m-top{position:sticky;top:0;z-index:60;background:var(--dark);color:var(--ondark); display:flex;align-items:center;justify-content:space-between;gap:12px;height:50px;padding:0 14px} .m-logo{display:flex;align-items:center;line-height:1.2;min-width:0;max-width:60%} .m-logo .site-logo{max-width:100%;height:auto;object-fit:contain} .m-logo-cn{font-size:16px;font-weight:800;letter-spacing:.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .m-logo-s{font-size:10px;color:var(--gold2);letter-spacing:1px} .m-top-r{display:flex;align-items:center;gap:10px} .m-icon{ /* V58：原来 30px，低于 44px 触控标准（指尖约 44px 宽），容易点不中。 视觉尺寸保持 30px 的圆形，靠伪元素把可点区域撑到 44px —— 直接改 width/height 会让圆变大、顶栏变挤。 */ width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.1);font-size:15px;color:var(--ondark);position:relative } .m-icon:after{ content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:44px;height:44px } /* V130：视觉尺寸不变（约 26px），靠伪元素把可点区域撑到 44px。 .m-top 是普通 flex 容器、没有 overflow，伪元素不会被裁。 */ .m-login{font-size:12.5px;color:var(--gold2);font-weight:600;padding:4px 11px;border:1px solid rgba(216,184,119,.5);border-radius:999px; position:relative;text-decoration:none;display:inline-block} .m-login:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:100%;height:44px;min-width:44px} /* ---------- 分类横滑 ---------- */ /* V130：整条 chips 的高度保持不变（原来 9px×2 + 26px ≈ 44px）， 把上下留白挪进 .m-chip 自身 —— chip 直接做到 44px 高， 这样可点区域达标，而顶栏 + chips 的总高度一点没变。 ⚠ 不能用 :after 伪元素撑高（.m-fb 那套做法在这里不行）： .m-chips 有 overflow-x:auto，按 CSS 规范 overflow-y 会被一并算成 auto， 伪元素超出的部分会被裁掉，等于白做。 */ .m-chips{position:sticky;top:50px;z-index:55;background:var(--card);border-bottom:1px solid var(--line); display:flex;gap:8px;overflow-x:auto;padding:0 12px;-webkit-overflow-scrolling:touch} .m-chips::-webkit-scrollbar{display:none} .m-chip{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; min-height:44px;padding:0 14px;border-radius:999px;background:var(--chip); font-size:13px;color:var(--muted);white-space:nowrap;text-decoration:none} .m-chip.on{background:var(--gold);color:var(--onbrand);font-weight:600} /* ---------- 主体 ---------- */ .m-main{padding:12px 12px 8px} .m-hero{background:linear-gradient(120deg,var(--hero1),var(--hero2));border-radius:14px;padding:15px;color:var(--ondark); display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .m-hero h1{margin:0 0 4px;font-size:17px;font-weight:800} .m-hero p{margin:0;font-size:12px;color:var(--muted2)} .m-hero-r{display:flex;gap:16px;text-align:center} .m-hero-r b{display:block;font-size:17px;color:var(--gold2)} .m-hero-r span{font-size:10.5px;color:var(--muted2)} .m-sec{display:flex;align-items:center;justify-content:space-between;margin:16px 2px 9px} .m-sec h2{margin:0;font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:7px} .m-sec h2:before{content:"";width:3px;height:15px;border-radius:2px;background:var(--gold)} .m-sec .more{font-size:12.5px;color:var(--muted2)} /* ---------- 房源卡片 ---------- */ .m-cards{display:flex;flex-direction:column;gap:10px} .m-card{display:flex;gap:11px;background:var(--card);border:1px solid var(--line);border-radius:12px; padding:11px;align-items:stretch} .m-card:active{background:var(--bg)} .m-card-img{flex:0 0 88px;width:88px;height:70px;border-radius:8px;background:var(--chip);overflow:hidden;position:relative} .m-card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .m-card-b{flex:1;min-width:0;display:flex;flex-direction:column} .m-card-t{font-size:14.5px;font-weight:600;line-height:1.5;color:var(--text); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* V120：手机端房源标签。 .tag 基础样式来自 assets/style.css（金色「推广」也在那边），这里只做小屏适配： 手机上标题字号小，PC 那套 11px + padding 1px 7px 的标签会显得偏大、挤占标题行数， 收成 10.5px 更协调。金色渐变照抄 PC，保证「推广」在手机上一眼能认出来。 */ .m-card-t .tag,.m-dtags .tag{font-size:10.5px;padding:1px 5px;margin-right:4px;border-radius:4px;vertical-align:1px} .tag.cointop{background:linear-gradient(135deg,var(--gold),var(--gold2,#c9a961));color:#fff} .m-dtags{margin:0 0 7px} /* V120：手机端搜索下拉（复用 assets/style.css 的 .hs-box/.hs-drop，这里补小屏适配） 手机输入框字号 15px、行高比 PC 高，下拉项照 PC 的 11.5px 会偏挤，适当放大； max-height 收一点，免得下拉盖住整个屏幕看不到输入框。 */ .m-filter .hs-box{display:block} .hs-drop{max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch} .hs-drop-i{padding:11px 14px;font-size:14px} .hs-drop-c{font-size:12px} .hs-drop-t{font-size:12px} .m-card-m{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted2);margin-top:5px} .m-card-f{display:flex;align-items:baseline;gap:6px;margin-top:auto;padding-top:6px} .m-card-f b{font-size:16px;color:var(--red);font-weight:800} .m-card-f i{font-style:normal;font-size:12px;color:var(--muted2)} /* V146：手机端单价 —— 金色小字，与 PC 端同口径 */ .m-card-f .m-up{text-decoration:none;font-size:12px;color:var(--gold);white-space:nowrap} .m-card-f span{margin-left:auto;font-size:12px;color:var(--muted2)} /* ---------- 筛选 ---------- */ .m-filter{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:12px} .m-fl{display:flex;gap:7px;flex-wrap:wrap;align-items:center} .m-fl + .m-fl{margin-top:9px;padding-top:9px;border-top:1px dashed var(--chip)} .m-fb{padding:4px 11px;border-radius:6px;font-size:12.5px;background:var(--chip);color:var(--muted);white-space:nowrap;position:relative} .m-fb.on{background:var(--gold);color:var(--onbrand);font-weight:600} .m-filter input.inp{width:80px;padding:5px 9px;border:1px solid var(--line);border-radius:6px;font-size:13px;outline:0} .m-filter input.inp:focus{border-color:var(--gold)} /* ---------- 详情 ---------- */ .m-detail{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px} .m-detail h1{font-size:17px;line-height:1.55;margin:0 0 10px;font-weight:700} .m-dmeta{font-size:12px;color:var(--muted2);display:flex;gap:10px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--topbar)} /* V86：手机版详情页房源编号小徽章（与 PC 端一致） */ .m-dmeta .hno{ display:inline-block;font-weight:600;font-style:normal; font-family:ui-monospace,Menlo,Consolas,monospace; padding:1px 5px;margin-left:2px; border:1px solid #dde3ec;border-radius:5px;background:#fafbfd;color:#8b93a1; } .m-price{display:flex;gap:22px;padding:14px 0;border-bottom:1px solid var(--topbar);flex-wrap:wrap} .m-price b{display:block;font-size:22px;color:var(--red);font-weight:800} .m-price span{font-size:12px;color:var(--muted2)} .m-dinfo{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;padding:14px 0;border-bottom:1px solid var(--topbar);font-size:13.5px} .m-dinfo span{color:var(--muted2);display:inline-block;width:56px} .m-ct{font-size:14.5px;line-height:1.95;color:var(--dark);word-break:break-word;padding-top:12px} .m-ct img{border-radius:8px;margin:8px 0;max-width:100%} .m-ct blockquote{margin:10px 0;padding:10px 12px;background:var(--bg);border-left:3px solid var(--gold2);color:var(--muted)} .m-imgs{margin-top:12px} .m-imgs img{width:100%;border-radius:8px;margin-bottom:8px} .m-contact{background:var(--tint2);border:1px solid var(--tintline);border-radius:10px;padding:14px;margin-top:12px;font-size:14px} .m-contact b{color:var(--gold3);font-size:18px;display:block} .m-contact a{color:var(--gold3)} /* ---------- 中介 ---------- */ .m-agents{display:flex;flex-direction:column;gap:10px} .m-agent{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px} .m-agent h3{margin:0 0 4px;font-size:15px;font-weight:700} .m-agent .shop{font-size:12.5px;color:var(--muted2);margin-bottom:6px} .m-agent .tel{font-size:17px;color:var(--red);font-weight:800} .m-agent .intro{font-size:12.5px;color:var(--muted2);margin-top:6px;line-height:1.6} /* ---------- 表单 ---------- */ .m-form{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px} .m-form .form-row{margin-bottom:14px} .m-form label{display:block;font-size:13px;color:var(--muted);font-weight:600;margin-bottom:6px} .m-form .inp{font-size:16px;padding:11px 12px} .m-form textarea.inp{min-height:130px} /* 按钮：用 flex 让文字真正水平+垂直居中。 之前是 display:block + height，文字只占行盒贴在顶部，看着就是「没居中」。 */ .m-btn{display:flex;align-items:center;justify-content:center;gap:6px; width:100%;min-height:48px;padding:0 14px;border:0;border-radius:14px; font-size:15.5px;font-weight:700;letter-spacing:.3px;line-height:1; text-decoration:none;cursor:pointer;-webkit-appearance:none;appearance:none; background:linear-gradient(135deg,var(--gold2),var(--gold));color:#241d10; box-shadow:0 4px 14px rgba(0,0,0,.14); transition:transform .12s ease,box-shadow .12s ease,filter .12s ease} .m-btn:active{transform:translateY(1px);filter:brightness(.95); box-shadow:0 2px 7px rgba(184,147,74,.22)} .m-btn .ico{font-size:17px;line-height:1} .m-btn.gray{background:var(--chip);color:var(--muted);box-shadow:none} /* 次级按钮：白底描边 */ .m-btn.outline{background:var(--card);color:var(--muted);border:1px solid var(--line);box-shadow:none} .m-btn.outline:active{background:var(--bg);transform:translateY(1px)} /* 详情页操作条：拨打 + 微信分享并排 */ .m-actbar{display:flex;gap:12px;margin-top:14px} .m-actbar .m-btn{flex:1;min-width:0} .m-actbar .m-btn.share{background:linear-gradient(135deg,#2bc62b,#129611);color:#fff; box-shadow:0 4px 14px rgba(26,173,25,.32)} .m-actbar .m-btn.share:active{box-shadow:0 2px 7px rgba(26,173,25,.24)} /* 复制按钮与操作条之间的间距 */ .m-detail .m-btn.outline{margin-top:12px} /* 复制提示 */ .m-sharetip{margin-top:10px;text-align:center;font-size:12.5px;color:var(--green); background:#e8f5e9;border-radius:10px;padding:9px 12px;line-height:1.6} /* 微信内引导遮罩（微信浏览器无法直接调起分享，只能引导点右上角） */ .m-wxmask{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:9999; display:flex;align-items:flex-start;justify-content:flex-end} .m-wxguide{margin:8px 16px 0 0;max-width:250px;background:var(--card);border-radius:12px; padding:14px 16px;box-shadow:0 6px 24px rgba(0,0,0,.2);position:relative} .m-wxguide::after{content:'';position:absolute;top:-9px;right:22px; border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:9px solid var(--card)} .m-wxguide-t{font-size:15px;font-weight:700;color:var(--dark);margin-bottom:8px} .m-wxguide-b{font-size:13.5px;color:var(--muted);line-height:1.85} .m-wxguide-b b{color:#1aad19;font-size:16px} .m-tip{font-size:12px;color:var(--muted2);line-height:1.8;margin-top:6px} /* ---------- 空 / 提示 ---------- */ .m-empty{background:var(--card);border:1px dashed var(--line);border-radius:12px;padding:38px 18px;text-align:center;color:var(--muted2);font-size:13.5px;line-height:1.9} .m-empty a{color:var(--gold)} .m-alert{padding:11px 14px;border-radius:10px;font-size:13.5px;margin-bottom:12px;line-height:1.7} .m-alert.ok{background:#eef8f1;color:var(--green);border:1px solid #cdebda} .m-alert.err{background:#fdeeee;color:var(--red);border:1px solid #f6d5d3} .m-alert.info{background:var(--tint2);color:var(--gold3);border:1px solid var(--tintline)} /* ---------- 我的 ---------- */ .m-me{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px; display:flex;gap:14px;align-items:center} .m-me-n{font-size:16px;font-weight:700} .m-me-s{font-size:12px;color:var(--muted2);margin-top:3px} .m-menu{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:12px} .m-menu a{display:flex;justify-content:space-between;align-items:center;padding:14px;font-size:14.5px;border-bottom:1px solid var(--topbar)} .m-menu a:last-child{border-bottom:0} .m-menu a span{color:var(--muted2);font-size:13px} /* ---------- 分页 ---------- */ .m-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 4px} .m-pg{padding:8px 18px;border-radius:10px;background:var(--card);border:1px solid var(--line);font-size:13.5px;color:var(--muted)} .m-pg.off{color:var(--line)} .m-pg-cur{font-size:13px;color:var(--muted2)} /* V111：手机版深分页上限提示 */ .m-pager-note{text-align:center;font-size:12px;color:var(--muted2);line-height:1.7; margin:6px 0 0} /* ---------- 页脚 ---------- */ .m-foot{padding:18px 12px 24px;text-align:center} .m-tel{font-size:15px;color:var(--red);font-weight:700;margin-bottom:10px} .m-tel span{margin:0 8px;color:var(--line);font-weight:400} .m-foot-l{font-size:12.5px;color:var(--muted2)} .m-foot-l span{margin:0 6px;color:var(--line)} .m-copy{margin-top:8px;font-size:12px;color:var(--muted2)} .m-disclaimer{margin-top:6px;font-size:12px;color:var(--muted2);line-height:1.7;padding:0 10px} /* ---------- 底部 Tab ---------- V88：必须加 box-sizing:border-box。 本站没有全局 `* { box-sizing:border-box }`，所以 height 是 content-box： 声明 56 + 安全区34，再加 padding-bottom 34 → 实际 124px（安全区被算了两次） 实测 iPhone（安全区34px）Tab 栏高达 125px，比预期高出近一倍， 把右下角在线客服气泡整个吞掉（气泡下沿距底 100 < Tab 顶 125）。 加 border-box 后高度严格等于 56 + 安全区，padding 不再叠加。 */ .m-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--card);border-top:1px solid var(--line); display:flex;align-items:center;justify-content:space-around;box-sizing:border-box; height:calc(56px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)} .m-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; font-size:12px;color:var(--muted2);padding:6px 0} .m-tab.on{color:var(--gold);font-weight:600} .m-tab-i{font-size:19px;line-height:1} .m-tab-post{flex:0 0 58px;height:56px;margin-top:-18px} .m-tab-plus{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center; color:#241d10;font-size:26px;background:linear-gradient(135deg,var(--gold2),var(--gold));box-shadow:0 4px 12px rgba(184,147,74,.35)} @media (max-width:360px){ .m-hero{padding:13px} .m-hero h1{font-size:16px} .m-card-img{flex:0 0 72px;width:72px;height:62px} } /* 首页中介紧凑条 + 找房委托 */ .m-agbar{display:flex;flex-direction:column;gap:8px} .m-agbar-i{display:flex;align-items:center;justify-content:space-between;gap:10px; background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 13px;text-decoration:none} .m-agbar-i b{font-size:13.5px;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* V130：nowrap 但没做溢出保护 —— 电话位数异常或带分机号时会把卡片撑破。 flex-shrink 让它先于店名让位。 */ .m-agbar-i span{font-size:13px;color:var(--gold3);white-space:nowrap;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} .m-findbox{background:linear-gradient(160deg,var(--tint1),var(--tint2));border:1px solid var(--tintline); border-radius:12px;padding:14px 16px} .m-findbox p{margin:0 0 10px;font-size:13px;color:var(--muted);line-height:1.75} .m-find-tip{font-size:12px;color:#b0a077;text-align:center;margin-top:8px} /* ===== 账号信息卡（注册成功后引导保存） ===== */ .m-acct{border:1px solid #c9a45c;border-radius:14px;background:linear-gradient(180deg,#fffaf0,#fff 60%); padding:16px;margin-bottom:14px} .m-acct-hd{display:flex;gap:11px;align-items:flex-start;margin-bottom:14px} .m-acct-ico{width:36px;height:36px;border-radius:10px;background:#b8934a;color:#fff; display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto} .m-acct-t{font-size:15.5px;font-weight:700;color:#22262e;line-height:1.4} .m-acct-s{font-size:12.5px;color:#8b93a1;margin-top:3px;line-height:1.7} .m-acct-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#fff; border:1px solid #e6e9ee;border-radius:9px;margin-bottom:7px;font-size:13.5px} .m-acct-row>span{color:#8b93a1;flex:0 0 68px} .m-acct-row>b{flex:1;word-break:break-all;color:#22262e} .m-acct-pass{font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:1px;font-size:15px} .m-acct-eye{border:1px solid #d6dae1;background:#fff;color:#6b7480;border-radius:7px; padding:3px 10px;font-size:12.5px;flex:0 0 auto} .m-acct-btns{display:flex;flex-direction:column;gap:9px;margin:13px 0 11px} .m-acct-btns .m-btn{padding:12px 14px;font-size:14px;min-height:46px} .m-acct-tip{font-size:12px;color:#8b93a1;line-height:1.9;background:#f7f8fa; border-radius:9px;padding:10px 12px;margin-bottom:11px} /* ===== 下架页 ===== */ .m-gone{background:#fff;border:1px solid #e6e9ee;border-radius:14px;padding:34px 20px;text-align:center;margin:12px} .m-gone-ico{font-size:40px;line-height:1;margin-bottom:12px;opacity:.75} .m-gone-t{font-size:18px;font-weight:700;color:#22262e;margin-bottom:8px} .m-gone-why{font-size:13.5px;color:#8b93a1;line-height:1.8;margin-bottom:12px} .m-gone-title{padding:10px 12px;background:#f7f8fa;border-radius:9px;font-size:13px; color:#6b7480;margin-bottom:16px;word-break:break-all} /* ===== 标题智能识别提示条 ===== */ .m-tfbox{display:flex;align-items:center;gap:8px;flex-wrap:wrap; margin-top:8px;padding:9px 12px;border-radius:9px; background:#f4f9ff;border:1px solid #cfe3f7;color:#3a5266;font-size:12.5px} .m-tfbox.ok{background:#f2faf4;border-color:#c6e6cf;color:#2f6b41} .m-tfbox .tf-txt{flex:1 1 100%;line-height:1.6} .m-tfbox .tf-txt b{color:#1d4e73} .m-tfbox .tf-btn{width:100%;margin-top:2px;padding:8px 14px;font-size:13px; border-radius:8px;border:1px solid #4d90c4;background:#4d90c4;color:#fff;cursor:pointer} /* ===== 上传区（点击 / 拖拽） ===== */ .m-imgup{margin-bottom:14px} .m-imgup-hd{display:flex;align-items:baseline;gap:8px;margin-bottom:8px} .m-imgup-lbl{font-size:14px;font-weight:700;color:#22262e} .m-imgup-tip{font-size:12px;color:#8b93a1} .m-imgup-drop{display:block;border:2px dashed #d2d8e0;border-radius:12px;background:#fafbfc; padding:24px 16px;text-align:center;cursor:pointer;transition:.18s;position:relative} .m-imgup-drop:active{border-color:#b8934a;background:#fffdf7} .m-imgup-drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden} .m-imgup-ico{display:block;font-size:28px;line-height:1;margin-bottom:7px;opacity:.75} .m-imgup-t{display:block;font-size:14px;color:#3a4150;font-weight:600} .m-imgup-s{display:block;font-size:12px;color:#8b93a1;margin-top:4px} .m-imgup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px} .m-imgup-grid:empty{display:none} .m-imgup-cell{position:relative;width:100%;padding-top:75%;border-radius:9px;overflow:hidden; background:#f0f2f5;border:1px solid #e6e9ee} .m-imgup-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .m-imgup-del{position:absolute;top:3px;right:3px;width:22px;height:22px;line-height:20px; text-align:center;border:none;border-radius:50%;background:rgba(0,0,0,.55);color:#fff; font-size:15px;cursor:pointer;padding:0} .m-imgup-badge{position:absolute;left:0;bottom:0;background:#b8934a;color:#fff; font-size:10.5px;padding:2px 7px;border-radius:0 6px 0 0} .m-imgup-bar{display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:8px;font-size:12px;color:#8b93a1;flex-wrap:wrap} .m-imgup-bar span:first-child{color:#3a4150;font-weight:600} .m-imgup-err{margin-top:9px;padding:8px 12px;background:#fff4f4;border:1px solid #f3c9c9; border-radius:8px;color:#b3403f;font-size:12.5px} /* ===== 图片轮播 ===== */ .m-imgs-gal{margin-bottom:14px} .m-imgs-gal .gal-hd{display:flex;align-items:baseline;justify-content:space-between; gap:10px;margin-bottom:9px} .m-imgs-gal .gal-t{font-size:14.5px;font-weight:700;color:#22262e} .m-imgs-gal .gal-n{font-size:12px;color:#8b93a1} .m-imgs-gal .gal-stage{position:relative;width:100%;padding-top:66%;background:#f0f2f5; border:1px solid #e6e9ee;border-radius:11px;overflow:hidden;cursor:zoom-in} .m-imgs-gal .gal-slide{position:absolute;inset:0;display:none} .m-imgs-gal .gal-slide.on{display:block} .m-imgs-gal .gal-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .m-imgs-gal .gal-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3; width:34px;height:34px;line-height:30px;text-align:center;font-size:20px; border:none;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;cursor:pointer;padding:0} .m-imgs-gal .gal-arrow.prev{left:8px} .m-imgs-gal .gal-arrow.next{right:8px} .m-imgs-gal .gal-count{position:absolute;right:10px;bottom:10px;z-index:3; background:rgba(0,0,0,.5);color:#fff;font-size:12px;padding:2px 10px;border-radius:20px} .m-imgs-gal .gal-thumbs{display:flex;gap:7px;margin-top:8px;overflow-x:auto;padding-bottom:3px} .m-imgs-gal .gal-thumb{flex:0 0 auto;width:64px;height:48px;padding:0; border:2px solid transparent;border-radius:7px;overflow:hidden;background:#f0f2f5;cursor:pointer} .m-imgs-gal .gal-thumb img{width:100%;height:100%;object-fit:cover;display:block} .m-imgs-gal .gal-thumb.on{border-color:#b8934a} .m-imgs-gal .gal-mask{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92); display:flex;align-items:center;justify-content:center} .m-imgs-gal .gal-big{max-width:94vw;max-height:84vh;object-fit:contain} .m-imgs-gal .gal-close{position:absolute;top:12px;right:14px;width:38px;height:38px; font-size:24px;border:none;border-radius:50%;background:rgba(255,255,255,.14);color:#fff} .m-imgs-gal .gal-prev,.m-imgs-gal .gal-next{position:absolute;top:50%;transform:translateY(-50%); width:42px;height:42px;font-size:26px;border:none;border-radius:50%; background:rgba(255,255,255,.14);color:#fff} .m-imgs-gal .gal-prev{left:12px} .m-imgs-gal .gal-next{right:12px} .m-imgs-gal .gal-idx{position:absolute;bottom:22px;left:0;right:0;text-align:center; color:#fff;font-size:13px} /* ===== 上传区（点击 / 拖拽） ===== */ .m-imgup{margin-bottom:14px} .m-imgup-hd{display:flex;align-items:baseline;gap:8px;margin-bottom:8px} .m-imgup-lbl{font-size:14px;font-weight:700;color:#22262e} .m-imgup-tip{font-size:12px;color:#8b93a1} .m-imgup-drop{display:block;border:2px dashed #d2d8e0;border-radius:12px;background:#fafbfc; padding:24px 16px;text-align:center;cursor:pointer;transition:.18s;position:relative} .m-imgup-drop:active{border-color:#b8934a;background:#fffdf7} .m-imgup-drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden} .m-imgup-ico{display:block;font-size:28px;line-height:1;margin-bottom:7px;opacity:.75} .m-imgup-t{display:block;font-size:14px;color:#3a4150;font-weight:600} .m-imgup-s{display:block;font-size:12px;color:#8b93a1;margin-top:4px} .m-imgup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px} .m-imgup-grid:empty{display:none} .m-imgup-cell{position:relative;width:100%;padding-top:75%;border-radius:9px;overflow:hidden; background:#f0f2f5;border:1px solid #e6e9ee} .m-imgup-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .m-imgup-del{position:absolute;top:3px;right:3px;width:22px;height:22px;line-height:20px; text-align:center;border:none;border-radius:50%;background:rgba(0,0,0,.55);color:#fff; font-size:15px;cursor:pointer;padding:0} .m-imgup-badge{position:absolute;left:0;bottom:0;background:#b8934a;color:#fff; font-size:10.5px;padding:2px 7px;border-radius:0 6px 0 0} .m-imgup-bar{display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:8px;font-size:12px;color:#8b93a1;flex-wrap:wrap} .m-imgup-bar span:first-child{color:#3a4150;font-weight:600} .m-imgup-err{margin-top:9px;padding:8px 12px;background:#fff4f4;border:1px solid #f3c9c9; border-radius:8px;color:#b3403f;font-size:12.5px} /* ===== 画廊 ===== */ .m-imgs-gal{margin:12px 0} .gal-hd{display:flex;align-items:baseline;gap:9px;margin-bottom:9px} .gal-t{font-size:14.5px;font-weight:700;color:#22262e} .gal-n{font-size:12px;color:#8b93a1} .gal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} .gal-item{display:block;border-radius:10px;overflow:hidden;background:#f2f4f7; border:1px solid #e6e9ee;aspect-ratio:4/3} .gal-item img{width:100%;height:100%;object-fit:cover;display:block} .gal-mask{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.9); display:flex;align-items:center;justify-content:center} .gal-big{max-width:94vw;max-height:86vh;object-fit:contain;border-radius:6px} .gal-close,.gal-prev,.gal-next{position:absolute;background:rgba(255,255,255,.15);border:none; color:#fff;cursor:pointer;border-radius:50%;line-height:1} .gal-close{top:14px;right:14px;width:38px;height:38px;font-size:24px} .gal-prev,.gal-next{top:50%;transform:translateY(-50%);width:44px;height:44px;font-size:30px} .gal-prev{left:10px} .gal-next{right:10px} .gal-idx{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:#fff;font-size:13px;opacity:.8} /* ===== 回到顶部按钮（V40） ===== 前台不加载 admin.css，所以这里单独一份，配色跟前台主题一致。 */ .to-top{ /* V45：移到左下角。 右下角是客服气泡，左下角要避开的是底部 Tab 栏（56px + 安全区）。 */ position:fixed;left:16px;bottom:calc(70px + env(safe-area-inset-bottom));z-index:9997; width:46px;height:46px;border:0;border-radius:50%;cursor:pointer; background:linear-gradient(135deg,var(--gold2,#e8c26a),var(--gold,#c99a30)); color:#241d10; box-shadow:0 4px 14px rgba(201,154,48,.36); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px; opacity:0;visibility:hidden;transform:translateY(12px); transition:opacity .2s,transform .2s,visibility .2s,filter .15s; font-family:inherit; } .to-top.show{opacity:1;visibility:visible;transform:translateY(0)} .to-top:hover{filter:brightness(1.07)} .to-top-ar{font-size:16px;line-height:1;font-weight:700} .to-top-t{font-size:9.5px;line-height:1;font-weight:600} @media (max-width:760px){ .to-top{left:16px;bottom:calc(70px + env(safe-area-inset-bottom));width:42px;height:42px} } /* V44：手机版备案号 */ .m-icp{margin-top:8px;font-size:12px;opacity:.8} .m-icp a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor} /* ===== V46：房源日期徽章（手机版） ===== 手机屏幕小，老房源的年份更容易被忽略，配色对比做得更重一点。 */ .dbadge{display:inline-flex;align-items:center;gap:4px; padding:2.5px 8px;border-radius:11px;font-size:12px;font-weight:600; line-height:1.65;white-space:nowrap;border:1px solid transparent;vertical-align:middle} .dbadge i{font-style:normal;font-size:12px;line-height:1} .dbadge.d0{background:#e8f6ed;color:#1a7f42;border-color:#b7e2c6} .dbadge.d1{background:#f0f8f2;color:#2b7a4b;border-color:#cfe6d7} .dbadge.d2{background:#fff5e6;color:#a86411;border-color:#f2d9a8} .dbadge.d3{background:#fdecec;color:#c0392b;border-color:#f5c6c6;font-weight:700} .m-card-f .dbadge{font-size:12px} /* ===== V47：手机版管理员预览条 ===== */ .m-adm-preview{background:#fff8e1;border-bottom:2px solid #f0c36d; padding:9px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap; font-size:12.5px;color:#7a5a12;line-height:1.6} .m-adm-preview b{color:#8a5a00} .m-adm-preview a{margin-left:auto;padding:4px 10px;border-radius:5px; background:#c9a227;color:#fff;text-decoration:none;font-size:12px;font-weight:600} /* ===== V54 分享弹层（手机版） ===== */ .xj-share-mask{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:100000; display:flex;align-items:center;justify-content:center;padding:18px} .xj-share-box{background:#fff;border-radius:14px;padding:16px;max-width:100%;width:100%; box-shadow:0 12px 40px rgba(0,0,0,.28)} .xj-share-h{font-size:15px;font-weight:700;color:#1e222d;margin-bottom:10px} .xj-share-ta{width:100%;height:110px;box-sizing:border-box;border:1px solid #dfe3e8; border-radius:8px;padding:10px;font-size:13px;line-height:1.7;resize:none; color:#333;background:#fafbfc;-webkit-user-select:text;user-select:text} .xj-share-tip{margin-top:10px;font-size:12.5px;color:#8a8f99;line-height:1.75} .xj-share-tip b{color:#c9a227} .xj-share-close{margin-top:12px;width:100%;padding:11px;border:none;border-radius:8px; background:#1e222d;color:#fff;font-size:14px;font-weight:600} .xj-wxmask{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:100000; display:flex;justify-content:flex-end;align-items:flex-start} .xj-wxguide{margin:52px 14px 0 0;max-width:240px;background:#fff;border-radius:12px; padding:14px 16px;position:relative;box-shadow:0 8px 28px rgba(0,0,0,.3)} .xj-wxguide::after{content:'';position:absolute;top:-9px;right:24px; border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:9px solid #fff} .xj-wxguide-t{font-size:15px;font-weight:700;color:#1e222d;margin-bottom:8px} .xj-wxguide-b{font-size:13.5px;color:#6b7280;line-height:1.85} .xj-wxguide-b b{color:#1aad19;font-size:16px} /* ============================================================ * V58 手机版小区房价页 * ========================================================== */ .m-crumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap; font-size:12.5px;color:var(--muted2);padding:10px 2px 0} .m-crumb a{color:var(--muted2)} .m-crumb span:last-child{color:var(--text)} .m-list-h1{font-size:16.5px;font-weight:700;margin:0;color:var(--text);line-height:1.4} /* 小区索引列表 */ .m-cm-list{display:flex;flex-direction:column;gap:9px} .m-cm{display:flex;align-items:center;justify-content:space-between;gap:10px; background:var(--card);border:1px solid var(--line);border-radius:12px; padding:13px 14px;min-height:56px} .m-cm:active{background:var(--bg)} .m-cm-l{flex:1;min-width:0} .m-cm-n{font-size:15px;font-weight:600;color:var(--text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .m-cm-m{margin-top:5px;display:flex;gap:8px;flex-wrap:wrap} .m-cm-p{font-size:13px;color:var(--gold);font-weight:600} .m-cm-r{display:flex;align-items:center;gap:6px;flex:0 0 auto} .m-cm-c{font-size:12.5px;color:var(--muted2)} .m-cm-a{font-size:17px;color:var(--muted2);line-height:1} /* 小区概况统计卡 */ .m-cm-stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:9px; margin:0 0 14px} .m-cm-s{background:var(--card);border:1px solid var(--line);border-radius:11px; padding:12px 8px;text-align:center;min-width:0} .m-cm-sv{font-size:20px;font-weight:800;color:var(--gold);line-height:1.25; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .m-cm-sl{font-size:12px;color:var(--muted2);margin-top:4px} /* V58：筛选按钮视觉约 29px 高，低于 44px 触控标准。 小屏上筛选是高频操作，点不中很烦。 用伪元素把可点区域撑到 44px，视觉尺寸不变（否则筛选栏会占掉半屏）。 */ .m-fb:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:100%;height:44px;min-width:44px} /* ============================================================ * V59 手机版房贷计算器 * ========================================================== */ /* V107：整块加 --card 底衬（原因同 PC 版 .loan-wrap）： 手机端 body 同样挂背景图，而 .m-loan 原本完全透明， 表单标签、提示、免责声明全部直接压在图上，明暗不可控。 */ .m-loan{padding:12px 13px 16px;background:var(--card);border-radius:12px} .m-loan-main{background:linear-gradient(155deg,var(--gold) 0%,var(--gold2,#c9a961) 100%); border-radius:14px;padding:18px 16px 16px;text-align:center;margin-bottom:12px} .m-loan-lb{font-size:12.5px;color:var(--onbrand);opacity:.9;margin-bottom:6px} .m-loan-v{font-size:36px;font-weight:800;color:var(--onbrand);line-height:1.1;letter-spacing:-.5px} .m-loan-v i{font-size:15px;font-style:normal;font-weight:600;margin-left:3px;opacity:.9} .m-loan-sub{font-size:11.5px;color:var(--onbrand);opacity:.85;margin-top:7px} .m-loan-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:16px} .m-loan-c{background:var(--card);border:1px solid var(--line);border-radius:11px; padding:11px 10px;text-align:center;font-size:12px;color:var(--loan-mu)} .m-loan-c b{display:block;font-size:17px;font-weight:700;color:var(--text);margin-top:4px} .m-loan-t{font-size:15.5px;font-weight:700;margin:0;color:var(--text); display:flex;align-items:center;gap:7px} .m-loan-t:before{content:"";width:3px;height:15px;border-radius:2px;background:var(--gold)} .m-loan-form{background:var(--card);border:1px solid var(--line);border-radius:12px; padding:14px 14px 16px} .m-lr{margin-bottom:13px} .m-lr label{display:block;font-size:12.5px;color:var(--loan-mu);margin-bottom:6px;font-weight:600} .m-lr input,.m-lr select{width:100%;box-sizing:border-box;border:1px solid var(--line); border-radius:9px;background:var(--bg);padding:10px 12px;font-size:15px;color:var(--text); outline:0;font-family:inherit;min-height:44px} .m-lr input:focus,.m-lr select:focus{border-color:var(--gold)} .m-lq{display:flex;gap:7px;margin-top:8px;flex-wrap:wrap} .m-lq button{border:1px solid var(--line);background:var(--chip);color:var(--loan-mu); border-radius:7px;padding:7px 13px;font-size:12.5px;cursor:pointer;font-family:inherit; /* V59：视觉 36px，但触控区用伪元素撑到 44px —— 4 个快捷按钮横排，直接改高度会把表单撑高一大截。 */ min-height:36px;position:relative} .m-lq button:after{content:"";position:absolute;top:50%;left:50%; transform:translate(-50%,-50%);width:100%;height:44px;min-width:44px} .m-lq button:active{border-color:var(--gold);color:var(--gold)} .m-lnote{font-size:12px;color:var(--loan-mu);margin:-6px 0 13px} .m-lhint{font-size:11.5px;color:var(--loan-mu);margin-top:6px} .m-lseg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden} .m-lseg button{flex:1;border:0;background:var(--bg);padding:11px 8px;font-size:13.5px; color:var(--loan-mu);cursor:pointer;font-family:inherit;min-height:44px} .m-lseg button+button{border-left:1px solid var(--line)} .m-lseg button.on{background:var(--gold);color:var(--onbrand);font-weight:700} .m-lbtn{width:100%;margin-top:4px;padding:12px;border:1px solid var(--line);border-radius:9px; background:transparent;color:var(--loan-mu);font-size:14px;cursor:pointer;font-family:inherit; min-height:44px} .m-lbtn:active{border-color:var(--gold);color:var(--gold)} .m-lsplit,.m-lextra{background:var(--card);border:1px solid var(--line);border-radius:12px; padding:12px 14px;margin-top:12px;font-size:12.5px;color:var(--loan-mu);line-height:1.8} .m-lsplit-t,.m-lextra-t{font-size:13px;font-weight:700;color:var(--text);margin-bottom:7px} .m-lsplit-b b,.m-lextra b{color:var(--gold);font-weight:700} .m-lgo{display:block;text-align:center;margin-top:16px;padding:13px; background:var(--card);border:1px solid var(--gold);border-radius:11px; color:var(--gold);font-size:14px;font-weight:600} .m-lgo:active{background:var(--chip)} .m-uc-nav{display:flex;gap:7px;margin-bottom:14px} .m-uc-n{flex:1;text-align:center;padding:10px 6px;border-radius:9px; border:1px solid var(--line);background:var(--card);color:var(--muted); font-size:13px;min-height:44px;display:flex;align-items:center;justify-content:center;gap:4px} .m-uc-n b{color:var(--muted2);font-weight:700;font-size:12px} .m-uc-n.on{background:var(--gold);border-color:var(--gold);color:var(--onbrand);font-weight:600} .m-uc-n.on b{color:var(--onbrand)} .m-dact{display:flex;align-items:center;gap:9px;margin-top:11px;flex-wrap:wrap} .m-fav{display:inline-flex;align-items:center;gap:6px;padding:0 15px;min-height:44px; border-radius:10px;border:1px solid var(--line);background:var(--card); color:var(--muted);font-size:13.5px;cursor:pointer;font-family:inherit} .m-fav.on{background:var(--gold);border-color:var(--gold);color:var(--onbrand);font-weight:600} .m-fav-i{font-size:15px} .m-fav-link{font-size:12.5px;color:var(--muted2);padding:11px 2px;min-height:44px; display:inline-flex;align-items:center} .m-goto-loan{display:flex;align-items:center;gap:8px;margin-top:9px;padding:12px 14px; background:var(--card);border:1px dashed var(--gold);border-radius:11px; font-size:13.5px;color:var(--gold);font-weight:600;min-height:44px} .m-goto-loan:active{background:var(--chip)} /* ================= 会员中心 · 收藏 / 足迹（V60） ================= */ /* 房源已删除：整卡淡出 + 虚线边，和正常房源明显区分 */ .m-card.is-gone{background:#fafbfc;border-style:dashed;opacity:.85} /* 无图占位 —— 之前是 ： 空 src 会让浏览器把「当前页面 URL」当成图片再请求一次， 100 条历史就是 100 次整页请求，流量和加载都炸了；而且显示破图图标。 现在无图就用这个占位块。 */ .m-card-nopic{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:11px;color:#a8b0bd;text-align:center;line-height:1.4; background:repeating-linear-gradient(45deg,#f2f4f7 0 7px,#eaedf2 7px 14px); } .m-card-img-none{ display:flex;align-items:center;justify-content:center; background:repeating-linear-gradient(45deg,#f4f5f7 0 7px,#eceef1 7px 14px); color:#aab2bf;font-size:11.5px;text-align:center;line-height:1.4; } /* 状态标签：审核中 / 已下架 / 已删除 */ .m-tk-tag{ display:inline-block;font-size:10.5px;padding:1px 7px;border-radius:20px; font-weight:600;line-height:1.7;vertical-align:middle;margin-left:4px; } .m-tk-tag.wait{background:#fff5e0;color:#a9761a;border:1px solid #f2ddb0} .m-tk-tag.off {background:#fdecec;color:#b4453c;border:1px solid #f6d2cf} .m-tk-tag.gone{background:#eef0f3;color:#78808d;border:1px solid #dfe3e9} /* 收藏里的「取消收藏」按钮别贴太紧 */ .m-card .m-lbtn{width:100%;margin-top:2px} /* ---------- 委托需求表单（V74） ---------- */ .m-ent-kind{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px} .m-ent-kind-i{position:relative;cursor:pointer} .m-ent-kind-i input{position:absolute;opacity:0;width:0;height:0} .m-ent-kind-i span{display:block;text-align:center;padding:12px 6px;border-radius:10px; border:1px solid var(--line);background:var(--card);color:var(--muted); font-size:13.5px;font-weight:600;transition:.15s;min-height:44px;line-height:20px} .m-ent-kind-i input:checked + span{border-color:var(--gold); background:linear-gradient(135deg,var(--gold2),var(--gold));color:#241d10} .m-ent-range{display:flex;align-items:center;gap:8px} .m-ent-range .inp{flex:1;min-width:0} .m-ent-range span{color:var(--muted2);flex:0 0 auto} .m-ent-hint{font-size:12px;color:var(--muted2);margin-top:6px;line-height:1.7} .m-ent-sep{margin:18px 0 14px;padding-top:14px;border-top:1px solid var(--line); font-size:13.5px;font-weight:700;color:var(--text)} .m-ent-tip{font-size:12px;color:var(--muted2);text-align:center;margin-top:10px;line-height:1.7} /* ============================================================ 会员权益 · 手机版（m/vip.php）· V75 ============================================================ */ .m-vip{padding:0 0 8px} .m-vip-sub{margin:0 0 14px;font-size:13px;color:var(--muted);line-height:1.8; background:var(--card);border-radius:10px;padding:12px 14px} .m-vip-sub b{color:var(--gold3)} .m-vip-me{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:10px; padding:12px 14px;margin-bottom:8px} .m-vip-av{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:var(--gold);color:var(--onbrand); display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700} .m-vip-me-i{min-width:0} .m-vip-me-i b{display:block;font-size:15px;margin-bottom:2px} .m-vip-me-i span{font-size:12px;color:var(--muted2)} .m-vip-card{background:var(--card);border-radius:10px;padding:14px} .m-vip-ul{margin:0 0 12px;padding:0;list-style:none;font-size:13.5px;line-height:1.95} .m-vip-ul li{padding-left:15px;position:relative} .m-vip-ul li:before{content:"";position:absolute;left:2px;top:10px;width:5px;height:5px;border-radius:50%;background:var(--gold2)} .m-vip-ul b{color:var(--gold3)} .m-vip-faq{background:var(--card);border-radius:10px;padding:4px 14px} .m-vip-q{padding:12px 0;border-bottom:1px solid var(--line)} .m-vip-q:last-child{border-bottom:0} .m-vip-q b{display:block;font-size:14px;margin-bottom:4px} .m-vip-q span{font-size:13px;color:var(--muted);line-height:1.75} .m-vip-cta{background:var(--card);border-radius:10px;padding:16px 14px;text-align:center;margin-top:8px} .m-vip-cta b{display:block;font-size:14.5px;margin-bottom:8px} .m-vip-tel{display:block;font-size:22px;font-weight:800;color:var(--gold3);letter-spacing:.5px;margin-bottom:12px} /* V75 房贷计算器：利率设置折叠区（手机版同样收起） */ .m-ladv{margin-top:10px;border:1px solid var(--line);border-radius:10px;background:var(--card);overflow:hidden} .m-ladv summary{cursor:pointer;list-style:none;padding:12px 14px;display:flex;align-items:center; justify-content:space-between;gap:8px;font-size:13.5px;font-weight:600;color:var(--text);flex-wrap:wrap} .m-ladv summary::-webkit-details-marker{display:none} .m-ladv-sum{width:100%;font-size:12px;font-weight:500;color:var(--muted2);margin-top:2px} .m-ladv-b{padding:4px 14px 12px;border-top:1px solid var(--line)} .m-ladv-b .m-lr:last-child{margin-bottom:0} /* V100 房币（手机版会员中心） 手机版没有侧栏，房币余额只能放在房源列表上方。 置顶按钮旁的