duanju_manage/modules/User/views/user/center.vue

<template>
  <div class="flex flex-col sm:flex-row dark:bg-regal-dark w-full">
    <el-card shadow="never" class="w-full sm:w-[35rem] h-[32rem]">
      <template #header>
        <div class="card-header">
          <span>个人资料</span>
        </div>
      </template>
      <div class="flex flex-col w-full">
        <div class="w-full">
          <Profile />
        </div>
      </div>
    </el-card>

    <el-tabs v-model="activeName" class="pl-3 pr-3 bg-white dark:bg-regal-dark mt-2 sm:mt-0 w-full ml-0 sm:ml-2">
      <el-tab-pane label="登录日志" name="login_log">
        <LoginLog />
      </el-tab-pane>
      <el-tab-pane label="操作日志" name="operation_log">
        <OperateLog />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import Profile from './components/profile.vue'
import LoginLog from './components/loginLog.vue'
import OperateLog from './components/operateLog.vue'

const activeName = ref('login_log')
</script>

<style scoped>
.el-tabs {
  --el-tabs-header-height: 62px !important;
}

.el-tabs .el-tabs__item {
  font-size: 18px !important;
}
</style>