From 0dbc7465447164fef24327b5d494870832d798dd Mon Sep 17 00:00:00 2001
From: 李 <344137771@qq.com>
Date: Tue, 26 May 2026 11:15:18 +0800
Subject: [PATCH] 1
---
src/views/my/index.vue | 807 +++++++++++++++++++++++++++-----------------------------
1 files changed, 391 insertions(+), 416 deletions(-)
diff --git a/src/views/my/index.vue b/src/views/my/index.vue
index 9eccb10..7b9074f 100644
--- a/src/views/my/index.vue
+++ b/src/views/my/index.vue
@@ -1,474 +1,449 @@
<template>
- <section class="my-index">
- <fx-header :title="$t('my')" :showLeft="false">
- <template v-slot:right>
- <!-- <van-icon name="service-o" size="18" @click="$router.push('/customerService')"
- :badge="`${unread_num}`"></van-icon> -->
- <van-badge class="w-35 h-33 mr-22" :content="unreadMsg">
- <van-icon name="service-o" size="18" @click="$router.push('/customerService')" />
- </van-badge>
- </template>
- </fx-header>
+ <section class="my-center-page">
+ <!-- 头部：返回 + 个人中心 + 右侧客服 -->
- <div class="px-8 mt-4 mb-10">
- <h1 class="text-2xl font-bold title" v-if="!(userStore.userInfo && userStore.userInfo.token)">
- {{ $t("welcome") }} {{ $title }}!
- </h1>
- <p class="sub-text" v-if="!(userStore.userInfo && userStore.userInfo.token)">
- {{ $t("全球最大的区块链资产平台") }}
- </p>
- <p class="w-full flex mt-4 gap-x-4" v-if="!(userStore.userInfo && userStore.userInfo.token)">
- <van-button class="flex-1" @click="onRoute('/register')">{{
- $t("register")
- }}</van-button>
- <van-button class="flex-1" type="primary" @click="onRoute('/login')">{{
- $t("login")
- }}</van-button>
- </p>
- <div class="mt-4 flex" v-else>
- <img class="w-24 h-24" src="@/assets/image/avatar.png" alt="avatar" />
- <div class="ml-4 flex flex-col justify-center">
- <div class="font-bold text-lg name">
- {{ userStore.userInfo && userStore.userInfo.username }}
- </div>
- <div class="text-sm text-gray-400 mt-1 flex items-center id-text">
- ID：{{ userStore.userInfo && userStore.userInfo.usercode
- }}<img class="w-8 h-8 ml-8" src="@/assets/image/idcopy.png" alt="id" @click="copy" />
- </div>
+ <assets-head :title="$t('个人中心')" :back-func="() => router.push('/')" />
+
+ <!-- 未登录：欢迎 + 登录注册 -->
+ <template v-if="!(userStore.userInfo && userStore.userInfo.token)">
+ <div class="guest-wrap px-8 mt-4">
+ <h1 class="guest-title">{{ $t("welcome") }} {{ $title }}!</h1>
+ <p class="guest-desc">{{ $t("全球最大的区块链资产平台") }}</p>
+ <div class="guest-btns">
+ <van-button class="flex-1" @click="onRoute('/register')">{{ $t("register") }}</van-button>
+ <van-button class="flex-1" type="primary" @click="onRoute('/login')">{{ $t("login") }}</van-button>
</div>
</div>
- </div>
- <!-- <div class="divider"></div> -->
- <div v-if="userStore.userInfo && userStore.userInfo.token">
- <van-cell-group :title="t('快捷入口')" :border="false"></van-cell-group>
- <van-grid class="van-grid-main" :column-num="5" :border="false">
- <van-grid-item v-for="(item, index) in quickList" :key="index" icon="photo-o" :to="item.path"
- :text="t(item.name)">
- <template #icon>
- <img class="grid-item-img" :src="item.icon" />
- </template>
- </van-grid-item>
- </van-grid>
- </div>
- <!-- <div class="divider"></div> -->
- <div class="mt-4">
- <van-cell-group v-for="(item, index) in cellList" :key="index" :title="item.title" :border="false">
- <van-cell v-for="(_item, _index) in item.list" :key="_index" is-link="is-link" center="center"
- :title="_item.title" @click="onRoute(_item.path)">
- <template #icon>
- <img class="cell-img" :src="_item.icon" />
- </template>
- <div v-if="_item.path === '/certificationCenter' && _item.show === true">
- <span :class="{
- red: status == 0 || status == 3,
- yellow: status == 1,
- green: status == 2,
- }">{{
- status == 0
- ? $t("notCertified")
- : status == 1
- ? $t("reviewing")
- : status == 2
- ? $t("verified")
- : status == 3
- ? $t("noPassView")
- : ""
-}}</span>
+ </template>
+
+ <!-- 已登录：深色用户卡 + 合并菜单列表 -->
+ <template v-else>
+ <!-- 用户信息卡（深色） + user-row 下方弹出框 -->
+ <div class="user-card">
+ <div class="user-card-inner">
+ <div class="user-avatar flex items-center justify-center">
+ <img src="@/assets/image/login_logo.png" alt="avatar" />
</div>
- <div v-if="_item.path === '/advancedCtf' && _item.show === true">
- <span :class="{
- red: kycHighStatus == 0 || kycHighStatus == 3,
- yellow: kycHighStatus == 1,
- green: kycHighStatus == 2,
- }">{{
- kycHighStatus == 0
- ? $t("notCertified")
- : kycHighStatus == 1
- ? $t("reviewing")
- : kycHighStatus == 2
- ? $t("verified")
- : kycHighStatus == 3
- ? $t("noPassView")
- : ""
-}}</span>
+ <div class="user-info">
+ <div class="user-row" @click.stop="showAccountPopup = !showAccountPopup">
+ <span class="user-account">{{ maskedAccount }}</span>
+ <van-icon name="arrow-down" class="user-arrow" />
+
+ <!-- 当前为模拟账户时显示「真实账户」，否则显示「模拟账户」 -->
+ <div v-show="showAccountPopup" class="account-option-pill" @click="isSimulation ? onSwitchToReal() : onSwitchToSimulation()">
+ {{ isSimulation ? ($t('真实账户') || '真实账户') : ($t('模拟账户') || '模拟账户') }}
+ </div>
+ </div>
+ <div class="user-uid">UID: {{ userStore.userInfo.usercode || '--' }}</div>
</div>
- </van-cell>
- </van-cell-group>
- </div>
- <div class="px-4 mt-4" v-if="userStore.userInfo && userStore.userInfo.token">
- <p class="w-full flex mt-4 gap-x-4">
- <van-button type="primary" class="flex-1" @click="loginOut">{{
- $t("loginOut")
- }}</van-button>
- </p>
- </div>
- <!-- <button style="height: 200px;" @click="changeTheme">哈哈</button> -->
+ <div class="user-vip">VIP 1</div>
+ </div>
+ </div>
+
+ <!-- 合并列表：快捷入口 + 通用 + 更多（单列白卡片） -->
+ <div class="menu-list">
+ <div v-for="(item, index) in mergedMenuList" :key="index" class="menu-item" @click="onMenuItemClick(item)">
+ <img class="menu-icon" :src="item.icon" alt="" />
+ <span class="menu-title">{{ item.title }}</span>
+ <span v-if="item.rightText" class="menu-right-text">{{ item.rightText }}</span>
+ <van-icon name="arrow" class="menu-arrow" />
+ </div>
+ </div>
+
+ <!-- 退出登录 -->
+ <div class="logout-wrap">
+ <span class="logout-btn" @click="loginOut">{{ $t("loginOut") }}</span>
+ </div>
+ </template>
</section>
</template>
<script setup>
-import { reactive, onMounted, ref, computed } from "vue";
-import { useRouter } from "vue-router";
-import { _getIdentify, _getKycHighLevel, _logOut } from "@/service/user.api.js";
-import { useUserStore } from "@/store/user";
-import { useI18n } from "vue-i18n";
-import useClipboard from "vue-clipboard3";
-import { showToast } from "vant";
-import addBankIcon from "@/assets/image/userCenter/addBank.png";
-import kycHighStatusIcon from "@/assets/image/userCenter/kycHighStatus.png";
-import store from "@/store/store";
-import { _getUnreadMsg } from '@/service/im.api';
-import { themeStore } from "@/store/theme";
-const { t } = useI18n();
-const { toClipboard } = useClipboard();
+import assetsHead from '@/components/Transform/assets-head/index.vue'
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { _getIdentify, _getKycHighLevel, _logOut, _switchAccount } from '@/service/user.api.js'
+import { useUserStore } from '@/store/user'
+import { _getUnreadMsg } from '@/service/im.api'
+import { themeStore } from '@/store/theme'
+import store from '@/store/store'
+import userIcon1 from '@/assets/image/userCenter/user_1.png'
+import userIcon2 from '@/assets/image/userCenter/user_2.png'
+import userIcon3 from '@/assets/image/userCenter/user_3.png'
+import userIcon4 from '@/assets/image/userCenter/user_4.png'
+import userIcon5 from '@/assets/image/userCenter/user_5.png'
+import userIcon6 from '@/assets/image/userCenter/user_6.png'
+import userIcon7 from '@/assets/image/userCenter/user_7.png'
+import userIcon8 from '@/assets/image/userCenter/user_8.png'
-const thStore = themeStore();
+const { t, locale } = useI18n()
+const router = useRouter()
+const userStore = useUserStore()
+const thStore = themeStore()
-const router = useRouter();
-const userStore = useUserStore();
-const status = ref(null);
-const kycHighStatus = ref(null);
-const unreadMsg = ref('');
-const state = reactive({
- cellList: [
- {
- title: t("safe"),
- list: [
- { icon: "shield-o", title: t("safe"), path: "/safety" },
- { icon: "setting-o", title: t("changePassword"), path: "/changePassword" },
- { icon: addBankIcon, title: t("AddPaymentMethod"), path: "/payMentMethod/list" },
- ],
- },
- {
- title: t("universal"),
- list: [
- { icon: "font-o", title: t("language"), path: "/language" },
- { icon: "service-o", title: t("onLineService"), path: "/customerService" },
- {
- icon: "idcard",
- title: t("authVerify"),
- path: "/certificationCenter",
- show: true,
- },
- { icon: "todo-list-o", title: t("账变记录"), path: "/cryptos/accountChange" },
- { icon: "gold-coin-o", title: t("计价方式"), path: "/cryptos/exchangeRate" },
- ],
- },
- ],
-});
-const quickList = reactive([
- {
- name: "安全",
- path: "/safety",
- icon: new URL(
- `../../assets/theme/${thStore.theme}/image/assets-center/fast-icon2.png`,
- import.meta.url
- ),
- },
- {
- name: "修改密码",
- path: "/changePassword",
- icon: new URL(
- `../../assets/theme/${thStore.theme}/image/assets-center/fast-icon3.png`,
- import.meta.url
- ),
- },
- {
- name: "账变记录",
- path: "/cryptos/accountChange",
- icon: new URL(
- `../../assets/theme/${thStore.theme}/image/assets-center/fast-icon1.png`,
- import.meta.url
- ),
- },
- {
- name: "邀请推广",
- path: "/promote",
- icon: new URL(
- `../../assets/theme/${thStore.theme}/image/assets-center/fast-icon4.png`,
- import.meta.url
- ),
- },
- {
- name: "authVerify",
- path: "/certificationCenter",
- icon: new URL(
- `../../assets/theme/${thStore.theme}/image/assets-center/fast-icon5.png`,
- import.meta.url
- ),
- },
-]);
-const onRoute = (path) => {
- console.log(path);
- router.push(path);
-};
+const status = ref(null)
+const kycHighStatus = ref(null)
+const unreadMsg = ref('')
+const showAccountPopup = ref(false)
+
+const REAL_ACCOUNT_BACKUP_KEY = 'REAL_ACCOUNT_BACKUP'
+
+// 当前语言展示文案（与语言设置页一致：简体中文、繁体中文、English 等）
+const languageLabel = computed(() => {
+ const map = {
+ 'zh-CN': '简体中文',
+ 'CN': '繁体中文',
+ 'en': 'English',
+ 'de': 'Deutsch',
+ 'es': 'Español',
+ 'fr': 'Français',
+ 'Italy': 'Italiano',
+ 'Japanese': '日本語',
+ 'Korean': '한국어',
+ 'pt': 'Português',
+ 'vi': 'Tiếng Việt',
+ 'gr': 'Ελληνικά',
+ 'th': 'ไทย',
+ }
+ return map[locale.value] || map['zh-CN'] || '简体中文'
+})
+const themeLabel = computed(() => {
+ const theme = thStore.theme || 'white'
+ return theme === 'white' ? t('浅色模式') || '浅色模式' : t('深色模式') || '深色模式'
+})
+
+// accountType：1 为模拟账户
+const isSimulation = computed(() => userStore.userInfo?.accountType === 1)
+
+// 掩码账号：前几位 + ****
+const maskedAccount = computed(() => {
+ const account = userStore.userInfo?.username || userStore.userInfo?.email || ''
+ if (!account) return '--'
+ if (account.includes('@')) {
+ const [name, domain] = account.split('@')
+ if (name.length <= 3) return name + '****@' + (domain || '')
+ return name.slice(0, 3) + '****@' + (domain || '')
+ }
+ if (account.length <= 4) return account + '****'
+ return account.slice(0, 3) + '****'
+})
+
+// 图标：静态导入以便打包后正确解析（动态 new URL 在生产构建中会失效）
+const userIconUrls = [userIcon1, userIcon2, userIcon3, userIcon4, userIcon5, userIcon6, userIcon7, userIcon8]
+const userIcon = (n) => userIconUrls[n - 1] || userIconUrls[7]
+
+// 完整菜单；模拟账户(accountType===1)只保留语言切换
+const mergedMenuList = computed(() => {
+ const list = [
+ { title: t('authVerify'), path: '/certificationCenter', icon: userIcon(1), rightText: status.value != null ? statusText(status.value) : undefined },
+ { title: t('账变记录'), path: '/cryptos/accountChange', icon: userIcon(2) },
+ { title: t('信用分'), path: '/my/creditScore', icon: userIcon(4) },
+ { title: t('助力贷'), path: '/cryptos/loan', icon: userIcon(3) },
+ { title: t('邀请推广'), path: '/promote', icon: userIcon(5) },
+ { title: t('安全'), path: '/safety', icon: userIcon(6) },
+ { title: t('language'), path: '/language', icon: userIcon(7), rightText: languageLabel.value },
+ ]
+ if (isSimulation.value) {
+ return list.filter((item) => item.path === '/language')
+ }
+ return list
+})
+
+function statusText(s) {
+ if (s === 0 || s === 3) return t('notCertified')
+ if (s === 1) return t('reviewing')
+ if (s === 2) return t('verified')
+ if (s === 3) return t('noPassView')
+ return ''
+}
+
+function onRoute(path) {
+ router.push(path)
+}
+
+function onMenuItemClick(item) {
+ if (item.path === '/theme') {
+ // 主题切换：无独立页则跳转语言页或弹窗，这里简单跳语言页或保持当前
+ router.push('/language')
+ return
+ }
+ router.push(item.path)
+}
+
+function loginOut() {
+ _logOut({ token: userStore.userInfo?.token }).then(() => {
+ userStore.userInfo = {}
+ store.state.user.userInfo = {}
+ router.push('/login')
+ })
+}
+
+// 切换为模拟账户：先保存真实账户信息与 token，再请求并替换
+function onSwitchToSimulation() {
+ const current = userStore.userInfo
+ if (current && current.token && current.accountType !== 1) {
+ try {
+ localStorage.setItem(REAL_ACCOUNT_BACKUP_KEY, JSON.stringify({ ...current }))
+ } catch (e) {}
+ }
+ _switchAccount().then((data) => {
+ const info = data && typeof data === 'object' ? data : {}
+ const token = info.token != null ? info.token : (userStore.userInfo?.token || '')
+ const next = { ...userStore.userInfo, ...info, token }
+ userStore.userInfo = next
+ store.state.user.userInfo = next
+ showAccountPopup.value = false
+ })
+}
+
+// 当前为模拟账户时，点击「真实账户」：用本地保存的真实账户与 token 替换
+function onSwitchToReal() {
+ try {
+ const raw = localStorage.getItem(REAL_ACCOUNT_BACKUP_KEY)
+ if (!raw) return
+ const backup = JSON.parse(raw)
+ if (backup && backup.token) {
+ userStore.userInfo = { ...backup }
+ store.state.user.userInfo = { ...backup }
+ showAccountPopup.value = false
+ }
+ } catch (e) {}
+}
onMounted(() => {
- if (userStore.userInfo && userStore.userInfo.token) {
- getIdentify();
- getKycHighLevel();
- fetchUnread();
+ if (userStore.userInfo?.token) {
+ getIdentify()
+ getKycHighLevel()
+ fetchUnread()
}
-});
+})
-const cellList = computed(() => {
- if (userStore.userInfo && userStore.userInfo.token) {
- return [
- // {
- // title: t('safe'), list: [
- // // { icon: 'shield-o', title: t('safe'), path: '/safety' },
- // // { icon: 'setting-o', title: t('changePassword'), path: '/changePassword' },
- // { icon: addBankIcon, title: t('AddPaymentMethod'), path: '/payMentMethod/list' }
- // ]
- // },
- {
- title: t("universal"),
- list: [
- {
- icon: new URL(
- "../../assets/image/assets-center/language.png",
- import.meta.url
- ),
- title: t("language"),
- path: "/language",
- },
- {
- icon: new URL(
- "../../assets/image/assets-center/onLineService.png",
- import.meta.url
- ),
- title: t("onLineService"),
- path: "/customerService",
- },
- {
- icon: new URL(
- "../../assets/image/assets-center/authVerify.png",
- import.meta.url
- ),
- title: t("authVerify"),
- path: "/certificationCenter",
- show: true,
- },
- {
- icon: new URL(
- "../../assets/image/assets-center/AdvancedCertification.png",
- import.meta.url
- ),
- title: t("高级认证"),
- path: "/advancedCtf",
- show: true,
- },
- // { icon: 'todo-list-o', title: t('账变记录'), path: '/cryptos/accountChange' },
- {
- icon: new URL(
- "../../assets/image/assets-center/valuation.png",
- import.meta.url
- ),
- title: t("计价方式"),
- path: "/cryptos/exchangeRate",
- },
- {
- icon: new URL(
- "../../assets/image/assets-center/AddPaymentMethod.png",
- import.meta.url
- ),
- title: t("AddPaymentMethod"),
- path: "/payMentMethod/list",
- },
- ],
- },
- // {
- // title: t('用户'), list: [
- // { icon: 'link-o', title: t('邀请推广'), path: '/promote' },
- // ]
- // },
- {
- title: t("更多"),
- list: [
- {
- icon: new URL("../../assets/image/assets-center/help.png", import.meta.url),
- title: t("帮助中心"),
- path: "/helpCenter",
- },
- {
- icon: new URL(
- "../../assets/image/assets-center/aboutUs.png",
- import.meta.url
- ),
- title: t("关于我们"),
- path: "/aboutUs",
- },
- ],
- },
- ];
- } else {
- return [
- {
- title: t("universal"),
- list: [
- {
- icon: new URL("../../assets/image/assets-center/help.png", import.meta.url),
- title: t("language"),
- path: "/language",
- },
- // { icon: 'gold-coin-o', title: t('计价方式'), path: '/cryptos/exchangeRate' },
- {
- icon: new URL(
- "../../assets/image/assets-center/aboutUs.png",
- import.meta.url
- ),
- title: t("onLineService"),
- path: "/customerService",
- },
- ],
- },
- // {
- // title: t('更多'), list: [
- // { icon: 'question-o', title: t('帮助中心'), path: '/helpCenter' },
- // { icon: 'user-o', title: t('关于我们'), path: '/aboutUs' }
- // ]
- // }
- ];
- }
-});
-const loginOut = () => {
- _logOut({
- token: userStore.userInfo.token,
- }).then((res) => {
- userStore.userInfo = {};
- store.state.user.userInfo = {};
- });
-};
-const getIdentify = () => {
- _getIdentify().then((data) => {
- status.value = data.status;
- });
-};
-const getKycHighLevel = () => {
- _getKycHighLevel().then((data) => {
- kycHighStatus.value = data.status;
- });
-};
-const copy = async () => {
- try {
- await toClipboard(userStore.userInfo && userStore.userInfo.usercode);
- showToast(t("copySuccess"));
- } catch (e) {
- console.error(e);
- }
-};
-
-//TODO: 获取未读消息,接口返回数据结构有问题
-const fetchUnread = () => { // 获取未读
- _getUnreadMsg().then(res => {
- unreadMsg.value = (res * 1 > 0) ? res * 1 : '';
- })
+function getIdentify() {
+ _getIdentify().then((data) => { status.value = data?.status })
+}
+function getKycHighLevel() {
+ _getKycHighLevel().then((data) => { kycHighStatus.value = data?.status })
+}
+function fetchUnread() {
+ _getUnreadMsg().then((res) => { unreadMsg.value = (res * 1 > 0) ? res * 1 : '' })
}
</script>
<style lang="scss" scoped>
-:deep(.van-cell-group__title) {
- background: $main2_background !important;
- padding: 12px 16px;
+@import '@/assets/css/variable.scss';
+
+.my-center-page {
+ min-height: 100vh;
+ background: $main_background;
+ padding-bottom: calc(80px + constant(safe-area-inset-bottom));
+ padding-bottom: calc(80px + env(safe-area-inset-bottom));
}
-:deep(.van-cell-group) {
- .van-icon {
+.page-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 5.5rem;
+ padding: 0 2rem;
+ background: #fff;
+ box-sizing: border-box;
+
+ .header-left {
+ width: 4rem;
+ height: 4rem;
display: flex;
align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ }
+
+ .back-icon {
+ font-size: 2.2rem;
+ color: $text_color;
+ }
+
+ .header-title {
+ font-size: 3.2rem;
+ font-weight: 700;
+ color: $text_color;
+ margin: 0;
+ }
+
+ .header-right {
+ cursor: pointer;
+ color: $text_color;
}
}
-:deep(.van-cell) {
- background: $mainBgColor;
- border-bottom: 1px solid $border_color;
+.guest-wrap {
+ .guest-title {
+ font-size: 2.4rem;
+ font-weight: 700;
+ color: $text_color;
+ margin: 0 0 0.8rem;
+ }
- &:hover {
- background: $mainBgColor;
+ .guest-desc {
+ color: $text_color1;
+ font-size: 2.6rem;
+ margin: 0 0 2rem;
+ }
+
+ .guest-btns {
+ display: flex;
+ gap: 1.2rem;
}
}
-:deep(.van-cell-group__title) {
- background: $mainBgColor;
+/* 用户信息卡（深色） */
+.user-card {
+ margin: 2rem 2.4rem;
+ border-radius: 2rem;
+ overflow: visible;
+ background: linear-gradient(-89deg, #5f5f5f 0%, #000000 100%), linear-gradient(#000000, #000000);
+ box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.15);
+ position: relative;
}
-:deep(.van-nav-bar__content) {
- background: $mainBgColor;
+.user-card-inner {
+ padding: 2.4rem 2rem;
+ display: flex;
+ align-items: center;
+ position: relative;
+ border-radius: inherit;
+ // overflow: hidden;
}
-:deep(.van-icon) {
- color: $text_color;
+.user-avatar {
+ width: 7rem;
+ height: 7rem;
+ border-radius: 50%;
+ overflow: hidden;
+ background: $main_background;
+ flex-shrink: 0;
+
+ img {
+ width: 70%;
+ height: 70%;
+ object-fit: cover;
+ }
}
-:deep(.van-cell__title) {
- color: $text_color;
+.user-info {
+ flex: 1;
+ margin-left: 2rem;
+ min-width: 0;
}
-:deep(.van-cell:after) {
- border: none;
+.user-row {
+ display: flex;
+ align-items: center;
+ gap: 0.4rem;
+ cursor: pointer;
+ position: relative;
+
+ .user-account {
+ font-size: 3.2rem;
+ font-weight: 600;
+ color: #fff;
+ }
+
+ .user-arrow {
+ font-size: 2.4rem;
+ color: rgba(255, 255, 255, 0.7);
+ }
}
-:deep(.van-grid-item__content) {
- background: $mainBgColor;
+.user-uid {
+ font-size: 2.6rem;
+ color: rgba(255, 255, 255, 0.75);
+ margin-top: 0.6rem;
}
-:deep(.van-grid-item__text) {
- color: $text_color;
- font-size: 13px;
- height: 30px;
-}
-
-.my-index {
- padding-bottom: calc(80px + constant(safe-area-inset-bottom)) !important;
- padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
-}
-
-h1.title {
- font-size: 22px;
- line-height: 26px;
-}
-
-.sub-text {
- padding: 10px 0;
- color: $text_color1;
- font-size: 12px;
-}
-
-.name {
- font-size: 16px;
- line-height: 20px;
-}
-
-.yellow {
+.user-vip {
+ position: absolute;
+ top: 2rem;
+ right: 2rem;
+ font-size: 2.4rem;
+ font-weight: 600;
color: #f5c421;
}
-.red {
- color: $red;
+/* 合并菜单列表（白卡片） */
+.menu-list {
+ margin: 0 2.4rem;
}
-.green {
- color: $green;
+.menu-item {
+ display: flex;
+ align-items: center;
+ padding: 2.2rem 2rem;
+ background: #fff;
+ border-radius: 2.2rem;
+ margin-bottom: 1.8rem;
+ box-shadow: 0rem 1.2rem 4rem 0rem rgba(0, 0, 0, 0.18);
+ cursor: pointer;
+ box-sizing: border-box;
+
+ &:last-of-type {
+ margin-bottom: 0;
+ }
}
-.id-text {
- font-size: 14px;
- font-weight: 700;
+.menu-icon {
+ width: 3rem;
+ height: 3rem;
+ margin-right: 1.6rem;
+ flex-shrink: 0;
+ object-fit: contain;
}
-.grid-item-img {
- width: 48px;
- height: 48px;
- margin-bottom: 5px;
+.menu-title {
+ flex: 1;
+ font-size: 2.2rem;
+ color: $text_color;
+ text-align: left;
}
-.van-grid-main {
- padding: 5px 0;
+.menu-right-text {
+ font-size: 2.2rem;
+ color: $text_color;
+ margin-right: 0.6rem;
}
-.cell-img {
- width: 20px;
- height: 20px;
- margin-right: 10px;
+.menu-arrow {
+ font-size: 2.8rem;
+ color: $text_color1;
+}
+
+/* user-row 下方弹出框（不用 van-popup） */
+
+.account-option-pill {
+ position: absolute;
+ left: 0;
+ top: 4rem;
+ border: 1px solid $text_color;
+ border-radius: 1.5rem;
+ font-size: 2.8rem;
+ color: $text_color;
+ text-align: center;
+ background: $main_background;
+ padding: 1.5rem 2rem;
+ display: inline;
+ z-index: 10;
+ // width: 20rem;
+ // height:7rem;
+}
+
+.logout-wrap {
+ text-align: center;
+ padding: 3rem 2rem 2rem;
+}
+
+.logout-btn {
+ font-size: 3rem;
+ color: #f2495e;
+ cursor: pointer;
}
</style>
--
Gitblit v1.9.3