1

李凌

2 days ago dce10d37ad35efe8ed1d39d6e5fcf7e4904381df

 src/views/my/index.vue

@@ -1,484 +1,448 @@
<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="26" @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") }}&nbsp;{{ $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") }}&nbsp;{{ $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="4" :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";
import { getTimeZone } from "@/utils/day.js";
console.log("时区", getTimeZone());
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 { t, locale } = useI18n()
const router = useRouter()
const userStore = useUserStore()
const thStore = themeStore()

const { t } = useI18n();
const { toClipboard } = useClipboard();
const status = ref(null)
const kycHighStatus = ref(null)
const unreadMsg = ref('')
const showAccountPopup = ref(false)

const thStore = themeStore();
const REAL_ACCOUNT_BACKUP_KEY = 'REAL_ACCOUNT_BACKUP'

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("添加提款方式"), 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);
};
// 当前语言展示文案（与语言设置页一致：简体中文、繁体中文、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: '/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("添加提款方式"),
            path: "/payMentMethod/list",
          },
          {
            icon: new URL("../../assets/image/assets-center/help.png", import.meta.url),
            title: t("W-8BEN Form"),
            path: "/w8ben",
          },
        ],
      },
      // {
      //   title: t('用户'), list: [
      //     { icon: 'link-o', title: t('邀请推广'), path: '/promote' },
      //   ]
      // },
      {
        title: t("更多"),
        list: [
          { title: t('信用贷'), icon: new URL(`../../assets/image/assets-center/AddPaymentMethod.png`, import.meta.url), path: '/cryptos/loan' },
          {
            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>