<template>
  <div class="ServiceTerms" v-loading="loading">



      <!-- 动态内容区域 - 从后端获取的文档内容 -->
      <section class="content">
        <div v-if="loading" class="loading-container">
          <el-icon class="is-loading">
            <i class="el-icon-loading"></i>
          </el-icon>
          <span class="loading-text">{{ $t(`ServiceTerms.loadingText`) || "正在加载文档内容..." }}</span>
        </div>

        <div v-else-if="info && info.trim()" class="dynamic-content" v-html="info"></div>

        <!-- 如果没有动态内容，显示提示信息 -->
        <div v-else class="no-content">
          <p>{{ $t(`ServiceTerms.noContent`) || "暂无自定义文档内容" }}</p>
        </div>
      </section>



<!-- 
         <section v-if="$isMobile">
          <h4 >{{ $t(`ServiceTerms.title`) }}</h4>

            <section class="clauseBox">
              <h5>{{ $t(`ServiceTerms.title1`) }}</h5>
              <div class="textBox">
                <p>{{ $t(`ServiceTerms.clauseTotal1`) }}</p>
                <p>{{ $t(`ServiceTerms.clauseTotal2`) }}</p>
                <p>{{ $t(`ServiceTerms.clauseTotal3`) }}</p>
                <p>{{ $t(`ServiceTerms.clauseTotal4`) }}</p>
              </div>
            </section>

            <section class="clauseBox">
              <h5>{{ $t(`ServiceTerms.title2`) }}</h5>
              <div class="textBox">
                <p>{{ $t(`ServiceTerms.clauseService1`) }}</p>
                <p>{{ $t(`ServiceTerms.clauseService2`) }}</p>
               
                <p style="text-align: justify;"><span style="font-weight: 600 ;text-align: justify;">{{ $t(`ServiceTerms.clauseService3`) }} </span>{{ $t(`ServiceTerms.clauseService4`) }}</p>
              </div>
            </section>

            <section class="clauseBox">
              <h5>{{ $t(`ServiceTerms.title3`) }}</h5>
              <div class="textBox">
                <p>{{ $t(`ServiceTerms.clauseUser1`) }}</p>
                <p>{{ $t(`ServiceTerms.clauseUser2`) }}</p>
                <p>{{ $t(`ServiceTerms.clauseUser3`) }}</p>
              </div>
            </section>
            <section class="clauseBox">
              <h5>{{ $t(`ServiceTerms.title4`) }}</h5>
              <div class="textBox">
                <p>{{ $t(`ServiceTerms.clauseResponsibility1`) }}</p>
                <p>{{ $t(`ServiceTerms.clauseResponsibility2`) }}</p>
                <p>{{ $t(`ServiceTerms.clauseResponsibility3`) }}</p>
                <p>{{ $t(`ServiceTerms.clauseResponsibility4`) }}</p>
                <p>{{ $t(`ServiceTerms.clauseResponsibility5`) }}</p>
              </div>
            </section>

            <section class="clauseBox">
              <h5>{{ $t(`ServiceTerms.title5`) }}</h5>
              <div class="textBox">
                <p>{{ $t(`ServiceTerms.clausePayment1`) }}</p>
                <p>{{ $t(`ServiceTerms.clausePayment2`) }}</p>
                <p>{{ $t(`ServiceTerms.clausePayment3`) }}</p>
              </div>
            </section>
            <section class="clauseBox">
              <h5>{{ $t(`ServiceTerms.title6`) }}</h5>
              <div class="textBox">
                <p>{{ $t(`ServiceTerms.clauseProfit1`) }}</p>
                <p>{{ $t(`ServiceTerms.clauseProfit2`) }}</p>
              </div>
            </section>

            <section class="clauseBox">
              <h5>{{ $t(`ServiceTerms.title7`) }}</h5>
              <div class="textBox">
                <p>{{ $t(`ServiceTerms.clausePrivacy1`) }}</p>
                <p>{{ $t(`ServiceTerms.clausePrivacy2`) }}</p>
              </div>
            </section>

            <section class="clauseBox">
              <h5>{{ $t(`ServiceTerms.title8`) }}</h5>
              <div class="textBox">
                <p>{{ $t(`ServiceTerms.clausePropertyRight1`) }}</p>
                <p>{{ $t(`ServiceTerms.clausePropertyRight2`) }}</p>
              </div>
            </section>

            <section class="clauseBox">
              <h5>{{ $t(`ServiceTerms.title9`) }}</h5>
              <div class="textBox">
                <p>{{ $t(`ServiceTerms.clauseDisclaimer1`) }}</p>
                <p>{{ $t(`ServiceTerms.clauseDisclaimer2`) }}</p>
              </div>
            </section>

            <section class="clauseBox">
              <h5>{{ $t(`ServiceTerms.title10`) }}</h5>
              <div class="textBox">
                <p>{{ $t(`ServiceTerms.clauseTermination1`) }}</p>
                <p>{{ $t(`ServiceTerms.clauseTermination2`) }}</p>
              </div>
            </section>
          

         </section>


      <section v-else>
        <h2 >{{ $t(`ServiceTerms.title`) }}</h2>

        <section class="clauseBox">
          <h3>{{ $t(`ServiceTerms.title1`) }}</h3>
          <div class="textBox">
            <p>{{ $t(`ServiceTerms.clauseTotal1`) }}</p>
            <p>{{ $t(`ServiceTerms.clauseTotal2`) }}</p>
            <p>{{ $t(`ServiceTerms.clauseTotal3`) }}</p>
            <p>{{ $t(`ServiceTerms.clauseTotal4`) }}</p>
          </div>
        </section>

        <section class="clauseBox">
          <h3>{{ $t(`ServiceTerms.title2`) }}</h3>
          <div class="textBox">
            <p>{{ $t(`ServiceTerms.clauseService1`) }}</p>
            <p>{{ $t(`ServiceTerms.clauseService2`) }}</p>
       
            <p style="text-align: justify;"><span style="font-weight: 600;text-align: justify;">{{ $t(`ServiceTerms.clauseService3`) }} </span>{{ $t(`ServiceTerms.clauseService4`) }}</p>
          </div>
        </section>

        <section class="clauseBox">
          <h3>{{ $t(`ServiceTerms.title3`) }}</h3>
          <div class="textBox">
            <p>{{ $t(`ServiceTerms.clauseUser1`) }}</p>
            <p>{{ $t(`ServiceTerms.clauseUser2`) }}</p>
            <p>{{ $t(`ServiceTerms.clauseUser3`) }}</p>
          </div>
        </section>
        <section class="clauseBox">
          <h3>{{ $t(`ServiceTerms.title4`) }}</h3>
          <div class="textBox">
            <p>{{ $t(`ServiceTerms.clauseResponsibility1`) }}</p>
            <p>{{ $t(`ServiceTerms.clauseResponsibility2`) }}</p>
            <p>{{ $t(`ServiceTerms.clauseResponsibility3`) }}</p>
            <p>{{ $t(`ServiceTerms.clauseResponsibility4`) }}</p>
            <p>{{ $t(`ServiceTerms.clauseResponsibility5`) }}</p>
          </div>
        </section>

        <section class="clauseBox">
          <h3>{{ $t(`ServiceTerms.title5`) }}</h3>
          <div class="textBox">
            <p>{{ $t(`ServiceTerms.clausePayment1`) }}</p>
            <p>{{ $t(`ServiceTerms.clausePayment2`) }}</p>
            <p>{{ $t(`ServiceTerms.clausePayment3`) }}</p>
          </div>
        </section>
        <section class="clauseBox">
          <h3>{{ $t(`ServiceTerms.title6`) }}</h3>
          <div class="textBox">
            <p>{{ $t(`ServiceTerms.clauseProfit1`) }}</p>
            <p>{{ $t(`ServiceTerms.clauseProfit2`) }}</p>
          </div>
        </section>

        <section class="clauseBox">
          <h3>{{ $t(`ServiceTerms.title7`) }}</h3>
          <div class="textBox">
            <p>{{ $t(`ServiceTerms.clausePrivacy1`) }}</p>
            <p>{{ $t(`ServiceTerms.clausePrivacy2`) }}</p>
          </div>
        </section>

        <section class="clauseBox">
          <h3>{{ $t(`ServiceTerms.title8`) }}</h3>
          <div class="textBox">
            <p>{{ $t(`ServiceTerms.clausePropertyRight1`) }}</p>
            <p>{{ $t(`ServiceTerms.clausePropertyRight2`) }}</p>
          </div>
        </section>

        <section class="clauseBox">
          <h3>{{ $t(`ServiceTerms.title9`) }}</h3>
          <div class="textBox">
            <p>{{ $t(`ServiceTerms.clauseDisclaimer1`) }}</p>
            <p>{{ $t(`ServiceTerms.clauseDisclaimer2`) }}</p>
          </div>
        </section>

        <section class="clauseBox">
          <h3>{{ $t(`ServiceTerms.title10`) }}</h3>
          <div class="textBox">
            <p>{{ $t(`ServiceTerms.clauseTermination1`) }}</p>
            <p>{{ $t(`ServiceTerms.clauseTermination2`) }}</p>
          </div>
        </section>
 

      </section> -->
      
  </div>
</template>

<script>
import Index from './index'
export default {
  mixins: [Index],
  metaInfo: {
    meta: [
      {
        name: 'keywords',
        content: '服务条款,用户权益,权利义务,Terms of Service, User Rights, Rights and Obligations'
      },
      {
        name: 'description',
        content:window.vm.$t(`seo.ServiceTerms`)
      }
    ]
  },

}
</script>

<style lang="scss" scoped>

  // 手机端适配
@media screen and (min-width: 220px) and (max-width: 1279px) {

  .ServiceTerms{

    background: transparent !important;
    min-height: 360PX !important;
    padding: 5% !important;
    padding-top: 20px !important;
  }

  .clauseBox{
    width: 100% !important;
    min-height: 100PX;
    margin: 0 auto;
    .textBox{
      margin-top: 10px;
    }
    h5{
      margin-top: 10px;
    }
    p{
      line-height: 20PX !important;
      font-size: 0.9rem !important;
      margin-top: 8px !important;
    }
  }

 .dynamic-content :deep(p) {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important; /* 优先按单词/字符断行 */
    overflow-wrap: anywhere !important; /* 极端长串也强制换行 */
    word-wrap: break-word !important; /* 旧版兼容 */
    font-size: 0.8rem !important;
  }
 .dynamic-content :deep(a) {
    font-size: 0.7rem !important;
  }
 .dynamic-content :deep(li) {
    font-size: 0.7rem !important;
  }

 .dynamic-content :deep(pre) {
    font-size: 0.7rem !important;
  }

.dynamic-content :deep(font) {
    font-size: 0.7rem !important;
  }
.dynamic-content :deep(h2) {
    font-size: 1rem !important;
  }

 .dynamic-content :deep(h3) {
    font-size: 0.9rem !important;
  }

  // 移动端动态内容样式
  .content {
    margin-bottom: 20px !important;
    
    // 移动端加载状态样式
    .loading-container {
      width: 100% !important;
      margin: 20px auto !important;
      padding: 20px 0 !important;
      
      .el-icon {
        font-size: 20px !important;
      }
      
      .loading-text {
        font-size: 14px !important;
      }
    }
    
    // 移动端无内容样式
    .no-content {
      width: 100% !important;
      margin: 20px auto !important;
      padding: 20px 0 !important;
      
      p {
        font-size: 14px !important;
      }
    }
    
    .dynamic-content {
      width: 100% !important;
      padding: 10px !important;
      /* 统一控制富文本行距与段落间距（移动端） */
      --dc-line-height: 1.8;  /* 行距：1.6~2 可按需调整 */
      --dc-p-margin: 0.6em;   /* 段落上下间距 */
      
      // 确保HTML标签正确渲染
      :deep(strong) {
        font-weight: bold !important;
        color: inherit !important;
        font-style: normal !important;
      }
      
      :deep(b) {
        font-weight: bold !important;
        color: inherit !important;
        font-style: normal !important;
      }
      
      :deep(em) {
        font-style: italic !important;
        color: inherit !important;
      }
      
      :deep(i) {
        font-style: italic !important;
        color: inherit !important;
      }
      
      :deep(code) {
        background-color: #f5f5f5 !important;
        padding: 2px 4px !important;
        border-radius: 3px !important;
        font-family: 'Courier New', monospace !important;
        font-size: 0.9em !important;
      }
      
      :deep(del) {
        text-decoration: line-through !important;
        color: #666 !important;
      }
      
      :deep(a) {
        color: #007bff !important;
        text-decoration: none !important;
        
        &:hover {
          text-decoration: underline !important;
        }
      }

      :deep(p) {
        text-align: justify !important;
        text-justify: inter-ideograph !important;
        line-height: var(--dc-line-height) !important;
        margin: var(--dc-p-margin) 0 !important;
        /* 英文按单词换行，避免拆词；超长连续单词在必要时断行 */
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important; /* 现代浏览器 */
        word-wrap: break-word !important;      /* 旧版兼容 */
        hyphens: none;
      }
      :deep(div) {
        text-align: justify !important;
        text-justify: inter-ideograph !important;
        line-height: var(--dc-line-height) !important;
        margin: var(--dc-p-margin) 0 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        hyphens: none;
      }
    }
  }


}



  .ServiceTerms{
    width: 100%;
    min-height: 600PX;
    background: #fff;
    background-image: url(../../assets/img/miningAccount/top.png);
    background-size: 100% 50%;
    background-repeat: no-repeat;
    background-position: 30% -15%;
    padding: 0;
    margin: 0;
    padding-top: 60PX;

    h2{
      width: 70%;
      margin: 0 auto;
      margin-bottom: 30PX;
    }

  }
  .clauseBox{
    width: 70%;
    min-height: 100PX;
    margin: 0 auto;
    p{
      line-height: 28PX;
    }
  }

  // 动态内容样式
  .content {
    width: 100%;
    margin-bottom: 40px;
    
    // 加载状态样式
    .loading-container {
      width: 70%;
      margin: 40px auto;
      text-align: center;
      padding: 40px 0;
      
      .el-icon {
        font-size: 24px;
        color: #409eff;
        margin-right: 8px;
      }
      
      .loading-text {
        font-size: 16px;
        color: #666;
        vertical-align: middle;
      }
    }
    
    // 无内容样式
    .no-content {
      width: 70%;
      margin: 40px auto;
      text-align: center;
      padding: 40px 0;
      
      p {
        font-size: 16px;
        color: #999;
        margin: 0;
      }
    }
    
    .dynamic-content {
      width: 70%;
      margin: 0 auto;
      padding: 20px 0;
      /* 统一控制富文本行距与段落间距（桌面端） */
      --dc-line-height: 1.8;  /* 行距：1.6~2 可按需调整 */
      --dc-p-margin: 0.6em;   /* 段落上下间距 */
      
      // 确保HTML标签正确渲染
      :deep(strong) {
        font-weight: bold !important;
        color: inherit !important;
        font-style: normal !important;
      }
      
      :deep(b) {
        font-weight: bold !important;
        color: inherit !important;
        font-style: normal !important;
      }
      
      :deep(em) {
        font-style: italic !important;
        color: inherit !important;
      }
      
      :deep(i) {
        font-style: italic !important;
        color: inherit !important;
      }
      
      :deep(code) {
        background-color: #f5f5f5 !important;
        padding: 2px 4px !important;
        border-radius: 3px !important;
        font-family: 'Courier New', monospace !important;
        font-size: 0.9em !important;
      }
      
      :deep(del) {
        text-decoration: line-through !important;
        color: #666 !important;
      }
      
      :deep(a) {
        color: #007bff !important;
        text-decoration: none !important;
        
        &:hover {
          text-decoration: underline !important;
        }
      }

      :deep(p) {
        text-align: justify !important;
        text-justify: inter-ideograph !important;
        line-height: var(--dc-line-height) !important;
        margin: var(--dc-p-margin) 0 !important;
        /* 英文按单词换行，避免拆词；超长连续单词在必要时断行 */
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important; /* 现代浏览器 */
        word-wrap: break-word !important;      /* 旧版兼容 */
        hyphens: none;
      }
      :deep(div) {
        text-align: justify !important;
        text-justify: inter-ideograph !important;
        line-height: var(--dc-line-height) !important;
        margin: var(--dc-p-margin) 0 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        hyphens: none;
      }
    }
  }

</style>