Skip to content

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

修改表格组件，优化直播页面布局

parent 034d0c1b
Hide whitespace changes
Inline Side-by-side
Showing with 75 additions and 72 deletions
apps/web-vue/src/components/Table/indedx.vue
View file @ 5cb0353f
...@@ -99,7 +99,6 @@ const handleCurrentChange = (val: number) => { ...@@ -99,7 +99,6 @@ const handleCurrentChange = (val: number) => {
// 6. 处理多选变化 // 6. 处理多选变化
const handleSelectionChange = (selection: any[]) => { const handleSelectionChange = (selection: any[]) => {
console.log(3333, selection)
emit('selection-change', selection); emit('selection-change', selection);
}; };
...@@ -125,13 +124,12 @@ defineExpose({ ...@@ -125,13 +124,12 @@ defineExpose({
:deep(.el-table__header) { :deep(.el-table__header) {
thead { thead {
height: 40px; th{
padding: 10px 0;
background: #f8f8f8 !important;
}
} }
} }
:deep(.el-table) {
box-shadow: 0 0 0 1px #eee;
border-radius: 10px;
}
.pagination-container { .pagination-container {
display: flex; display: flex;
......
apps/web-vue/src/views/zhibo/index.vue
View file @ 5cb0353f
...@@ -5,8 +5,10 @@ ...@@ -5,8 +5,10 @@
<h2 class="fs-16 color-000">直播账号总览</h2> <h2 class="fs-16 color-000">直播账号总览</h2>
<p class="mt-4 color-888 fs-12">查看所有已绑定直播号的点赞、消耗与经营表现</p> <p class="mt-4 color-888 fs-12">查看所有已绑定直播号的点赞、消耗与经营表现</p>
</div> </div>
<el-button type="primary" class="h-36 px-20" @click="bindVisible = true"> <el-button type="primary" color="#4854ff" class="h-36 px-20" @click="bindVisible = true">
<el-icon class="mr-6"><Link /></el-icon> <el-icon class="mr-6">
<Link />
</el-icon>
绑定直播号 绑定直播号
</el-button> </el-button>
</section> </section>
...@@ -19,12 +21,15 @@ ...@@ -19,12 +21,15 @@
</section> </section>
<el-card class="mt-16 bg-fff round-8 account-table-wrap hidden" shadow="never"> <el-card class="mt-16 bg-fff round-8 account-table-wrap hidden" shadow="never">
<SeTable :data-list="accounts" class="account-table" :total="accounts.length" :default-page-size="50" size="default" @update:page="handlePageChange"> <SeTable :data-list="accounts" class="account-table" :total="accounts.length" :default-page-size="50"
size="default" @update:page="handlePageChange">
<el-table-column label="直播账号" min-width="300"> <el-table-column label="直播账号" min-width="300">
<template #default="{ row }"> <template #default="{ row }">
<div class="flex-items-center minw-0"> <div class="flex-items-center minw-0">
<div class="live-icon flex-center wh-40 round-8 color-fff mr-14"> <div class="live-icon flex-center wh-40 round-8 color-fff mr-14">
<el-icon><VideoCamera /></el-icon> <el-icon>
<VideoCamera />
</el-icon>
</div> </div>
<div class="minw-0"> <div class="minw-0">
<div class="font-bold color-000 ellipsis">{{ row.name }}</div> <div class="font-bold color-000 ellipsis">{{ row.name }}</div>
...@@ -61,22 +66,29 @@ ...@@ -61,22 +66,29 @@
</el-table-column> </el-table-column>
<el-table-column label="状态" min-width="140"> <el-table-column label="状态" min-width="140">
<template #default="{ row }"> <template #default="{ row }">
<span class="status-tag px-12 py-2 round-20 font-bold fs-12" :class="getStatusClass(row.status)"> <span class="status-tag px-12 py-2 round-20 font-bold fs-12"
:class="getStatusClass(row.status)">
{{ row.status }} {{ row.status }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" min-width="190" align="center"> <el-table-column label="操作" min-width="150">
<template #default="{ row }"> <template #default="{ row }">
<div class="flex-center gap-8"> <div class="flex">
<el-button class="w-34 h-34 p-0" @click="openDetail(row)"> <el-button class="w-34 h-34 p-0" @click="openDetail(row)">
<el-icon><View /></el-icon> <el-icon>
<View />
</el-icon>
</el-button> </el-button>
<el-button v-if="row.canSync" class="w-34 h-34 p-0" @click="syncAccount(row)"> <el-button v-if="row.canSync" class="w-34 h-34 p-0" @click="syncAccount(row)">
<el-icon><Refresh /></el-icon> <el-icon>
<Refresh />
</el-icon>
</el-button> </el-button>
<el-button class="w-34 h-34 p-0" @click="removeAccount(row)"> <el-button class="w-34 h-34 p-0" @click="removeAccount(row)">
<el-icon><Delete /></el-icon> <el-icon>
<Delete />
</el-icon>
</el-button> </el-button>
</div> </div>
</template> </template>
...@@ -120,54 +132,60 @@ ...@@ -120,54 +132,60 @@
<span class="w-4 h-14 round-10 bg-main mr-12"></span> <span class="w-4 h-14 round-10 bg-main mr-12"></span>
<span class="font-bold color-000">直播账号详情</span> <span class="font-bold color-000">直播账号详情</span>
</div> </div>
<div v-if="currentAccount" class="detail-panel pt-4"> <div v-if="currentAccount" class="detail-panel pt-4">
<div class="flex-items-center mb-20 px-24 pt-24"> <div class="flex-items-center mb-20 px-24 pt-24">
<div class="live-icon flex-center wh-44 round-8 color-fff mr-14"> <div class="live-icon flex-center wh-44 round-8 color-fff mr-14">
<el-icon><VideoCamera /></el-icon> <el-icon>
</div> <VideoCamera />
<div class="minw-0"> </el-icon>
<div class="font-bold fs-16 color-000">{{ currentAccount.name }}</div> </div>
<div class="fs-12 color-8aa mt-4">@{{ currentAccount.handle }} · {{ currentAccount.lastSync }}</div> <div class="minw-0">
<div class="font-bold fs-16 color-000">{{ currentAccount.name }}</div>
<div class="fs-12 color-8aa mt-4">@{{ currentAccount.handle }} · {{ currentAccount.lastSync
}}</div>
</div>
<span class="status-tag px-12 py-6 round-20 font-bold fs-12 ml-18"
:class="getStatusClass(currentAccount.status)">
{{ currentAccount.status }}
</span>
</div> </div>
<span class="status-tag px-12 py-6 round-20 font-bold fs-12 ml-18" :class="getStatusClass(currentAccount.status)">
{{ currentAccount.status }}
</span>
</div>
<div class="detail-metrics flex gap-12 mb-20 px-24"> <div class="detail-metrics flex gap-12 mb-20 px-24">
<div v-for="item in detailItems" :key="item.label" class="detail-metric flex-1 p-16 round-6"> <div v-for="item in detailItems" :key="item.label" class="detail-metric flex-1 p-16 round-6">
<div class="fs-12 color-8aa">{{ item.label }}</div> <div class="fs-12 color-8aa">{{ item.label }}</div>
<div class="mt-8 font-bold color-000 fs-20">{{ item.value }}</div> <div class="mt-8 font-bold color-000 fs-20">{{ item.value }}</div>
</div>
</div> </div>
</div>
<div class="font-bold color-000 mb-12 px-24">直播间销量与销售额</div> <div class="font-bold color-000 mb-12 px-24">直播间销量与销售额</div>
<div class="px-24"> <div class="px-24 pb-20">
<SeTable :data-list="currentAccount.roomsData" class="detail-room-table" :total="currentAccount.roomsData.length" :default-page-size="10" size="default"> <SeTable :data-list="currentAccount.roomsData" :total="currentAccount.roomsData.length"
<el-table-column prop="room" label="直播间" min-width="170" /> :default-page-size="10" size="default">
<el-table-column prop="host" label="主播" min-width="120" /> <el-table-column prop="room" label="直播间" min-width="170" />
<el-table-column prop="sales" label="销量" min-width="100" /> <el-table-column prop="host" label="主播" min-width="120" />
<el-table-column prop="amount" label="销售额" min-width="130"> <el-table-column prop="sales" label="销量" min-width="100" />
<template #default="{ row }"> <el-table-column prop="amount" label="销售额" min-width="130">
<span class="font-bold">¥{{ row.amount.toLocaleString() }}</span> <template #default="{ row }">
</template> <span class="font-bold">¥{{ row.amount.toLocaleString() }}</span>
</el-table-column> </template>
<el-table-column prop="roi" label="ROI" min-width="100"> </el-table-column>
<template #default="{ row }"> <el-table-column prop="roi" label="ROI" min-width="100">
<span class="color-main font-bold">{{ row.roi.toFixed(2) }}</span> <template #default="{ row }">
</template> <span class="color-main font-bold">{{ row.roi.toFixed(2) }}</span>
</el-table-column> </template>
<el-table-column prop="status" label="状态" min-width="120"> </el-table-column>
<template #default="{ row }"> <el-table-column prop="status" label="状态" min-width="120">
<span class="room-status px-10 py-2 round-20 font-bold fs-12" :class="row.status === '直播中' ? 'live' : 'ended'"> <template #default="{ row }">
{{ row.status }} <span class="room-status px-10 py-2 round-20 font-bold fs-12"
</span> :class="row.status === '直播中' ? 'live' : 'ended'">
</template> {{ row.status }}
</el-table-column> </span>
</SeTable> </template>
</el-table-column>
</SeTable>
</div>
</div> </div>
</div> <div class="dialog-footer flex justify-end px-24 py-16">
<div class="dialog-footer flex justify-end p-24">
<el-button type="primary" class="w-64" @click="detailVisible = false">关闭</el-button> <el-button type="primary" class="w-64" @click="detailVisible = false">关闭</el-button>
</div> </div>
</div> </div>
...@@ -426,18 +444,6 @@ const handlePageChange = () => { ...@@ -426,18 +444,6 @@ const handlePageChange = () => {
border: 1px solid #dfe7f2; border: 1px solid #dfe7f2;
} }
.detail-room-table {
border: 1px solid #dfe7f2;
border-radius: 8px;
overflow: hidden;
:deep(.el-table__header th) {
background: #f8fbff;
color: #8aa0bf;
font-weight: 700;
}
}
.room-status { .room-status {
display: inline-block; display: inline-block;
...@@ -478,5 +484,4 @@ const handlePageChange = () => { ...@@ -478,5 +484,4 @@ const handlePageChange = () => {
border-top: none; border-top: none;
border-bottom: 1px solid #edf0f5; border-bottom: 1px solid #edf0f5;
} }
</style> </style>
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