Skip to content

M
mengchangaigc
Commit ed652a77 authored by 黄同智's avatar 黄同智
Browse files
Options

素材管理详细页布局

parent bddc2bc2
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 287 additions and 9 deletions
apps/web-vue/src/router/index.ts
View file @ ed652a77
......@@ -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'),
......
apps/web-vue/src/views/resource/clip/components/CorrelationCard.vue
View file @ ed652a77
......@@ -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)
// 弹窗
......
apps/web-vue/src/views/resource/clip/components/CorrelationCardEchart.vue
View file @ ed652a77
......@@ -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
apps/web-vue/src/views/resource/clip/components/MaterialData.vue
View file @ ed652a77
......@@ -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
apps/web-vue/src/views/resource/clip/components/Tab1.vue
View file @ ed652a77
......@@ -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>
......
apps/web-vue/src/views/resource/material/components/Tab1.vue 0 → 100644
View file @ ed652a77
<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
apps/web-vue/src/views/resource/material/components/Tab2.vue 0 → 100644
View file @ ed652a77
<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
apps/web-vue/src/views/resource/material/detail.vue 0 → 100644
View file @ ed652a77
This diff is collapsed.
apps/web-vue/src/views/resource/material/index.vue
View file @ ed652a77
......@@ -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