<template>
    <div>
        <div class="flex-items-center justify-between mt-20">
            <el-button type="primary" size="small" plain>上传工程文件</el-button>
            <el-button size="small" text>常见问题</el-button>
        </div>
        <div>
            <div class="p-12 backitems round-12 mt-10 bg-fff" v-for="(item, index) in 1" :key="index">
                <div class="flex gap-10">
                    <div class="w-100 bg-000 h-80 round-10 hidden"></div>
                    <div>
                        <div class="font-bold">纯朴洁面油爆款框架_高转化卡点V2</div>
                        <div class="fs-12 color-888">上传工程时间：2026-08-17</div>
                        <div class="flex gap-10 mt-4">
                            <el-tag size="small">剪映 Draft / PR XML 兼容包</el-tag>
                            <span class="fs-12 color-888">48.2 MB · 保留 8 轨时间线</span>
                        </div>
                    </div>
                </div>
                <div class="flex-items-center justify-between mt-10 pt-10" style="border-top: 1px solid #f5f5f5;">
                    <div class="color-main round-6 px-10 py-2 fs-12 bg-xz">下载</div>
                    <div class="flex-items-center gap-6">
                        <span class="fs-12 color-888">访问权限</span>
                        <el-select placeholder="访问权限" style="width: 100px;" class="myselect" size="small">
                            <el-option v-for="item in qxOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>
                </div>
            </div>
        </div>
        <div class="p-12 backitems round-12 mt-10 bg-ts">
            <div class="font-bold color-main">* 爆款视频工程文件拆解与复用价值</div>
            <ul class="fs-12">
                <li class="mt-6 pl-16 relative dot">
                    <span class="fw-600">爆款框架微调：</span>
                    <span>下载爆款视频工程文件并导入剪映后，系统保留所有画轨、音轨、特效与花字时间线。只需替换特定镜头或产品，即可快速批量产出高质素材。</span>
                </li>
                <li class="mt-6 pl-16 relative dot">
                    <span class="fw-600">新人迅速上手：</span>
                    <span>新员工可通过解构优秀剪辑师的工程草稿，学习黄金Hook节奏、转场卡点与音效编排。</span>
                </li>
                <li class="mt-6 pl-16 relative dot">
                    <span class="fw-600">内网资产归档：</span>
                    <span>拍摄与剪辑人员在内网环境下无缝协作与工程同步，保障视频数字资产不丢失。</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const qxOptions = ref([
    { label: '公开', value: 0 },
    { label: '仅本部门', value: 1 },
    { label: '私密', value: 2 },
])

</script>

<style scoped lang="scss">
.bg-xz {
    background-color: rgba(var(--main-color), .1);
}
.bg-ts {
    background-color: rgba(var(--main-color), .04);
}
.dot {
    &::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 0;
        height: 4px;
        width: 4px;
        border-radius: 10px;
        background: #333;
    }
}
.backitems {
    border: 1px solid #eee;

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

:deep(.myselect) {
    .el-select__wrapper {
        border-radius: 12px;
    }
}
</style>