diff --git a/qr-collection.html b/qr-collection.html
index 180ad63..e40f67e 100644
--- a/qr-collection.html
+++ b/qr-collection.html
@@ -13,8 +13,8 @@
 
     body {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-      background-color: #f5f5f5;
-      color: #333;
+      background-color: #F5F7FA;
+      color: #333333;
       -webkit-overflow-scrolling: touch;
       overflow-x: hidden;
       position: relative;
@@ -30,12 +30,12 @@
     .container {
       max-width: 480px;
       margin: 0 auto;
-      background-color: white;
+      background-color: #F5F7FA;
       height: 100%;
       overflow-y: auto;
       -webkit-overflow-scrolling: touch;
       position: relative;
-      padding: 20px;
+      padding: 0;
     }
 
     .header {
@@ -43,97 +43,141 @@
       align-items: center;
       justify-content: center;
       padding: 16px;
-      background-color: #28a745;
+      background-color: #2E7D32;
       color: white;
-      margin: -20px -20px 20px;
+      position: relative;
+      border-bottom: 1px solid #E0E0E0;
     }
 
     .header h1 {
       font-size: 18px;
       font-weight: 600;
+      margin: 0;
     }
 
-    .header-actions {
-      display: flex;
-      gap: 12px;
-    }
-
-    .more-btn {
+    .back-btn {
+      position: absolute;
+      left: 16px;
       background: none;
       border: none;
       color: white;
-      font-size: 18px;
+      font-size: 20px;
       cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 4px;
     }
 
     .filter-section {
-      margin-bottom: 20px;
+      padding: 16px;
+      background-color: white;
+      border-bottom: 1px solid #E0E0E0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
     }
 
-    .filter-section h3 {
-      font-size: 16px;
-      color: #333;
-      margin-bottom: 10px;
+    .filter-title {
+      font-size: 14px;
+      color: #666666;
+      display: flex;
+      align-items: center;
+      gap: 4px;
     }
 
-    .filter-buttons {
+    .filter-toggle {
       display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
+      background-color: #F0F0F0;
+      border-radius: 20px;
+      padding: 4px;
+      gap: 4px;
     }
 
-    .filter-btn {
-      padding: 8px 12px;
-      border: 1px solid #ddd;
+    .filter-toggle-btn {
+      padding: 6px 12px;
+      border: none;
       border-radius: 16px;
-      background-color: white;
-      color: #666;
+      background-color: transparent;
+      color: #666666;
       font-size: 14px;
       cursor: pointer;
       transition: all 0.3s;
     }
 
-    .filter-btn.active {
-      background-color: #28a745;
+    .filter-toggle-btn.active {
+      background-color: #4CAF50;
       color: white;
-      border-color: #28a745;
     }
 
     .qr-section {
-      margin-bottom: 30px;
+      padding: 0 16px;
+      margin-top: 16px;
+    }
+
+    .qr-item {
+      background-color: white;
+      border-radius: 8px;
+      padding: 12px 16px;
+      margin-bottom: 8px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      cursor: pointer;
+      transition: transform 0.2s;
+    }
+
+    .qr-item:active {
+      transform: scale(0.98);
+    }
+
+    .qr-item-info {
+      flex: 1;
     }
 
-    .qr-section h3 {
+    .qr-item-name {
       font-size: 16px;
-      color: #333;
-      margin-bottom: 15px;
-      padding-bottom: 8px;
-      border-bottom: 1px solid #f0f0f0;
+      font-weight: 500;
+      color: #333333;
+      line-height: 24px;
+      margin-bottom: 4px;
     }
 
-    .qr-grid {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 15px;
+    .qr-item-details {
+      font-size: 14px;
+      color: #666666;
+      line-height: 20px;
     }
 
-    .qr-item {
-      background-color: #f8f9fa;
+    .qr-item-arrow {
+      color: #999999;
+      font-size: 16px;
+      margin-left: 12px;
+    }
+
+    .qr-content {
+      background-color: white;
       border-radius: 8px;
-      padding: 12px;
-      text-align: center;
+      padding: 16px;
+      margin-top: 8px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+      display: none;
     }
 
-    .qr-item img {
+    .qr-content img {
       max-width: 100%;
-      max-height: 150px;
-      margin-bottom: 10px;
+      max-height: 250px;
+      margin: 0 auto;
+      display: block;
       border-radius: 4px;
     }
 
     .qr-info {
-      font-size: 12px;
-      color: #666;
+      margin-top: 12px;
+      font-size: 14px;
+      color: #666666;
+      text-align: center;
     }
 
     .qr-info p {
@@ -142,13 +186,13 @@
 
     .qr-info .name {
       font-weight: 500;
-      color: #333;
+      color: #333333;
     }
 
     .empty-state {
       text-align: center;
       padding: 40px 20px;
-      color: #999;
+      color: #999999;
     }
 
     .empty-state img {
@@ -157,71 +201,120 @@
       opacity: 0.5;
     }
 
-    .action-buttons {
-      display: flex;
-      flex-direction: column;
-      gap: 15px;
-      margin-top: 30px;
-    }
-
-    .btn {
-      padding: 15px;
+    .filter-sidebar-btn {
+      background-color: #4CAF50;
+      color: white;
       border: none;
       border-radius: 8px;
-      font-size: 16px;
-      font-weight: 500;
+      padding: 8px 12px;
+      font-size: 14px;
       cursor: pointer;
-      text-align: center;
-      transition: background-color 0.3s;
+      display: flex;
+      align-items: center;
+      gap: 6px;
     }
 
-    .btn-primary {
-      background-color: #28a745;
-      color: white;
+    .filter-sidebar {
+      position: fixed;
+      top: 0;
+      right: -300px;
+      width: 250px;
+      height: 100%;
+      background: white;
+      box-shadow: -2px 0 5px rgba(0,0,0,0.1);
+      z-index: 1000;
+      transition: right 0.3s;
+      padding: 20px;
     }
 
-    .btn-primary:hover {
-      background-color: #218838;
+    .sidebar-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0,0,0,0.5);
+      z-index: 999;
+      display: none;
+      transition: opacity 0.3s;
     }
 
-    .btn-secondary {
-      background-color: #6c757d;
-      color: white;
+    .sidebar-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
     }
 
-    .btn-secondary:hover {
-      background-color: #5a6268;
+    .sidebar-header h3 {
+      font-size: 16px;
+      color: #333333;
+      margin: 0;
     }
 
-    .footer {
-      text-align: center;
-      margin-top: 40px;
-      padding: 20px 0;
+    .close-sidebar-btn {
+      background: none;
+      border: none;
+      font-size: 20px;
+      cursor: pointer;
+      color: #999999;
+    }
+
+    .sidebar-filter-buttons {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    .sidebar-filter-btn {
+      padding: 10px 12px;
+      border: 1px solid #E0E0E0;
+      border-radius: 8px;
+      background-color: white;
+      color: #666666;
       font-size: 14px;
-      color: #999;
-      border-top: 1px solid #f0f0f0;
+      cursor: pointer;
+      text-align: left;
+      transition: all 0.3s;
+    }
+
+    .sidebar-filter-btn:hover {
+      background-color: #F5F5F5;
     }
 
     @media (max-width: 480px) {
       .container {
         max-width: 100%;
-        padding: 15px;
-      }
-      
-      .header {
-        margin: -15px -15px 15px;
       }
       
       .header h1 {
         font-size: 16px;
       }
       
-      .qr-grid {
-        grid-template-columns: 1fr;
+      .qr-item {
+        padding: 12px;
+      }
+      
+      .filter-section {
+        padding: 12px 16px;
+      }
+      
+      .filter-sidebar-btn {
+        padding: 6px 10px;
+        font-size: 13px;
+      }
+      
+      .qr-item-name {
+        font-size: 15px;
+      }
+      
+      .qr-item-details {
+        font-size: 13px;
       }
       
-      .qr-item img {
-        max-height: 200px;
+      .filter-toggle-btn {
+        padding: 5px 10px;
+        font-size: 13px;
       }
     }
   </style>
@@ -229,33 +322,34 @@
 <body>
   <div class="container">
     <div class="header">
+      <button class="back-btn" onclick="window.location.href='invite.html'">←</button>
       <h1>二维码合集</h1>
     </div>
     
     <div class="filter-section">
-      <div style="display: flex; align-items: center; justify-content: space-between;">
-        <h3>筛选</h3>
-        <button id="filterSidebarBtn" class="filter-sidebar-btn" style="display: none; background: #28a745; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 14px; cursor: pointer;">筛选</button>
-      </div>
-      <div class="filter-buttons">
-        <button class="filter-btn active" data-filter="all">全部</button>
-        <button class="filter-btn" data-filter="me">我的二维码</button>
+      <div class="filter-toggle">
+        <button class="filter-toggle-btn active" data-filter="all">全部</button>
+        <button class="filter-toggle-btn" data-filter="me">我的</button>
       </div>
+      <button id="filterSidebarBtn" class="filter-sidebar-btn" style="display: none;">
+        <span>🔍</span>
+        <span>筛选</span>
+      </button>
     </div>
     
     <!-- 筛选侧边栏 -->
-    <div id="filterSidebar" class="filter-sidebar" style="position: fixed; top: 0; right: -300px; width: 250px; height: 100%; background: white; box-shadow: -2px 0 5px rgba(0,0,0,0.1); z-index: 1000; transition: right 0.3s; padding: 20px;">
-      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+    <div id="filterSidebar" class="filter-sidebar">
+      <div class="sidebar-header">
         <h3>筛选用户</h3>
-        <button id="closeSidebarBtn" style="background: none; border: none; font-size: 20px; cursor: pointer;">&times;</button>
+        <button id="closeSidebarBtn" class="close-sidebar-btn">&times;</button>
       </div>
-      <div id="sidebarFilterButtons" style="display: flex; flex-direction: column; gap: 10px;">
+      <div id="sidebarFilterButtons" class="sidebar-filter-buttons">
         <!-- 动态生成的筛选按钮 -->
       </div>
     </div>
     
     <!-- 遮罩层 -->
-    <div id="sidebarOverlay" class="sidebar-overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; display: none; transition: opacity 0.3s;"></div>
+    <div id="sidebarOverlay" class="sidebar-overlay"></div>
     
     <div id="qrCollection">
       <div class="empty-state">
@@ -265,13 +359,8 @@
       </div>
     </div>
     
-    <div class="action-buttons">
-      <button class="btn btn-primary" onclick="window.location.href='invite.html'">生成邀请二维码</button>
-      <button class="btn btn-secondary" onclick="window.location.href='invite.html'">返回主页面</button>
-    </div>
-    
-    <div class="footer">
-      技术支持：四川又鸟蛋贸易有限公司
+    <div style="padding: 16px;">
+      <button class="btn btn-primary" onclick="window.location.href='invite.html'" style="width: 100%; padding: 12px; background-color: #4CAF50; color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 500; cursor: pointer; text-align: center; transition: background-color 0.3s;">生成邀请二维码</button>
     </div>
   </div>
   
@@ -349,23 +438,14 @@
     
     // 动态生成筛选按钮
     function generateFilterButtons(invitees, currentUser) {
-      const filterButtonsContainer = document.querySelector('.filter-buttons');
       const filterSidebarBtn = document.getElementById('filterSidebarBtn');
       const sidebarFilterButtons = document.getElementById('sidebarFilterButtons');
       
-      if (!filterButtonsContainer) return;
-      
-      // 清空现有按钮，只保留"全部"和"我的"
-      filterButtonsContainer.innerHTML = `
-        <button class="filter-btn active" data-filter="all">全部</button>
-        <button class="filter-btn" data-filter="me">我的</button>
-      `;
-      
       // 为管理员显示筛选按钮并填充侧边栏
       if (invitees && invitees.length > 0) {
         // 显示筛选按钮
         if (filterSidebarBtn) {
-          filterSidebarBtn.style.display = 'block';
+          filterSidebarBtn.style.display = 'flex';
         }
         
         // 填充侧边栏筛选按钮
@@ -376,17 +456,7 @@
             // 跳过当前用户自己
             if (invitee.inviter && invitee.inviter !== (currentUser.name || currentUser.userName)) {
               const button = document.createElement('button');
-              button.className = 'filter-btn';
-              button.style.width = '100%';
-              button.style.textAlign = 'left';
-              button.style.padding = '8px 12px';
-              button.style.border = '1px solid #ddd';
-              button.style.borderRadius = '4px';
-              button.style.backgroundColor = 'white';
-              button.style.color = '#666';
-              button.style.fontSize = '14px';
-              button.style.cursor = 'pointer';
-              button.style.transition = 'all 0.3s';
+              button.className = 'sidebar-filter-btn';
               button.dataset.filter = `invitee_${encodeURIComponent(invitee.inviter)}`;
               button.dataset.inviter = invitee.inviter;
               button.textContent = invitee.inviter;
@@ -402,15 +472,6 @@
           });
         }
       }
-      
-      // 绑定筛选按钮事件
-      document.querySelectorAll('.filter-btn').forEach(btn => {
-        btn.addEventListener('click', function() {
-          if (!this.disabled) {
-            filterQrCodes(this.dataset.filter, this.dataset.inviter);
-          }
-        });
-      });
     }
     
     // 打开筛选侧边栏
@@ -440,30 +501,25 @@
       // 生成HTML
       let html = '';
       qrCodes.forEach((qrCode, index) => {
-        // 生成唯一的section ID
-        const sectionId = `section_${index}_${encodeURIComponent(qrCode.sessionId || Math.random().toString(36).substr(2, 9))}`;
+        // 生成唯一的item ID
+        const itemId = `item_${index}_${encodeURIComponent(qrCode.sessionId || Math.random().toString(36).substr(2, 9))}`;
         
         html += `
-          <div class="qr-section" style="margin-bottom: 20px;">
-            <div class="section-header" onclick="toggleSection('${sectionId}')" style="cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #f8f9fa; border-radius: 8px; margin-bottom: 10px;">
-              <div>
-                <div style="font-size: 12px; color: #666;">
-                  <p style="margin: 2px 0;">主体名称: ${qrCode.company || '未知'}</p>
-                  <p style="margin: 2px 0;">电话号码: ${qrCode.phoneNumber || '未知'}</p>
-                  <p style="margin: 2px 0;">开具日期: ${qrCode.createdAt || '未知'}</p>
-                </div>
+          <div class="qr-item" onclick="toggleSection('${itemId}')">
+            <div class="qr-item-info">
+              <div class="qr-item-name">${qrCode.company || '未知'}</div>
+              <div class="qr-item-details">
+                ${qrCode.phoneNumber || '未知'} / ${qrCode.createdAt || '未知'}
               </div>
-              <span class="toggle-icon" id="toggle_${sectionId}" style="font-size: 18px; color: #28a745;">▼</span>
             </div>
-            <div id="${sectionId}" class="qr-grid" style="display: none; padding: 10px; background-color: #fafafa; border-radius: 8px;">
-              <div class="qr-item">
-                <img src="${qrCode.qrCodeUrl || `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(qrCode.url)}`}" alt="邀请二维码">
-                <div class="qr-info">
-                  <p class="name">${qrCode.inviter || '未知'}</p>
-                  <p>${qrCode.inviterProjectName || '无职位'}</p>
-                  <p>${qrCode.createdAt || ''}</p>
-                </div>
-              </div>
+            <div class="qr-item-arrow">▼</div>
+          </div>
+          <div id="${itemId}" class="qr-content" style="display: none;">
+            <img src="${qrCode.qrCodeUrl || `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(qrCode.url)}`}" alt="邀请二维码">
+            <div class="qr-info">
+              <p class="name">${qrCode.inviter || '未知'}</p>
+              <p>${qrCode.inviterProjectName || '无职位'}</p>
+              <p>${qrCode.createdAt || ''}</p>
             </div>
           </div>
         `;
@@ -475,15 +531,16 @@
     // 切换展开/收起状态
     function toggleSection(sectionId) {
       const section = document.getElementById(sectionId);
-      const toggleIcon = document.getElementById(`toggle_${sectionId}`);
+      const qrItem = section ? section.previousElementSibling : null;
+      const arrowIcon = qrItem ? qrItem.querySelector('.qr-item-arrow') : null;
       
-      if (section && toggleIcon) {
+      if (section && arrowIcon) {
         if (section.style.display === 'none') {
           section.style.display = 'block';
-          toggleIcon.textContent = '▲';
+          arrowIcon.textContent = '▲';
         } else {
           section.style.display = 'none';
-          toggleIcon.textContent = '▼';
+          arrowIcon.textContent = '▼';
         }
       }
     }