<template>
  <div class="member-agreement-page">
    <!-- 页面头部 -->
    <div class="page-header-modern">
      <div class="header-content">
        <button class="back-btn" @click="goBack">
          <svg viewBox="0 0 24 24" class="back-icon">
            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path>
          </svg>
        </button>
        <div class="header-info">
          <div class="header-text">
            <h1 class="header-title">会员服务协议</h1>
            <p class="header-subtitle">《精彩猪手》会员服务条款</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容 -->
    <div class="agreement-content">
      <!-- 标题 -->
      <div class="agreement-title-section">
      </div>

      <!-- 第一章 -->
      <div class="agreement-section">
        <h3 class="section-title">一、定义</h3>
        <div class="section-content">
          <div class="definition-item">
            <span class="def-num">1</span>
            <div class="def-content">
              <strong>本服务</strong>：指我们通过网站、应用程序或其他相关平台向会员提供的《精彩猪手》数据服务，包括但不限于彩票开奖信息查询、姿态逻辑数据分析报告、个性化推导推测辅助，以及会员行为统计、经验技巧交流等。
            </div>
          </div>
          <div class="definition-item">
            <span class="def-num">2</span>
            <div class="def-content">
              <strong>会员</strong>：指承认本协议，接受本服务的自然人。具体包括一般会员和付费会员。
            </div>
          </div>
          <div class="definition-item">
            <span class="def-num">3</span>
            <div class="def-content">
              <strong>个人信息</strong>：指以电子或者其他方式记录的与已识别或者可识别的自然人有关的各种信息，不包括匿名化处理后的信息。
            </div>
          </div>
          <div class="definition-item">
            <span class="def-num">4</span>
            <div class="def-content">
              <strong>知识产权</strong>：包括但不限于著作权、专利权、商标权、商业秘密等。
            </div>
          </div>
        </div>
      </div>

      <!-- 第二章 -->
      <div class="agreement-section">
        <h3 class="section-title">二、服务内容及门槛</h3>
        <div class="section-content">
          <p>1. 我们将尽力为会员提供稳定、高效的服务。服务内容包括但不限于：</p>
          <ul class="service-list">
            <li>1.1 既定彩票开奖信息查询浏览；</li>
            <li>1.2 既定彩票开奖数据姿态逻辑分析及报告；</li>
            <li>1.3 按期次更新的号球动态数据，以及通过"本期"已出的开奖号球，进行"下期"开奖号球的个性化推测逻辑辅助；</li>
            <li>1.4 根据首球与随球的关联线索，启发复式/胆拖的投注参考；</li>
            <li>1.5 推测行为统计、分析、备份；</li>
            <li>1.6 进行规律总结、技巧探索、经验交流。</li>
          </ul>
          <p>2. 我们会根据实际情况对服务内容进行调整、更新。如有重大变更，我们将通过企业公众号、企业微信、短信等方式通知会员。</p>
          <p>3. 会员理解并同意，使用本服务可能需要会员具备相应的设备、软件、网络环境和一定的专业知识，相关费用由会员自行承担。</p>
        </div>
      </div>

      <!-- 第三章 -->
      <div class="agreement-section">
        <h3 class="section-title">三、会员账号</h3>
        <div class="section-content">
          <p>1. 会员可以通过免费注册的方式获取本服务账号。在注册过程中，会员需提供真实、准确、完整的信息，并确保信息的及时更新。</p>
          <p>2. 会员应妥善保管账号及密码，不将账号出借、转让、赠予或共享给他人使用。因会员自身原因导致账号泄露或被他人使用的后果，由会员自行承担。</p>
          <p>3. 若会员发现账号存在异常或安全问题，请立即通知我们，我们将尽力协助处理，但对于非因我们原因导致的损失，我们不承担责任。</p>
          <p>4. 会员在使用账号过程中应遵守法律法规及本协议约定，不得利用账号从事违法、违规，或损害他人权益的行为，否则我们有权暂停或终止会员的账号使用。</p>
        </div>
      </div>

      <!-- 第四章 -->
      <div class="agreement-section">
        <h3 class="section-title">四、会员权利与义务</h3>
        <div class="section-content">
          <h4 class="sub-title">1. 权利</h4>
          <ul class="rights-list">
            <li>1.1 有权在遵守本协议的前提下，按照我们提供的方式使用服务。</li>
            <li>1.2 对我们提供的服务质量有权提出合理的意见和建议。</li>
          </ul>
          <h4 class="sub-title">2. 义务</h4>
          <ul class="duties-list">
            <li>2.1 遵守国家法律法规及互联网相关规定，不得利用本服务从事违法犯罪活动。</li>
            <li>2.2 不得干扰、破坏本服务的正常运行，不得对服务进行反向工程、反编译、反汇编等行为。</li>
            <li>2.3 不得发布、传播任何侵犯他人知识产权、隐私或其他合法权益的信息。</li>
            <li>2.4 不得恶意注册账号、发送垃圾信息或进行其他滥用服务的行为。</li>
            <li>2.5 如因会员的行为导致我们或第三方遭受损失，责任方会员应承担相应的赔偿责任。</li>
          </ul>
        </div>
      </div>

      <!-- 第五章 -->
      <div class="agreement-section">
        <h3 class="section-title">五、隐私政策</h3>
        <div class="section-content">
          <p>1. 我们十分重视对会员个人信息保护，将谨慎收集、安全存储、妥善使用会员的个人信息。</p>
          <p>2. 会员同意我们为提供服务、改进服务，包括遵守法律法规的需要，对会员的个人信息进行合理的调用，过程中我们将采取合理措施确保信息安全。</p>
        </div>
      </div>

      <!-- 第六章 -->
      <div class="agreement-section">
        <h3 class="section-title">六、知识产权</h3>
        <div class="section-content">
          <p>我们对本服务及相关内容（包括但不限于软件、数据、文字、图片、音频、视频等）享有知识产权。未经我们书面许可，会员不得擅自复制、改编，或创造基于本服务的衍生品。</p>
        </div>
      </div>

      <!-- 第七章 -->
      <div class="agreement-section">
        <h3 class="section-title">七、责任限制与免责</h3>
        <div class="section-content">
          <div class="warning-box">
            <p><strong>重要提示：</strong>会员应当理解并知晓，彩票本身就是概率游戏，彩票开奖也是纯粹的随机事件。因此，本服务仅具备参考和辅助功效，会员必须对自己的判断和选择结果承担最终责任。</p>
          </div>
          <p>1. 本服务所提供的各项数据分析报告，均为根据彩票历史数据、统计学、数学和数据科学原理，通过计算机技术进行建模分析而得出。我们仅对数据的及时性、客观性承担责任。</p>
          <p>2. 我们将尽力确保服务的正常运行，但由于互联网的复杂性和不确定性，可能会出现服务中断、延迟、错误等情况。对于因不可抗力、技术故障、网络攻击等不可预见、不可避免的原因导致的服务问题，我们不承担责任。</p>
          <p>3. 我们对会员通过本服务获取的第三方信息的准确性、完整性、可靠性不承担保证责任，会员应自行判断并承担使用风险。</p>
          <p>4. 在任何情况下，我们对会员因使用本服务而产生的直接、间接、偶然、特殊或后果性损失，均不承担超过会员实际支付的服务费用的赔偿责任。</p>
        </div>
      </div>

      <!-- 第八章 -->
      <div class="agreement-section">
        <h3 class="section-title">八、收费及其规则</h3>
        <div class="section-content">
          <div class="price-box">
            <h4>会员类型与收费标准</h4>
            <div class="price-grid">
              <div class="price-item">
                <span class="price-label">包月付费</span>
                <span class="price-value">10元/月</span>
              </div>
              <div class="price-item">
                <span class="price-label">包年付费</span>
                <span class="price-value">100元/年</span>
              </div>
            </div>
          </div>
          <p>1. 本服务采用会员制运营模式。所有会员分为普通会员与VIP会员两种类型。</p>
          <p>2. 本服务对普通会员仅提供一般的基础数据服务。</p>
          <p>3. 本服务对VIP会员，在提供一般基础数据服务的基础上，还提供个性化的智推、精推特色辅助服务。</p>
          <p>4. 包月付费每月10元，不足一个月时，按一个月计算。</p>
          <p>5. 包年付费每年100元。若因会员原因中途提出终止协议，需要发生退款时，所退款项均按包月付费标准进行折算。</p>
          <p>6. 出现业务退款情形时，所退款项只限原路退回付款账号。</p>
          <p>7. 所有会员在服务有效期内使用本服务额定内容的时段和频次均不受限。</p>
        </div>
      </div>

      <!-- 第九章 -->
      <div class="agreement-section">
        <h3 class="section-title">九、协议变更与终止</h3>
        <div class="section-content">
          <p>1. 我们有权根据法律法规变化、业务发展需要等对本协议进行变更。变更后的协议将在相关平台以显著方式公布，自公布之日起生效。</p>
          <p>2. 出现以下情况下，我们有权终止本协议及停止会员继续使用服务：</p>
          <ul>
            <li>2.1 会员严重违反本协议约定。</li>
            <li>2.2 法律法规要求我们终止服务。</li>
            <li>2.3 因不可抗力等不可预见、不可避免的原因导致服务无法继续提供。</li>
          </ul>
          <p>3. 协议终止后，我们有权根据法律法规要求，对会员的相关信息进行封存处理。</p>
        </div>
      </div>

      <!-- 第十章 -->
      <div class="agreement-section">
        <h3 class="section-title">十、争议解决</h3>
        <div class="section-content">
          <p>1. 本协议的签订、履行、解释及争议解决均适用《中华人民共和国民法典》。</p>
          <p>2. 如双方在本协议履行过程中发生争议，应首先通过友好协商解决；协商不成的，任何一方均有权向有管辖权的人民法院提起诉讼。</p>
        </div>
      </div>

      <!-- 第十一章 -->
      <div class="agreement-section">
        <h3 class="section-title">十一、其他条款</h3>
        <div class="section-content">
          <p>1. 本协议构成会员与我们之间关于本服务的完整协议。未经我们书面同意，会员不得转让本协议项下的任何权利、利益和义务。</p>
          <p>2. 本协议各条款的标题仅为方便阅读而设，不影响条款的具体含义及解释。</p>
          <p>3. 若本协议任何条款被认定为无效或不可执行，不影响其他条款的效力及执行。</p>
          <p>4. 我们未行使或执行本协议任何权利或条款，不构成对该权利或条款的放弃。</p>
          <p>5. 本协议自会员成功注册《精彩猪手》服务相关账号之日即刻生效。</p>
          <p>6. 任何有关本协议项下服务的问题，会员可通过本公司企业微信进行咨询。</p>
        </div>
      </div>

      <!-- 重要提示 -->
      <div class="notice-box">
        在开始使用我们的服务之前，请会员仔细阅读并充分理解本《会员服务协议》的全部内容。
        本协议是会员与我们（西安溢彩数智科技有限公司）之间关于使用本服务的法律协议。
        一旦会员使用本服务，即表示会员已同意接受本协议的约束。
      </div>

      <!-- 底部信息 -->
      <div class="footer-info">
        <p class="company-name">西安溢彩数智科技有限公司</p>
        <p class="date">2025年12月31日</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MemberAgreement',
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.member-agreement-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 0;
}

/* 页面头部 */
.page-header-modern {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  padding: 20px 0;
  position: relative;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.back-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  color: white;
  margin-right: 16px;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.back-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.header-info {
  flex: 1;
}

.header-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: white;
}

.header-subtitle {
  font-size: 14px;
  opacity: 0.8;
  margin: 0;
}

/* 主要内容 */
.agreement-content {
  max-width: 850px;
  margin: 0 auto;
  padding: 24px 20px;
}

/* 标题区域 */
.agreement-title-section {
  text-align: center;
  margin-bottom: 10px;
}

.main-title {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin-bottom: 16px;
}

.intro-text {
  font-size: 16px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 20px;
}

.notice-box {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 152, 0, 0.1) 100%);
  padding: 16px 20px;
  border-radius: 12px;
  border-left: 4px solid #ffc107;
  text-align: left;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* 章节样式 */
.agreement-section {
  background: white;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #4facfe;
}

.section-content {
  font-size: 14px;
  color: #555;
  line-height: 1.8;
}

.section-content p {
  margin-bottom: 12px;
}

.sub-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin: 16px 0 12px 0;
}

/* 定义项 */
.definition-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 14px;
  padding: 14px;
  background: #fafbfc;
  border-radius: 10px;
}

.def-num {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  margin-right: 12px;
}

.def-content {
  flex: 1;
  line-height: 1.6;
}

/* 列表样式 */
.service-list,
.rights-list,
.duties-list {
  padding-left: 20px;
  margin: 12px 0;
}

.service-list li,
.rights-list li,
.duties-list li {
  margin-bottom: 8px;
  line-height: 1.6;
}

/* 警告框 */
.warning-box {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
  padding: 16px 20px;
  border-radius: 12px;
  border-left: 4px solid #ef4444;
  margin-bottom: 16px;
}

.warning-box p {
  margin: 0;
  color: #b91c1c;
}

/* 价格框 */
.price-box {
  background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%);
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.price-box h4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  text-align: center;
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.price-item {
  background: white;
  padding: 16px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.price-label {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.price-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #4facfe;
}

/* 底部信息 */
.footer-info {
  text-align: center;
  color: #666;
}

.company-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.date {
  font-size: 14px;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header-modern {
    padding: 16px 0;
  }
  
  .header-content {
    padding: 0 16px;
  }
  
  .back-btn {
    width: 40px;
    height: 40px;
    margin-right: 12px;
  }
  
  .header-title {
    font-size: 20px;
  }
  
  .agreement-content {
    padding: 16px;
  }
  
  .main-title {
    font-size: 22px;
  }
  
  .section-title {
    font-size: 16px;
  }
  
  .definition-item {
    flex-direction: column;
  }
  
  .def-num {
    margin-bottom: 8px;
    margin-right: 0;
  }
  
  .price-grid {
    grid-template-columns: 1fr;
  }
  
  .price-value {
    font-size: 20px;
  }
}
</style>
