sso-ssr/pages/common/cityAgreement.vue

<template>
  <div>
    <template>
      <div>
        <accountCenter-header/>
      </div>
      <div class="x-content">
        <div class="container">
          <div class="x-form-wrap">
            <%--优软云协议开始--%>
            <div class="rules-content" v-html="agreementUrl.term"></div>
          </div>
        </div>
      </div>
    </template>
    <div v-html="loginStyle.footUrl" style="margin: 50px 0;"></div>
  </div>
</template>
<script>
  import AccountCenterHeader from '~components/default/AccountCenterHeader.vue'
  export default {
    layout (context) {
      return context.store.state.option.isMobile ? 'mobile' : 'isCityFooter'
    },
    components: {
      AccountCenterHeader
    },
    fetch ({store, route}) {
      return Promise.all([
        store.dispatch('GetLoginStyle', {appId: route.query.appId}),
        store.dispatch('GetAgreementUrl', {appId: route.query.appId})
      ])
    },
    computed: {
      isMobile () {
        return this.$store.state.option.isMobile
      },
      loginStyle () {
        return this.$store.state.login.loginStyle.data.content
      },
      agreementUrl () {
        console.log('agreementUrl', this.$store.state.login.agreementUrl.data.content)
        return this.$store.state.login.agreementUrl.data.content
      }
    }
  }
</script>
<style lang="scss" scoped>
  .w-form-wrap {
    padding: .2rem;
    background: #fff;
    border: 1px solid #e4ecf3;
    padding-bottom: .4rem;
    .rules-content {
      width: 100%;
      margin: 0 auto;
      h3 {
        font-size: 14px;
        font-weight: bold;
        line-height: 80px;
        text-align: center;
        margin-bottom: 0;
        color: #333;
      }
      .content {
        width: 98%;
        margin: 0 auto;
        font-size: 14px;
        color: #333;
        p {
          font-size: 14px;
          color: #333;
          margin-bottom: 0;
          line-height: 35px;
          strong{
            font-weight: bold;
          }
        }
        div {
          line-height: 35px;
        }
      }
    }
  }
  .x-content {
    position: relative;
    margin-top: 30px;
    .container{
      width: 990px!important;
      position: relative;
      .x-form-wrap {
        padding: 20px;
        background: #fff;
        border: 1px solid #e4ecf3;
        padding-bottom: 40px;
        .rules-content {
          width: 100%;
          margin: 0 auto;
          h3 {
            font-size: 18px;
            font-weight: bold;
            line-height: 80px;
            text-align: center;
            margin-bottom: 0;
            color: #333;
          }
          .content {
            width: 98%;
            margin: 0 auto;
            font-size: 14px;
            color: #333;
            p {
              font-size: 14px;
              color: #333;
              margin-bottom: 0;
              /* text-indent: 2em; */
              line-height: 35px;
              strong{
                font-weight: bold;
              }
            }
            div {
              line-height: 35px;
            }
          }
        }
      }
    }
  }
</style>