magic_node_web/src/views/privacy/index.vue

<template>
  <div class="privacy-page">
    <div class="header">
      <van-icon name="arrow-left" @click="goBack" />
      <span>{{ $t('privacy.title') }}</span>
      <span></span>
    </div>

    <div class="content">
      <div class="section">
        <h2>{{ $t('privacy.heading') }}</h2>
      </div>

      <!-- 1. 我们收集哪些信息（两段文字） -->
      <div class="section">
        <h3>{{ $t('privacy.section1Title') }}</h3>
        <p>{{ $t('privacy.section1P1') }}</p>
        <p>{{ $t('privacy.section1P2') }}</p>
      </div>

      <!-- 2. 如何使用信息（含列表） -->
      <div class="section">
        <h3>{{ $t('privacy.section2Title') }}</h3>
        <p>{{ $t('privacy.section2Intro') }}</p>
        <ul>
          <li>{{ $t('privacy.section2Item1') }}</li>
          <li>{{ $t('privacy.section2Item2') }}</li>
          <li>{{ $t('privacy.section2Item3') }}</li>
        </ul>
      </div>

      <!-- 3. 是否分享数据 -->
      <div class="section">
        <h3>{{ $t('privacy.section3Title') }}</h3>
        <p>{{ $t('privacy.section3Content') }}</p>
      </div>

      <!-- 4. 您的选择（含列表） -->
      <div class="section">
        <h3>{{ $t('privacy.section4Title') }}</h3>
        <ul>
          <li>{{ $t('privacy.section4Item1') }}</li>
          <li>{{ $t('privacy.section4Item2') }}</li>
          <li>{{ $t('privacy.section4Item3') }}</li>
        </ul>
      </div>

      <!-- 5. 安全 -->
      <div class="section">
        <h3>{{ $t('privacy.section5Title') }}</h3>
        <p>{{ $t('privacy.section5Content') }}</p>
      </div>

      <!-- 6. 变更 -->
      <div class="section">
        <h3>{{ $t('privacy.section6Title') }}</h3>
        <p>{{ $t('privacy.section6Content') }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();
const goBack = () => {
  router.back();
};
</script>

<style lang="scss" scoped>
.privacy-page {
  min-height: 100vh;
  background: var(--bg-primary, #121212);
  color: var(--text-primary, #fff);
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  color: var(--text-primary, #fff);
  font-size: 16px;
  font-weight: 600;

  .van-icon {
    font-size: 20px;
    cursor: pointer;
  }
}

.content {
  padding: 0 20px 40px;

  .section {
    margin-bottom: 20px;

    h2 {
      font-size: 20px;
      margin-bottom: 16px;
      color: var(--text-primary, #fff);
    }

    h3 {
      font-size: 16px;
      margin-bottom: 8px;
      color: var(--text-primary, rgba(255, 255, 255, 0.9));
    }

    p {
      font-size: 14px;
      line-height: 1.8;
      color: var(--text-primary, rgba(255, 255, 255, 0.7));
      margin-bottom: 8px;
    }

    ul {
      margin: 8px 0 0 20px;
      padding: 0;

      li {
        font-size: 14px;
        line-height: 1.8;
        color: var(--text-primary, rgba(255, 255, 255, 0.7));
        margin-bottom: 4px;
      }
    }
  }
}
</style>