155 lines
3.3 KiB
Vue
155 lines
3.3 KiB
Vue
<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>
|