<template>
    <div>
        <a-tab-pane key="props" tap="形变" title="形变原数据">
            <div class="tab-content">
                <raw-data>

                </raw-data>
            </div>
        </a-tab-pane>
    </div>
</template>

<script setup>
import rawData from './raw-data.vue';
</script>

<style lang="scss" scoped>
.data-storage-container {
    padding: 16px;
    background: #f5f5f5;
    min-height: 100vh;
}

.page-header {
    margin-bottom: 16px;

    .page-title {
        font-size: 20px;
        font-weight: 500;
        color: #262626;
        margin: 0;
    }
}

.tabs-section {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tab-content {
    margin-top: 16px;
}

.filter-section {
    margin-bottom: 16px;
    padding: 12px;
    background: #fafafa;
    border-radius: 4px;

    .filter-item {
        display: inline-flex;
        align-items: center;

        .filter-label {
            font-size: 14px;
            color: #595959;
            margin-right: 8px;
        }
    }
}

.uploaded-files-section {
    .section-title {
        font-size: 16px;
        font-weight: 500;
        color: #262626;
        margin: 0 0 16px 0;
    }
}

.preview-container {
    text-align: center;

    .image-preview,
    .video-preview {
        max-height: 500px;
        overflow: hidden;
    }

    .file-info {
        text-align: left;

        p {
            margin: 8px 0;
            font-size: 14px;
            color: #595959;
        }
    }
}

:deep(.arco-tabs-nav) {
    margin-bottom: 0;
}

:deep(.arco-tabs-tab) {
    font-size: 14px;
    padding: 8px 16px;
}

:deep(.arco-table-th) {
    background-color: #fafafa;
    color: #8c8c8c;
    font-weight: 500;
}

:deep(.arco-table-td) {
    padding: 12px 16px;
}

:deep(.arco-tag) {
    border-radius: 4px;
    font-size: 12px;
}

:deep(.arco-btn-size-small) {
    padding: 2px 8px;
    font-size: 12px;
}

:deep(.arco-upload-drag:hover) {
    border-color: #1890ff;
}
</style>