Commit 0983a8bd authored by 黄同智's avatar 黄同智

完善视频数据分析所有页面的布局

parent fd59473d
......@@ -9,10 +9,10 @@
<span class="fs-16 font-bold">{{ item.label }}</span>
</div>
</div>
<div class="py-20">
<div class="pt-20">
<div class="flex-items-center mb-18">
<el-button v-for="item in scopes" :key="item" :type="scope === item ? 'primary' : ''"
class="round-6" @click="scope = item">
@click="scope = item">
{{ item }}
</el-button>
</div>
......@@ -25,8 +25,8 @@
<el-date-picker v-model="dateRange" type="daterange" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100% !important;" />
</div>
<el-button type="primary" class="round-6" @click="query">查询</el-button>
<el-button class=" round-6" @click="reset">重置</el-button>
<el-button type="primary" @click="query">查询</el-button>
<el-button @click="reset">重置</el-button>
</div>
</div>
</el-card>
......@@ -35,7 +35,7 @@
<div class="pb-16 flex-between ratio-title">
<span class="fs-16 font-bold color-000">占比分析</span>
<el-button type="primary" link @click="collapsed = !collapsed">{{ collapsed ? '展开' : '收起'
}}</el-button>
}}</el-button>
</div>
<div v-show="!collapsed" class="p-20 flex gap-26">
<div class="flex-1 gap-14 card-grid">
......@@ -85,8 +85,8 @@
<el-button class="round-6" @click="query">⇩ 导出表格</el-button>
</div>
<el-table :data="pagedTableData" class="analysis-table">
<el-table-column prop="account" label="广告账户" min-width="210" />
<el-table-column prop="subject" label="主体" min-width="180" />
<el-table-column prop="account" label="广告账户" min-width="210" show-overflow-tooltip />
<el-table-column prop="subject" label="主体" min-width="180" show-overflow-tooltip />
<el-table-column prop="department" label="部门" width="130" />
<el-table-column prop="group" label="分组" width="120" />
<el-table-column prop="user" label="用户" width="100" />
......@@ -104,7 +104,7 @@
</el-table-column>
<el-table-column prop="goodCost" label="优质素材消耗" width="140" align="center">
<template #default="{ row }"><span class="font-bold color-green">{{ row.goodCost
}}</span></template>
}}</span></template>
</el-table-column>
<el-table-column prop="low" label="低效素材" width="110" align="center">
<template #default="{ row }"><span class="font-bold color-main">{{ row.low }}</span></template>
......@@ -115,20 +115,14 @@
<el-table-column prop="same" label="同质化挤压严重素材" width="160" align="center">
<template #default="{ row }"><span class="font-bold color-pink">{{ row.same }}</span></template>
</el-table-column>
<el-table-column prop="risk" label="同质化素材风险-排队投放素材" width="210" align="center">
<el-table-column prop="risk" label="同质化素材风险-排队投放素材" width="230" align="center">
<template #default="{ row }"><span class="font-bold color-green">{{ row.risk }}</span></template>
</el-table-column>
</el-table>
<div class="py-12 flex justify-end table-footer">
<el-pagination
v-model:current-page="pageData.currentPage"
v-model:page-size="pageData.pageSize"
background
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"
:page-sizes="pageData.pageSizes"
@size-change="handleSizeChange"
/>
<el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
background layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
:page-sizes="pageData.pageSizes" @size-change="handleSizeChange" />
</div>
</el-card>
</div>
......
......@@ -23,14 +23,19 @@
</div>
</div>
</div>
<div class="mt-16">
<el-button type="primary" class="round-6">视频作者</el-button>
<el-button class="round-6 mr-10">下单运营</el-button>
<el-select v-model="department" class="w-180 mr-10" placeholder="请选择部门" />
<el-select v-model="category" class="w-180 mr-10" placeholder="请选择分类" />
<el-button type="primary" class="w-66 round-6">查询</el-button>
<el-button class="round-6">导出数据</el-button>
<el-button class="w-34 h-34 round-6"></el-button>
<div class="flex-between mt-16">
<div class="">
<el-button type="primary">视频作者</el-button>
<el-button class="mr-10">下单运营</el-button>
<el-select v-model="department" class="w-180 mr-10" placeholder="请选择部门" />
<el-select v-model="category" class="w-180 mr-10" placeholder="请选择分类" />
<el-button type="primary" class="w-66" plain>查询</el-button>
<el-button>重置</el-button>
</div>
<div>
<el-button>导出数据</el-button>
<el-button class="w-34 h-34"></el-button>
</div>
</div>
</div>
</el-card>
......@@ -54,15 +59,9 @@
<el-table-column prop="play" label="播放量" width="130" align="center" />
</el-table>
<div class="py-12 flex justify-end table-footer">
<el-pagination
v-model:current-page="pageData.currentPage"
v-model:page-size="pageData.pageSize"
background
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length"
:page-sizes="pageData.pageSizes"
@size-change="handleSizeChange"
/>
<el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
background layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
:page-sizes="pageData.pageSizes" @size-change="handleSizeChange" />
</div>
</el-card>
</div>
......
......@@ -7,9 +7,9 @@
{{ item }}
</div>
</div>
<div class="py-20">
<div class="flex mb-18 round-6 platform-box">
<div v-for="item in platforms" :key="item" class="px-22 py-8 round-6 font-bold pointer"
<div class="pt-20">
<div class="flex mb-18 round-4 platform-box">
<div v-for="item in platforms" :key="item" class="px-20 py-6 round-4 font-bold pointer"
:class="{ active: platform === item }" @click="platform = item">
{{ item }}
</div>
......@@ -33,8 +33,8 @@
<el-date-picker v-model="costRange" type="daterange" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100% !important;" />
</div>
<el-button type="primary" class="w-66 round-6">查询</el-button>
<el-button class="w-76 round-6">重置</el-button>
<el-button type="primary" plain>查询</el-button>
<el-button>重置</el-button>
</div>
</div>
</el-card>
......
......@@ -6,14 +6,15 @@
</div>
<div class="pt-16 flex-between">
<div class="flex-items-center">
<el-button type="primary" class="round-6">汇总</el-button>
<el-button class="round-6 mr-10">明细</el-button>
<el-button type="primary">汇总</el-button>
<el-button class="mr-10">明细</el-button>
<el-select v-model="department" class="w-180 mr-10" placeholder="请选择部门"><el-option label="默认部门" value="默认部门" /></el-select>
<el-select v-model="group" class="w-180 mr-10" placeholder="请选择"><el-option label="华南电商一队" value="华南电商一队" /></el-select>
<div class="w-240 mr-10">
<el-date-picker v-model="range" type="daterange" range-separator="至" start-placeholder="2022/04/27" end-placeholder="2025/05/12" style="width: 100% !important;" />
</div>
<el-button type="primary" class="w-66 round-6 mr-10">查询</el-button>
<el-button type="primary" plain>查询</el-button>
<el-button>重置</el-button>
</div>
</div>
......@@ -22,7 +23,7 @@
<el-card class="bg-fff round-12 mt-16" shadow="hover">
<div class="pb-12 flex-between table-title">
<span class="fs-16 font-bold">汇总数据</span>
<el-button type="default" plain class="round-6">导出数据</el-button>
<el-button type="default" plain>导出数据</el-button>
</div>
<el-table :data="pagedTableData" class="analysis-table">
<el-table-column prop="department" label="部门" min-width="180" />
......
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