<template>
  <view class="page">
    <view class="header">
      <text class="title">用户服务协议</text>
      <text class="subtitle">更新日期：2023年10月24日</text>
    </view>

    <view class="section">
      <view class="section-title">一、前言</view>
      <view class="card">
        <text class="text">欢迎您使用我们的服务。本协议是您与平台之间关于使用本服务所订立的权利义务规范。</text>
        <text class="text">在注册或使用本服务前，请您务必审慎阅读并充分理解本协议内容。继续使用即表示您已阅读、理解并接受本协议全部内容。</text>
      </view>
    </view>

    <view class="section">
      <view class="section-title">二、服务内容</view>
      <view class="list">
        <text class="text">1. 本平台向用户提供信息展示、内容服务等功能，具体以实际提供为准。</text>
        <text class="text">2. 我们有权根据业务发展需要，对服务内容进行调整或升级。</text>
      </view>
      <view class="notice">部分增值服务可能涉及收费，我们将进行明确提示。</view>
    </view>

    <view class="section">
      <view class="section-title">三、用户行为规范</view>
      <view class="card">
        <view class="row">
          <text class="dot"></text>
          <text class="text">妥善保管账号与信息，对账号下的行为承担责任。</text>
        </view>
        <view class="row">
          <text class="dot"></text>
          <text class="text">不得利用本服务从事违法违规活动。</text>
        </view>
        <view class="row">
          <text class="dot"></text>
          <text class="text">尊重他人合法权益与知识产权。</text>
        </view>
      </view>
    </view>

    <view class="section">
      <view class="section-title">四、免责声明</view>
      <view class="card light">
        <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;
  margin-bottom: 16rpx;
}

.list .text {
  margin-bottom: 10rpx;
}

.notice {
  margin-top: 16rpx;
  padding: 16rpx 20rpx;
  border-left: 6rpx solid #ec5b13;
  background: rgba(236, 91, 19, 0.08);
  border-radius: 12rpx;
  font-size: 24rpx;
  color: #b4541f;
}

.row {
  display: flex;
  align-items: flex-start;
  gap: 12rpx;
  margin-bottom: 12rpx;
}

.dot {
  width: 10rpx;
  height: 10rpx;
  border-radius: 5rpx;
  background: #ec5b13;
  margin-top: 10rpx;
}
</style>
