IM_first_qianduan/IMQd/pages/privacy/privacy.vue

<template>
  <div class="privacy-policy-container bg-white rounded-xl shadow-lg p-6 md:p-8 max-w-4xl mx-auto my-8">
    <h1 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-gray-800 mb-6 text-center">隐私政策</h1>
    
    <div class="policy-content space-y-6">
      <section id="intro" class="policy-section">
        <h2 class="text-xl font-semibold text-gray-700 mb-3">引言</h2>
        <p class="text-gray-600 leading-relaxed">
          本隐私政策旨在帮助您了解我们如何收集、使用、存储和保护您在使用[应用名称]即时通讯应用（以下简称"应用"）时提供的个人信息。请您在使用我们的应用前仔细阅读本隐私政策。
        </p>
      </section>

      <section id="information-collection" class="policy-section">
        <h2 class="text-xl font-semibold text-gray-700 mb-3">信息收集</h2>
        <p class="text-gray-600 leading-relaxed">
          我们可能收集的信息包括但不限于：您注册账户时提供的姓名、电话号码、电子邮箱；您使用应用时产生的聊天记录、文件传输记录；您的设备信息、位置信息（如果您允许）等。
        </p>
      </section>

      <section id="information-use" class="policy-section">
        <h2 class="text-xl font-semibold text-gray-700 mb-3">信息使用</h2>
        <p class="text-gray-600 leading-relaxed">
          我们使用收集的信息来提供、维护和改进应用功能；开发新功能和服务；理解用户偏好和使用习惯；保障应用安全；以及向您提供个性化的内容和推荐。
        </p>
      </section>

      <section id="information-sharing" class="policy-section">
        <h2 class="text-xl font-semibold text-gray-700 mb-3">信息共享</h2>
        <p class="text-gray-600 leading-relaxed">
          我们不会向第三方共享您的个人信息，除非：获得您的明确许可；法律要求；保护我们的合法权益；与关联公司或合作伙伴共享（但他们必须遵守本隐私政策）。
        </p>
      </section>

      <section id="security" class="policy-section">
        <h2 class="text-xl font-semibold text-gray-700 mb-3">信息安全</h2>
        <p class="text-gray-600 leading-relaxed">
          我们采用行业标准的安全技术和程序来保护您的个人信息，防止未经授权的访问、使用或泄露。但请注意，没有任何在线服务是100%安全的。
        </p>
      </section>

      <section id="children" class="policy-section">
        <h2 class="text-xl font-semibold text-gray-700 mb-3">儿童隐私</h2>
        <p class="text-gray-600 leading-relaxed">
          我们的应用不针对13岁以下的儿童。如果我们发现无意中收集了儿童的个人信息，我们将立即删除这些信息。
        </p>
      </section>

      <section id="changes" class="policy-section">
        <h2 class="text-xl font-semibold text-gray-700 mb-3">政策变更</h2>
        <p class="text-gray-600 leading-relaxed">
          我们可能会不时更新本隐私政策。当我们进行重大变更时，我们将通过应用内通知或其他适当方式通知您。请定期查看本隐私政策。
        </p>
      </section>

      <section id="contact" class="policy-section">
        <h2 class="text-xl font-semibold text-gray-700 mb-3">联系我们</h2>
        <p class="text-gray-600 leading-relaxed">
          如果您对本隐私政策有任何疑问或建议，请通过[联系邮箱/客服渠道]与我们联系。
        </p>
      </section>
    </div>

    <div class="policy-footer mt-8 pt-6 border-t border-gray-200">
      <div class="flex flex-col md:flex-row justify-between items-center">
        <div class="text-gray-500 text-sm mb-4 md:mb-0">
          最后更新时间：<span v-text="lastUpdated"></span>
        </div>
        <div class="flex space-x-4">
          <button class="text-primary hover:text-primary-dark transition-colors duration-300 text-sm font-medium">
            返回首页
          </button>
          <button class="text-primary hover:text-primary-dark transition-colors duration-300 text-sm font-medium">
            服务条款
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PrivacyPolicy',
  data() {
    return {
      lastUpdated: '2025年6月4日'
    }
  },
  computed: {
    // 可添加计算属性
  },
  methods: {
    // 可添加方法
  },
  mounted() {
    // 页面加载后的操作
    window.scrollTo(0, 0);
  }
}
</script>

<style scoped>
.policy-section {
  scroll-margin-top: 20px;
}

h2 {
  position: relative;
  padding-left: 1rem;
}

h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  background-color: #3b82f6;
  border-radius: 2px;
}

:deep(.policy-content a) {
  color: #3b82f6;
  text-decoration: underline;
  transition: color 0.3s ease;
}

:deep(.policy-content a:hover) {
  color: #1d4ed8;
}

@media (prefers-color-scheme: dark) {
  .privacy-policy-container {
    background-color: #1e293b;
  }
  
  h1, h2 {
    color: #f8fafc;
  }
  
  p, .text-gray-600 {
    color: #cbd5e1;
  }
  
  .border-gray-200 {
    border-color: #334155;
  }
  
  .text-gray-500 {
    color: #94a3b8;
  }
}
</style>