<template>
  <view class="page">
    <view class="header">
      <text class="title">隐私保护指引</text>
      <text class="subtitle">我们非常重视您的个人信息保护</text>
    </view>

    <view class="section">
      <view class="section-title">一、我们如何收集信息</view>
      <view class="card">
        <view class="item">
          <text class="badge">必需</text>
          <view class="content">
            <text class="item-title">账号基础信息</text>
            <text class="item-desc">手机号码、头像、昵称等用于身份验证的信息。</text>
          </view>
        </view>
        <view class="item">
          <text class="badge">必需</text>
          <view class="content">
            <text class="item-title">设备及网络信息</text>
            <text class="item-desc">设备型号、系统版本、网络状态等。</text>
          </view>
        </view>
        <view class="item">
          <text class="badge">可选</text>
          <view class="content">
            <text class="item-title">位置及日志信息</text>
            <text class="item-desc">在使用特定功能时，经您授权收集的位置信息。</text>
          </view>
        </view>
      </view>
    </view>

    <view class="section">
      <view class="section-title">二、我们如何使用信息</view>
      <view class="card light">
        <text class="text">用于提供核心服务、身份验证、安全防护与产品改进。</text>
      </view>
    </view>

    <view class="section">
      <view class="section-title">三、我们如何共享信息</view>
      <view class="card">
        <text class="text">我们不会向第三方转让您的个人信息，除非获得您的明确同意或法律法规另有规定。</text>
      </view>
    </view>

    <view class="section">
      <view class="section-title">四、您的权利</view>
      <view class="card">
        <text class="text">您有权访问、更正或删除您的个人信息，并可随时撤回授权。</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {};
</script>

<style scoped>
.page {
  min-height: 100vh;
  padding: 32rpx 32rpx 80rpx;
  background: #f8f6f6;
  color: #1f2d3d;
}

.header {
  padding: 12rpx 0 32rpx;
}

.title {
  font-size: 40rpx;
  font-weight: 700;
}

.subtitle {
  display: block;
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #7a8699;
}

.section {
  margin-top: 32rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: 600;
  margin-bottom: 16rpx;
}

.card {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 12rpx 24rpx rgba(15, 33, 66, 0.06);
}

.card.light {
  background: #f1f3f6;
}

.text {
  font-size: 26rpx;
  color: #4b5565;
  line-height: 1.7;
}

.item {
  display: flex;
  gap: 16rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eef0f4;
  margin-bottom: 20rpx;
}

.item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.badge {
  min-width: 72rpx;
  height: 36rpx;
  background: rgba(236, 91, 19, 0.12);
  color: #b4541f;
  border-radius: 18rpx;
  font-size: 22rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  flex: 1;
}

.item-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #2f3a4a;
}

.item-desc {
  font-size: 24rpx;
  color: #7a8699;
  margin-top: 6rpx;
}
</style>
