<template>
  <div class="tab-page">
    <!-- Tab页内容区域 -->
    <div class="tab-page-content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  id: { type: String, required: true },
  title: { type: String, default: '标签页' }
})

</script>

<style scoped>
.tab-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #ffffff;
  overflow: hidden;
}

.tab-page-content {
  flex: 1;
  padding: 16px;
  overflow: auto;
}

/* 滚动条样式 */
.tab-page-content::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.tab-page-content::-webkit-scrollbar-track {
  background: #f5f7fb;
  border-left: 1px solid #c7d2ea;
}

.tab-page-content::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #d0d6ea, #c0c7e0);
  border: 1px solid #b0b6d6;
  border-radius: 6px;
}

.tab-page-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #c1c7e2, #b2b8d9);
}
</style>