<template>
  <div class="g-p20 record">
    <div class="list g-p20">
      <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick">
        <el-tab-pane label="当前报警" name="1">
          <slot name="tab1"></slot>
        </el-tab-pane>
        <el-tab-pane label="历史报警" name="2">
          <slot name="tab2"></slot>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const activeName = ref('1')
  const handleClick = (e: any) => {}
</script>

<style lang="less" scoped>
  .list {
    min-height: 500px;
    width: 100%;
    background: #fff;
    border-radius: 10px;
  }
  :deep(.tabs) {
    .el-tabs__item {
      color: #333;
      font-weight: bold;
    }
    .el-tabs__active-bar {
      width: 70px;
      height: 5px;
      background: #2dcadc;
      border-radius: 2px;
      bottom: -11px;
    }
    .el-tabs__nav-scroll {
      height: 50px;
    }
  }
</style>
