/* ===== 圈子页面 ===== */ #page-circle { background: #F0F1F3; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; } .circle-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .circle-header { padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; background: #F0F1F3; position: relative; z-index: 10; transition: opacity 250ms ease; } .circle-header .top-row { display: flex; align-items: center; justify-content: space-between; } .circle-logo { width: 120px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-start; } .circle-logo img { height: 100%; object-fit: contain; } .circle-header-auth { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .circle-header-login-btn { width: 70px; height: 32px; background: #FF5C39; color: #fff; border-radius: 6px; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; flex-shrink: 0; } .circle-header-login-btn:active { transform: scale(0.95); } .circle-header-login-btn.hidden { display: none; } .circle-header-avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #E8EAED; } .circle-header-avatar img { width: 100%; height: 100%; object-fit: cover; } .circle-header-name { font-size: 14px; font-weight: 600; color: #1A1C1E; white-space: nowrap; max-width: 72px; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; } .circle-notice-bar { height: 32px; background: rgba(79,140,255,0.08); border-radius: 6px; display: flex; align-items: center; padding: 0 12px; gap: 8px; margin-top: 8px; overflow: hidden; } .circle-notice-icon svg { width: 16px; height: 16px; fill: #4F8CFF; flex-shrink: 0; } .circle-notice-text { flex: 1; overflow: hidden; white-space: nowrap; position: relative; } .circle-notice-text-inner { display: inline-block; padding-left: 100%; animation: marquee 12s linear infinite; font-size: 13px; color: #4F8CFF; font-weight: 500; } /* ★2026-10-25：没有播报内容时停掉跑马灯（板块保留、文字为空） */ .circle-notice-text-inner:empty, .circle-fixed-notice-inner:empty { animation: none; padding-left: 0; } @keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } } .circle-fixed-header { position: fixed; top: 0; left: 50%; right: auto; transform: translateX(-50%) translateY(-100%); width: 100%; max-width: 430px; z-index: 50; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); display: flex; align-items: center; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; gap: 10px; opacity: 0; pointer-events: none; transition: opacity 250ms ease, transform 250ms ease; border-bottom: 1px solid rgba(0,0,0,0.06); } .circle-fixed-header.visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .circle-fixed-notice { flex: 1; overflow: hidden; white-space: nowrap; position: relative; font-size: 13px; color: #4F8CFF; font-weight: 500; } .circle-fixed-notice-inner { display: inline-block; padding-left: 100%; animation: marquee 12s linear infinite; } .circle-post-list { padding: 0 12px; } .post-card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); } .post-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .post-avatar { width: 40px; height: 40px; border-radius: 50%; background: #E8EAED; flex-shrink: 0; overflow: hidden; } .post-avatar img { width: 100%; height: 100%; object-fit: cover; background: #fff; } .post-user-info { flex: 1; } .post-nickname { font-size: 15px; font-weight: 600; color: #1A1C1E; display: flex; align-items: center; } .post-time { font-size: 11px; color: #B0B3B8; margin-top: 2px; } .post-body { font-size: 14px; color: #3A3C40; line-height: 1.5; margin-bottom: 8px; word-break: break-word; text-align: left; } .post-title { font-weight: 700; font-family: "Heiti SC", "SimHei", -apple-system, sans-serif; font-size: 16px; color: #1A1C1E; text-align: left; line-height: 1.4; margin-bottom: 6px; word-break: break-word; } .post-status-badge { font-size: 11px; padding: 2px 6px; border-radius: 4px; color: #fff; font-weight: 500; flex-shrink: 0; align-self: flex-start; } .post-status-badge.ended { background: #34C759; } .post-status-badge.ongoing { background: #FF9500; } .post-images { display: flex; gap: 4px; margin-bottom: 8px; } .post-images.single .post-img-wrap { width: 100%; aspect-ratio: auto; background: #E8EAED; display: flex; min-height: 120px; } .post-images.single .post-img-wrap.horizontal { width: 100%; } .post-images.single .post-img-wrap.horizontal img { width: 100%; height: auto; max-height: 60vh; object-fit: contain; } .post-images.single .post-img-wrap.vertical { width: calc(50% - 2px); align-self: flex-start; } .post-images.single .post-img-wrap.vertical img { width: 100%; height: auto; max-height: 60vh; object-fit: contain; } .post-images.double .post-img-wrap { width: calc(50% - 2px); aspect-ratio: 1 / 1; } .post-img-wrap { position: relative; overflow: hidden; border-radius: 8px; background: #E8EAED; cursor: pointer; } .post-img-wrap img { width: 100%; height: 100%; object-fit: cover; } .post-actions { display: flex; align-items: center; gap: 24px; padding-top: 4px; border-top: 1px solid #F0F1F3; } .post-action { display: flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; transition: transform 0.1s; font-size: 13px; color: #8E96A3; } .post-action:active { transform: scale(0.9); } .post-action.liked { color: #FF6B6B; } .post-action svg { width: 18px; height: 18px; fill: none; stroke: #8E96A3; stroke-width: 2; transition: fill 0.2s, stroke 0.2s; } .post-action.liked svg { fill: #FF6B6B; stroke: #FF6B6B; } .like-burst { animation: likeBurst 0.4s ease; } @keyframes likeBurst { 0% { transform: scale(1); } 30% { transform: scale(1.4); } 100% { transform: scale(1); } } .circle-end-tip { text-align: center; padding: 20px 0; font-size: 13px; color: #A0A4A8; } /* 评论页 */ #page-comment-detail { background: #F0F1F3; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; } .comment-detail-header { display: flex; align-items: center; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; background: #fff; gap: 12px; flex-shrink: 0; border-bottom: 1px solid rgba(0,0,0,0.06); position: relative; z-index: 60; } .comment-back-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .comment-back-btn svg { width: 22px; height: 22px; fill: none; stroke: #333; stroke-width: 2.5; } .comment-detail-title { font-size: 16px; font-weight: 600; color: #1A1C1E; flex: 1; text-align: center; margin-right: 32px; } .comment-detail-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .comment-original-post { background: #fff; margin: 12px; border-radius: 12px; padding: 16px; } .comment-list-section { background: #fff; margin: 0 12px 12px; border-radius: 12px; padding: 8px 16px; } .comment-item { padding: 12px 0; border-bottom: 1px solid #F0F1F3; } .comment-item:last-child { border-bottom: none; } .comment-item-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .comment-item-avatar { width: 28px; height: 28px; border-radius: 50%; background: #E8EAED; flex-shrink: 0; overflow: hidden; } .comment-item-avatar img { width: 100%; height: 100%; object-fit: cover; } .comment-item-nickname { font-size: 13px; font-weight: 600; color: #1A1C1E; } .comment-item-time { font-size: 11px; color: #B0B3B8; margin-left: auto; } .comment-item-body { font-size: 14px; color: #3A3C40; line-height: 1.5; margin-bottom: 6px; } .comment-item-reply-btn { font-size: 12px; color: #8E96A3; cursor: pointer; display: inline-block; padding: 2px 0; } .comment-item-reply-btn:active { color: #4F8CFF; } .comment-reply-nest { margin-left: 20px; padding: 8px 12px; background: #F8F9FA; border-radius: 8px; margin-top: 6px; border-left: 3px solid #4F8CFF; color: #3A3C40; } .comment-reply-nest .comment-item-nickname { color: #1A1C1E; } .comment-empty { text-align: center; padding: 32px 0; font-size: 14px; color: #A0A4A8; } .comment-original-post .post-img-wrap { background: #fff; border-radius: 8px; } .comment-original-post .post-images.single .post-img-wrap { min-height: 120px; } .comment-original-post .post-images.single .post-img-wrap.vertical { width: calc(50% - 2px); align-self: flex-start; } .comment-original-post .post-images.single .post-img-wrap.vertical img { width: 100%; height: auto; max-height: 60vh; object-fit: contain; } .comment-original-post .post-images.single .post-img-wrap.horizontal img { width: 100%; height: auto; max-height: 60vh; object-fit: contain; } .post-header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .post-header-actions .like-action { gap: 0; } .post-header-actions .like-action svg { width: 18px; height: 18px; } .fav-btn-circle { height: 28px; padding: 0 12px; border-radius: 14px; font-size: 12px; font-weight: 600; border: none; cursor: pointer; transition: all 0.15s; white-space: nowrap; flex-shrink: 0; background: #FF5C39; color: #fff; } .fav-btn-circle.favorited { background: transparent; color: #8E96A3; border: 1px solid #D0D3D8; } .fav-btn-circle:active { transform: scale(0.95); } /* 评论遮罩 + 输入栏 */ .comment-mask { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 70; } .comment-mask.show { display: block; } .comment-mask.transparent { background: transparent; } .comment-input-bar { flex-shrink: 0; display: flex; align-items: center; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid rgba(0,0,0,0.06); gap: 8px; position: relative; z-index: 80; } .comment-emoji-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .comment-emoji-btn svg { width: 20px; height: 20px; fill: none; stroke: #8E96A3; stroke-width: 2; } .comment-input-field { flex: 1; height: 38px; background: #F0F1F3; border-radius: 19px; border: none; padding: 0 14px; font-size: 14px; outline: none; color: #1A1C1E; } .comment-input-field:focus { background: #fff; box-shadow: 0 0 0 1.5px #4F8CFF; } .comment-send-btn { background: #4F8CFF; color: #fff; border: none; border-radius: 16px; padding: 0 16px; height: 32px; font-size: 13px; font-weight: 600; cursor: pointer; flex-shrink: 0; } .comment-send-btn:active { opacity: 0.8; } /* Emoji 下拉板块（键盘同高） */ .dock-shell { height: var(--dock-h, 0px); width: 100%; flex-shrink: 0; position: relative; overflow: hidden; } /* ⚠️ 过渡只由 JS 通过 `.dock-anim` 控制（键盘跟手必须无过渡；面板/收起才用过渡）。 若把 transition 常驻在 .dock-shell 上，实测（Chrome）会出现「值已改但高度仍为 0」的卡死。 */ .dock-shell.dock-anim { transition: height 0.2s ease; } .dock-shell > .emoji-dock, .dock-shell > .plus-dock { position: absolute; left: 0; right: 0; top: 0; height: 0; } .dock-shell > .emoji-dock.show, .dock-shell > .plus-dock.show { height: 100%; } /* ⚠️ 面板高度由 .dock-shell 的 --dock-h 决定（见 messages.css 同款说明），此处不再写死 300px。 */ .emoji-dock { overflow: hidden; background: #F7F8FA; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 16px rgba(0,0,0,0.1); z-index: 80; } .emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; height: 100%; overflow-y: auto; padding: 8px; box-sizing: border-box; } .emoji-item { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; } /* 图片查看器 / 统一媒体查看器（公示图片 · 聊天图片 + 视频） */ .image-viewer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 2000; display: none; align-items: center; justify-content: center; } .image-viewer.show { display: flex; } .viewer-scroll { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .viewer-scroll::-webkit-scrollbar { display: none; } /* ⚠ 长图（高于视口）必须**顶部对齐**（由 JS 按实际尺寸加 `.tall`）。 背景：容器是 `display:flex; align-items:center`（短图垂直居中是正确的）； 但长图若仍居中，flex 会把图片首尾**同时**溢出容器上下两端，而浏览器 **不能滚动到负值** → 图片顶部被永久裁掉、滚不上去。 实测（公示页 720×1280 图 / 874×930 视口）：居中时图片 top = -387px， 而可滚范围也只有 387px（正确应为 1554 − 930 = 624px）。 改 `flex-start` 后从顶部开始，可滚范围 = 图高 − 视口高，整张图都能看到。 */ .viewer-scroll.tall { align-items: flex-start; } /* ⚠ `#viewerStage` = **被 transform 的元素**（图片与视频都住在它里面 → 两者走同一条缩放通道）。 `touch-action` / `will-change` 由 JS 动态切换： 未放大 → `pan-y`（长图可上下滚）；放大后 → `none`（全手势交给平移）。 `pointer-events:none` 的 `