Skip to content

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

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

parent 034d0c1b
Show whitespace changes
Inline Side-by-side
Showing with 39 additions and 36 deletions
apps/web-vue/src/components/Table/indedx.vue
View file @ 5cb0353f
......@@ -99,7 +99,6 @@ const handleCurrentChange = (val: number) => {
// 6. 处理多选变化
const handleSelectionChange = (selection: any[]) => {
console.log(3333, selection)
emit('selection-change', selection);
};
......@@ -125,12 +124,11 @@ defineExpose({
:deep(.el-table__header) {
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 {
......
apps/web-vue/src/views/zhibo/index.vue
View file @ 5cb0353f
......@@ -5,8 +5,10 @@
<h2 class="fs-16 color-000">直播账号总览</h2>
<p class="mt-4 color-888 fs-12">查看所有已绑定直播号的点赞、消耗与经营表现</p>
</div>
<el-button type="primary" class="h-36 px-20" @click="bindVisible = true">
<el-icon class="mr-6"><Link /></el-icon>
<el-button type="primary" color="#4854ff" class="h-36 px-20" @click="bindVisible = true">
<el-icon class="mr-6">
<Link />
</el-icon>
绑定直播号
</el-button>
</section>
......@@ -19,12 +21,15 @@
</section>
<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">
<template #default="{ row }">
<div class="flex-items-center minw-0">
<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 class="minw-0">
<div class="font-bold color-000 ellipsis">{{ row.name }}</div>
......@@ -61,22 +66,29 @@
</el-table-column>
<el-table-column label="状态" min-width="140">
<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 }}
</span>
</template>
</el-table-column>
<el-table-column label="操作" min-width="190" align="center">
<el-table-column label="操作" min-width="150">
<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-icon><View /></el-icon>
<el-icon>
<View />
</el-icon>
</el-button>
<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 class="w-34 h-34 p-0" @click="removeAccount(row)">
<el-icon><Delete /></el-icon>
<el-icon>
<Delete />
</el-icon>
</el-button>
</div>
</template>
......@@ -123,13 +135,17 @@
<div v-if="currentAccount" class="detail-panel pt-4">
<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">
<el-icon><VideoCamera /></el-icon>
<el-icon>
<VideoCamera />
</el-icon>
</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 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)">
<span class="status-tag px-12 py-6 round-20 font-bold fs-12 ml-18"
:class="getStatusClass(currentAccount.status)">
{{ currentAccount.status }}
</span>
</div>
......@@ -142,8 +158,9 @@
</div>
<div class="font-bold color-000 mb-12 px-24">直播间销量与销售额</div>
<div class="px-24">
<SeTable :data-list="currentAccount.roomsData" class="detail-room-table" :total="currentAccount.roomsData.length" :default-page-size="10" size="default">
<div class="px-24 pb-20">
<SeTable :data-list="currentAccount.roomsData" :total="currentAccount.roomsData.length"
:default-page-size="10" size="default">
<el-table-column prop="room" label="直播间" min-width="170" />
<el-table-column prop="host" label="主播" min-width="120" />
<el-table-column prop="sales" label="销量" min-width="100" />
......@@ -159,7 +176,8 @@
</el-table-column>
<el-table-column prop="status" label="状态" min-width="120">
<template #default="{ row }">
<span class="room-status px-10 py-2 round-20 font-bold fs-12" :class="row.status === '直播中' ? 'live' : 'ended'">
<span class="room-status px-10 py-2 round-20 font-bold fs-12"
:class="row.status === '直播中' ? 'live' : 'ended'">
{{ row.status }}
</span>
</template>
......@@ -167,7 +185,7 @@
</SeTable>
</div>
</div>
<div class="dialog-footer flex justify-end p-24">
<div class="dialog-footer flex justify-end px-24 py-16">
<el-button type="primary" class="w-64" @click="detailVisible = false">关闭</el-button>
</div>
</div>
......@@ -426,18 +444,6 @@ const handlePageChange = () => {
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 {
display: inline-block;
......@@ -478,5 +484,4 @@ const handlePageChange = () => {
border-top: none;
border-bottom: 1px solid #edf0f5;
}
</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