style

lxf

2025-05-22 e74a7c7afc56cf229058091fe2ae143cf0bdb3ca

 src/views/my/mysecurity.vue

@@ -1,11 +1,14 @@
<template>
  <div class="right-view">
    <div class="right-header" style="background-color: transparent; margin-bottom: 20px;">
    <div
      class="right-header"
      style="background-color: transparent; margin-bottom: 20px"
    >
      <div class="account-view">
        <div class="account-left-header light-background-color">
<!--          <div class="font-size28 font-bold">-->
<!--            {{ $t("message.user.zhanghuanquan") }}-->
<!--          </div>-->
          <!--          <div class="font-size28 font-bold">-->
          <!--            {{ $t("message.user.zhanghuanquan") }}-->
          <!--          </div>-->
          <!-- 验证方式 -->
          <div class="account-icon-view">
            <verify-img :verrify="googleverif" label="gugeyanzhengqi" />
@@ -14,9 +17,9 @@
            <verify-img :verrify="advancedverif" label="gaojirenzheng" />
          </div>
        </div>
<!--        <div class="header-icon-view">-->
<!--          <img src="@/assets/myImages/icon-image/account-security/security-icon.png" width="122" height="100" />-->
<!--        </div>-->
        <!--        <div class="header-icon-view">-->
        <!--          <img src="@/assets/myImages/icon-image/account-security/security-icon.png" width="122" height="100" />-->
        <!--        </div>-->
      </div>
    </div>
    <!-- 多重验证-->
@@ -27,7 +30,11 @@
      <!-- 谷歌验证 -->
      <div class="account-list">
        <div class="flex-row-center">
          <img class="list-left-img" src="@/assets/myImages/icon-image/account-security/1.png" alt="" />
          <img
            class="list-left-img"
            src="@/assets/myImages/icon-image/account-security/1.png"
            alt=""
          />
          <div class="margin-left10">
            <div>
              {{ $t("message.user.gugeyanzhengqi") }}（{{
@@ -40,10 +47,17 @@
          </div>
        </div>
        <div class="flex-row-center list-icon justify-flex-end">
          <verify-img :verrify="googleverif" :label="googleverif ? 'qiyong' : 'weibangding'" />
          <verify-img
            :verrify="googleverif"
            :label="googleverif ? 'qiyong' : 'weibangding'"
          />
        </div>
        <div class="justify-flex-end">
          <button v-if="!googleverif" class="light-grey-button" @click="() => handleModalStatus(true, 'isShowGoogle')">
          <button
            v-if="!googleverif"
            class="light-grey-button"
            @click="() => handleModalStatus(true, 'isShowGoogle')"
          >
            {{ $t("message.user.bangding") }}
          </button>
          <button v-else class="light-grey-button" @click="unbind(1)">
@@ -54,7 +68,11 @@
      <!-- 邮箱验证 -->
      <div class="account-list">
        <div class="flex-row-center">
          <img class="list-left-img" src="@/assets/myImages/icon-image/account-security/3.png" alt="" />
          <img
            class="list-left-img"
            src="@/assets/myImages/icon-image/account-security/3.png"
            alt=""
          />
          <div class="margin-left10">
            <div>{{ $t("message.user.youxiangrenzheng") }}</div>
            <div class="linght-grey-color margin-top5">
@@ -68,7 +86,11 @@
          <div v-else>{{ $t("message.user.weibangding") }}</div>
        </div>
        <div class="justify-flex-end">
          <button v-if="!emailverif" class="light-grey-button" @click="() => handleModalStatus(true, 'isShowEmail')">
          <button
            v-if="!emailverif"
            class="light-grey-button"
            @click="() => handleModalStatus(true, 'isShowEmail')"
          >
            {{ $t("message.user.bangding") }}
          </button>
          <button v-else class="light-grey-button" @click="unbind(3)">
@@ -79,7 +101,11 @@
      <!-- 身份认证 -->
      <div class="account-list">
        <div class="flex-row-center">
          <img class="list-left-img" src="@/assets/myImages/icon-image/account-security/4.png" alt="" />
          <img
            class="list-left-img"
            src="@/assets/myImages/icon-image/account-security/4.png"
            alt=""
          />
          <div class="margin-left10">
            <div>{{ $t("message.user.shenfenrenzheng") }}</div>
            <div class="linght-grey-color margin-top5">
@@ -102,11 +128,14 @@
          </div>
        </div>
        <div class="justify-flex-end">
          <button class="light-grey-button" @click="() => handleModalStatus(true, 'isShowIdentity')">
          <button
            class="light-grey-button"
            @click="() => handleModalStatus(true, 'isShowIdentity')"
          >
            {{
              !identityverif
              ? $t("message.user.bangding")
              : $t("message.user.chakan")
                ? $t("message.user.bangding")
                : $t("message.user.chakan")
            }}
          </button>
        </div>
@@ -114,7 +143,11 @@
      <!-- 高级认证 -->
      <div class="account-list margin-bottom30">
        <div class="flex-row-center">
          <img class="list-left-img" src="@/assets/myImages/icon-image/account-security/5.png" alt="" />
          <img
            class="list-left-img"
            src="@/assets/myImages/icon-image/account-security/5.png"
            alt=""
          />
          <div class="margin-left10">
            <div>{{ $t("message.user.gaojirenzheng") }}</div>
            <div class="linght-grey-color margin-top5">
@@ -139,8 +172,8 @@
          <button class="light-grey-button" @click="openAdvance">
            {{
              !advancedverif
              ? $t("message.user.bangding")
              : $t("message.user.chakan")
                ? $t("message.user.bangding")
                : $t("message.user.chakan")
            }}
          </button>
        </div>
@@ -154,7 +187,11 @@
      <!-- 登录密码 -->
      <div class="account-list">
        <div class="flex-row-center">
          <img class="list-left-img" src="@/assets/myImages/icon-image/account-security/6.png" alt="" />
          <img
            class="list-left-img"
            src="@/assets/myImages/icon-image/account-security/6.png"
            alt=""
          />
          <div class="margin-left10">
            <div>{{ $t("message.user.denglumima") }}</div>
            <div class="linght-grey-color margin-top5">
@@ -163,7 +200,10 @@
          </div>
        </div>
        <div class="justify-flex-end">
          <button class="light-grey-button" @click="() => handleModalStatus(true, 'isShowLoginPassword')">
          <button
            class="light-grey-button"
            @click="() => handleModalStatus(true, 'isShowLoginPassword')"
          >
            {{ $t("message.user.xiugai") }}
          </button>
        </div>
@@ -171,7 +211,11 @@
      <!-- 资金密码 -->
      <div class="account-list">
        <div class="flex-row-center">
          <img class="list-left-img" src="@/assets/myImages/icon-image/account-security/7.png" alt="" />
          <img
            class="list-left-img"
            src="@/assets/myImages/icon-image/account-security/7.png"
            alt=""
          />
          <div class="margin-left10">
            <div>{{ $t("message.user.zijinmima") }}</div>
            <div class="linght-grey-color margin-top5">
@@ -180,7 +224,10 @@
          </div>
        </div>
        <div class="justify-flex-end">
          <button class="light-grey-button" @click="() => handleModalStatus(true, 'isShowFund')">
          <button
            class="light-grey-button"
            @click="() => handleModalStatus(true, 'isShowFund')"
          >
            {{ $t("message.user.xiugai") }}
          </button>
        </div>
@@ -188,7 +235,11 @@
      <!-- 人工重置 -->
      <div class="account-list">
        <div class="flex-row-center">
          <img class="list-left-img" src="@/assets/myImages/icon-image/account-security/8.png" alt="" />
          <img
            class="list-left-img"
            src="@/assets/myImages/icon-image/account-security/8.png"
            alt=""
          />
          <div class="margin-left10">
            <div>{{ $t("message.user.rengongchongzhi") }}</div>
            <div class="linght-grey-color margin-top5">
@@ -216,15 +267,37 @@
      </div>
    </div>
    <!-- 弹窗 -->
    <email-bind :isShowEmail="isShowEmail" @changeModalShow="handleModalStatus"></email-bind>
    <email-bind
      :isShowEmail="isShowEmail"
      @changeModalShow="handleModalStatus"
    ></email-bind>

    <google-bind :isShowGoogle="isShowGoogle" @changeModalShow="handleModalStatus"></google-bind>
    <login-password :isShowLoginPassword="isShowLoginPassword" @changeModalShow="handleModalStatus"></login-password>
    <funds-password :isShowFund="isShowFund" @changeModalShow="handleModalStatus"></funds-password>
    <identity-authenty :isShowIdentity="isShowIdentity" @changeModalShow="handleModalStatus"></identity-authenty>
    <advance-certify :isShowAdvance="isShowAdvance" @changeModalShow="handleModalStatus"></advance-certify>
    <manual-reset :isShowManual="isShowManual" :status="manualStatus" :selectType="radioType"
      @changeModalShow="handleModalStatus"></manual-reset>
    <google-bind
      :isShowGoogle="isShowGoogle"
      @changeModalShow="handleModalStatus"
    ></google-bind>
    <login-password
      :isShowLoginPassword="isShowLoginPassword"
      @changeModalShow="handleModalStatus"
    ></login-password>
    <funds-password
      :isShowFund="isShowFund"
      @changeModalShow="handleModalStatus"
    ></funds-password>
    <identity-authenty
      :isShowIdentity="isShowIdentity"
      @changeModalShow="handleModalStatus"
    ></identity-authenty>
    <advance-certify
      :isShowAdvance="isShowAdvance"
      @changeModalShow="handleModalStatus"
    ></advance-certify>
    <manual-reset
      :isShowManual="isShowManual"
      :status="manualStatus"
      :selectType="radioType"
      @changeModalShow="handleModalStatus"
    ></manual-reset>
  </div>
</template>
<script>
@@ -390,7 +463,7 @@
  line-height: 58.97px;
}

.account-view>div {
.account-view > div {
  flex: 1;
}

@@ -401,7 +474,7 @@
  min-width: 1000px;
}

.account-left-header>div {
.account-left-header > div {
  flex: 1;
}

@@ -411,13 +484,13 @@
  font-size: 12px;
}

.account-icon-view>div {
.account-icon-view > div {
  flex-direction: row;
  flex: 1;
}

.account-icon-view>div>img,
.list-icon>img {
.account-icon-view > div > img,
.list-icon > img {
  width: 25px;
  height: 25px;
  display: inline-block;
@@ -439,7 +512,7 @@
  border-bottom: 1px solid #e5e5e5;
}

.account-list>div {
.account-list > div {
  flex: 1;
  display: flex;
}
@@ -469,15 +542,15 @@
.margin-top5 {
  margin-top: 5px;
}
.right-view{
.right-view {
  width: 1200px;
  margin: 0px auto 20px;
  border-radius: 6px;
  min-height: calc(100% - 20px);
  box-sizing: border-box;
}
.light-grey-button{
  background-color: rgb(42, 100, 251);
.light-grey-button {
  background-color: #f7b328;
  color: rgb(255, 255, 255);
}
</style>