1161 lines
29 KiB
Vue
1161 lines
29 KiB
Vue
|
<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>
|