xinkeaboard/xinkeaboard-web/pages/member/login/agreement.vue

<template>
  <div class="sld_login">
    <div class="sld_login_header">
      <div class="content">
        <router-link tag="a" class="l_logo" :to="`/`">
          <img
            class="img"
            :src="configInfo.main_site_logo"
            :onerror="defaultImg"
            alt
          />
        </router-link>
        <div class="r_register_wrap">
          {{ L["我已知悉？"] }}
          <a class="go_register_btn" @click="goRegister">
            {{ L["去注册"] }}
          </a>
        </div>
      </div>
    </div>
    <div class="agreement_container">
      <h2 class="agreement_title">{{ agreeContent.title }}</h2>
      <pre class="agreement_content" v-html="agreeContent.content"></pre>
    </div>
  </div>
</template>

<script setup>
import { useUserInfo } from "@/store/user.js";
// import { lang_zn } from "@/assets/language/zh";
import { getCurLanguage } from '@/composables/common.js';
// const L = lang_zn;
const L = getCurLanguage();
const configInfo = useUserInfo();
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const defaultImg = ref("/common_top_logo.png");
const agreeContent = reactive({
  content: "",
  title: "",
});
const agreementCode = reactive({
  agreementCode:
    route.query.type == 1 ? "register_agreement" : "privacy_policy", // register_agreement 用户协议  privacy_policy 隐私协议
});
const getInitData = async () => {
    const {data:value} = await useFetchRaw(apiUrl + 'v3/system/front/agreement/detail',{params:agreementCode})
    const res = value._rawValue
    if (res.state == 200) {
      agreeContent.content = quillEscapeToHtml(res.data.content);
      agreeContent.title = res.data.title;
    }
};


const goRegister = () => {
    if(process.client){
        window.close();
    }
};

onMounted(() => {
    nextTick(()=>{
        getInitData()
    })

})

</script>
<style lang="scss" scoped>
@use "@/assets/style/agreement.scss" as *;
.agreement_container {
  width: 800px;
}
.agreement_content {
  font-size: 15px;
  line-height: 35px;
  white-space: normal;
  word-break: break-all;
}
</style>
<style lang="scss">
  .agreement_content {
  img {
    max-width: 100%;
  }

  a {
    display: inline-block;
    margin: 5px auto;
    color: #0000ff;
    text-decoration: underline;
  }

  table {
    border-collapse: collapse;
    padding: 0;
  }
  td,
  th {
    border: 1px solid #ddd;
    padding: 5px 10px;
  }

  ol li,
  ul li {
    list-style: unset;
  }
}
</style>