shangfutong-ui/jeepay-ui-uapp-agent/pages/login/privacyPolicy.vue

<template>
  <view class="content">
    <!-- #ifdef APP || H5 -->
    <web-view src="/static/privacy.html"></web-view>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN  -->
    <mp-html :content="content.nodes" />
    <!-- #endif -->
  </view>
</template>

<script setup>
import { ref, reactive } from "vue"
import { $getTreaty } from "@/http/apiManager.js"
import { onLoad } from "@dcloudio/uni-app"
import parseHtml from "@/util/html-parse.js"

let content = reactive({
  nodes: ``,
})
function formatTable(content) {
  if (content) {
    content = content.replace(/<br[^>]*\/>/gi, "")
    content = content.replace(/<td[^<>]*>/gi, '<td style="padding:0px;height:auto;word-break:break-all;">')
    content = content.replace(/<td[^<>]*>\s*?<p>/gi, "<td>")
    content = content.replace(
      /<table[^>]*>/gi,
      '<table cellpadding="0" cellspacing="0" max-width="100%" border="1" style="font-size:12px;max-width:100%; text-align:left;text-indent: 0em;line-height:12px;"'
    )
    return content
  } else {
    return null
  }
}
onLoad(() => {
  $getTreaty().then(({ bizData }) => {
    content.nodes = bizData.agentPrivacyPolicy
  })
})
</script>

<style lang="scss" scoped>
.content {
  box-sizing: border-box;
  padding: 0 50rpx;
  .first-title {
    text {
      font-size: 33rpx;
    }
  }
  .first-title,
  .second-title,
  .third-title {
    margin-bottom: 20rpx;
    text {
      font-weight: 700;
      letter-spacing: 0.07em;
    }
  }
  .second-title {
    text {
      font-size: 28rpx;
    }
  }
  .third-title {
    text {
      font-size: 26rpx;
    }
  }
  .paragraph {
    margin-bottom: 50rpx;
    text {
      font-weight: 500;
      font-size: 25rpx;
      letter-spacing: 0.07em;
      line-height: 50rpx;
    }
    .link {
      color: #175be6;
    }
  }
  .three-item {
    .item-text {
      margin-bottom: 30rpx;
      text {
        font-weight: 500;
        font-size: 25rpx;
      }
    }
  }
  .h-table {
    margin-bottom: 50rpx;
    /* 行 */
    .h-tr {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: stretch;
      align-content: center;

      border-color: #ccc;
      border-style: solid;
      border-width: 0;
      border-top-width: 1px;
      border-left-width: 1px;
      border-bottom-width: 1px;
      color: #333;
    }
    /* 单元格 */
    .h-td {
      font-size: 24rpx;
      box-sizing: border-box;
      padding: 3px;
      word-break: break-all;
      border-color: #ccc;
      border-style: solid;
      border-width: 0;
      border-right-width: 1px;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      align-content: center;
      min-height: 64rpx;
      width: 25%;
      /* 跨列 */
      &-colspan {
        flex-grow: 1;
        width: 0;
      }

      /* 内容顶部对齐 */
      &-top {
        align-items: flex-start;
        align-content: flex-start;
      }
      /* 内容底部对齐 */
      &-bottom {
        align-items: flex-end;
        align-content: flex-end;
      }
      /* 内容左边对齐 */
      &-left {
        justify-content: flex-start;
      }
      /* 内容右边对齐 */
      &-right {
        justify-content: flex-end;
      }
    }
    /* 表头 */
    .h-thead {
      background-color: #e6e6e6;
    }

    /* 表格虚线 */
    &-dashed {
      .h-tr {
        border-top-style: dashed;
        border-left-style: dashed;
        border-bottom-style: dashed;
      }
      .h-td {
        border-right-style: dashed;
      }
    }

    /* 表格主题 Map，颜色摘自 Bootstrap */
    $theme-table: (
      primary: (
        color: #fff,
        bgColor: #337ab7,
        border: #2e6da4,
      ),
      success: (
        color: #fff,
        bgColor: #5cb85c,
        border: #4cae4c,
      ),
      info: (
        color: #fff,
        bgColor: #5bc0de,
        border: #46b8da,
      ),
      warning: (
        color: #fff,
        bgColor: #f0ad4e,
        border: #eea236,
      ),
      danger: (
        color: #fff,
        bgColor: #d9534f,
        border: #d43f3a,
      ),
    );

    /* 生成主题代码 */
    $theme-table-keys: map-keys($theme-table);
    @each $k in $theme-table-keys {
      $item: map-get($theme-table, $k);
      &-#{$k} {
        .h-tr {
          border-top-color: map-get($item, border);
          border-left-color: map-get($item, border);
          border-bottom-color: map-get($item, border);
          color: map-get($item, bgColor);
        }
        .h-td {
          border-right-color: map-get($item, border);
        }
        .h-thead {
          background-color: map-get($item, bgColor);
          color: map-get($item, color);
        }
      }
    }
  }
}
</style>