<!-- 账号与安全中心 -->
<template>
  <div class="d-flex pa-3 default-width" style="height: 700px;">
    <v-card class="left">
      <h3>{{ $t('setting.accountSettings') }}</h3>
      
      <v-list>
        <v-list-item
          v-for="item in items"
          :key="item.value"
          :to="item.path"
          color="primary"
        >
          <v-list-item-title class="list-item">{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-card>

    <v-card class="right ml-3" style="padding: 30px 60px">
      <router-view></router-view>
    </v-card>
  </div>
</template>

<script setup>
defineOptions({ name:'personal-account-index'})
import { useI18n } from '@/hooks/web/useI18n'
const { t } = useI18n()

const items = [
  { title: t('setting.accountBinding'), path: '/recruit/personal/accountSettings/accountBinding', },
  { title: t('setting.realNameAuthentication'), path: '/recruit/personal/accountSettings/realAuthentication', },
  { title: t('setting.editPassword'), path: '/recruit/personal/accountSettings/editPassword', },
  { title: t('setting.privacyPolicySettings'), path: '/recruit/personal/accountSettings/privacySettings' }
]
</script>

<style lang="scss" scoped>
.left {
  width: 220px;
}
.right {
  flex: 1;
}
:deep(.v-list-item) {
  padding: 0 !important;
}
.list-item {
  height: 62px;
  width: 100%;
  line-height: 62px;
  font-weight: 500;
  // color: var(--color-666);
  font-size: 16px;
  cursor: pointer;
  margin: 0;
  padding-left: 40px;
  text-align: left;
  transition: all .3s;
}
h3 {
  font-size: 20px;
  padding: 30px 0 30px 40px;
  text-align: left;
  font-weight: 600;
}
</style>