share_h5/pages/agreement.vue

<template>
  <view class="agreement">
    <!-- <navbar ref="navbar" backColor="#fff" :config="config"></navbar> -->
    <view v-html="detail.protocolContent"></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        config: {
          back: true, //false是tolbar页面 是则不写
          title: '协议',
          color: '#1A1A1A',
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, "#fff"],
          // statusBarFontColor: '#1A1A1A',
        },
        detail: {}
      }

    },
    onLoad(options) {
      let title = '协议'
      if (options.code == "user_protocol") {
        title = '用户协议'
      } else if (options.code == "privacy_protocol") {
        title = '隐私协议'
      }
      uni.setNavigationBarTitle({
        title: title
      });
      this.getDetail(options.code || 'user_protocol')
    },
    methods: {
      getDetail(code) {
        this.$http.get(`/protocol/info`, {
          code: code
        }).then(res => {
          if (res && res.code == 200) {
            this.detail = res.data
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  * {
    word-break: break-all;
  }

  .agreement {
    padding: 30rpx;

    .top /deep/ img {
      max-width: 100%;
    }

    .top /deep/ .ql-align-center {
      text-align: center;
    }

    .top /deep/ .ql-align-right {
      text-align: right;
    }

    .top /deep/ blockquote {
      display: block;
      border-left: 8px solid #d0e5f2;
      padding: 5px 10px;
      margin: 10px 0;
      line-height: 1.4;
      font-size: 100%;
      background-color: #f1f1f1;
    }

    .top /deep/ .ql-indent-1 {
      margin-left: 60rpx;
    }

    .top /deep/ .ql-indent-2 {
      margin-left: 120rpx;
    }

    .top /deep/ .ql-indent-3 {
      margin-left: 180rpx;
    }

    .top /deep/ .ql-indent-4 {
      margin-left: 240rpx;
    }

    .top /deep/ .ql-indent-5 {
      margin-left: 300rpx;
    }
  }

  .title-item {
    img {
      width: 690rpx;
      height: 390rpx;
    }
  }

  .top {
    padding: 30rpx;

    .item {
      font-size: 28rpx;
      font-weight: 700;
      color: #050505;
      line-height: 40rpx;
    }

    .content {
      padding: 0 14rpx 26rpx 14rpx;
      font-size: 24rpx;
      color: #666666;
      font-weight: 500;
      line-height: 48rpx;
    }

    .title {
      font-size: 26rpx;
      font-weight: 700;
      color: #050505;
      line-height: 40rpx;
    }

    .title-item {
      color: #666666;
      font-weight: 500;
      line-height: 48rpx;
      font-size: 24rpx;
      padding: 0 14rpx;
    }
  }

  .top {
    .item {
      font-size: 28rpx;
      font-weight: 700;
      color: #050505;
      line-height: 40rpx;
    }

    .content {
      padding: 0 14rpx 26rpx 14rpx;
      font-size: 24rpx;
      color: #666666;
      font-weight: 500;
      line-height: 48rpx;
    }

    .title {
      font-size: 26rpx;
      font-weight: 700;
      color: #050505;
      line-height: 40rpx;
    }

    .title-item {
      color: #666666;
      font-weight: 500;
      line-height: 48rpx;
      font-size: 24rpx;
      padding: 0 14rpx;
    }
  }
</style>