feat(用户管理): 新增ab98用户详情页面及相关API
添加ab98用户详情页面，包括用户基础信息展示、订单记录等模块。同时新增相关API接口用于获取用户详情数据，并调整路由配置以支持详情页面的访问。
This commit is contained in:
dzq
parent
43cfec18ab
commit
312fb7ae81
|
|
@ -0,0 +1,104 @@
|
||||||
|
import { http } from "@/utils/http";
|
||||||
|
|
||||||
|
export interface Ab98UserDTO {
|
||||||
|
/** 主键ID */
|
||||||
|
ab98UserId?: number;
|
||||||
|
/** openid */
|
||||||
|
openid?: string;
|
||||||
|
/** 汇邦云用户唯一ID */
|
||||||
|
userid?: string;
|
||||||
|
/** 真实姓名 */
|
||||||
|
name?: string;
|
||||||
|
/** 手机号码 */
|
||||||
|
tel?: string;
|
||||||
|
/** 身份证号码 */
|
||||||
|
idnum?: string;
|
||||||
|
/** 性别（男 女） */
|
||||||
|
sex?: string;
|
||||||
|
/** 人脸照片地址 */
|
||||||
|
faceImg?: string;
|
||||||
|
/** 身份证正面地址 */
|
||||||
|
idcardFront?: string;
|
||||||
|
/** 身份证背面地址 */
|
||||||
|
idcardBack?: string;
|
||||||
|
/** 身份证登记地址 */
|
||||||
|
address?: string;
|
||||||
|
/** 是否已注册（0未注册 1已注册） */
|
||||||
|
registered?: boolean;
|
||||||
|
}
|
||||||
|
export interface Ab98UserDetailDTO {
|
||||||
|
/** 主键ID */
|
||||||
|
ab98UserId?: number;
|
||||||
|
/** openid */
|
||||||
|
openid?: string;
|
||||||
|
/** 汇邦云用户唯一ID */
|
||||||
|
userid?: string;
|
||||||
|
/** 真实姓名 */
|
||||||
|
name?: string;
|
||||||
|
/** 手机号码 */
|
||||||
|
tel?: string;
|
||||||
|
/** 身份证号码 */
|
||||||
|
idnum?: string;
|
||||||
|
/** 性别（男 女） */
|
||||||
|
sex?: string;
|
||||||
|
/** 人脸照片地址 */
|
||||||
|
faceImg?: string;
|
||||||
|
/** 身份证正面地址 */
|
||||||
|
idcardFront?: string;
|
||||||
|
/** 身份证背面地址 */
|
||||||
|
idcardBack?: string;
|
||||||
|
/** 身份证登记地址 */
|
||||||
|
address?: string;
|
||||||
|
/** 是否已注册（0未注册 1已注册） */
|
||||||
|
registered?: boolean;
|
||||||
|
createTime?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Ab98UserQuery extends BasePageQuery {
|
||||||
|
/** 真实姓名 */
|
||||||
|
name?: string;
|
||||||
|
/** 手机号码 */
|
||||||
|
tel?: string;
|
||||||
|
/** 身份证号码 */
|
||||||
|
idnum?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AddAb98UserCommand {
|
||||||
|
/** openid */
|
||||||
|
openid?: string;
|
||||||
|
/** 汇邦云用户唯一ID */
|
||||||
|
userid?: string;
|
||||||
|
/** 真实姓名 */
|
||||||
|
name?: string;
|
||||||
|
/** 手机号码 */
|
||||||
|
tel?: string;
|
||||||
|
/** 身份证号码 */
|
||||||
|
idnum?: string;
|
||||||
|
/** 性别（男 女） */
|
||||||
|
sex?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UpdateAb98UserCommand extends AddAb98UserCommand {
|
||||||
|
/** 主键ID */
|
||||||
|
ab98UserId: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getAb98UserListApi = (params: Ab98UserQuery) => {
|
||||||
|
return http.request<ResponseData<PageDTO<Ab98UserDTO>>>("get", "/ab98/users", { params });
|
||||||
|
};
|
||||||
|
|
||||||
|
export const addAb98UserApi = (data: AddAb98UserCommand) => {
|
||||||
|
return http.request<ResponseData<void>>("post", "/ab98/users", { data });
|
||||||
|
};
|
||||||
|
|
||||||
|
export const updateAb98UserApi = (id: number, data: UpdateAb98UserCommand) => {
|
||||||
|
return http.request<ResponseData<void>>("put", `/ab98/users/${id}`, { data });
|
||||||
|
};
|
||||||
|
|
||||||
|
export const deleteAb98UserApi = (ids: number[]) => {
|
||||||
|
return http.request<ResponseData<void>>("delete", `/ab98/users/${ids.join(',')}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getAb98UserDetailApi = (id: number) => {
|
||||||
|
return http.request<ResponseData<Ab98UserDetailDTO>>("get", `/ab98/users/detail/${id}`);
|
||||||
|
};
|
||||||
|
|
@ -15,6 +15,14 @@ export default {
|
||||||
meta: {
|
meta: {
|
||||||
title: "个人中心"
|
title: "个人中心"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/user/ab98/detail",
|
||||||
|
name: "ab98Detail",
|
||||||
|
component: () => import("@/views/user/ab98/detail.vue"),
|
||||||
|
meta: {
|
||||||
|
title: "会员详情"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
} as RouteConfigsTable;
|
} as RouteConfigsTable;
|
||||||
|
|
|
||||||
|
|
@ -175,3 +175,7 @@
|
||||||
box-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgb(69 98 155 / 12%);
|
box-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgb(69 98 155 / 12%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-card.is-always-shadow {
|
||||||
|
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.04)!important;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,208 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from "vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import { Ab98UserDetailDTO, type Ab98UserDTO, getAb98UserDetailApi } from "@/api/ab98/user";
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: "Ab98UserDetail"
|
||||||
|
});
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const userInfo = ref<Ab98UserDetailDTO>({});
|
||||||
|
const loading = ref(false);
|
||||||
|
|
||||||
|
// 基础信息
|
||||||
|
const basicInfo = ref({
|
||||||
|
registerTime: "2023-01-15",
|
||||||
|
lastLogin: "2023-06-20",
|
||||||
|
loginCount: 42,
|
||||||
|
device: "iPhone 13"
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 订单记录
|
||||||
|
const orderRecords = ref([
|
||||||
|
]);
|
||||||
|
|
||||||
|
const activeTab = ref('basic');
|
||||||
|
|
||||||
|
async function fetchUserDetail() {
|
||||||
|
try {
|
||||||
|
loading.value = true;
|
||||||
|
const userId = route.query.id;
|
||||||
|
const { data } = await getAb98UserDetailApi(Number(userId));
|
||||||
|
userInfo.value = data;
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchUserDetail();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="detail-container">
|
||||||
|
<div class="flex-container">
|
||||||
|
<el-card class="user-info-card">
|
||||||
|
<div class="user-header">
|
||||||
|
<el-avatar :size="100" :src="userInfo.faceImg" fit="cover" shape="square">
|
||||||
|
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="50" cy="50" r="48" fill="#f5f5f5" stroke="#e0e0e0" stroke-width="1" />
|
||||||
|
<circle cx="50" cy="40" r="12" fill="#9e9e9e" />
|
||||||
|
<rect x="40" y="52" width="20" height="30" rx="2" fill="#9e9e9e" />
|
||||||
|
</svg>
|
||||||
|
</el-avatar>
|
||||||
|
<div class="user-name">{{ userInfo.name }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-divider />
|
||||||
|
|
||||||
|
<div class="user-details">
|
||||||
|
<div class="detail-item">
|
||||||
|
<span class="label">性别  ：</span>
|
||||||
|
<span class="value">{{ userInfo.sex }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="detail-item">
|
||||||
|
<span class="label">手机号 ：</span>
|
||||||
|
<span class="value">{{ userInfo.tel }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="detail-item">
|
||||||
|
<span class="label">身份证号：</span>
|
||||||
|
<span class="value">{{ userInfo.idnum }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="detail-item">
|
||||||
|
<span class="label">住址  ：</span>
|
||||||
|
<span class="value">{{ userInfo.address }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="info-card">
|
||||||
|
<div class="tab-header">
|
||||||
|
<el-tabs type="card" v-model="activeTab">
|
||||||
|
<el-tab-pane label="基础信息" name="basic"></el-tab-pane>
|
||||||
|
|
||||||
|
<el-tab-pane label="订单记录" name="orders"></el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info-details" v-if="activeTab === 'basic'">
|
||||||
|
<div class="detail-item">
|
||||||
|
<span class="label">微信openid：</span>
|
||||||
|
<span class="value">{{ userInfo.openid }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="detail-item">
|
||||||
|
<span class="label">注册时间：</span>
|
||||||
|
<span class="value">{{ userInfo.createTime }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="detail-item">
|
||||||
|
<span class="label">最后登录：</span>
|
||||||
|
<span class="value">{{ basicInfo.lastLogin }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="detail-item">
|
||||||
|
<span class="label">登录次数：</span>
|
||||||
|
<span class="value">{{ basicInfo.loginCount }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="detail-item">
|
||||||
|
<span class="label">常用设备：</span>
|
||||||
|
<span class="value">{{ basicInfo.device }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="info-details" v-if="activeTab === 'orders'">
|
||||||
|
<div class="order-item" v-for="order in orderRecords" :key="order.id">
|
||||||
|
<div class="order-id">订单号：{{ order.id }}</div>
|
||||||
|
<div class="order-detail">
|
||||||
|
<span>日期：{{ order.date }}</span>
|
||||||
|
<span>金额：¥{{ order.amount.toFixed(2) }}</span>
|
||||||
|
<span>状态：{{ order.status }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.detail-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.flex-container {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
gap: 20px;
|
||||||
|
min-height: 0;
|
||||||
|
|
||||||
|
.user-info-card {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-card {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info-card,
|
||||||
|
.shop-info-card {
|
||||||
|
height: 100%;
|
||||||
|
min-height: 85vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
.user-name {
|
||||||
|
margin-top: 15px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-header {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-item {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
.order-id {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.order-detail {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-item {
|
||||||
|
margin: 15px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
color: #606266;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,226 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { onMounted, reactive, ref, watch } from "vue";
|
||||||
|
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||||
|
import { getAb98UserListApi, type Ab98UserDTO, Ab98UserQuery } from "@/api/ab98/user";
|
||||||
|
import { type PaginationProps } from "@pureadmin/table";
|
||||||
|
import { CommonUtils } from "@/utils/common";
|
||||||
|
|
||||||
|
import Search from "@iconify-icons/ep/search";
|
||||||
|
import Refresh from "@iconify-icons/ep/refresh";
|
||||||
|
import View from "@iconify-icons/ep/view";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: "Ab98User"
|
||||||
|
});
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const formRef = ref();
|
||||||
|
const searchFormParams = reactive<Ab98UserQuery>({
|
||||||
|
name: undefined,
|
||||||
|
tel: undefined,
|
||||||
|
idnum: undefined
|
||||||
|
});
|
||||||
|
|
||||||
|
const pageLoading = ref(false);
|
||||||
|
const dataList = ref<Ab98UserDTO[]>([]);
|
||||||
|
const pagination = reactive<PaginationProps>({
|
||||||
|
total: 0,
|
||||||
|
pageSize: 12,
|
||||||
|
currentPage: 1,
|
||||||
|
background: true
|
||||||
|
});
|
||||||
|
|
||||||
|
async function onSearch() {
|
||||||
|
pagination.currentPage = 1;
|
||||||
|
getList();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getList() {
|
||||||
|
CommonUtils.fillPaginationParams(searchFormParams, pagination);
|
||||||
|
|
||||||
|
pageLoading.value = true;
|
||||||
|
const { data } = await getAb98UserListApi(searchFormParams).finally(
|
||||||
|
() => {
|
||||||
|
pageLoading.value = false;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
dataList.value = data.rows;
|
||||||
|
pagination.total = data.total;
|
||||||
|
}
|
||||||
|
|
||||||
|
const resetForm = formEl => {
|
||||||
|
if (!formEl) return;
|
||||||
|
formEl.resetFields();
|
||||||
|
onSearch();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleViewDetail = (row: any) => {
|
||||||
|
router.push({
|
||||||
|
path: '/user/ab98/detail',
|
||||||
|
query: {
|
||||||
|
id: row.ab98UserId
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getList();
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="main">
|
||||||
|
<div class="float-right w-full">
|
||||||
|
<el-form ref="formRef" :inline="true" :model="searchFormParams"
|
||||||
|
class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
|
||||||
|
<el-form-item label="姓名：" prop="name">
|
||||||
|
<el-input v-model="searchFormParams.name" placeholder="请输入" clearable class="!w-[160px]" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="手机号：" prop="tel">
|
||||||
|
<el-input v-model="searchFormParams.tel" placeholder="请输入" clearable class="!w-[160px]" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="身份证：" prop="idnum">
|
||||||
|
<el-input v-model="searchFormParams.idnum" placeholder="请输入" clearable class="!w-[160px]" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" :icon="useRenderIcon(Search)" :loading="pageLoading" @click="onSearch">
|
||||||
|
搜索
|
||||||
|
</el-button>
|
||||||
|
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
|
||||||
|
重置
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<div class="grid-container">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col v-for="(item, index) in dataList" :key="item.ab98UserId" :xs="24" :sm="12" :md="8" :lg="6">
|
||||||
|
<el-card class="user-card" :body-style="{ padding: '8px 20px' }">
|
||||||
|
<div class="card-content">
|
||||||
|
<el-avatar :size="80" :src="item.faceImg" fit="cover" shape="square" class="avatar">
|
||||||
|
<template v-if="!item.faceImg">
|
||||||
|
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="50" cy="50" r="48" fill="#f5f5f5" stroke="#e0e0e0" stroke-width="1" />
|
||||||
|
<circle cx="50" cy="40" r="12" fill="#9e9e9e" />
|
||||||
|
<rect x="40" y="52" width="20" height="30" rx="2" fill="#9e9e9e" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
</el-avatar>
|
||||||
|
<div class="user-info">
|
||||||
|
<div class="name">姓名：{{ item.name }}</div>
|
||||||
|
<div class="gender">性别：{{ item.sex === '男' ? '男' : item.sex === '女' ? '女' : '' }}</div>
|
||||||
|
<div class="tel">电话：{{ item.tel }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="idnum">身份证号：{{ item.idnum }}</div>
|
||||||
|
<div class="address">住 址：{{ item.address }}</div>
|
||||||
|
<el-divider class="divider" />
|
||||||
|
<el-button class="detail-btn" :icon="useRenderIcon(View)" @click="handleViewDetail(item)" />
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<div class="pagination-wrapper">
|
||||||
|
<el-pagination background layout="prev, pager, next" :page-size="pagination.pageSize"
|
||||||
|
:total="pagination.total" v-model:current-page="pagination.currentPage" @current-change="getList"
|
||||||
|
@size-change="getList" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
:deep(.el-dropdown-menu__item i) {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-form {
|
||||||
|
:deep(.el-form-item) {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-card {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
min-height: 210px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.card-content {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin: 15px 0px;
|
||||||
|
gap: 15px;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
text-align: left;
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
.name,
|
||||||
|
.gender,
|
||||||
|
.tel {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #606266;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.idnum,
|
||||||
|
.address {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #606266;
|
||||||
|
margin: 4px 0;
|
||||||
|
line-height: 1.5;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
margin: 10px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-btn {
|
||||||
|
width: 100%;
|
||||||
|
border: 0;
|
||||||
|
margin-top: auto;
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-container {
|
||||||
|
margin: 20px 0;
|
||||||
|
padding-bottom: 60px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.el-row {
|
||||||
|
margin-bottom: -20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-wrapper {
|
||||||
|
position: relative;
|
||||||
|
background: var(--el-bg-color);
|
||||||
|
padding: 12px 12px;
|
||||||
|
margin-top: 20px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
:deep(.el-pagination) {
|
||||||
|
margin: 0;
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue