<template>
  <div class="AccessMiningPoolMain">
    <section class="nexaAccess">
      <section v-if="$isMobile">
        <div class="mainTitle" id="table">
          <span> {{ $t(`course.RXDcourse`) }}</span>
        </div>
        <div class="tableBox">
          <div class="table-title">
            <span class="coin">{{ $t(`course.currency`) }}</span>
            <span class="coin quota">{{ $t(`course.amount`) }}</span>
          </div>
          <el-collapse v-model="activeName">
            <el-collapse-item name="1">
              <template slot="title">
                <div class="collapseTitle">
                  <span class="coinBox">
                    <img
                      style="width: 20px"
                      :src="getImageUrl(`img/rxd.png`)" 
                      alt="coin"
                      loading="lazy"
                    />radiant</span
                  >
                  <span>100</span>
                </div>
              </template>
              <div class="belowTable">
                <div>
                  <p>{{ $t(`course.TCP`) }}</p>
                  <p>
                    stratum+tcp://rxd.m2pool.com:33370
                   <span class="copy" @click="clickCopy(` stratum+tcp://rxd.m2pool.com:33370`)">{{
                      $t(`personal.copy`)
                    }}</span>
                  </p>
                </div>
                <div>
                  <p>{{ $t(`course.SSL`) }}</p>
                  <p>
                    stratum+ssl://rxd.m2pool.com:33375
                    <span class="copy" @click="clickCopy(`stratum+ssl://rxd.m2pool.com:33375`)">{{
                      $t(`personal.copy`)
                    }}</span>
                  </p>
                </div>
                <div>
                  <p>{{ $t(`course.GPU`) }}</p>
                  <p>lolminer</p>
                </div>
                <div>
                  <p>{{ $t(`course.ASIC`) }}</p>
                  <p>{{ $t(`course.dragonBall`) }}、{{ $t(`course.RX0`) }}</p>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <p id="careful">
          {{ $t(`course.careful`)
          }}<a class="mail" href="mailto:support@m2pool.com">{{
            $t(`course.mail`)
          }}</a>
          (support@m2pool.com) {{ $t(`course.careful2`) }}
        </p>

        <section class="step" id="step1">
          <div class="stepTitle">{{ $t(`course.Step1`) }}</div>
          <div class="textBox">
            <p>{{ $t(`course.accountContent1`) }}</p>
            <p>{{ $t(`course.accountContent2`) }}</p>
          </div>
        </section>
        <section class="step">
          <div class="stepTitle">{{ $t(`course.Step2`) }}</div>
          <div class="textBox">
            <p>{{ $t(`course.bindWalletText1`) }}</p>
            <p>
              &nbsp; &nbsp;<span>
                <span>{{ $t(`course.bindWalletText2`) }}</span></span
              >
              <a style="color: blueviolet" href="https://radiantblockchain.org/"
                >https://radiantblockchain.org/</a
              >, {{ $t(`course.bindWalletText3`) }}
            </p>
            <p>
              &nbsp; &nbsp;<span>{{ $t(`course.bindWalletText4`) }}</span>
              <a style="color: blueviolet" href="https://www.mxc.com/">MEXC</a
              >、
              <a
                style="color: blueviolet"
                href="https://www.coinex.com/zh-hans/"
                >CoinEx</a
              >
              {{ $t(`course.bindWalletText5`) }}
            </p>
            <p>
              &nbsp; &nbsp;<span>{{ $t(`course.bindWalletText6`) }}</span
              >{{ $t(`course.bindWalletText7`) }}
            </p>

            <p>{{ $t(`course.bindWalletText8`) }}</p>
          </div>
        </section>
        <section class="step">
          <div class="stepTitle">{{ $t(`course.Step4`) }}</div>
          <div class="textBox">
            <p>
              {{ $t(`course.parameter`)
              }}<a class="mail" href="#table"> {{ $t(`course.parameter5`) }}</a>
              {{ $t(`course.parameter6`) }}
            </p>
            <p>
              {{ $t(`course.parameter2`) }}
              <a class="mail" href="#step1"> {{ $t(`course.parameter7`) }}</a>
              {{ $t(`course.parameter8`) }}
            </p>
            <p>
              {{ $t(`course.parameter3`) }}
              <a class="mail" href="mailto:support@m2pool.com">{{
                $t(`course.mail`)
              }}</a>
              {{ $t(`course.parameter4`) }}
            </p>
          </div>
        </section>
        <section class="step">
          <div class="stepTitle">{{ $t(`course.Step3`) }}</div>
          <div class="textBox">
            <p>{{ $t(`course.rxdIncome1`) }}</p>
            <p>{{ $t(`course.miningIncome2`) }}</p>
          </div>
        </section>
      </section>

      <section class="AccessMiningPool2" v-else >
        <section class="table" >
          <div class="mainTitle">
            <img :src="getImageUrl(`img/rxd.png`)"  alt="coin" loading="lazy" /><span>
              {{ $t(`course.RXDcourse`) }}</span
            >
          </div>
          <div class="theServer">
            <div class="title" id="Server">{{ $t(`course.selectServer`) }}</div>

            <ul>
              <li class="liTitle">
                <span class="coin">{{ $t(`course.currency`) }}</span>
                <span class="coin quota">{{ $t(`course.amount`) }}</span>
                <span class="port">{{ $t(`course.TCP`) }}</span>
                <span class="port">{{ $t(`course.SSL`) }}</span>
              </li>
              <li>
                <span class="coin">
                  <img :src="getImageUrl(`img/rxd.png`)"  alt="coin" loading="lazy" />
                  <span>Rxd</span></span
                >
                <span class="coin quota">100</span>
                <span class="port">
                  stratum+tcp://rxd.m2pool.com:33370 &nbsp;<i
                    @click="clickCopy(`stratum+tcp://rxd.m2pool.com:33370`)"
                    class="iconfont icon-fuzhi"
                  ></i
                ></span>
                <span class="port">
                  stratum+ssl://rxd.m2pool.com:33375 &nbsp;
                  <i
                    @click="clickCopy(`stratum+ssl://rxd.m2pool.com:33375`)"
                    class="iconfont icon-fuzhi"
                  ></i
                ></span>
              </li>
            </ul>
            <div class="title">{{ $t(`course.Adaptation`) }}</div>

            <ul>
              <li class="liTitle">
                <span class="coin">{{ $t(`course.currency`) }}</span>
                <span class="coin quota"></span>
                <span class="port">{{ $t(`course.GPU`) }}</span>
                <span class="port">{{ $t(`course.ASIC`) }}</span>
              </li>
              <li>
                <span class="coin">
                  <img :src="getImageUrl(`img/rxd.png`)"  alt="coin" loading="lazy" />
                  <span>Rxd</span></span
                >
                <span class="coin quota"></span>
                <span class="port"> lolminer &nbsp;</span>
                <span class="port"
                  >{{ $t(`course.dragonBallA11`) }} &nbsp;、
                  {{ $t(`course.RX0`) }}</span
                >
              </li>
            </ul>
          </div>
          <p class="careful">
            {{ $t(`course.careful`)
            }}<a href="mailto:support@m2pool.com"
              >{{ $t(`course.mail`) }}:support@m2pool.com</a
            >{{ $t(`course.careful2`) }}
          </p>

          <section class="step" id="accountContent2">
            <div class="stepTitle">{{ $t(`course.Step1`) }}</div>
            <div class="textBox">
              <p>{{ $t(`course.accountContent1`) }}</p>
              <p>{{ $t(`course.accountContent2`) }}</p>
            </div>
          </section>

          <section class="step">
            <div class="stepTitle">{{ $t(`course.Step2`) }}</div>
            <div class="textBox">
              <p>{{ $t(`course.bindWalletText1`) }}</p>
              <p>
                &nbsp; &nbsp;<span>
                  <span>{{ $t(`course.bindWalletText2`) }}</span></span
                >
                <a
                  style="color: blueviolet"
                  href="https://radiantblockchain.org/"
                  >https://radiantblockchain.org/</a
                >, {{ $t(`course.bindWalletText3`) }}
              </p>
              <p>
                &nbsp; &nbsp;<span>{{ $t(`course.bindWalletText4`) }}</span>
                <a style="color: blueviolet" href="https://www.mxc.com/">MEXC</a
                >、
                <a
                  style="color: blueviolet"
                  href="https://www.coinex.com/zh-hans/"
                  >CoinEx</a
                >
                {{ $t(`course.bindWalletText5`) }}
              </p>
              <p>
                &nbsp; &nbsp;<span>{{ $t(`course.bindWalletText6`) }}</span
                >{{ $t(`course.bindWalletText7`) }}
              </p>

              <p>{{ $t(`course.bindWalletText8`) }}</p>
            </div>
          </section>

          <section class="step">
            <div class="stepTitle">{{ $t(`course.Step4`) }}</div>
            <div class="textBox">
              <p>
                {{ $t(`course.parameter`)
                }}<a href="#Server">{{ $t(`course.parameter5`) }}</a
                >{{ $t(`course.parameter6`) }}
              </p>

              <p>
                {{ $t(`course.parameter2`)
                }}<a href="#accountContent2">{{ $t(`course.parameter7`) }}</a
                >{{ $t(`course.parameter8`) }}
              </p>

              <p>
                {{ $t(`course.parameter3`) }}
                <a href="mailto:support@m2pool.com">{{ $t(`course.mail`) }}</a>
                {{ $t(`course.parameter4`) }}
              </p>
            </div>
          </section>

          <section class="step">
            <div class="stepTitle">{{ $t(`course.Step3`) }}</div>
            <div class="textBox">
                <p>{{ $t(`course.rxdIncome1`) }}</p>
              <p>{{ $t(`course.miningIncome2`) }}</p>
            </div>
          </section>
        </section>
      </section>
    </section>
  </div>
</template>
  
  <script>
import IndexJs from "./index";
export default {
  mixins: [IndexJs],
};
</script>
  
  <style lang="scss" scoped>
@media screen and (min-width: 220px) and (max-width: 1279px) {
  .AccessMiningPoolMain {
    width: 100%;
    // min-height: 100vh;
    background: transparent !important;
    // 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: 30px;
    display: flex;
    justify-content: center;
    .mail {
      color: #5917c4;
    }
  }
  .notOpen {
    width: 100%;
    display: inline-block !important;
    margin: 50px 00px;
    justify-content: center;
    padding: 0px 30px;

    p {
      // background: #D1C2E9;
      font-size: 20px !important;
      width: 100% !important;
      line-height: 50px;
      color: #6a24ff;
      text-align: center;
    }
    .imgBox {
      display: flex;
      justify-content: center;
      margin-top: 30px;
    }

    img {
      width: 80%;
    }
  }
  .currencySelect {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 8px;
    font-size: 0.85rem;
    .el-menu-demo {
      width: 100%;
    }

    .el-menu {
      background: transparent;
    }
    // .title{
    //   width: 30%;
    // }
    .coinSelect {
      img {
        width: 25px;
      }
      span {
        text-transform: capitalize;
        margin-left: 5px;
      }
    }
  }
  .moveCurrencyBox {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    min-height: 200px;
    flex-wrap: wrap;
    padding: 10px 20px;
    margin: 0 auto;
    background: #fff;

    li {
      list-style: none;
      //  width: calc(100% / 5);
      display: flex;
      flex-direction: column;
      align-items: center !important;
      margin-left: 10px;
      // background: #D2C4E8;
      // align-items: center;
      // overflow: hidden;
      padding: 5px 5px;
      box-sizing: border-box;
      // background: palegoldenrod;

      img {
        width: 25px;
      }
      p {
        min-width: 50px;
        margin-top: 8px;
        font-size: 0.85rem;
        word-wrap: break-word;
        word-break: break-all;
        text-align: center;
        text-transform: capitalize;
      }
    }
  }

  .mainTitle {
    padding: 0px 20px;
    span {
      font-size: 0.95rem;
      color: rgba(0, 0, 0, 0.7);
      font-weight: 600;
    }
  }
  .tableBox {
    margin: 0 auto;
    width: 96%;
    min-height: 300px;
    // background: palegoldenrod;
    overflow: hidden;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 20px;
    box-shadow: 0px 0px 5px 2px #ccc;
    margin-top: 10px;
    background: #fff;
    .table-title {
      height: 50px;
      background: #d2c4e8;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-weight: 600;
      padding-left: 0 !important;
      span {
        text-align: center;
      }
      span:nth-of-type(1) {
        width: 50% !important;
      }
      span:nth-of-type(2) {
        width: 50% !important;
        color: #ca094a;
        font-weight: bold;
        padding-right: 5px;
      }
    }
    .collapseTitle {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding-left: 0 !important;
      text-align: center;
      span {
        text-align: center;
      }

      span:nth-of-type(1) {
        width: 50% !important;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          margin-right: 5px;
        }
      }
      span:nth-of-type(2) {
        width: 50% !important;
        color: #ca094a;
        font-weight: bold;
      }
    }
    .belowTable {
      background: #f0e9f5;
      padding: 10px 0px;
      div {
        width: 100%;
        height: auto;
        text-align: left;
        padding-left: 8%;
        p:nth-of-type(1) {
          font-weight: 600;
        }
        p {
          word-wrap: break-word;

          .copy {
            padding: 0px 5px;
            display: inline-block;
            cursor: pointer;
            border: 1px solid #d1c2e9;
            border-radius: 5px;
            margin-left: 10px;
            font-size: 0.8rem;
          }
        }
      }
    }

    .paginationBox {
      text-align: center;
    }
  }
  #careful {
    padding: 0px 8px;
    font-size: 0.85rem;
    color: rgba(0, 0, 0, 0.7);
    line-height: 25px;
    .mail {
      color: #5917c4;
    }
  }
  .step {
    width: 99% !important;
    margin: 0 auto;
    margin-top: 3%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    padding: 15px !important;
    p {
      line-height: 25px !important;
    }
    .stepTitle {
      height: auto !important;
      width: 100%;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      line-height: 30px !important;
      font-size: 0.95rem !important;
      color: rgba(0, 0, 0, 0.6);
      font-weight: 600;
      word-wrap: break-word;
    }
    .textBox {
      padding: 10px !important;
      color: rgba(5, 32, 75, 0.6);
      font-weight: normal !important;
      font-size: 0.85rem !important;
    }
  }

  ::v-deep .el-collapse-item__content {
    padding: 0 !important;
  }
}
.nexaAccess {
  width: 100%;
  // height: 92%;
  font-size: 0.9rem;
  // overflow-y: auto;
}
.AccessMiningPool2 {
  width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  //   box-shadow: 0PX 0PX 10PX 3PX rgba(0,0,0,0.1);

  a {
    color: #8a2be2;
  }
}
.notOpen {
  // background: palegoldenrod;
  display: flex;
  margin-top: 10%;
  justify-content: center;
  p {
    // background: #D1C2E9;
    font-size: 25px;
    width: 25%;
    line-height: 50px;
    color: #6a24ff;
  }
}
.menu {
  width: 15%;
  // background: #D2C3EA
  margin-right: 30px;
  background: #ffffff;
  padding: 20px !important;
  border-radius: 8px;
  box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.1);
  ul {
    margin: 0;
    padding: 0;
    li {
      list-style: none;
      min-height: 40px;
      line-height: 40px;
      font-size: 1.1rem;
      text-align: center;
      margin-top: 8px;
      cursor: pointer;
    }
    li:hover {
      text-decoration: underline;
    }
  }
}
.active {
  color: #6924ff;
  background: #d2c3ea;
  border-radius: 5px;
}
.table {
  width: 100%;

  // margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  padding: 50px;
  .mainTitle {
    font-size: 1.5em;
    width: 100%;
    margin: 0 auto;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: left;
    img {
      width: 30px;
      margin-right: 5px;
    }
    //   span{
    //     margin-left: 5PX;

    //   }
  }
  .theServer {
    width: 100%;
    // height: 500PX;
    margin: 0 auto;
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
    padding: 10px 10px;
    margin-top: 20px;

    .title {
      width: 100%;
      padding-left: 3%;
      height: 50px;
      line-height: 50px;
      font-size: 1.3em;
      color: rgba(0, 0, 0, 0.6);
      font-weight: 600;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    ul {
      width: 100%;
      height: 90%;
      padding: 0;
      margin: 0;
      margin-top: 1%;
      li {
        list-style: none;
        height: 40px;
        line-height: 40px;
        background: #efefef;
        display: flex;
        justify-content: space-between;
        font-size: 0.9rem;
        span {
          display: inline-block;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: rgba(0, 0, 0, 0.7);
        }
        .coin {
          width: 18%;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 25px;
            margin-right: 5px;
          }
          span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .quota {
          color: #ca094a;
          font-weight: 600;
        }
        .difficulty {
          width: 10%;
        }
        .port {
          width: 35%;

          i {
            font-size: 1em;
          }
          i:hover {
            color: #6924ff;
          }
        }
        i {
          cursor: pointer;
        }
      }
      li:nth-child(even) {
        background-color: #ffff; /* 甚至可以是你想要的任何颜色 */
      }
      .liTitle {
        width: 100%;
        height: 50px;
        line-height: 50px;
        background: #d2c3ea;
        color: #36246f;
        font-size: 0.95rem;
        // span{
        //     display: inline-block;

        //     text-align: center;

        // }
        .coin {
          width: 18%;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 25px;
          }
          span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        // .difficulty{
        //     width: 10%;
        // }
        .port {
          width: 35%;
        }
      }
    }
  }
  .careful {
    margin-top: 8px;
    font-size: 0.9rem;
    color: rgba(0, 0, 0, 0.7);
    a {
      color: #6924ff;
    }
  }
}
.step {
  width: 100%;

  margin: 0 auto;
  margin-top: 3%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  padding: 20px;
  p {
    line-height: 30px;
  }
  .stepTitle {
    height: 40px;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    line-height: 40px;
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 600;
  }
  .textBox {
    padding: 20px;
    color: rgba(5, 32, 75, 0.6);
    font-weight: 600;
    font-size: 0.95rem;
  }
}
</style>