<template>
  <div class="ob-overview-content">
    <div class="ob-main-left">
      <img src="../images/overview-left.svg">
    </div>
    <div class="ob-main-right">
      <el-tabs v-model="activeName" class="customoverview">
        <el-tab-pane v-for="item in btnArr" :key="item.name" :name="item.name">
          <span slot="label">
            <el-button round size="small" class="ob-header-btn">{{ item.name }}</el-button>
          </span>
          <img v-if="activeName == '资源状态'" src="../images/overview-right.svg">
          <img v-if="activeName == '元数据'" src="../images/yuanshuju.svg">
          <img v-if="activeName == '事件'" src="../images/shijian.svg">

        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      btnArr: [{
        name: '资源状态'
      }, {
        name: '元数据'
      }, {
        name: '事件'
      }],
      activeName: '资源状态'
    }
  }
}
</script>
<style lang="scss" scoped>
.ob-overview-content{
  display: flex;
  padding: 20px;
  padding-top:100px;
  .ob-main-left{
    width: 40%;
    img{
      width: 100%;
    }
  }
  .ob-main-right{
    width: 60%;
    margin-left: 24px;
    background: #FFFFFF;
    border-radius: 12px;
    overflow: overlay;
    padding:20px;
    img{
      width: 100%;
      margin-top:20px;
    }
  }
  .customoverview ::v-deep .el-tabs__header{
    position: inherit !important;
    padding: 0 !important;
  }
  .customoverview ::v-deep .el-tabs__nav-wrap{
    padding: 0 !important;
  }
  .ob-header-btn{
    width: 100px;
    height: 32px;
    box-sizing: border-box
  }
}
</style>
