2025-11-05 08:55:44 +08:00
|
|
|
<template>
|
2025-11-05 09:13:15 +08:00
|
|
|
<div class="tab-page">
|
|
|
|
|
<!-- Tab页内容区域 -->
|
|
|
|
|
<div class="tab-page-content">
|
|
|
|
|
<slot></slot>
|
2025-11-05 08:55:44 +08:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup>
|
2025-11-05 09:13:15 +08:00
|
|
|
import { defineProps } from 'vue'
|
2025-11-05 08:55:44 +08:00
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
id: { type: String, required: true },
|
2025-11-05 09:13:15 +08:00
|
|
|
title: { type: String, default: '标签页' }
|
2025-11-05 08:55:44 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.tab-page {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
2025-11-05 09:13:15 +08:00
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
2025-11-05 08:55:44 +08:00
|
|
|
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>
|
