fashion-ssr-vue3/pages/account/settings.vue

<script lang='ts' setup>
const activeName = ref()
const router = useRouter()
const route = useRoute()

function handleClick(tab: any) {
  const tabName = tab.paneName
  activeName.value = tabName
  router.push({
    path: '/account/settings',
    query: {
      tab: tabName,
    },
  })
}
onMounted(() => {
  activeName.value = route.query.tab as string
})
</script>

<template>
  <div>
    <div class="py-18px px-24px bg-#FAFAFA b-rd-10px text-#000 text-20px fw-500 mb-20px">
      Settings
    </div>
    <el-tabs v-model="activeName" class="favorite-tabs" @tab-click="handleClick">
      <el-tab-pane label="My Profile" name="profile">
        <Business-account-settings-profile v-if="activeName === 'profile'" />
      </el-tab-pane>
      <el-tab-pane label="Change Password" name="password">
        <Business-account-settings-changePsw v-if="activeName === 'password'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang='less' scoped>
.favorite-tabs {
  background-color: #FAFAFA;
  border-radius: 10px;
  padding: 20px;
  padding-top: 0px;
  .el-tab-pane{
    display: flex;
    justify-content: center;
    padding: 60px 0;
  }
  ::v-deep(.el-tabs__header){
    .el-tabs__item{
      color: #333;
      &.is-active {
        color: #C58C64!important;
      }
    }
    .el-tabs__active-bar{
      background-color: #C58C64!important;
    }
  }
}
</style>