Commit ed652a77 authored by 黄同智's avatar 黄同智

素材管理详细页布局

parent bddc2bc2
......@@ -51,6 +51,12 @@ const routes = [
meta: { title: '素材管理', icon: '', affix: true }
},
{
path: 'material/detail/:id', // 动态参数 :id
name: 'MaterialDetail',
component: ()=> import('@/views/resource/material/detail.vue'),
meta: { title: '素材详情', hidden: true } // hidden: true 表示不在左侧菜单显示
},
{
path: 'script',
name: 'Template',
component: ()=> import('@/views/resource/script/index.vue'),
......
......@@ -8,12 +8,12 @@
tab.label }}
</div>
</div>
<el-button type="primary" link size="small">编辑关联视频</el-button>
<el-button v-if="tabIndex === 0" type="primary" link size="small" @click="isEditVideo = !isEditVideo">编辑关联视频</el-button>
</div>
<div v-if="tabIndex === 0 || tabIndex === 2" class="flex gap-10 mt-20 over-x-auto pb-20">
<CorrelationCardEchart />
<div class="flex-1 flex gap-10">
<div class="pt-36 pb-26 pointer">
<div class="pt-36 pb-26 pointer" v-if="isEditVideo" @click="visible=true">
<div class="bg-000 h-full w-180 round-16 flex-center flex-col guanl">
<div>⬆️</div>
<div class="fw-600 tt">关联梦畅AIGC视频</div>
......@@ -156,8 +156,8 @@
</div>
</div>
<div class="flex justify-end gap-10 p-16" style="border-top: 1px solid #eee;">
<el-button plain size="small">取消</el-button>
<el-button type="primary" size="small">确认关联</el-button>
<el-button plain size="small" @click="visible=false">取消</el-button>
<el-button type="primary" size="small" @click="visible=false">确认关联</el-button>
</div>
</Dialog>
</div>
......@@ -180,6 +180,7 @@ const ascOptions = [
{ label: '按转化数', value: 3 },
]
const list = ref([{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }, { id: '5' }]);
const isEditVideo = ref(false)
// 弹窗
......
......@@ -140,4 +140,9 @@ const chartOption = computed(() => {
.progress-fill {
transition: width 0.3s ease;
}
:deep(.myselect) {
.el-select__wrapper {
border-radius: 12px;
}
}
</style>
\ No newline at end of file
......@@ -14,7 +14,7 @@
<el-button link size="small" class="mt-2">如何同步: 历史已投放视频/抖音号视频数据<span>👂</span></el-button>
</div>
<div class="flex-items-center gap-10">
<div class="bg-ts fs-12 round-4 color-main px-10 py-2 h-30 flex-center">手动刷新近3天的数据</div>
<div class="bg-ts fs-12 round-4 color-main px-10 py-2 h-30 flex-center pointer">手动刷新近3天的数据</div>
<div class="flex-items-center gap-10 fs-12 round-4 p-2 bordedr">
<el-date-picker type="daterange" range-separator="至" style="width: 240px;"
start-placeholder="开始日期" end-placeholder="结束日期" size="small" />
......@@ -167,7 +167,7 @@
<el-table :data="scTableData" style="width: 100%" size="small">
<el-table-column prop="date" label="广告账户" width="180" />
<el-table-column prop="name" label="媒体" width="180" />
<el-table-column prop="address" label="素材ID / 创意ID" width="180"/>
<el-table-column prop="address" label="素材ID / 创意ID" width="180" />
<el-table-column prop="name1" label="点击率" width="180" />
<el-table-column prop="name1" label="点赞数" width="180" />
<el-table-column prop="name1" label="评论量" width="180" />
......@@ -241,6 +241,7 @@ const tableData = [
const handleOpen = (type: number, str: string) => {
title.value = str
dialogIndex.value = type
dialog.value = true
}
// 素材配对监控
......@@ -327,4 +328,10 @@ const scTableData = ref([
align-items: flex-start !important;
}
}
:deep(.myselect) {
.el-select__wrapper {
border-radius: 12px;
}
}
</style>
\ No newline at end of file
......@@ -17,7 +17,7 @@
</div>
<div class="flex-items-center">
<div class="w-100 color-666">公共标签</div>
<div class="flex-1 color-000">
<div class="flex-1 color-000 flex gap-10">
<el-tag type="success">仙侠穿越</el-tag>
<el-tag type="success">视频卡</el-tag>
<el-tag type="success">隐式陪叫</el-tag>
......@@ -26,7 +26,7 @@
</div>
<div class="flex-items-center">
<div class="w-100 color-666">个人标签</div>
<div class="flex-1 color-000">
<div class="flex-1 flex color-000 gap-10">
<el-tag type="success">仙侠穿越</el-tag>
<el-tag type="success">视频卡</el-tag>
<el-tag type="success">隐式</el-tag>
......
<template>
<div>
<div class="flex flex-col gap-20 mt-20">
<div class="flex-items-center">
<div class="w-100 color-666">成片区</div>
<div class="flex-1 color-000">
<span>女士内衣</span>
<el-button type="primary" text>修改</el-button>
</div>
</div>
<div class="flex-items-center">
<div class="w-100 color-666">视频标题</div>
<div class="flex-1 color-000">
<span>0730-8835-鲁月园-复古耳环动态奢感视频.mp4</span>
<el-button type="primary" text>修改</el-button>
</div>
</div>
<div class="flex-items-center">
<div class="w-100 color-666">公共标签</div>
<div class="flex-1 color-000 flex gap-10">
<el-tag type="success">仙侠穿越</el-tag>
<el-tag type="success">视频卡</el-tag>
<el-tag type="success">隐式陪叫</el-tag>
<el-button type="primary" text size="small">+ 添加公共标签</el-button>
</div>
</div>
<div class="flex-items-center">
<div class="w-100 color-666">个人标签</div>
<div class="flex-1 flex color-000 gap-10">
<el-tag type="success">仙侠穿越</el-tag>
<el-tag type="success">视频卡</el-tag>
<el-tag type="success">隐式</el-tag>
<el-button type="primary" text @click="visible = true" size="small">+ 添加个人标签</el-button>
</div>
</div>
<div class="flex-items-center">
<div class="w-100 color-666">关联脚本</div>
<div class="flex-1 color-000">
<el-button type="primary" text size="small">查看脚本(1)</el-button>
</div>
</div>
<div class="flex-items-center">
<div class="w-100 color-666">视频状态</div>
<div class="flex-1 color-000">
<el-tag type="warning">待审核</el-tag>
<el-button type="primary" text size="small">修改</el-button>
</div>
</div>
<div class="flex-items-center">
<div class="w-100 color-666">视频备注</div>
<div class="flex-1 color-000">
<el-input type="textarea" rows="2" />
</div>
</div>
<div class="flex-items-center">
<div class="w-100 color-666">附件</div>
<div class="flex-1 color-000">
<el-button type="primary" text>+ 添加附件</el-button>
</div>
</div>
</div>
<div style="border-top: 1px solid #eee;" class="pt-16 mt-10">
<el-button type="primary" plain>分享</el-button>
<el-button type="primary" plain>操作记录</el-button>
<el-button type="primary" plain>下载源码视频</el-button>
<el-button type="primary" plain>更多</el-button>
</div>
</div>
<Dialog v-model="visible" bg-color="#fff" width="700">
<div class="fw-500 px-16 py-10" style="border-bottom: 1px solid #eee;">关联梦畅AIGC视频</div>
<div class="p-20">
<div class="flex gap-10 pb-10" style="border-bottom: 1px solid #eee;">
<div v-for="(tab, index) in tabs2" :key="index" class="fw-500 py-2 px-10 pointer fs-12 round-20"
:class="tabIndex2 === index ? 'bg-main color-fff' : ''" @click="tabIndex2 = index">{{
tab.label }}
</div>
</div>
<div class="mt-20">
<el-checkbox-group v-model="checkedCities">
<el-checkbox v-for="(item, index) in cities" :key="index" :label="item.label" :value="item.value">
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
<div class="mt-20">
<el-button type="primary" size="small" @click="visible = false">添加子标签</el-button>
</div>
</div>
</div>
<div class="flex justify-end gap-10 p-16" style="border-top: 1px solid #eee;">
<el-button plain size="small" @click="visible = false">取消</el-button>
<el-button type="primary" size="small" @click="visible = false">确认关联</el-button>
</div>
</Dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
// 弹窗
const visible = ref(false)
const tabIndex2 = ref(0)
const tabs2 = ref([
{ label: '模特', value: 0 },
{ label: '场景', value: 1 },
{ label: '合作达人', value: 2 },
{ label: '脚本类型', value: 3 },
{ label: '创新点', value: 4 },
{ label: '编导姓名', value: 5 },
])
const checkedCities = ref([])
const cities = ref([
{ label: '室内展厅', value: 0 },
{ label: '户外公园', value: 1 },
{ label: '直播间', value: 2 },
{ label: '办公室', value: 3 },
{ label: '家庭生活', value: 4 },
{ label: '街拍', value: 5 }
])
</script>
<style scoped lang="scss"></style>
\ No newline at end of file
<template>
<div>
<div class="bg-47 p-4 round-6 mt-20 flex-items-center gap-20">
<el-select placeholder="Select" style="width: 100px;" class="myselect">
<el-option v-for="item in pzOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-radio-group>
<el-radio value="1">只看@我的</el-radio>
<el-radio value="2">只看回复我的</el-radio>
</el-radio-group>
</div>
<div class="h-400 over-y-auto">
<div class="round-12 p-12 backitems mt-10" v-for="(item, index) in 10" :key="index">
<div class="fs-12 flex justify-between items-center">
<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
至 0分3秒68</span>
<div class="px-10 h-24 flex-center color-000 fs-10 round-40" style="background: #eee;">
第一版</div>
</div>
<div class="mt-4 fs-12">这里有点模糊,改一下 @dy4 @lan大声道撒活动大胜靠德卡仕达四大斯柯达</div>
<div class="bg-ef round-6 p-10 mt-10 flex flex-col gap-8">
<div v-for="(notice, indexn) in 2" :key="indexn" class="flex-items-center gap-20">
<div class="fs-12 flex-1 ellipsis">
<span class="fw-500">逢场作戏</span>
<span class="color-666 px-6">回复</span>
<span class="fw-500">天上人间%:</span>
<span class="color-333" title="已修改 @天上人间%杀很大撒大声地等哈啊哈是的">已修改
@天上人间%杀很大撒大声地等哈啊哈是的</span>
</div>
<div class="flex-items-center fs-12 gap-6">
<div class="color-blue">回复</div>
<span class="color-888">08-16 20:18</span>
</div>
</div>
</div>
<div class="flex justify-between items-center mt-10">
<div class="flex-items-center gap-8">
<div class="w-24 h-24 round bg-main hidden">
<img src="@/static/image/huaban.png" class="cover" width="100%" height="100%" alt="">
</div>
<span class="fw-600 color-main">逢场作戏</span>
<span class="color-888 fs-12">05-23 14:58</span>
</div>
<div>
<el-button size="small" type="primary" class="color-blue" link>回复</el-button>
<el-button size="small" link type="danger">删除</el-button>
<el-button size="small" link>标记完成</el-button>
</div>
</div>
</div>
</div>
<div class="round-12 p-12 backitems mt-10 bg-ef">
<div class="fs-12 mb-10">
<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
至 0分3秒68</span>
<span class="ml-10 color-888">(片段批注)</span>
</div>
<div class="flex gap-10">
<el-mention v-model="mention" type="textarea" :rows="2" :maxlength="100" :options="ptTabs"
placeholder="请输入批注信息,输入@..." />
</div>
<div class="flex-items-center justify-between gap-10 mt-10">
<div class="flex-items-center gap-10">
<FileUpload :limit="1" :width="30" title="上传截图附件">
<template #trigger>
<span class="fs-18 lh-18 color-888">+</span>
</template>
</FileUpload>
<span class="fs-12 color-888">上传截图附件</span>
</div>
<div class="flex-items-center gap-10">
<el-checkbox label="同时发送通知" value="Value 1" />
<el-button type="primary" size="small" round>发送</el-button>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import FileUpload from '@/components/Upload/index.vue'
const mention = ref('')
const pzOptions = ref([
{ label: '全部批注', value: 0 },
{ label: '单帧批注', value: 1 },
{ label: '片段批注', value: 2 },
{ label: '字幕批注', value: 3 },
])
const ptTabs = ref([
{ label: '抖音样式', value: 0 },
{ label: '抖音橱窗', value: 1 },
{ label: '视频号样式', value: 2 },
{ label: '隐藏样式', value: 3 },
])
</script>
<style scoped lang="scss">
.bg-47 {
background-color: #f0f4f7;
}
.bg-ef {
background-color: #f9fcfd;
}
.color-blue {
color: #148cfc;
font-weight: bold;
}
.backitems {
border: 1px solid #eee;
&:hover {
border-color: rgba(var(--main-color), .4);
}
}
:deep(.myselect) {
.el-select__wrapper {
border-radius: 12px;
}
}
</style>
\ No newline at end of file
<template>
<div class="bgmr vh100 p-20 over-y-auto">
<div class="flex gap-20">
<el-card class="flex-1 round-12" shadow="hover">
<div class="flex gap-60">
<div class="flex-1">
<div>
<div class="font-bold flex justify-between">
<span>平台 UI 遮挡排查蒙版</span>
<span class="fs-12 color-888 fw-500">预审防遮挡违规</span>
</div>
<div class="bg-47 flex gap-10 mt-10 round-4 p-4">
<div v-for="(item, index) in ptTabs" :key="index" @click="ptIndex = index"
class="round-4 py-4 px-10 pointer"
:class="ptIndex === index ? 'bg-main color-fff' : ''">
<span>{{ item.label }}</span>
</div>
</div>
</div>
<div class="mt-40">
<div class="font-bold flex justify-between">
<span>秒级高光镜头拆解 (点击跳帧)</span>
<span class="fs-12 color-888 fw-500">黄金15秒爆款结构</span>
</div>
<div class="mt-4">
<div class="mt-10 round-4">
<div v-for="(item, index) in jtTabs" :key="index" @click="ptIndex = index"
class="round-4 py-4 px-10 pointer flex-item mb-10"
:class="ptIndex === index ? 'active' : ''">
<div class="fs-12 fw-600">{{ item.label }}</div>
<div class="fs-10 mt-4">{{ item.desc }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="phone h-600 bg-000 round-40 p-4">
<div class="bg-fff h-full round-38"></div>
</div>
</div>
</el-card>
<el-card class="flex-1 round-12" shadow="hover">
<div class="flex justify-between pb-10" style="border-bottom: 1px solid #eee;">
<div class="flex-items-center">
<div class="w-36 h-36 bg-main round-6"></div>
<div class="ml-10">
<div class="fw-600">梦畅AIGC / 默认部门 / 默认分组</div>
<div class="fs-12 color-888">
<span>发布时间: 2025-04-02 12:06:28</span>
<span class="ml-20">剪辑时间: 2025-05-02</span>
</div>
</div>
</div>
<el-button type="primary" round>权限监测</el-button>
</div>
<div class="bg-47 flex gap-10 mt-20 round-4 p-4">
<div v-for="(item, index) in videoInfoTabs" :key="index" @click="viIndex = index"
class="round-4 py-4 px-10 pointer" :class="viIndex === index ? 'bg-fff color-main fw-500' : ''">
<span>{{ item.label }}</span>
</div>
</div>
<section v-if="viIndex === 0">
<Tab1 />
</section>
<section v-if="viIndex === 1">
<Tab2 />
</section>
</el-card>
</div>
<el-card class="round-12 mt-20" shadow="hover">
<div class="flex-items-center justify-between pb-6" style="border-bottom: 1px solid #eee;">
<div class="color-main fw-600">被引用后出片</div>
<el-button type="primary" size="small">导出</el-button>
</div>
<div class="flex justify-between mt-20">
<div class="flex flex-1 gap-10">
<el-select placeholder="排序" style="width: 140px;" class="myselect">
<el-option v-for="item in ascOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
<el-select placeholder="请选择(支持输入搜索)" style="width: 240px;" class="myselect" filterable>
<template #prefix>
<span class="pr-4 color-000">作者</span>
</template>
<el-option v-for="item in ascOptions" :key="item.value" :label="item.label"
:value="item.value" />
</el-select>
<div class="flex-items-center gap-10 fs-12 round-4 p-2 bordedr">
<div class="flex-items-center gap-4 pl-10">上传时间</div>
<el-date-picker type="daterange" range-separator="至" style="width: 240px;"
start-placeholder="开始日期" end-placeholder="结束日期" size="small" />
</div>
<div class="flex-items-center gap-10 fs-12 round-4 p-2 bordedr">
<div class="flex-items-center gap-4 pl-10">消耗时间</div>
<el-date-picker type="daterange" range-separator="至" style="width: 240px;"
start-placeholder="开始日期" end-placeholder="结束日期" size="small" />
</div>
</div>
</div>
<div class="flex gap-10 mt-16 over-x-auto pb-10">
<div v-for="(card, index) in 20" :key="index"
class="round-6 minw-140 h-70 px-10 pt-6 pb-8 bg-eee flex flex-col justify-between fs-12">
<div>58556.26</div>
<div class="flex justify-between">
<span class="fw-600 color-888">消耗</span>
<div class="w-20 h-20 round bg-000 flex-center">👂</div>
</div>
</div>
</div>
<div style="border-top: 1px solid #eee;" class="pt-10 mt-10">
<div class="flex-items-center justify-between">
<div class="flex gap-6">
<span class="color-000 fw-600">引用后所出成片列表</span>
<span class="color-main round-10 py-2 px-6 fs-12"
style="background-color: rgba(var(--main-color), .06);">3条</span>
</div>
<span class="color-888 fs-12">衍生视频数据实时同步中</span>
</div>
<div class="flex flex-wrap gap-20 w-full mt-10">
<div v-for="(item, index) in list" :key="index" class="flex-item1 w-full p-10">
<div class="flex gap-10">
<div class="bg-000 round-10 minw-70 h-80"></div>
<div class="flex flex-col gap-8 ellipsis">
<div class="fw-600 color-000 ellipsis">
0730-d复古古法金耳环高级质感种草成片_v1复古古法金耳环高级质感种草成片_v1复古古法金耳环高级质感种草成片_v1复古古法金耳环高级质感种草成片_v1.mp4
</div>
<div class="flex-items-center gap-4">
<div class="w-20 h-20 bg-000 round"></div>
<span class="color-000">张玲静</span>
<span class="px-4 color-888">·</span>
<span class="fs-12 color-888">2026-07-19</span>
</div>
<div class="flex justify-between">
<span class="py-2 px-10 round-4 fs-12 tfz">投放中</span>
<el-button type="primary" link size="small">查看成片数据</el-button>
</div>
</div>
</div>
<div class="content bg-xx mt-10 round-10 p-10 flex justify-between">
<div class="flex-center flex-col">
<span class="fs-12 color-888">消耗</span>
<span class="fw-600 color-000">¥2485</span>
</div>
<div class="flex-center flex-col">
<span class="fs-12 color-888">ROI</span>
<span class="fw-600 color-000">6.82</span>
</div>
<div class="flex-center flex-col">
<span class="fs-12 color-888">转化数</span>
<span class="fw-600 color-000">485</span>
</div>
</div>
</div>
</div>
</div>
</el-card>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import Tab1 from './components/Tab1.vue';
import Tab2 from './components/Tab2.vue';
const ptIndex = ref(3)
const ptTabs = ref([
{ label: '抖音样式', value: 0 },
{ label: '抖音橱窗', value: 1 },
{ label: '视频号样式', value: 2 },
{ label: '隐藏样式', value: 3 },
])
const jtTabs = ref([
{ label: '0~3s 黄金Hook', desc: '复古古法金耳环特写' },
{ label: '3~6s 黄金Hook', desc: '夏日古人打瞌睡宽度' },
{ label: '6-9s 黄金Hook', desc: '微距看看时候来' },
{ label: '9~12s 黄金Hook', desc: '直播间买一赠一' },
{ label: '12~15s 黄金Hook', desc: '点击下方小黄车' },
])
const viIndex = ref(0)
const videoInfoTabs = ref([
{ label: '视频信息', value: 0 },
{ label: '视频审核', value: 1 },
])
const list = ref([{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }, { id: '5' }]);
const ascOptions = [
{ label: '按关联时间排序', value: 0 },
{ label: '按消耗金额排序', value: 1 },
{ label: '按ROI高到底排序', value: 2 },
{ label: '按转化数', value: 3 },
]
</script>
<style scoped lang="scss">
.flex-item {
background-color: rgba(var(--main-color), .1);
color: rgba(var(--main-color), 1);
// flex: 0 0 calc((100% - 10px * 2) / 3);
}
.active {
background-color: rgba(var(--main-color), 1);
color: #fff;
}
.bg-47 {
background-color: #f0f4f7;
}
.phone {
width: 320px;
}
:deep(.el-date-editor) {
&.el-input__wrapper {
box-shadow: none;
}
}
.tfz {
color: rgb(5, 133, 54);
background-color: rgb(194, 255, 217);
}
.bg-xx {
background-color: #f2f5f7;
}
.flex-item1 {
flex: 0 0 calc((100% - 20px * 3) / 4);
min-width: calc((100% - 20px * 3) / 4);
border-radius: 8px;
box-sizing: border-box;
// aspect-ratio: 1 / 1.5;
box-shadow: 0 0 0 1px #eee;
}
:deep(.myselect) {
.el-select__wrapper {
border-radius: 12px;
}
}
/* 1600px 以下:一行 5 个 */
@media (max-width: 1500px) {
.flex-item1 {
flex: 0 0 calc((100% - 20px * 2) / 3);
}
}
/* 1200px 以下:一行 4 个 */
@media (max-width: 1200px) {
.flex-item1 {
flex: 0 0 calc((100% - 20px * 1) / 2);
}
}
</style>
\ No newline at end of file
......@@ -8,7 +8,7 @@
</div>
<div class="flex flex-wrap gap-20">
<el-checkbox-group v-model="checkedList" class="flex flex-wrap gap-20 w-full">
<div v-for="(item, index) in list" :key="index"
<div v-for="(item, index) in list" :key="index" @click="goDetail(item)"
class="w-200 bg-fff round-12 relative hidden flex-item"
:class="{ 'is-selected': checkedList.includes(item.id) }">
<Item :item="item" :isCheck="isCheck" />
......@@ -21,9 +21,11 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router'
import Classify from '../components/Classify.vue';
import Item from '@/views/resource/components/VideoItem.vue'
const router = useRouter()
const checkedList = ref<any>([])
const isCheck = ref(false)
const list = ref([{ id: '1' }, { id: '2' }, { id: '3' }]);
......@@ -32,6 +34,10 @@ const switchCheck = () => {
isCheck.value = !isCheck.value
checkedList.value = []
}
const goDetail = (item: any) => {
if(isCheck.value) return
router.push(`/resource/material/detail/${item.id}`)
}
</script>
<style scoped lang="scss">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment