<!--  -->
<template>
    <div class="goals">
        <SmallNav />
        <div class="goals-content boderAndRadius">
          <div class="goals-content-title">
            <div class="goals-content-title-img">
              <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2346299354,1694591848&fm=26&gp=0.jpg" alt="">
            </div>
            <div class="goals-content-title-right commonFont">
              <span style="font-size:14px;">熊成强</span>
              <span style="font-size:12px;">技术部门</span>
            </div>
          </div>
          <div class="goals-content-tabbar">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
              <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
              <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
              <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
            </el-tabs>
          </div>
        </div>
    </div>
</template>

<script>
import SmallNav from '@/components/kpi-layout/SmallNav'
export default {
  data () {
    return {
      activeName: 'second'
    }
  },
  components: {
    SmallNav
  },
  computed: {},
  beforeMount () {},
  mounted () {},
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  },
  watch: {}

}

</script>

<style lang='less' scoped>
.goals{
  &-content{
    padding: 28px;
    &-title{
      margin: 0 0 10PX 0;
      display: flex;
      align-items: center;
      &-img{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
        }
      }
      &-right{
        margin-left: 20px;
        display: flex;
        flex-direction: column;
      }
    }
    &-tabbar{

    }
  }
}
</style>
