From e74a7c7afc56cf229058091fe2ae143cf0bdb3ca Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Thu, 22 May 2025 15:03:27 +0800
Subject: [PATCH] style
---
src/views/my/mysecurity.vue | 155 ++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 114 insertions(+), 41 deletions(-)
diff --git a/src/views/my/mysecurity.vue b/src/views/my/mysecurity.vue
index 8b4d20e..c3ab7b6 100644
--- a/src/views/my/mysecurity.vue
+++ b/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>
--
Gitblit v1.9.3