car-wash-java/car-wash-mp/src/pages-user/agreement/index.vue

<template>
  <div class="user-agreement">
    <div class="agreement-container">
<!--      <h1>用户协议</h1>-->
      <div class="agreement-content">
        <view style="text-indent: 20px">
          欢迎使用 [Yeswash洗车]！在使用本小程序之前，请您仔细阅读并理解以下用户协议的全部条款。使用本小程序，即表示您已阅读、理解并同意本协议的全部条款，并愿意遵守本协议的约束。
        </view>
        <view class="h2">一、协议的范围</view>
        <p>
          本用户协议（以下简称“本协议”）是您（以下称为“用户”）与 [深圳市超级进化科技有限公司]（以下称为“我们”）之间关于使用本小程序的法律协议。
        </p>
        <view class="h2">二、用户资格</view>
        <p>
          用户必须是具有完全民事行为能力的自然人，或者是具有合法经营资格的法人或其他组织。如果您是无民事行为能力人或限制民事行为能力人，请在法定监护人的陪同下使用本小程序，并确保您的行为在法定监护人的监督和允许范围内。
        </p>
        <view class="h2">三、用户账号与密码</view>
        <p>
          用户在使用本小程序时需要注册一个账号。用户应自行负责账号的安全，并对使用该账号进行的所有活动承担全部责任。用户不得将账号转让、出借或以其他方式提供给第三方使用。
        </p>
        <view class="h2">四、用户权利与义务</view>
        <p>
          用户有权按照本协议的约定使用本小程序提供的各项服务，并享有本小程序提供的各种权益和优惠。用户应遵守中华人民共和国相关法律法规，不得利用本小程序从事任何违法、违规或不道德的活动。
        </p>
        <view class="h2">五、我们的权利与义务</view>
        <p>
          我们有权根据法律法规的要求和本小程序的运营需要，对本协议的内容进行修改和更新，并在本小程序上进行公示。用户在继续使用本小程序时，应遵守修改后的协议内容。
        </p>
        <view class="h2">六、知识产权</view>
        <p>
          本小程序的全部内容，包括但不限于文字、图片、音频、视频、软件、商标、标识等，均受中华人民共和国法律法规和国际知识产权法律的保护。未经我们事先书面同意，用户不得以任何方式复制、修改、传播、出售、出租、转让、许可或以其他方式使用本小程序的任何内容。
        </p>
        <view class="h2">七、免责声明</view>
        <p>
          用户明确同意使用本小程序的风险由用户自行承担。本小程序提供的服务是按照现有技术和条件所能达到的现状提供的，我们不保证本小程序的服务不会中断、延迟、丢失数据或出现其他技术问题。
        </p>
        <view class="h2">八、违约责任</view>
        <p>
          如果用户违反本协议的任何条款，我们将有权采取相应的措施，包括但不限于警告、限制服务、暂停账号、终止服务等，并有权要求用户赔偿因此给我们造成的损失。
        </p>
        <view class="h2">九、法律适用与争议解决</view>
        <p>
          本协议的订立、执行和解释及争议的解决均应适用中华人民共和国法律。如双方就本协议内容或其执行发生任何争议，双方应尽量友好协商解决；协商不成时，任何一方均可向我们所在地有管辖权的人民法院提起诉讼。
        </p>
        <view class="h2">十、其他</view>
        <p>
          本协议的任何条款无论因何种原因无效或不具可执行性，其余条款仍应有效并具有约束力。
        </p>
      </div>
      <div class="agreement-buttons">
<!--        <button @click="agree">同意</button>
        <button @click="disagree">不同意</button>-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserAgreement",
  methods: {
    agree() {
      // 用户同意协议，可以跳转到下一步或记录用户同意状态
      this.$emit("agreed");
    },
    disagree() {
      // 用户不同意协议，可以提示用户或关闭页面
      this.$emit("disagreed");
    },
  },
};
</script>

<style scoped>
.user-agreement {
  display: flex;
  justify-content: center;
  align-items: center;
  /*height: 100vh;*/
  background-color: $uni-bg-color-page;
}

.agreement-container {
  width: 90%;
  max-width: 600px;
  background-color: $uni-bg-color-card;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.agreement-content {
  margin-bottom: 20px;
}

.agreement-content view {
  font-size: 18px;
  margin: 20px 0 10px;
}

.agreement-content p {
  font-size: 14px;
  line-height: 1.5;
}

.agreement-buttons {
  display: flex;
  justify-content: space-between;
}

.agreement-buttons button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.agreement-buttons button:first-child {
  background-color: #4caf50;
  color: #fff;
}

.agreement-buttons button:last-child {
  background-color: #f44336;
  color: #fff;
}

.h2{
  font-weight: 600;
}
</style>