<template>
    <div>
        <StackedAreaChart />
        <div class="p-12 backitems round-12 mt-10 bg-ef">
            <div class="flex-items-center justify-between">
                <div>
                    <div class="pl-12 relative fw-600 title">复盘区</div>
                    <div class="fs-12 color-888">分析视频在每个帧数的亮点与爆点，支持点击定位跳转播放</div>
                </div>
                <el-button type="primary" round size="small">+ 添加帧复盘</el-button>
            </div>
            <div v-for="(item, index) in 3" :key="index" class="bg-fff round-10 p-10 mt-10 flex gap-10">
                <div class="w-48 h-48 round-10 bg-000" style="min-width: 48px;"></div>
                <div class="flex-1 pt-4">
                    <div class="flex justify-between">
                        <div class="flex fs-12 gap-10">
                            <span class="px-8 py-2 round-4 tag">优质画面</span>
                            <span class="round-6 color-main px-8 py-2"
                                style="background: rgba(var(--main-color), .05);box-shadow: 0 0 0 1px rgba(var(--main-color), .1);">0分2秒54</span>
                        </div>
                        <span class="fs-12 color-888">2026-06-27 09:40</span>
                    </div>
                    <div class="fs-12 mt-4">
                        纯朴科技：<span class="fw-500 color-000">大萨达撒大花洒等哈还</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import StackedAreaChart from './StackedAreaChart.vue';

</script>

<style scoped lang="scss">
.bg-ef {
    background-color: #f9fcfd;
}
.tag {
    color: #148cfc;
    background-color: #f5faff;
    box-shadow: 0 0 0 1px #63b4ff;
}
.title {
    &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 3px;
        border-radius: 20px;
        height: 16px;
        width: 6px;
        background-color: rgba(var(--main-color), 1);
    }
}
.backitems {
    border: 1px solid #eee;

    &:hover {
        border-color: rgba(var(--main-color), .4);
    }
}
</style>