feat: 账号数据看板、账户详情、投放数据
This commit is contained in:
rd
@ -2,7 +2,7 @@
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-28 10:33:06
|
||||
*/
|
||||
export const tableColumns = [
|
||||
export const TABLE_COLUMNS = [
|
||||
{
|
||||
title: '账号名称',
|
||||
dataIndex: 'name',
|
||||
@ -147,7 +147,7 @@ export const tableColumns = [
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'operation',
|
||||
width: 120,
|
||||
width: 100,
|
||||
fixed: 'right',
|
||||
},
|
||||
];
|
||||
|
||||
@ -4,7 +4,9 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="action-row mb-12px flex justify-between">
|
||||
<a-checkbox :model-value="checkedAll" :indeterminate="indeterminate" @change="handleSelectAll">全选</a-checkbox>
|
||||
<a-checkbox :model-value="checkedAll" :indeterminate="indeterminate" class="!pl-13px" @change="handleSelectAll"
|
||||
>全选</a-checkbox
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<a-button class="w-110px search-btn mr-12px" size="medium" @click="handleExport">
|
||||
<template #icon> <icon-download /> </template>
|
||||
@ -20,6 +22,7 @@
|
||||
</div>
|
||||
|
||||
<a-table
|
||||
ref="tableRef"
|
||||
:data="dataSource"
|
||||
row-key="id"
|
||||
:row-selection="rowSelection"
|
||||
@ -34,7 +37,7 @@
|
||||
>
|
||||
<template #columns>
|
||||
<a-table-column
|
||||
v-for="column in tableColumns"
|
||||
v-for="column in TABLE_COLUMNS"
|
||||
:key="column.dataIndex"
|
||||
:data-index="column.dataIndex"
|
||||
:fixed="column.fixed"
|
||||
@ -82,7 +85,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
|
||||
<a-button type="outline" size="small" @click="handleDetail(record)">详情</a-button>
|
||||
<a-button type="outline" size="small" class="search-btn" @click="handleDetail(record)">详情</a-button>
|
||||
</template>
|
||||
|
||||
<template v-else-if="['view_chain', 'like_chain'].includes(column.dataIndex)" #cell="{ record }">
|
||||
@ -109,7 +112,7 @@
|
||||
import { ref, computed } from 'vue';
|
||||
import { STATUS_LIST } from '../../constants';
|
||||
import { formatTableField } from '@/utils/tools';
|
||||
import { tableColumns } from './constants';
|
||||
import { TABLE_COLUMNS } from './constants';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import icon1 from '@/assets/img/media-account/icon-custom.png';
|
||||
@ -130,6 +133,7 @@ const emit = defineEmits(['selectionChange', 'sorterChange', 'export']);
|
||||
const router = useRouter();
|
||||
|
||||
const selectedItems = ref([]);
|
||||
const tableRef = ref(null);
|
||||
|
||||
const checkedAll = computed(
|
||||
() => selectedItems.value.length > 0 && selectedItems.value.length === props.dataSource.length,
|
||||
@ -169,6 +173,15 @@ const handleSelect = (selectedRowKeys, selectedRows) => {
|
||||
const handleExport = () => {
|
||||
emit('export');
|
||||
};
|
||||
|
||||
const resetTable = () => {
|
||||
selectedItems.value = [];
|
||||
tableRef.value?.clearSorters();
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
resetTable,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
|
||||
<template>
|
||||
<div class="account-dashboard-wrap">
|
||||
<div class="filter-wrap bg-#fff border-radius-8px px-24px pb-20px mb-16px">
|
||||
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px pb-20px mb-16px">
|
||||
<div class="top flex h-64px py-10px justify-between items-center mb-19px">
|
||||
<div class="flex items-center">
|
||||
<p class="text-18px font-400 lh-26px color-#211F24 title">数据总览</p>
|
||||
@ -29,11 +29,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-wrap bg-#fff border-radius-8px px-24px py-24px mb-16px">
|
||||
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px mb-16px">
|
||||
<FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
|
||||
</div>
|
||||
<div class="table-wrap bg-#fff border-radius-8px px-24px py-24px flex-1">
|
||||
<div
|
||||
class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
|
||||
>
|
||||
<AccountTable
|
||||
ref="accountTableRef"
|
||||
:dataSource="dataSource"
|
||||
@selectionChange="handleSelectionChange"
|
||||
@export="handleExport"
|
||||
@ -72,6 +75,7 @@ const query = ref(cloneDeep(INITIAL_QUERY));
|
||||
const dataSource = ref([]);
|
||||
const overviewData = ref({});
|
||||
const selectedRowKeys = ref([]);
|
||||
const accountTableRef = ref(null);
|
||||
const pageInfo = reactive({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
@ -280,7 +284,12 @@ const reload = () => {
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
selectedRowKeys.value = [];
|
||||
pageInfo.page = 1;
|
||||
pageInfo.pageSize = 20;
|
||||
pageInfo.total = 0;
|
||||
query.value = cloneDeep(INITIAL_QUERY);
|
||||
accountTableRef.value?.resetTable();
|
||||
reload();
|
||||
};
|
||||
|
||||
|
||||
@ -0,0 +1,139 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-28 12:58:25
|
||||
-->
|
||||
<template>
|
||||
<div class="account-info-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px mb-16px">
|
||||
<div class="title-row">
|
||||
<span class="cts !text-18px !lh-26px">账号信息</span>
|
||||
</div>
|
||||
<div class="account-info-box">
|
||||
<div v-for="(row, rowIdx) in accountInfoFields" :key="rowIdx" class="flex mb-24px">
|
||||
<div
|
||||
v-for="(field, colIdx) in row"
|
||||
:key="colIdx"
|
||||
:class="field.dataIndex === 'ai_evaluation' ? 'flex-2' : 'flex-1'"
|
||||
>
|
||||
<!-- 第二组的AI评价占1/2宽度 -->
|
||||
<template v-if="rowIdx === 1 && colIdx === 0">
|
||||
<div class="flex items-center mb-4px">
|
||||
<img width="16" height="16" :src="icon1" class="mr-4px" />
|
||||
<span class="cts !color-#737478 mr-4px">AI评价</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
width="16"
|
||||
height="16"
|
||||
:src="
|
||||
detailData.ai_evaluation?.status === 1
|
||||
? icon4
|
||||
: detailData.ai_evaluation?.status === 2
|
||||
? icon3
|
||||
: icon2
|
||||
"
|
||||
class="mr-8px"
|
||||
/>
|
||||
|
||||
<span v-if="detailData.ai_evaluation" class="cts">
|
||||
{{ detailData.ai_evaluation?.text }}。观看: +{{ detailData.ai_evaluation.look_chain }}% 点赞: +{{
|
||||
detailData.ai_evaluation.like_chain
|
||||
}}%
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 其他项占1/4宽度 -->
|
||||
<template v-else>
|
||||
<div class="flex items-center mb-4px">
|
||||
<p class="cts !color-#737478 !mr-4px">{{ field.label }}</p>
|
||||
<a-tooltip v-if="field.tooltip" :content="field.tooltip" position="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<p class="cts">
|
||||
<!-- 状态特殊渲染 -->
|
||||
<template v-if="field.type === 'status'">
|
||||
<span v-if="detailData.status === 1" style="color: #4ad991">正常</span>
|
||||
<span v-else style="color: #ff4d4f">异常</span>
|
||||
</template>
|
||||
<!-- 环比字段特殊渲染 -->
|
||||
<template v-else-if="field.type === 'rate'">
|
||||
<span :style="{ color: detailData[field.dataIndex] > 0 ? 'red' : 'green' }">
|
||||
<icon-arrow-up v-if="detailData[field.dataIndex] > 0" />
|
||||
<icon-arrow-down v-else />
|
||||
{{ detailData[field.dataIndex] }}%
|
||||
</span>
|
||||
</template>
|
||||
<!-- 普通字段，支持多层key -->
|
||||
<template v-else>
|
||||
{{ formatTableField(field, detailData, true) }}
|
||||
</template>
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import { formatTableField } from '@/utils/tools';
|
||||
import { accountInfoFields } from '../../constants';
|
||||
import { getAccountBoardDetail } from '@/api/all/propertyMarketing';
|
||||
|
||||
import icon1 from '@/assets/img/media-account/icon5.png';
|
||||
import icon2 from '@/assets/img/media-account/icon-warn.png';
|
||||
import icon3 from '@/assets/img/media-account/icon-warn-1.png';
|
||||
import icon4 from '@/assets/img/media-account/icon-success.png';
|
||||
|
||||
const route = useRoute();
|
||||
const id = route.params.id;
|
||||
const detailData = ref({
|
||||
id: 1,
|
||||
name: '抖音官方账号',
|
||||
mobile: '13800138001',
|
||||
account_id: 'douyin_001',
|
||||
holder_name: '张三',
|
||||
operator_id: 1,
|
||||
platform: 0,
|
||||
group_id: 1,
|
||||
status: 1,
|
||||
is_pause: 0,
|
||||
fans_number: 1250000,
|
||||
like_number: 890000,
|
||||
collect_number: 45000,
|
||||
view_number: 5600000,
|
||||
view_chain: -12.5,
|
||||
like_chain: 8.3,
|
||||
ai_evaluation: {
|
||||
status: 1,
|
||||
text: '表现优质 | 建议保持',
|
||||
look_chain: 12.5,
|
||||
like_chain: 8.3,
|
||||
},
|
||||
operator: {
|
||||
id: 1,
|
||||
name: '李运营',
|
||||
},
|
||||
group: {
|
||||
id: 1,
|
||||
name: '抖音组',
|
||||
},
|
||||
});
|
||||
|
||||
const getDetail = async () => {
|
||||
const { code, data } = await getAccountBoardDetail(id);
|
||||
if (code === 200) {
|
||||
detailData.value = data;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getDetail();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -0,0 +1,3 @@
|
||||
.account-info-wrap {
|
||||
|
||||
}
|
||||
@ -0,0 +1,73 @@
|
||||
/*
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-28 13:30:58
|
||||
*/
|
||||
|
||||
export const INITIAL_QUERY = {
|
||||
name: '',
|
||||
publish_date: [],
|
||||
};
|
||||
|
||||
export const TABLE_COLUMNS = [
|
||||
{
|
||||
title: '笔记标题',
|
||||
dataIndex: 'name',
|
||||
width: 240,
|
||||
},
|
||||
{
|
||||
title: '发布日期',
|
||||
dataIndex: 'publish_date',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
title: '曝光量',
|
||||
dataIndex: 'exposure_number',
|
||||
width: 180,
|
||||
tooltip: '账号所有内容的总曝光次数',
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: '观看量',
|
||||
dataIndex: 'view_number',
|
||||
width: 180,
|
||||
tooltip: '账号所有内容的总观看次数',
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: '点赞量',
|
||||
dataIndex: 'like_count',
|
||||
width: 180,
|
||||
tooltip: '账号所有内容的总点赞数',
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: '收藏量',
|
||||
dataIndex: 'collect_count',
|
||||
width: 180,
|
||||
tooltip: '账号所有内容的总收藏数',
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: '评论数',
|
||||
dataIndex: 'comment_count',
|
||||
width: 180,
|
||||
tooltip: '账号所有内容的总评论数',
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: '分享量',
|
||||
dataIndex: 'share_count',
|
||||
width: 180,
|
||||
tooltip: '账号所有内容的总转发数',
|
||||
align: 'right',
|
||||
},
|
||||
|
||||
{
|
||||
title: '封面点击率',
|
||||
dataIndex: 'cover_click_rate',
|
||||
width: 180,
|
||||
tooltip: '封面点击率',
|
||||
align: 'right',
|
||||
suffix: '%',
|
||||
},
|
||||
];
|
||||
@ -0,0 +1,158 @@
|
||||
<!--
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-28 12:58:09
|
||||
-->
|
||||
<template>
|
||||
<div class="note-table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px flex-1 flex flex-col">
|
||||
<div class="title-row">
|
||||
<div class="flex items-center">
|
||||
<span class="cts !text-18px !lh-26px mr-4px">笔记详情</span>
|
||||
<icon-question-circle size="16" class="color-#737478" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-row flex my-16px">
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">笔记标题</span>
|
||||
<a-space size="medium" class="w-240px">
|
||||
<a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear>
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="filter-row-item flex items-center">
|
||||
<span class="label">发布日期</span>
|
||||
<a-space size="medium" class="w-240px">
|
||||
<a-range-picker
|
||||
v-model="query.publish_date"
|
||||
size="medium"
|
||||
allow-clear
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
class="w-100%"
|
||||
/>
|
||||
</a-space>
|
||||
</div>
|
||||
<a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
<template #default>搜索</template>
|
||||
</a-button>
|
||||
<a-button class="w-84px reset-btn" size="medium" @click="handleReset">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</div>
|
||||
<a-table :data="dataSource" row-key="id" :pagination="false" :scroll="{ x: '100%' }" class="w-100%" bordered>
|
||||
<template #columns>
|
||||
<a-table-column
|
||||
v-for="column in TABLE_COLUMNS"
|
||||
:key="column.dataIndex"
|
||||
:data-index="column.dataIndex"
|
||||
:fixed="column.fixed"
|
||||
:width="column.width"
|
||||
:min-width="column.minWidth"
|
||||
:sortable="column.sortable"
|
||||
:align="column.align"
|
||||
ellipsis
|
||||
tooltip
|
||||
>
|
||||
<template #title>
|
||||
<div class="flex items-center">
|
||||
<img v-if="column.dataIndex === 'ai_evaluation'" width="16" height="16" :src="icon5" class="mr-4px" />
|
||||
<span class="cts mr-4px">{{ column.title }}</span>
|
||||
<a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
|
||||
<icon-question-circle class="tooltip-icon color-#737478" size="16" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #cell="{ record }">
|
||||
<template v-if="column.dataIndex === 'publish_date'">
|
||||
{{ exactFormatTime(record.publish_date) }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ formatTableField(column, record, true) }}
|
||||
</template>
|
||||
</template>
|
||||
</a-table-column>
|
||||
</template>
|
||||
</a-table>
|
||||
<div class="pagination-box">
|
||||
<a-pagination
|
||||
:total="pageInfo.total"
|
||||
size="mini"
|
||||
show-total
|
||||
show-jumper
|
||||
show-page-size
|
||||
:current="pageInfo.page"
|
||||
:page-size="pageInfo.pageSize"
|
||||
@change="onPageChange"
|
||||
@page-size-change="onPageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { TABLE_COLUMNS, INITIAL_QUERY } from './constants';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { formatTableField, exactFormatTime } from '@/utils/tools';
|
||||
|
||||
const route = useRoute();
|
||||
const id = route.params.id;
|
||||
const dataSource = ref([]);
|
||||
const pageInfo = reactive({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
total: 100,
|
||||
});
|
||||
|
||||
const query = ref(cloneDeep(INITIAL_QUERY));
|
||||
|
||||
const handleSearch = () => {
|
||||
console.log(query.value);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
pageInfo.page = 1;
|
||||
pageInfo.pageSize = 20;
|
||||
pageInfo.total = 0;
|
||||
query.value = cloneDeep(INITIAL_QUERY);
|
||||
reload();
|
||||
};
|
||||
|
||||
const onPageChange = (current) => {
|
||||
pageInfo.page = current;
|
||||
getData();
|
||||
};
|
||||
|
||||
const onPageSizeChange = (pageSize) => {
|
||||
pageInfo.pageSize = pageSize;
|
||||
reload();
|
||||
};
|
||||
|
||||
const reload = () => {
|
||||
pageInfo.page = 1;
|
||||
getData();
|
||||
};
|
||||
|
||||
const getData = async () => {
|
||||
// const { code, data } = await getAccountBoardList(query.value);
|
||||
// if (code === 200) {
|
||||
// dataSource.value = data?.list || [];
|
||||
// pageInfo.total = data.total;
|
||||
// }
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@ -0,0 +1,44 @@
|
||||
.note-table-wrap {
|
||||
:deep(.arco-input-wrapper),
|
||||
:deep(.arco-select-view-single),
|
||||
:deep(.arco-select-view-multiple),
|
||||
:deep(.arco-picker) {
|
||||
border-radius: 4px;
|
||||
border-color: #d7d7d9;
|
||||
background-color: #fff;
|
||||
&:focus-within,
|
||||
&.arco-input-focus {
|
||||
background-color: var(--color-bg-2);
|
||||
border-color: rgb(var(--primary-6));
|
||||
box-shadow: 0 0 0 0 var(--color-primary-light-2);
|
||||
}
|
||||
}
|
||||
.filter-row {
|
||||
.filter-row-item {
|
||||
&:not(:last-child) {
|
||||
margin-right: 24px;
|
||||
}
|
||||
.label {
|
||||
margin-right: 8px;
|
||||
color: #211f24;
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
flex-shrink: 0;
|
||||
line-height: 22px; /* 157.143% */
|
||||
}
|
||||
:deep(.arco-space-item) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
/*
|
||||
* @Author: RenXiaoDong
|
||||
* @Date: 2025-06-28 12:55:44
|
||||
*/
|
||||
export const accountInfoFields = [
|
||||
[
|
||||
{ label: '账号名称', dataIndex: 'name' },
|
||||
{ label: '项目分组', dataIndex: 'group.name' },
|
||||
{ label: '状态', dataIndex: 'status', type: 'status' },
|
||||
{ label: '运营人员', dataIndex: 'operator.name' },
|
||||
],
|
||||
[
|
||||
{ label: 'AI评价', dataIndex: 'ai_evaluation' },
|
||||
{ label: '粉丝量', dataIndex: 'fans_number', tooltip: '粉丝量' },
|
||||
{ label: '总赞藏数', dataIndex: 'like_number', tooltip: '总赞藏数' },
|
||||
],
|
||||
[
|
||||
{ label: '观看量', dataIndex: 'view_number', tooltip: '观看量' },
|
||||
{ label: '观看量环比', dataIndex: 'view_chain', tooltip: '观看量环比', suffix: '%', type: 'rate' },
|
||||
{ label: '点赞量', dataIndex: 'like_number', tooltip: '点赞量' },
|
||||
{ label: '点赞量环比', dataIndex: 'like_chain', tooltip: '点赞量环比', suffix: '%', type: 'rate' },
|
||||
],
|
||||
];
|
||||
@ -3,28 +3,26 @@
|
||||
* @Date: 2025-06-28 11:21:10
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<h1>账号详情</h1>
|
||||
<div class="account-detail-wrap">
|
||||
<div class="flex items-center mb-16px cursor-pointer" @click="handleBack">
|
||||
<icon-left size="16" />
|
||||
<spa class="cts ml-8px">账号详情</spa>
|
||||
</div>
|
||||
<AccountInfo />
|
||||
<NoteTable />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getAccountBoardDetail } from '@/api/all/propertyMarketing';
|
||||
import AccountInfo from './components/account-info';
|
||||
import NoteTable from './components/note-table';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const route = useRoute();
|
||||
const id = route.params.id;
|
||||
const detailData = ref({});
|
||||
const router = useRouter();
|
||||
|
||||
const getDetail = async () => {
|
||||
const { code, data } = await getAccountBoardDetail(id);
|
||||
if (code === 200) {
|
||||
detailData.value = data;
|
||||
}
|
||||
const handleBack = () => {
|
||||
router.push('/media-account/dashboard');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getDetail();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -0,0 +1,40 @@
|
||||
.account-detail-wrap {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
:deep(.cts) {
|
||||
color: var(--Text-1, #211f24);
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
:deep(.title-row) {
|
||||
display: flex;
|
||||
height: 64px;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
}
|
||||
:deep(.search-btn) {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--Brand-Brand-6, #6d4cfe);
|
||||
color: #6d4cfe;
|
||||
}
|
||||
:deep(.reset-btn) {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--BG-500, #b1b2b5);
|
||||
background: var(--BG-white, #fff);
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
width: 100%;
|
||||
.pagination-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 16px 24px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
.card-container {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, 1fr); /* 2行 */
|
||||
// grid-template-rows: repeat(2, 1fr); /* 2行 */
|
||||
grid-template-columns: repeat(4, 1fr); /* 4列 */
|
||||
gap: 20px;
|
||||
.card-item {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
-->
|
||||
<template>
|
||||
<div class="account-manage-wrap">
|
||||
<div class="filter-wrap bg-#fff border-radius-8px">
|
||||
<div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
|
||||
<div class="top flex h-64px px-24px py-10px justify-between items-center">
|
||||
<p class="text-18px font-400 lh-26px color-#211F24 title">账号管理</p>
|
||||
<div class="flex items-center">
|
||||
@ -236,6 +236,10 @@ const handleSearch = () => {
|
||||
getData();
|
||||
};
|
||||
const handleReset = () => {
|
||||
pageInfo.page = 1;
|
||||
pageInfo.pageSize = 20;
|
||||
pageInfo.total = 0;
|
||||
selectedItems.value = [];
|
||||
query.value = cloneDeep(INITIAL_QUERY);
|
||||
reload();
|
||||
};
|
||||
|
||||
@ -13,8 +13,6 @@
|
||||
background: var(--BG-white, #fff);
|
||||
}
|
||||
.filter-wrap {
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e6e6e8;
|
||||
.top {
|
||||
.title {
|
||||
font-family: 'Alibaba PuHuiTi';
|
||||
|
||||
Reference in New Issue
Block a user