<template>
  <div class="security" v-loading="securityLoading">

    <section  v-if="$isMobile" class="securityMain">

      <div class="itemBox">
      
        <div class="left">
          <div>
          <img src="../../../assets/img/password.png" alt="password" loading="lazy"/>
        </div>
        <div class="text">
          <p>{{$t(`personal.loginPassword`) }}</p>
          <p>{{ $t(`personal.accountSecurity`)}}</p>
        </div>
        
        </div>
        <div class="right">
          <el-button class="notEnabled">{{
                $t(`personal.setUp2`)
              }}</el-button>
   
              <span class="modify" @click="changePassword">{{
                $t(`personal.modify`)
              }}</span>
        </div>
      </div>

      <div class="itemBox">
      
      <div class="left">
        <div>
          <img src="../../../assets/img/security.png" alt="security" loading="lazy"/>
      </div>
      <div class="text">
        <p>{{ $t(`personal.dualVerification`) }}</p>
        <p>{{  $t(`personal.verificationInstructions`)}}</p>
      </div>
      
      </div>
      <div class="right" v-if="isItBound">
        <el-button class="notEnabled">{{
                $t(`personal.setUp2`)
              }}</el-button>
         
              <span class="modify" @click="closeVerification">{{
                $t(`personal.close`)
              }}</span>
      </div>

      <div class="right2" v-if="!isItBound">
        <el-button class="notEnabled">{{
                $t(`personal.notEnabled`)
              }}</el-button>
             
              <el-button
                class="modify"
                :loading="BindInfoLoading"
                @click="handelVerification"
                >{{ $t(`personal.Open`) }}</el-button
              >
      </div>
    </div>

    </section>


    <section v-else>
      <div class="titleBox">
        <i class="iconfont icon-anquan ic"></i>
        <h2>{{ $t(`personal.securitySetting`) }}</h2>
      </div>
      <section class="table">
        <ul>
          <li class="topOne">
            <div class="topOneLeft">
              <img src="../../../assets/img/password.png" alt="password" loading="lazy"/>
              <div class="text">
                <span style="font-size: 1.1em">{{
                  $t(`personal.loginPassword`)
                }}</span>
                <span style="color: rgba(0, 0, 0, 0.5)">{{
                  $t(`personal.accountSecurity`)
                }}</span>
              </div>
            </div>
            <div class="topOneRight">
              <el-button class="notEnabled">{{
                $t(`personal.setUp2`)
              }}</el-button>
              <span class="line"></span>
              <span class="modify" @click="changePassword">{{
                $t(`personal.modify`)
              }}</span>
            </div>
          </li>
          <li>
            <div class="topOneLeft">
              <img src="../../../assets/img/security.png" alt="security" loading="lazy"/>
              <div class="text">
                <span style="font-size: 1.1em">{{
                  $t(`personal.dualVerification`)
                }}</span>
                <span style="color: rgba(0, 0, 0, 0.5)">{{
                  $t(`personal.verificationInstructions`)
                }}</span>
              </div>
            </div>
            <div class="topOneRight" v-if="isItBound">
              <el-button class="notEnabled">{{
                $t(`personal.setUp2`)
              }}</el-button>
              <span class="line"></span>
              <span class="modify" @click="closeVerification">{{
                $t(`personal.close`)
              }}</span>
            </div>
            <div class="topOneRight2" v-if="!isItBound">
              <el-button class="notEnabled">{{
                $t(`personal.notEnabled`)
              }}</el-button>
              <span class="line"></span>
              <el-button
                class="modify"
                :loading="BindInfoLoading"
                @click="handelVerification"
                >{{ $t(`personal.Open`) }}</el-button
              >
            </div>
          </li>
          <!-- <li >
                <div class="topOneLeft">
                  <img src="../../../assets/img/maintain.png" alt="">
                    <div class="text">
                        <span style="font-size: 1.1em;">{{$t(`personal.maintainPassword`)}}</span>
                        <span style="color: rgba(0,0,0,0.5);">{{$t(`personal.maintenanceInstructions`)}}</span>
                    </div>
                    
                </div>
            

                <div class="topOneRight2"> 
                    <el-button class="notEnabled">{{$t(`personal.notEnabled`)}}</el-button>
                    <span class="line"></span>
                    <span class="modify" @click="maintainPassword">{{$t(`personal.Open`)}}</span>
                </div>
            </li> -->
          <!-- <li >
                <div class="topOneLeft">
                  <img src="../../../assets/img/deleteUser.png" alt="">
                    <div class="text">
                        <span style="font-size: 1.1em;">{{$t(`personal.deleteAccount`)}}</span>
                        <span style="color: rgba(0,0,0,0.5);">{{$t(`personal.deleteDescription`)}}</span>
                    </div>
                    
                </div>
                <div class="topOneRight"> 
             
                    <span class="modifyDelete" @click="deleteAccount"> <span class="bth"> {{$t(`personal.delete`)}}</span></span>
                </div>
            </li> -->
        </ul>
      </section>
    </section>

    <!-- 修改密码弹窗 未开启安全验证 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="35%"
      :close-on-click-modal="false"
    >
      <section class="dialogBox">
        <div class="title">{{ $t(`personal.Tips`) }}</div>
        <div class="verificationPrompt">
          {{ $t(`personal.enableVerificationDescription`) }}
        </div>
        <el-button
          class="dialogBth"
          :loading="BindInfoLoading"
          type="primary"
          @click="jumpVerification"
          >{{ $t(`personal.goOpenIt`) }}</el-button
        >
      </section>
    </el-dialog>
    <!-- 修改密码弹窗 已开启安全验证 -->
    <el-dialog
      :visible.sync="changePasswordDialogVisible"
      width="40%"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <section class="verificationBox">
        <!-- <span>{{$t(`personal.step2`)}}</span> -->
        <div class="title">{{ $t(`user.resetPassword`) }}</div>
        <div class="inputBox">
          <!-- <div class="inputItem">
                 <span class="title" >{{$t(`user.Account`)}}</span>
                 <el-input class="input" type="email" v-model="changePasswordParams.email" :placeholder="$t(`personal.pleaseEnter`)"></el-input>
               </div> -->
          <div class="inputItem">
            <span class="title">{{ $t(`personal.verificationCode`) }}</span>
            <div class="verificationCode">
              <el-input
                type="email"
                v-model="changePasswordParams.updatePwdCode"
                autocomplete="off"
                :placeholder="$t(`user.verificationCode`)"
              ></el-input>
              <el-button
                class="codeBtn"
                :disabled="btnDisabledPassword"
                @click="handelCode"
                ><span
                  v-if="countDownTimePassword < 60 && countDownTimePassword > 0"
                  >{{ countDownTimePassword }}</span
                >{{ $t(bthTextPassword) }}</el-button
              >
            </div>
          </div>
          <div class="inputItem">
            <span class="title">{{ $t(`user.newPassword2`) }}</span>
            <el-input
              class="input"
              type="password"
              showPassword
              v-model="changePasswordParams.password"
              :placeholder="$t(`personal.pleaseEnter`)"
            ></el-input>
            <p class="remind" :title="$t(`user.passwordPrompt`)">
              {{ $t(`user.passwordPrompt`) }}
            </p>
          </div>
          <div class="inputItem">
            <span class="title">{{ $t(`user.confirmPassword`) }}</span>
            <el-input
              class="input"
              type="password"
              showPassword
              v-model="newPassword"
              :placeholder="$t(`personal.pleaseEnter`)"
            ></el-input>
          </div>
          <!--               
               <div class="inputItem" v-if="isItBound">
                 <span class="title" >{{$t(`personal.oneTimePassword`)}}</span>
                 <el-input class="input" type="number" v-model="changePasswordParams.gCode" placeholder="000000"></el-input>
               </div> -->
        </div>
        <el-button
          :loading="ResetPwdLoading"
          class="changePasswordBth"       
          @click="confirmchangePassword"
          >{{ $t(`user.changePassword`) }}</el-button
        >
      </section>
    </el-dialog>
    <!-- 关闭验证弹窗 -->
    <el-dialog
      :visible.sync="closeDialogVisible"
      width="45%"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <section class="verificationBox">
        <div class="title">{{ $t(`personal.turnOffVerification`) }}</div>
        <div class="inputBox">
          <div class="inputItem">
            <span class="title">{{ $t(`personal.verificationCode`) }}</span>
            <div class="verificationCode">
              <el-input
                type="email"
                v-model="closeParams.eCode"
                autocomplete="off"
                :placeholder="$t(`user.verificationCode`)"
              ></el-input>
              <el-button
                class="codeBtn"
                :disabled="btnDisabledClose"
                @click="handelCloseCode"
              >
                <span
                  v-if="countDownTimeClose < 60 && countDownTimeClose > 0"
                  >{{ countDownTimeClose }}</span
                >{{ $t(bthTextClose) }}</el-button
              >
            </div>
          </div>
          <div class="inputItem">
            <span class="title">{{ $t(`personal.oneTimePassword`) }}</span>
            <el-input
              class="input"
              type="number"
              v-model="closeParams.gCode"
              placeholder="000000"
            ></el-input>
          </div>
        </div>
        <!-- style="width: 30%; font-size: 1.1em; margin: 0 auto" -->
        <div class="verificationBthBox">
          <el-button
          style=" margin: 0 auto"
            :loading="closeLoading"
            class="confirmBtn"        
            @click="confirmClose"
            >{{ $t(`personal.turnOffVerification`) }}</el-button
          >
        </div>
      </section>
    </el-dialog>
    <!-- 双重验证弹窗 -->
    <el-dialog
      :visible.sync="verificationDialogVisible"
      width="45%"
      :close-on-click-modal="false"
    >
      <section class="verificationBox">
        <!-- <span>{{$t(`personal.firstStep`)}}</span> -->
        <div class="title">{{ $t(`personal.enableVerification`) }}</div>
        <p class="text1">{{ $t(`personal.googleIdentity`) }}</p>
        <div class="secretKeyBox">
          <div class="code">
            <img
              id="myImage"
              :src="'data:image/jpeg;base64,' + bindInfo.img"
              alt="Data return exception, please refresh or re enter the page"
            />
          </div>
          <div class="centerLine">
            <span class="topLine"></span>
            <span class="or">{{ $t(`personal.or`) }}</span
            ><span class="btLine"></span>
          </div>
          <div class="secretKey">
            <span class="InfoSecret">
              {{ bindInfo.secret }}
              <span @click="copySecret">{{ $t(`personal.copy`) }}</span></span
            >
          </div>
        </div>
        <div class="clause">
          <div class="checkbox">
            <el-checkbox v-model="checked"></el-checkbox>
          </div>
          <p>
            <span>{{ $t(`personal.saveKey`) }}</span>
            {{ $t(`personal.resetKeyDescription`) }}
          </p>
        </div>

        <div class="nextStep" @click="nextStep">
          {{ $t(`personal.nextStep`) }}
        </div>
      </section>
    </el-dialog>
    <!-- 第二步 -->
    <el-dialog
      :visible.sync="confirmationVerification"
      width="45%"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <section class="verificationBox">
        <!-- <span>{{$t(`personal.step2`)}}</span> -->
        <div class="title">{{ $t(`personal.enableVerification`) }}</div>
        <div class="inputBox">
          <div class="inputItem">
            <span class="title">{{ $t(`personal.loginPassword`) }}</span>
            <el-input
              class="input"
              showPassword
              type="password"
              v-model="params.pwd"
              :placeholder="$t(`personal.pleaseEnter`)"
            ></el-input>
          </div>
          <div class="inputItem">
            <span class="title">{{ $t(`personal.verificationCode`) }}</span>
            <div class="verificationCode">
              <el-input
                type="email"
                v-model="params.eCode"
                autocomplete="off"
                :placeholder="$t(`user.verificationCode`)"
              ></el-input>
              <el-button
                class="codeBtn"
                :disabled="btnDisabled"
                @click="handelECode"
                ><span v-if="countDownTime < 60 && countDownTime > 0">{{
                  countDownTime
                }}</span
                >{{ $t(bthText) }}</el-button
              >
            </div>
          </div>
          <div class="inputItem">
            <span class="title"
              >{{ $t(`personal.oneTimePassword`) }}
              {{ $t(`personal.scanning`) }}</span
            >
            <el-input
              class="input"
              type="number"
              v-model="params.gCode"
              placeholder="000000"
            ></el-input>
          </div>
        </div>

        <div class="verificationBthBox">
          <el-button class="previousStep" @click="previousStep">{{
            $t(`personal.previousStep`)
          }}</el-button>
          <el-button
            :loading="BindInfoLoading"
            class="confirmBtn"         
            @click="confirmActivation"
            >{{ $t(`personal.enableVerification`) }}</el-button
          >
        </div>
      </section>
    </el-dialog>
    <!-- 维护人员密码 -->
    <el-dialog :visible.sync="maintainDialogVisible" width="35%">
      <section class="dialogBox">
        <div class="title">{{ $t(`personal.Tips`) }}</div>
        <div class="verificationPrompt">
          {{ $t(`personal.enableVerificationDescription`) }}
        </div>
        <el-button
          :loading="BindInfoLoading"
          style="width: 30%; font-size: 1.1em; margin-top: 30px"
          class="dialogBth"
          type="primary"
          @click="jumpVerification"
          >{{ $t(`personal.goOpenIt`) }}</el-button
        >
      </section>
    </el-dialog>
    <!-- 删除账户 -->
    <el-dialog :visible.sync="deleteAccountDialog" width="35%">
      <section class="dialogBox2">
        <div class="title">{{ $t(`personal.deleteAccount`) }}</div>
        <div
          class="deleteClauseBox"
          v-for="item in clauseList"
          :key="item.title"
        >
          <h3>{{ item.title }}</h3>
          <ul>
            <li v-for="subItem in item.children" :key="subItem.label">
              {{ subItem.label }}
            </li>
          </ul>
        </div>
        <div class="dashedLine"></div>
        <div>
          <p>{{ $t(`personal.reasonForDeletion`) }}</p>
          <el-select
            v-model="value"
            :placeholder="$t(`personal.select`)"
            class="select"
          >
            <el-option
              v-for="item in reasonList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="bthBox">
          <el-button
            style="width: 40%; font-size: 1.1em; margin-top: 30px"
            @click="deleteAccountDialog = false"
            >{{ $t(`personal.Cancel`) }}</el-button
          >
          <el-button
            style="width: 40%; font-size: 1.1em; margin-top: 30px"
            type="primary"
            @click="deleteAccountDialog = false"
            >{{ $t(`personal.determine`) }}</el-button
          >
        </div>
      </section>
    </el-dialog>
  </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) {
  .security{
    padding: 0 !important;
  }
  .securityMain{
    width: 100%;
    min-height: 360px;
    .itemBox{
      width: 100%;
    
      display: flex;
      min-height: 80px;
      align-content: center;
     justify-content: space-between;
     border-bottom:1px solid rgba(0, 0, 0, 0.1);
     padding: 10px  18px;
    
      .left{
        display: flex;
        align-items: center;
   
        width: 52%;
        .text{
          margin-left: 10px;
          p:nth-of-type(1){
            font-size: 0.9rem;
          }
          p:nth-of-type(2){
            font-size: 0.75rem;
            margin-top: 5px;
            color: rgba(0, 0, 0, 0.6);
            word-wrap: break-word;
          }
        }
      }

      .right{
        display: flex;
        align-items: center;
        font-size: 0.9rem;
        .notEnabled{
          border:none;
          background: transparent;
          padding: 0;
        }
        .modify{
          padding: 5px 15px ;
          background: #661fff;
          color: #fff;
          border-radius: 5px;
          margin-left: 10px;
        }
      }

      .right2{
        display: flex;
        align-items: center;
        font-size: 0.9rem;
        .notEnabled{
          border:none;
          background: transparent;
          padding: 0;
          
        }
        .modify{
          padding: 7px 15px ;
          background: #661fff;
          color: #fff;
          border-radius: 5px;
        }
      }

    }
  }
  
  .verificationBox{
    padding: 0 !important;
    padding-bottom: 30px !important;
    .title{
      font-size: 0.95rem !important;
    }
    .inputBox{
      font-size: 0.9rem !important;
      .inputItem{
        margin-top: 10px !important;
        .title{
          font-size: 0.9rem !important;
        }
      }
    }
    .text1{     
      margin: 10px;
    }

    .secretKeyBox{
      padding: 5px;
      .code{
        img{
          max-width: 120px;
        }
      }

      .secretKey{
        
        .InfoSecret{
          font-size: 0.95rem !important;
        }
      }
    }
    .clause{
      padding: 5px ;
    }

  }
  .verificationBthBox{
    flex-wrap: wrap;
    justify-content: space-around;


    .el-button--default{
      margin: 5px !important;
    }
    .confirmBtn{
      margin: 0 auto;
      width: auto !important;
   

    }

  }
  
 



}
@media screen and (min-width: 220px) and (max-width: 500px) {

::v-deep .el-dialog{
    width: 98% !important;
    border-radius: 10px !important;
  }
  ::v-deep  .el-dialog__body{
    padding: 0px !important;
  }

  ::v-deep .dialogBox .inputBox{
    width: 93% !important;
    margin-top: 8px !important;
  }

}

@media screen and (min-width: 500px) and (max-width: 800px) {

::v-deep .el-dialog{
    width: 80% !important;
    border-radius: 10px !important;
  }
  ::v-deep  .el-dialog__body{
    padding: 0px !important;
  }

  ::v-deep .dialogBox .inputBox{
    width: 80% !important;
    margin-top: 8px !important;
  }

}



.remind {
  font-size: 0.8em;
  padding: 0;
  margin: 0;
  min-height: 15px;
  line-height: 15px;
  color: #ff4081;
  // text-overflow: ellipsis;
  // overflow: hidden;
  // white-space: nowrap;
  cursor: pointer;
}
.security {
  width: 100%;
  padding: 15px;
  .titleBox {
    display: flex;
    align-items: center;

    h2 {
      color: #36246f;
    }
  }
  .ic {
    font-size: 1.8em;
    margin-right: 5px;
    color: #36246f;
    font-weight: 600;
  }

  .table {
    width: 100%;
    ul {
      width: 100%;
      height: 500px;
      border-radius: 10px;
      // border:1PX solid rgba(0,0,0,0.1);
      padding: 10px 40px;
      font-size: 0.9rem;
      .topOne {
        border: none;

        .topOneLeft {
          display: flex;
          height: 70%;
          img {
            height: 70%;
          }
          .text {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 10px;
          }
        }
        .topOneRight {
          display: flex;
          align-items: center;
          width: 18%;
          justify-content: space-around;
          .notEnabled {
            padding: 5px 10px;
            // border-radius: 14PX;
            // background: #FFF8F8;
            // border:1PX solid #EF786D;
            // font-size: 1em;
            color: #ccc;
            border: none;
          }
          .line {
            display: inline-block;
            width: 1px;
            height: 20px;
            background: #ccc;
          }
          .modify {
            color: #fff;
            cursor: pointer;
            background: #6620fb;
            padding: 6px 18px;
            border-radius: 5px;
          }
          .modifyDelete {
            display: inline-block;
            width: 90%;
            text-align: right;
            color: #2889fc;
            cursor: pointer;
          }
        }
      }
      li {
        list-style: none;
        padding: 10px 0px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        height: 20%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .topOneLeft {
          display: flex;
          height: 70%;
          img {
            height: 70%;
          }
          .text {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 10px;
          }
        }
        .topOneRight {
          display: flex;
          align-items: center;
          width: 18%;
          justify-content: space-around;
          .notEnabled {
            padding: 5px 10px;
            // border-radius: 14PX;
            // background: #FFF8F8;
            // border:1PX solid #EF786D;
            // font-size: 1em;
            color: #ccc;
            border: none;
          }
          .line {
            display: inline-block;
            width: 1px;
            height: 20px;
            background: #ccc;
          }
          .modify {
            color: #fff;
            cursor: pointer;
            background: #6620fb;
            padding: 6px 18px;
            border-radius: 5px;
          }
          .modifyDelete {
            display: inline-block;
            width: 90%;
            text-align: right;
            color: #2889fc;
            cursor: pointer;
          }
        }

        .topOneRight2 {
          display: flex;
          align-items: center;
          // width: 18%;
          justify-content: space-around;
          .notEnabled {
            padding: 5px 10px;
            // border-radius: 14PX;
            // background: #FFF8F8;
            // border:1PX solid #EF786D;
            // font-size: 1em;
            color: #e7155e;
            border: none;
          }
          .line {
            display: inline-block;
            width: 1px;
            height: 20px;
            background: #ccc;
            margin: 0px 5px;
          }
          .modify {
            color: #fff;
            cursor: pointer;
            background: #6620fb;
            padding: 6px 18px;
            border-radius: 5px;
          }
          .modifyDelete {
            display: inline-block;
            width: 90%;
            text-align: right;
            color: #2889fc;
            cursor: pointer;
          }
        }
      }
    }
  }
}

.dialogBox {
  padding: 0px 20px;
  padding-bottom: 50px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  .title {
    width: 100%;
    text-align: center;
    font-size: 25px;
  }
  .verificationPrompt {
    margin-top: 5%;
    font-size: 1.3em;
  }
  .inputBox {
    width: 70%;
    margin-top: 20px;
    margin: 30px 0px;
    .inputItem {
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: left;
      justify-content: left;
    }
    .title {
      font-size: 1.1em;
      text-align: left;
    }
    .input {
      margin-top: 10px;
    }
  }
  .jurisdictionBox {
    width: 70%;
    height: 50px;
    .checkboxS {
      margin-top: 10px;
      display: flex;
      .el-checkbox {
        width: calc(100% / 3);
      }
    }
  }
  .deleteClauseBox {
    margin: 0;
    padding: 0;
    ul {
      margin: 0;
      padding: 0;
    }
  }
}
.dialogBox2 {
  padding: 0px 55px;
  padding-bottom: 50px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  .dashedLine {
    width: 100%;
    border-bottom: 1px dashed #ccc;
    margin-top: 5%;
  }
  .select {
    width: 100%;
  }
  .bthBox {
    display: flex;
    justify-content: space-between;
  }
  .title {
    width: 100%;
    text-align: center;
    font-size: 25px;
  }
  .verificationPrompt {
    margin-top: 5%;
    font-size: 1.3em;
  }
  .inputBox {
    width: 70%;
    margin-top: 20px;
    margin: 30px 0px;
    .inputItem {
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: left;
      justify-content: left;
    }
    .title {
      font-size: 1.1em;
      text-align: left;
    }
    .input {
      margin-top: 10px;
    }
  }
  .jurisdictionBox {
    width: 70%;
    height: 50px;
    .checkboxS {
      margin-top: 10px;
      display: flex;
      .el-checkbox {
        width: calc(100% / 3);
      }
    }
  }
  .deleteClauseBox {
    margin: 0;
    padding: 0;
    ul {
      margin: 0;
      padding: 0;
    }
  }
}
.verificationBox {
  padding: 0px 20px;
  padding-bottom: 50px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  .title {
    width: 100%;
    text-align: center;
    font-size: 25px;
    span {
      color: #2889fc;
    }
  }
  .inputBox {
    width: 70%;
    margin-top: 20px;
    margin: 30px 0px;
    .inputItem {
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: left;
      justify-content: left;
    }
    .title {
      font-size: 1.1em;
      text-align: left;
    }
    .input {
      margin-top: 10px;
    }
  }
  .secretKeyBox {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 150px;
    .code {
      width: 45%;
      text-align: center;
    }
    .centerLine {
      width: 2%;

      height: 100%;
      // border-left: 2PX solid #c9d1f0;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .topLine {
        width: 2px;
        height: 40%;
        background: #c9d1f0;
      }
      .or {
        width: 18px;
        display: inline-block;
        height: 30px;
        // background: #661FFF;
        line-height: 30px;
      }
      .btLine {
        width: 2px;
        height: 40%;
        background: #c9d1f0;
      }
    }
    .secretKey {
      width: 45%;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      .InfoSecret {
        padding: 15px 20px;
        background: #fff;
        color: #f84481;
        font-weight: 600;
        font-size: 1.2em;
        span {
          color: #ccc;
          cursor: pointer;
          font-size: 0.9em;
          font-weight: normal;
          margin-left: 2px;
        }
        span:hover {
          color: #f84481;
        }
      }
    }
  }
  .clause {
    display: flex;
    align-items: start;
    margin: 18px 0px;
    width: 100%;
    p {
      margin: 0;
      margin-left: 10px;
      span {
        // font-weight: 600;
        color: #f84481;
      }
    }
    .checkbox {
      margin-top: 3px;
    }
  }
  .nextStep {
    width: 50%;
    text-align: center;
    font-size: 1em;
    background: #661fff;
    color: #fff;
    padding: 10px 0px;
    border-radius: 5px;
  }
  .verificationCode {
    display: flex;
    margin-top: 10px;
    .codeBtn {
      font-size: 13px;
      margin-left: 2px;
    }
  }
  .bthBox {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 15%;
    .previousStep {
      width: 35%;
      font-size: 1.3em;
    }
  }
  .verificationBthBox {
    width: 70%;
    display: flex;
    justify-content: left;
    .el-button.previousStep {
      min-width: 28%;
      background: #d0c4e8;
      color: #fff;
      // margin-right: 10%;
    }
    .el-button.confirmBtn {
      min-width: 60% ;
      background: #661fff;
      color: #fff;
      border: none;
    }
  }
}

::v-deep .el-dialog {
  background: #fff;
  background-image: url(../../../assets/img/dialog3.png);
  background-size: 102% 100%;
  background-repeat: no-repeat;
  // background-position: 110% 100%;
  border-radius: 32px;
}
.dialogBth {
  width: 30%;
  font-size: 1.1em;
  margin-top: 30px;
  background: #661fff;
  border: none;
}
.changePasswordBth {
  background: #661fff;
  color: #fff;
}
</style>