提示：群聊页面可以滑动
在一个月黑风高的夜晚……一个白色衬衫打着绿色领带，穿着棕色长裤和皮鞋的男人出现在了千商里商场的废墟前。只不过这个男人的脑袋是一个屏幕没亮的大头显示器
他后面跟着一个穿着格子衫的家伙，手上拿着笔记本电脑。还有一个穿着棕色西装的头上戴着铁桶，另外一个穿着蓝色西装头上戴着个路障
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Z公司聊天群 - QQ群聊记录</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;background:#E8ECF1;display:flex;justify-content:center;align-items:flex-start;padding:30px 20px;min-height:100vh;color:#1A1A1A}
.phone-mockup{width:100%;max-width:390px;background:#1A1A1A;border-radius:36px;padding:12px;box-shadow:0 12px 40px rgba(0,0,0,.2),0 0 0 2px #333;position:relative}
.phone-notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:120px;height:24px;background:#1A1A1A;border-radius:0 0 18px 18px;z-index:10;display:flex;align-items:center;justify-content:center}
.phone-notch::before{content:'';width:10px;height:10px;background:#2A2A2A;border-radius:50%}
.phone-screen{background:#F5F6F7;border-radius:26px;overflow:hidden;display:flex;flex-direction:column;height:720px;position:relative}
.status-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 18px 4px;font-size:11px;font-weight:600;color:#333;background:#F5F6F7;flex-shrink:0}
.chat-header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px 10px;background:#F5F6F7;border-bottom:1px solid #E4E6E9;flex-shrink:0}
.chat-header-left{display:flex;align-items:center;gap:6px}
.chat-header-center{text-align:center;flex:1}
.chat-header-center .group-name{font-size:15px;font-weight:700;color:#1A1A1A}
.chat-header-center .member-count{font-size:11px;color:#8A8F99;margin-top:1px}
.chat-header-right{display:flex;gap:12px;font-size:18px;color:#333;opacity:.7}
.messages-area{flex:1;overflow-y:auto;padding:16px 12px;display:flex;flex-direction:column;gap:4px;background:#F5F6F7}
.messages-area::-webkit-scrollbar{width:3px}
.messages-area::-webkit-scrollbar-thumb{background:#D1D5DB;border-radius:3px}
.system-message{text-align:center;font-size:12px;color:#8A8F99;padding:4px 12px;line-height:1.6}
.sys-badge{display:inline-block;background:#E8ECF1;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:500}
.time-divider{text-align:center;font-size:11px;color:#8A8F99;padding:8px 0}
.time-divider span{background:#E8ECF1;padding:3px 12px;border-radius:10px;font-weight:500}
.message-row{display:flex;align-items:flex-start;gap:8px;padding:4px 0;max-width:100%}
.message-row.left{flex-direction:row}
.message-row.right{flex-direction:row-reverse}
.avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff;user-select:none;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.message-body{display:flex;flex-direction:column;gap:3px;max-width:68%;min-width:40px}
.message-sender{font-size:11px;color:#8A8F99;padding:0 4px;font-weight:500}
.message-row.right .message-sender{text-align:right}
.bubble{padding:9px 13px;border-radius:12px;font-size:14px;line-height:1.55;word-break:break-word;position:relative;box-shadow:0 1px 3px rgba(0,0,0,.08);white-space:pre-wrap;letter-spacing:.2px}
.message-row.left .bubble{background:#fff;color:#1A1A1A;border-top-left-radius:4px}
.message-row.right .bubble{background:#12B7F5;color:#fff;border-top-right-radius:4px;box-shadow:0 2px 8px rgba(18,183,245,.3)}
.message-time{font-size:10px;color:#8A8F99;padding:0 4px;opacity:.7}
.message-row.right .message-time{text-align:right}
.bubble-image{padding:6px;background:#fff;border-radius:12px;border-top-left-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.08);cursor:pointer;max-width:180px}
.bubble-image .img-placeholder{width:160px;height:100px;background:linear-gradient(135deg,#E8ECF1,#D1D5DB);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:28px;color:#6B7280}
.bubble-image .img-placeholder span{font-size:11px;color:#6B7280;font-weight:500}
.bubble-image .img-label{font-size:11px;color:#6B7280;text-align:center;padding:4px 0 2px}
.bubble-redpacket{background:linear-gradient(135deg,#FA9D3B,#F07C00);color:#fff;padding:10px 14px;border-radius:12px;border-top-left-radius:4px;box-shadow:0 2px 10px rgba(250,157,59,.4);display:flex;align-items:center;gap:8px;cursor:pointer;min-width:120px}
.bubble-redpacket .rp-icon{font-size:28px}
.bubble-redpacket .rp-text{display:flex;flex-direction:column;gap:2px}
.bubble-redpacket .rp-text .rp-title{font-size:13px;font-weight:700}
.bubble-redpacket .rp-text .rp-sub{font-size:10px;opacity:.85}
.bubble-voice{background:#fff;padding:8px 13px;border-radius:12px;border-top-left-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.08);display:flex;align-items:center;gap:6px;cursor:pointer;min-width:80px}
.bubble-voice .voice-icon{font-size:18px}
.bubble-voice .voice-duration{font-size:12px;color:#4A5568;font-weight:500}
.message-row.right .bubble-voice{background:#12B7F5;border-top-left-radius:12px;border-top-right-radius:4px;box-shadow:0 2px 8px rgba(18,183,245,.3)}
.message-row.right .bubble-voice .voice-duration{color:#fff}
.chat-input-bar{display:flex;align-items:center;gap:8px;padding:8px 12px 10px;background:#F5F6F7;border-top:1px solid #E4E6E9;flex-shrink:0}
.input-icon{font-size:20px;cursor:pointer;opacity:.6}
.fake-input{flex:1;background:#fff;border-radius:18px;padding:8px 14px;font-size:13px;color:#9CA3AF;border:1px solid #E4E6E9}
.send-btn-sm{width:32px;height:32px;background:#12B7F5;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;cursor:pointer;box-shadow:0 2px 8px rgba(18,183,245,.4)}
@media(max-width:420px){.phone-screen{height:540px}.phone-mockup{border-radius:24px;padding:8px}.phone-screen{border-radius:18px}}
</style>
</head>
<body>
<div class="phone-mockup">
<div class="phone-notch"></div>
<div class="phone-screen">
<div class="status-bar">
<span>10:28</span>
<span>📶 📶 🔋</span>
</div>
<div class="chat-header">
<div class="chat-header-left"><span>‹</span><span>👥</span></div>
<div class="chat-header-center">
<div class="group-name">Z公司聊天群</div>
<div class="member-count">5人</div>
</div>
<div class="chat-header-right"><span>⋯</span></div>
</div>
<div class="messages-area">
<div class="message-row left">
<div class="avatar" style="background:#6366F1;">等</div>
<div class="message-body">
<div class="message-sender">等我启动</div>
<div class="bubble">你个傻掉@电视头</div>
<div class="message-time">01:23</div>
</div>
</div>
<div class="message-row left">
<div class="avatar" style="background:#6366F1;">等</div>
<div class="message-body">
<div class="message-sender">等我启动</div>
<div class="bubble">导航导到了废墟门口是什么意思？害我没地方给电脑充电</div>
<div class="message-time">01:30</div>
</div>
</div>
<div class="message-row right">
<div class="avatar" style="background:#0EA5E9;">电</div>
<div class="message-body">
<div class="message-sender">电视头</div>
<div class="bubble">你看我哪有办公室啊，你就当废墟前面这一块是我的临时办公室吧</div>
<div class="message-time">01:32</div>
</div>
</div>
<div class="message-row left">
<div class="avatar" style="background:#D946EF;">铁</div>
<div class="message-body">
<div class="message-sender">铁桶一定要戴头上</div>
<div class="bubble">没有僵类了</div>
<div class="message-time">01:32</div>
</div>
</div>
</div>
<div class="chat-input-bar">
<span class="input-icon">🎤</span>
<div class="fake-input">发送消息…</div>
<span class="input-icon">😊</span>
<span class="input-icon">➕</span>
<div class="send-btn-sm">➤</div>
</div>
</div>
</div>
</body>
</html>
电视头:（把手机插回荷包里，然后转头看着身后的四个人）
“准备好了吗孩子们”