<script setup lang="ts">
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>
<template>
  <div class="notice">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="未读" name="first">
        <div class="list">
          <p class="scrollbar-item">
            <el-badge is-dot class="item">query</el-badge>
          </p>
          <p class="scrollbar-item">
            <el-badge is-dot class="item">query</el-badge>
          </p>
          <p class="scrollbar-item">
            <el-badge is-dot class="item">query</el-badge>
          </p>
        </div>
      </el-tab-pane>
      <el-tab-pane label="全部" name="second">
        <div class="list">
          <p class="scrollbar-item">
            <el-badge is-dot class="item">query</el-badge>
          </p>
          <p class="scrollbar-item">
            <el-badge is-dot class="item">query</el-badge>
          </p>
          <p class="scrollbar-item">
            <el-badge is-dot class="item">query</el-badge>
          </p>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
.notice {
  .list {
    display: flex;
    flex-direction: column;
    .scrollbar-item {
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: start;
      // height: 50px;
      margin: 10px;
      text-align: center;
      border-radius: 4px;
      // background: var(--el-color-primary-light-9);
      // color: var(--el-color-primary);
    }
  }
}
</style>
