## 实现计划

### 1. 分析现有代码结构
- 定位邀请信息区域：`invitation-section` 类名的 `div`
- 现有内容包括：邀请人数、邀请码卡片、邀请相关列表
- 将在 `invitation-related-section` 后添加新的邀请规则区域

### 2. 设计HTML结构
在 `invitation-related-section` 后添加新的邀请规则区域：
```html
<div class="invitation-rules">
  <h3>邀请规则</h3>
  
  <!-- 免费会员邀请规则 - 始终显示 -->
  <div class="role-rules free-rules">
    <h4>免费会员邀请规则</h4>
    <ul>
      <li>每成功邀请 1 名用户注册：</li>
      <ul>
        <li>奖励 300 积分</li>
      </ul>
    </ul>
  </div>
  
  <!-- 达人会员邀请规则 - 始终显示 -->
  <div class="role-rules creator-rules">
    <h4>达人会员邀请规则</h4>
    <p>当达人邀请码成功邀请 1 名新用户注册：</p>
    <ol>
      <li>拥有免费会员全部权限</li>
      <li>额外具备带货佣金能力</li>
      <li>立即奖励 300 积分</li>
      <li>建立绑定关系（达人 ←→ 用户）</li>
      <li>被邀请用户后续下单：</li>
      <li>达人可获得 15% 佣金</li>
    </ol>
  </div>
  
  <!-- 成为达人会员模块 - 仅免费会员可见 -->
  <div v-if="userData.role === 'free'" class="upgrade-creator-section">
    <h4>成为达人会员</h4>
    <div class="qr-code-container">
      <!-- QR码占位 -->
      <div class="qr-placeholder">达人会员二维码</div>
    </div>
  </div>
</div>
```

### 3. 添加CSS样式
- 为 `invitation-rules` 添加容器样式，保持与现有模块一致
- 为 `role-rules` 添加基础样式，区分免费会员和达人会员规则
- 为不同类型的列表（ul/ol）添加自定义样式
- 为成为达人会员模块添加样式，包含二维码容器
- 支持浅色和暗色主题

### 4. 样式设计要点
- 保持与现有设计语言一致，使用紫色主题色
- 免费会员规则使用蓝色调，达人会员规则使用紫色调
- 添加适当的间距、圆角和边框
- 列表项使用自定义项目符号增强视觉效果
- 二维码容器添加占位样式
- 支持响应式设计

### 5. 实现步骤
1. 在模板中添加邀请规则HTML结构，同时展示两个规则
2. 添加条件判断，仅对免费会员显示成为达人会员模块
3. 在CSS部分添加对应的样式
4. 确保支持暗色主题
5. 检查响应式设计在不同屏幕尺寸下的表现

### 6. 预期效果
- 同时展示免费会员和达人会员的邀请规则
- 清晰区分两个规则区块
- 仅免费会员能看到成为达人会员的二维码模块
- 整体设计与现有界面风格统一
- 支持深色模式切换

这个实现将清晰地向所有用户展示完整的邀请规则，同时根据用户角色提供个性化的升级入口。