<template>
    <div class="BIfx">
      <el-tabs v-model="activeName">
        <el-tab-pane label="宏观市场分析" name="first">
          <img class="img" src="@/assets/images/BI/hgscfx.png"/>
        </el-tab-pane>
        <el-tab-pane label="立项设计" name="second">
          <img class="img" src="@/assets/images/BI/lxsj.png"/>
        </el-tab-pane>
        <el-tab-pane label="专项债项目" name="third">
          <img class="img" src="@/assets/images/BI/zxz.png"/>
        </el-tab-pane>
        <el-tab-pane label="中标公告" name="fourth">
          <img class="img" src="@/assets/images/BI/zbgg.png"/>
        </el-tab-pane>
      </el-tabs>
    </div>
</template>

<script>
  export default {
    name: 'BI',
    data() {
      return {
        activeName:'first'
      }
    }
  }
</script>

<style lang="scss" scoped>
  .BIfx{
    background: #ffffff;
    padding: 16px;
    margin-top: 12px;
    ::v-deep .el-tabs{
      .el-tabs__nav-wrap::after {
        position: static !important;
      }
      .el-tabs__header{
        margin: 0;
        position: sticky;
        top: 102px;
        z-index: 999;
        background: #fff;
        .el-tabs__item{
          padding: 0 16px;
          font-size: 16px;
        }
        .is-active{
          font-weight: bold;
        }
      }
      .el-tabs__content{
        width: 100%;
      }
    }
    .img{
      width: 100%;
      margin-top: 30px;
    }
  }
</style>
