menduner/src/views/recruit/personal/PersonalCenter/index.vue

<template>
  <div class="pt-3 d-flex parent">
    <v-card class="left">
      <v-list class="side-box" color="primary">
        <v-list-subheader class="title mb-3">个人中心</v-list-subheader>
        <v-divider></v-divider>
        <template v-for="(item, index) in list">
          <template v-if="!item.children.length">
            <v-list-item
              :key="`${item.name}_${index}`"
              active-class="active"
              color="primary"
              :href="item.path"
              :to="item.path"
              :prepend-icon="item.icon"
              :title="getCurrentLocaleLang() === 'zh_CN' ? item.title : item.enName"
            >
            </v-list-item>
          </template>
          <v-list-group
            v-else
            color="primary"
            :key="`${item.path}_${item.title}`"
            :prepend-icon="item.icon"
          >
            <template v-slot:activator="{ props }">
              <v-list-item v-bind="props" :title="getCurrentLocaleLang() === 'zh_CN' ? item.title : item.enName"></v-list-item>
            </template>
            <v-list-item
              v-for="(val, i) in item.children"
              :key="i"
              color="primary"
              :href="val.path"
              style="padding-left: 40px;"
              :to="val.path"
              :title="getCurrentLocaleLang() === 'zh_CN' ? val.title : val.enName"
              :value="val.path"
            ></v-list-item>
          </v-list-group>
        </template>
      </v-list>
    </v-card>

    <v-card class="ml-3 pa-3 page">
      <router-view></router-view>
    </v-card>
  </div>
</template>

<script setup>
defineOptions({ name: 'person-center'})
import { computed } from 'vue'
import { getCurrentLocaleLang } from '@/utils/lang.js'
import { useUserStore } from '@/store/user'
import personCenterRoute from '@/router/modules/components/recruit/personCenter'

// 左侧菜单列表
const list = computed(() => {
  return getList(personCenterRoute[0].children[0].children)
})

const getList = (arr, obj = []) => {
  arr.forEach(element => {
    if (element.show) return
    let data = {}
    data = {
      title: element?.meta?.title,
      enName: element?.meta?.enName,
      icon: element?.meta?.icon,
      name: element?.name,
      path: element?.path,
      children: []
    }
    if (element?.children) {
      getList(element.children, data.children)
    }
    obj.push(data)
  })
  return obj
}

// 更新账户信息
const store = useUserStore()
const updateAccountInfo = async () => {
  await store.getUserAccountInfo()
}
updateAccountInfo()
</script>

<style scoped lang="scss">
.parent {
  width: 1300px;
  max-width: 1300px;
  min-width: 1300px;
  margin: 0 auto;
  height: calc(100vh - 100px);
  overflow-y: auto;
}
.page {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.left {
  position: sticky;
  width: 220px;
  height: calc(100vh - 113px);
}
.title {
  color: var(--color-333);
  font-weight: 600;
  font-size: 20px;
}
::-webkit-scrollbar {
  width: 6px;
  height: 10px;
}
::-webkit-scrollbar-thumb, .temporaryAdd ::-webkit-scrollbar-thumb, .details_edit ::-webkit-scrollbar-thumb {
  // 滚动条-颜色
  background: #c3c3c379;
}
::-webkit-scrollbar-track, .temporaryAdd ::-webkit-scrollbar-track, .details_edit ::-webkit-scrollbar-track {
  // 滚动条-底色
  background: #e5e5e58f;
}
</style>