<template>
  <div class="ServiceTerms">
         <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><span style="font-weight: 600;">{{ $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 class="clauseBox">
              <h5>{{ $t(`ServiceTerms.title11`) }}</h5>
              <div class="textBox">
                <p>{{ $t(`ServiceTerms.clauseLaw1`) }}</p>
                <p>{{ $t(`ServiceTerms.clauseLaw2`) }}</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><span style="font-weight: 600;">{{ $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 class="clauseBox">
          <h3>{{ $t(`ServiceTerms.title11`) }}</h3>
          <div class="textBox">
            <p>{{ $t(`ServiceTerms.clauseLaw1`) }}</p>
            <p>{{ $t(`ServiceTerms.clauseLaw2`) }}</p>
          </div>
        </section>

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

<script>
export default {
  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;
    }
  }


}



  .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;
    }
  }

</style>