<template>
<div class="detail-block">
  <el-tabs
      v-model="activeName"
      type="card"
      class="demo-tabs"
      @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="third" :disabled="true"></el-tab-pane>
  </el-tabs>
</div>
</template>

<script setup lang="jsx">
const activeName = ref('first')
const handleClick = (tab, event) => {
  console.log(tab, event)
  if(tab.index.value === 0){

  }
}
</script>

<style scoped lang="scss">
.detail-block{
  padding-top: 15px;
  :deep(.el-tabs__nav-scroll){
    width: 100%;
    display: flex;
    .el-tabs__nav{
      display: flex;
      flex: 1;
      .el-tabs__item{
        flex: 1;
        font-size: 16px;
      }
      .is-active{
        color: black;
        background-color: #DED0B2;
      }
    }
  }
}
</style>
