<template>
    <div class="bg-fff round-12 p-16">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <div class="w-40 h-40 bg-main round-6 mr-10" style="background-color: rgba(var(--main-color), 0.1);"></div>
                <div class="section2-head">
                    <div class="fs-16 fw-700 color-000">更新记录</div>
                    <p class="fs-14 color-666">算法迭代与功能发布日志 (点击小卡片查看完整详情)</p>
                </div>
            </div>
            <div class="flex-items-center color-888 pointer">
                <svg t="1786427654955" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="6217" width="16" height="16">
                    <path
                        d="M566.2 166.9c-11.7-11.7-30.8-11.7-42.4 0L509.7 181c-11.7 11.7-11.7 30.8 0 42.4l254.9 254.9c11.7 11.7 11.7 30.8 0 42.4L509.2 776.1c-11.7 11.7-11.7 30.8 0 42.4l14.1 14.1c11.7 11.7 30.8 11.7 42.4 0l311.1-311.1c11.7-11.7 21.1-21.3 21-21.4-0.1-0.1 0-0.4 0.2-0.6 0.2-0.2-9.1-10-20.8-21.6l-311-311z"
                        fill="#888888" p-id="6218"></path>
                    <path
                        d="M769 460c16.5 0 30 13.5 30 30v20c0 16.5-13.5 30-30 30H129c-16.5 0-30-13.5-30-30v-20c0-16.5 13.5-30 30-30h640z"
                        fill="#888888" p-id="6219"></path>
                </svg>
                <span>全部</span>
            </div>
        </div>
        <section class="mt-20 flex gap-10">
            <div v-for="(item, index) in list" :key="index" class="round-6 p-12 pointer"
                style="background-color: #88888810; flex: 0 0 calc((100% - 10px * 3) / 4);overflow: hidden;">
                <div class="flex-items-center justify-between">
                    <div class="fs-12 flex gap-6">
                        <span class="bg-000 round-4 px-6 py-2 color-fff">v1.0.0</span>
                        <span class="round-4 px-6 py-2 color-main"
                            style="background-color: rgba(var(--main-color), 0.1);">算法升级</span>
                    </div>
                    <span class="fs-12 px-6 py-2 color-999">2026-10-25</span>
                </div>
                <div class="mt-10 ellipsis font-bold">视频《冬季风衣短视频_01.mp4》上传成功，可前往创作工作台进行下一步编辑与智能渲染。</div>
                <div class="mt-10 ellipsis color-888">
                    冬季风衣短视频_01.mp4》上传成功，可前往创作工作台进行下一步编辑与智能渲染冬季风衣短视频_01.mp4》上传成功，可前往创作工作台进行下一步编辑与智能渲染</div>
            </div>
        </section>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const tabIndex = ref(1)
const buttonList = [
    { label: '创作', value: 1, num: 6 },
    { label: '卡审', value: 2, num: 3 },
    { label: '审核', value: 3, num: 0 },
    { label: '任务', value: 4, num: 2 },
    { label: '账号', value: 5, num: 0 },
    { label: '导出', value: 6, num: 0 },
]
const list = ref([1, 2, 3, 4])
</script>

<style lang="scss" scoped>
.badge {
    background-color: red;
}

.active {
    background-color: #9022fd;
    color: #fff;

    .badge {
        background-color: #fff;
        color: #9022fd;
    }
}

.active1 {
    background-color: #a865ec;
    color: #fff;

    .badge {
        background-color: #fff;
        color: #9022fd;
    }
}

.bg-hh {
    background: #f4f6f7;
}
</style>