diff --git a/src/api/ab98/user.ts b/src/api/ab98/user.ts
new file mode 100644
index 0000000..668e1b1
--- /dev/null
+++ b/src/api/ab98/user.ts
@@ -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}`);
+};
\ No newline at end of file
diff --git a/src/router/modules/global.ts b/src/router/modules/global.ts
index 6e57c3c..e6d7c43 100644
--- a/src/router/modules/global.ts
+++ b/src/router/modules/global.ts
@@ -15,6 +15,14 @@ export default {
       meta: {
         title: "个人中心"
       }
+    },
+    {
+      path: "/user/ab98/detail",
+      name: "ab98Detail",
+      component: () => import("@/views/user/ab98/detail.vue"),
+      meta: {
+        title: "会员详情"
+      }
     }
   ]
 } as RouteConfigsTable;
diff --git a/src/style/element-plus.scss b/src/style/element-plus.scss
index 7c7ffe0..7db9bf0 100644
--- a/src/style/element-plus.scss
+++ b/src/style/element-plus.scss
@@ -174,4 +174,8 @@
     padding-bottom: 10px;
     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;
 }
\ No newline at end of file
diff --git a/src/views/user/ab98/detail.vue b/src/views/user/ab98/detail.vue
new file mode 100644
index 0000000..3a6c882
--- /dev/null
+++ b/src/views/user/ab98/detail.vue
@@ -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">性别&emsp;&emsp;：</span>
+            <span class="value">{{ userInfo.sex }}</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">手机号&emsp;：</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">住址&emsp;&emsp;：</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>
\ No newline at end of file
diff --git a/src/views/user/ab98/index.vue b/src/views/user/ab98/index.vue
new file mode 100644
index 0000000..a3fd1cf
--- /dev/null
+++ b/src/views/user/ab98/index.vue
@@ -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>
\ No newline at end of file