编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>群汇 - 微信群聚合平台</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --primary: #07C160;
      --primary-light: #E8F5E9;
      --primary-dark: #05903C;
      --accent: #576B95;
      --bg: #F5F5F5;
      --card-bg: #FFFFFF;
      --text: #333333;
      --text-light: #999999;
      --text-secondary: #666666;
      --border: #EEEEEE;
      --shadow: 0 2px 8px rgba(0,0,0,0.06);
      --radius: 12px;
      --radius-sm: 8px;
    }

    body {
      font-family: "PingFang SC", "Helvetica Neue", -apple-system, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.5;
      max-width: 430px;
      margin: 0 auto;
      min-height: 100vh;
      position: relative;
      padding-bottom: 60px;
    }

    .page {
      min-height: calc(100vh - 60px);
      padding-bottom: 20px;
    }

    /* 顶部搜索栏 */
    .header {
      background: linear-gradient(135deg, var(--primary) 0%, #4CAF50 100%);
      padding: 16px;
      padding-top: max(16px, env(safe-area-inset-top));
    }

    .header-top {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .header-title {
      color: white;
      font-size: 20px;
      font-weight: 600;
    }

    .header-stats {
      color: rgba(255,255,255,0.9);
      font-size: 13px;
    }

    .search-box {
      display: flex;
      align-items: center;
      background: white;
      border-radius: 24px;
      padding: 10px 16px;
      gap: 8px;
    }

    .search-box input {
      flex: 1;
      border: none;
      outline: none;
      font-size: 14px;
    }

    .search-box input::placeholder {
      color: var(--text-light);
    }

    /* 分类标签 */
    .category-tabs {
      display: flex;
      gap: 8px;
      padding: 12px 16px;
      overflow-x: auto;
      background: var(--card-bg);
    }

    .category-tabs::-webkit-scrollbar {
      display: none;
    }

    .category-tab {
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
      transition: all 0.2s;
      border: 1px solid var(--border);
      color: var(--text-secondary);
    }

    .category-tab.active {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
    }

    /* 群列表 */
    .group-list {
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .group-card {
      background: var(--card-bg);
      border-radius: var(--radius);
      padding: 16px;
      box-shadow: var(--shadow);
      cursor: pointer;
      transition: transform 0.2s;
    }

    .group-card:active {
      transform: scale(0.98);
    }

    .group-header {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 12px;
    }

    .group-avatar {
      width: 50px;
      height: 50px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      flex-shrink: 0;
    }

    .group-info {
      flex: 1;
      min-width: 0;
    }

    .group-name {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .group-badge {
      background: var(--primary);
      color: white;
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: normal;
    }

    .group-desc {
      font-size: 13px;
      color: var(--text-secondary);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 8px;
    }

    .group-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .group-tag {
      background: var(--primary-light);
      color: var(--primary-dark);
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 4px;
    }

    .group-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 12px;
      border-top: 1px solid var(--border);
    }

    .group-meta {
      font-size: 12px;
      color: var(--text-light);
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .group-meta span {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .join-btn {
      background: var(--primary);
      color: white;
      border: none;
      padding: 8px 20px;
      border-radius: 20px;
      font-size: 13px;
      cursor: pointer;
    }

    /* 换群大厅 */
    .exchange-header {
      background: var(--card-bg);
      padding: 16px;
      text-align: center;
      border-bottom: 1px solid var(--border);
    }

    .exchange-header h3 {
      color: var(--primary);
      font-size: 16px;
      margin-bottom: 4px;
    }

    .exchange-header p {
      color: var(--text-light);
      font-size: 13px;
    }

    .exchange-list {
      padding: 12px 16px;
      display: grid;
      gap: 12px;
    }

    .exchange-card {
      background: var(--card-bg);
      border-radius: var(--radius);
      padding: 16px;
      box-shadow: var(--shadow);
    }

    .exchange-pair {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
    }

    .exchange-group {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px;
      background: var(--bg);
      border-radius: var(--radius-sm);
    }

    .exchange-group .group-avatar {
      width: 36px;
      height: 36px;
      font-size: 18px;
    }

    .exchange-group span {
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .exchange-arrow {
      color: var(--primary);
      font-size: 20px;
    }

    .exchange-btn {
      width: 100%;
      background: var(--primary);
      color: white;
      border: none;
      padding: 10px;
      border-radius: var(--radius-sm);
      font-size: 14px;
      cursor: pointer;
    }

    /* 名片大厅 */
    .card-list {
      padding: 12px 16px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .card-item {
      background: var(--card-bg);
      border-radius: var(--radius);
      padding: 16px;
      text-align: center;
      box-shadow: var(--shadow);
    }

    .card-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin: 0 auto 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
    }

    .card-name {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .card-title {
      font-size: 12px;
      color: var(--text-light);
      margin-bottom: 8px;
    }

    .card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      justify-content: center;
    }

    .card-tag {
      background: var(--primary-light);
      color: var(--primary-dark);
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 4px;
    }

    /* 社区动态 */
    .post-card {
      background: var(--card-bg);
      margin-bottom: 12px;
    }

    .post-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
    }

    .post-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }

    .post-user-info h4 {
      font-size: 15px;
      font-weight: 500;
    }

    .post-user-info span {
      font-size: 12px;
      color: var(--text-light);
    }

    .post-content {
      padding: 0 16px 12px;
      font-size: 14px;
      line-height: 1.6;
    }

    .post-images {
      padding: 0 16px 12px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
    }

    .post-image {
      aspect-ratio: 1;
      background: var(--primary-light);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }

    .post-link {
      margin: 0 16px 12px;
      padding: 12px;
      background: var(--bg);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .post-link-icon {
      width: 40px;
      height: 40px;
      background: var(--primary);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }

    .post-link-info {
      flex: 1;
    }

    .post-link-title {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 2px;
    }

    .post-link-desc {
      font-size: 12px;
      color: var(--text-light);
    }

    .post-actions {
      display: flex;
      justify-content: space-around;
      padding: 12px 16px;
      border-top: 1px solid var(--border);
    }

    .action-item {
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--text-light);
      font-size: 13px;
      cursor: pointer;
    }

    .action-item.liked {
      color: #E91E63;
    }

    .action-item svg {
      width: 20px;
      height: 20px;
    }

    /* 我的页面 */
    .profile-header {
      background: linear-gradient(135deg, var(--primary) 0%, #4CAF50 100%);
      padding: 32px 16px;
      color: white;
    }

    .profile-info {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .profile-avatar {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: rgba(255,255,255,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      border: 3px solid rgba(255,255,255,0.5);
    }

    .profile-detail h2 {
      font-size: 20px;
      margin-bottom: 4px;
    }

    .profile-detail p {
      font-size: 13px;
      opacity: 0.9;
    }

    .profile-stats {
      display: flex;
      gap: 32px;
      margin-top: 20px;
    }

    .stat-item {
      text-align: center;
    }

    .stat-item h3 {
      font-size: 22px;
      margin-bottom: 2px;
    }

    .stat-item span {
      font-size: 12px;
      opacity: 0.9;
    }

    .profile-tabs {
      display: flex;
      background: var(--card-bg);
      border-bottom: 1px solid var(--border);
    }

    .profile-tab {
      flex: 1;
      padding: 14px;
      text-align: center;
      font-size: 14px;
      color: var(--text-secondary);
      cursor: pointer;
      position: relative;
    }

    .profile-tab.active {
      color: var(--primary);
      font-weight: 500;
    }

    .profile-tab.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 3px;
      background: var(--primary);
      border-radius: 2px;
    }

    .my-groups {
      padding: 12px 16px;
    }

    .my-group-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
    }

    .my-group-item:last-child {
      border-bottom: none;
    }

    .my-group-item .group-avatar {
      width: 44px;
      height: 44px;
    }

    .my-group-info {
      flex: 1;
    }

    .my-group-info h4 {
      font-size: 15px;
      margin-bottom: 2px;
    }

    .my-group-info span {
      font-size: 12px;
      color: var(--text-light);
    }

    /* 菜单列表 */
    .menu-section {
      background: var(--card-bg);
      margin: 16px;
      border-radius: var(--radius);
      overflow: hidden;
    }

    .menu-item {
      display: flex;
      align-items: center;
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
    }

    .menu-item:last-child {
      border-bottom: none;
    }

    .menu-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      font-size: 18px;
    }

    .menu-text {
      flex: 1;
      font-size: 15px;
    }

    .menu-arrow {
      color: var(--text-light);
    }

    /* 底部导航 */
    .tab-bar {
      position: fixed;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      max-width: 430px;
      background: var(--card-bg);
      display: flex;
      justify-content: space-around;
      padding: 8px 0;
      padding-bottom: max(8px, env(safe-area-inset-bottom));
      box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
      z-index: 100;
    }

    .tab-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 4px 12px;
      cursor: pointer;
      color: var(--text-light);
      transition: color 0.2s;
    }

    .tab-item.active {
      color: var(--primary);
    }

    .tab-item svg {
      width: 24px;
      height: 24px;
    }

    .tab-item span {
      font-size: 11px;
    }

    /* 弹窗 */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.5);
      display: flex;
      align-items: flex-end;
      z-index: 200;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s;
    }

    .modal-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    .modal-content {
      background: var(--card-bg);
      width: 100%;
      max-width: 430px;
      margin: 0 auto;
      border-radius: 16px 16px 0 0;
      padding: 20px;
      padding-bottom: max(20px, env(safe-area-inset-bottom));
      transform: translateY(100%);
      transition: transform 0.3s;
    }

    .modal-overlay.active .modal-content {
      transform: translateY(0);
    }

    .modal-handle {
      width: 40px;
      height: 4px;
      background: var(--border);
      border-radius: 2px;
      margin: 0 auto 16px;
    }

    .modal-title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin-bottom: 20px;
    }

    .qr-placeholder {
      width: 200px;
      height: 200px;
      background: var(--bg);
      margin: 0 auto 20px;
      border-radius: var(--radius);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 64px;
    }

    .modal-btn {
      width: 100%;
      padding: 14px;
      border-radius: var(--radius-sm);
      font-size: 16px;
      border: none;
      cursor: pointer;
    }

    .modal-btn-primary {
      background: var(--primary);
      color: white;
      margin-bottom: 10px;
    }

    .modal-btn-secondary {
      background: var(--bg);
      color: var(--text);
    }

    /* 浮动按钮 */
    .fab {
      position: fixed;
      right: 20px;
      bottom: 80px;
      width: 52px;
      height: 52px;
      background: var(--primary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 24px;
      box-shadow: 0 4px 12px rgba(7,193,96,0.4);
      cursor: pointer;
      z-index: 90;
    }

    /* 群分类统计 */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      padding: 16px;
      background: var(--card-bg);
    }

    .stat-card {
      text-align: center;
      padding: 12px 8px;
      background: var(--bg);
      border-radius: var(--radius-sm);
    }

    .stat-card h3 {
      font-size: 20px;
      color: var(--primary);
      margin-bottom: 2px;
    }

    .stat-card span {
      font-size: 11px;
      color: var(--text-light);
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- 首页/加群大厅 -->
    <div v-if="currentTab === 'home'" class="page">
      <div class="header">
        <div class="header-top">
          <span class="header-title">群汇</span>
          <span class="header-stats">已有 {{ totalGroups }} 个微信群</span>
        </div>
        <div class="search-box">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2">
            <circle cx="11" cy="11" r="8"></circle>
            <path d="m21 21-4.35-4.35"></path>
          </svg>
          <input type="text" v-model="searchKeyword" placeholder="搜索群名称或关键词">
        </div>
      </div>

      <div class="stats-grid">
        <div class="stat-card">
          <h3>{{ totalGroups }}</h3>
          <span>全部群</span>
        </div>
        <div class="stat-card">
          <h3>3256</h3>
          <span>今日新增</span>
        </div>
        <div class="stat-card">
          <h3>8.6万</h3>
          <span>群友总数</span>
        </div>
        <div class="stat-card">
          <h3>98%</h3>
          <span>群友活跃</span>
        </div>
      </div>

      <div class="category-tabs">
        <div v-for="cat in categories" :key="cat.name" 
             class="category-tab" 
             :class="{ active: activeCategory === cat.name }"
             @click="activeCategory = cat.name">
          {{ cat.name }}
        </div>
      </div>

      <div class="group-list">
        <div v-for="group in filteredGroups" :key="group.id" class="group-card" @click="showGroupDetail(group)">
          <div class="group-header">
            <div class="group-avatar" :style="{ background: group.bg }">{{ group.icon }}</div>
            <div class="group-info">
              <div class="group-name">
                {{ group.name }}
                <span v-if="group.badge" class="group-badge">{{ group.badge }}</span>
              </div>
              <div class="group-desc">{{ group.desc }}</div>
              <div class="group-tags">
                <span v-for="tag in group.tags" :key="tag" class="group-tag">{{ tag }}</span>
              </div>
            </div>
          </div>
          <div class="group-footer">
            <div class="group-meta">
              <span>👥 {{ group.members }}人</span>
              <span>📍 {{ group.city }}</span>
            </div>
            <button class="join-btn" @click.stop="joinGroup(group)">加群</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 换群大厅 -->
    <div v-if="currentTab === 'exchange'" class="page">
      <div class="exchange-header">
        <h3>🔄 换群大厅</h3>
        <p>用自己的群换别人的群，资源互换</p>
      </div>

      <div class="category-tabs">
        <div v-for="cat in ['全部', '创业群', '兼职群', '同城群', '互助群', '学习群']" :key="cat" 
             class="category-tab" 
             :class="{ active: exchangeCategory === cat }"
             @click="exchangeCategory = cat">
          {{ cat }}
        </div>
      </div>

      <div class="exchange-list">
        <div v-for="item in exchangeList" :key="item.id" class="exchange-card">
          <div class="exchange-pair">
            <div class="exchange-group">
              <div class="group-avatar" :style="{ background: item.group1.bg }">{{ item.group1.icon }}</div>
              <span>{{ item.group1.name }}</span>
            </div>
            <div class="exchange-arrow">⇄</div>
            <div class="exchange-group">
              <div class="group-avatar" :style="{ background: item.group2.bg }">{{ item.group2.icon }}</div>
              <span>{{ item.group2.name }}</span>
            </div>
          </div>
          <button class="exchange-btn" @click="applyExchange(item)">申请换群</button>
        </div>
      </div>
    </div>

    <!-- 名片大厅 -->
    <div v-if="currentTab === 'cards'" class="page">
      <div class="header">
        <div class="header-top">
          <span class="header-title">名片大厅</span>
          <span class="header-stats">人脉资源 拓展人脉</span>
        </div>
        <div class="search-box">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2">
            <circle cx="11" cy="11" r="8"></circle>
            <path d="m21 21-4.35-4.35"></path>
          </svg>
          <input type="text" v-model="searchKeyword" placeholder="搜索名片">
        </div>
      </div>

      <div class="category-tabs">
        <div v-for="cat in ['全部', '创业者', '职场人', '自由职业', '学生', '其他']" :key="cat" 
             class="category-tab" 
             :class="{ active: cardCategory === cat }"
             @click="cardCategory = cat">
          {{ cat }}
        </div>
      </div>

      <div class="card-list">
        <div v-for="card in cardList" :key="card.id" class="card-item" @click="showCardDetail(card)">
          <div class="card-avatar" :style="{ background: card.bg }">{{ card.avatar }}</div>
          <div class="card-name">{{ card.name }}</div>
          <div class="card-title">{{ card.title }}</div>
          <div class="card-tags">
            <span v-for="tag in card.tags" :key="tag" class="card-tag">{{ tag }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 项目圈 -->
    <div v-if="currentTab === 'community'" class="page">
      <div class="header">
        <div class="header-top">
          <span class="header-title">项目圈</span>
          <span class="header-stats">发现机会 合作共赢</span>
        </div>
        <div class="search-box">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2">
            <circle cx="11" cy="11" r="8"></circle>
            <path d="m21 21-4.35-4.35"></path>
          </svg>
          <input type="text" v-model="searchKeyword" placeholder="搜索动态">
        </div>
      </div>

      <div v-for="post in filteredPosts" :key="post.id" class="post-card">
        <div class="post-header">
          <div class="post-avatar" :style="{ background: post.bg }">{{ post.avatar }}</div>
          <div class="post-user-info">
            <h4>{{ post.author }}</h4>
            <span>{{ post.time }} · {{ post.location }}</span>
          </div>
        </div>
        <div class="post-content">{{ post.content }}</div>
        <div class="post-images" v-if="post.images && post.images.length">
          <div v-for="(img, idx) in post.images" :key="idx" class="post-image">{{ img }}</div>
        </div>
        <div class="post-link" v-if="post.link">
          <div class="post-link-icon">{{ post.link.icon }}</div>
          <div class="post-link-info">
            <div class="post-link-title">{{ post.link.title }}</div>
            <div class="post-link-desc">{{ post.link.desc }}</div>
          </div>
        </div>
        <div class="post-actions">
          <div class="action-item" :class="{ liked: post.liked }" @click="toggleLike(post)">
            <svg viewBox="0 0 24 24" :fill="post.liked ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2">
              <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
            </svg>
            {{ post.likes }}
          </div>
          <div class="action-item">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
            </svg>
            {{ post.comments }}
          </div>
          <div class="action-item">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="18" cy="5" r="3"></circle>
              <circle cx="6" cy="12" r="3"></circle>
              <circle cx="18" cy="19" r="3"></circle>
              <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
              <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
            </svg>
            分享
          </div>
        </div>
      </div>

      <div class="fab" @click="showPostModal = true">+</div>

      <!-- 发布弹窗 -->
      <div class="modal-overlay" :class="{ active: showPostModal }" @click.self="showPostModal = false">
        <div class="modal-content">
          <div class="modal-handle"></div>
          <div class="modal-title">发布动态</div>
          <textarea v-model="newPost" placeholder="分享你的创业故事、项目需求或资源..." style="width:100%;height:120px;border:1px solid #eee;border-radius:8px;padding:12px;resize:none;font-size:14px;margin-bottom:16px;">
编辑页面

微信用户

{{ myGroups.length }}

18

35

{{ group.name }}

编辑页面

微信用户

{{ myGroups.length }}

18

35

{{ group.name }}

{{ selectedGroup.name }}
