<!-- 账号与安全中心 -->
<template>
  <div class="d-flex pa-3 default-width" style="height: 700px;">
    <v-card class="left">
      <h3>账号设置</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-1" style="padding: 30px 60px">
      <router-view></router-view>
    </v-card>
  </div>
</template>

<script setup>
defineOptions({ name:'personal-account-index'})
const items = [
  { title: '账号绑定', path: '/personalAccount/accountBinding', },
  { title: '实名认证', path: '/personalAccount/realAuthentication', },
  { title: '修改密码', path: '/personalAccount/editPassword', },
  { title: '隐私设置', path: '/personalAccount/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: #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>