销售管理适配手机端

src/views/erp/sale/order/index.vue

@@ -1,333 +1,186 @@
 <template>
-  <doc-alert title="【销售】销售订单、出库、退货" url="https://doc.iocoder.cn/erp/sale/" />
-
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="订单单号" prop="no">
+  <div class="mobile-sale-order">
+    <!-- 顶部操作栏 -->
+    <div class="mobile-header">
+      <div class="mobile-header__search">
         <el-input
           v-model="queryParams.no"
-          placeholder="请输入订单单号"
+          placeholder="搜索订单单号"
           clearable
           @keyup.enter="handleQuery"
-          class="!w-240px"
+          :prefix-icon="Search"
         />
-      </el-form-item>
-      <el-form-item label="产品" prop="productId">
-        <el-select
-          v-model="queryParams.productId"
-          clearable
-          filterable
-          placeholder="请选择产品"
-          class="!w-240px"
-        >
-          <el-option
-            v-for="item in productList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="订单时间" prop="orderTime">
-        <el-date-picker
-          v-model="queryParams.orderTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="客户" prop="customerId">
-        <el-select
-          v-model="queryParams.customerId"
-          clearable
-          filterable
-          placeholder="请选择供客户"
-          class="!w-240px"
-        >
-          <el-option
-            v-for="item in customerList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="创建人" prop="creator">
-        <el-select
-          v-model="queryParams.creator"
-          clearable
-          filterable
-          placeholder="请选择创建人"
-          class="!w-240px"
-        >
-          <el-option
-            v-for="item in userList"
-            :key="item.id"
-            :label="item.nickname"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.ERP_AUDIT_STATUS)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="备注" prop="remark">
-        <el-input
-          v-model="queryParams.remark"
-          placeholder="请输入备注"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="出库数量" prop="outStatus">
-        <el-select
-          v-model="queryParams.outStatus"
-          placeholder="请选择出库数量"
-          clearable
-          class="!w-240px"
-        >
-          <el-option label="未出库" value="0" />
-          <el-option label="部分出库" value="1" />
-          <el-option label="全部出库" value="2" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="退货数量" prop="returnStatus">
-        <el-select
-          v-model="queryParams.returnStatus"
-          placeholder="请选择退货数量"
-          clearable
-          class="!w-240px"
-        >
-          <el-option label="未退货" value="0" />
-          <el-option label="部分退货" value="1" />
-          <el-option label="全部退货" value="2" />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+      </div>
+      <div class="mobile-header__actions">
+        <el-button :icon="Filter" circle @click="filterVisible = true" />
         <el-button
           type="primary"
-          plain
+          :icon="Plus"
+          circle
           @click="openForm('create')"
           v-hasPermi="['erp:sale-order:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
-        </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['erp:sale-order:export']"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
-        <el-button
-          type="danger"
-          plain
-          @click="handleDelete(selectionList.map((item) => item.id))"
-          v-hasPermi="['erp:sale-order:delete']"
-          :disabled="selectionList.length === 0"
-        >
-          <Icon icon="ep:delete" class="mr-5px" /> 删除
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
+        />
+      </div>
+    </div>
 
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table
-      v-loading="loading"
-      :data="list"
-      :stripe="true"
-      :show-overflow-tooltip="true"
-      @selection-change="handleSelectionChange"
-      @row-click="handleRowClick"
-    >
-      <el-table-column width="30" label="选择" type="selection" />
-      <el-table-column min-width="180" label="订单单号" align="center" prop="no" />
-      <el-table-column label="产品信息" align="center" prop="productNames" min-width="200" />
-      <el-table-column label="客户" align="center" prop="customerName" />
-      <el-table-column
-        label="订单时间"
-        align="center"
-        prop="orderTime"
-        :formatter="dateFormatter2"
-        width="120px"
-        sortable
-      />
-      <el-table-column label="创建人" align="center" prop="creatorName" />
-      <el-table-column
-        label="总数量"
-        align="center"
-        prop="totalCount"
-        :formatter="erpCountTableColumnFormatter"
-      />
-      <el-table-column
-        label="出库数量"
-        align="center"
-        prop="outCount"
-        :formatter="erpCountTableColumnFormatter"
-      />
-      <el-table-column
-        label="退货数量"
-        align="center"
-        prop="returnCount"
-        :formatter="erpCountTableColumnFormatter"
-      />
-      <el-table-column
-        label="金额合计"
-        align="center"
-        prop="totalProductPrice"
-        :formatter="erpPriceTableColumnFormatter"
-      />
-      <el-table-column
-        label="含税金额"
-        align="center"
-        prop="totalPrice"
-        :formatter="erpPriceTableColumnFormatter"
-      />
-      <el-table-column
-        label="收取订金"
-        align="center"
-        prop="depositPrice"
-        :formatter="erpPriceTableColumnFormatter"
-      />
-      <el-table-column label="状态" align="center" fixed="right" width="90" prop="status">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.ERP_AUDIT_STATUS" :value="scope.row.status" />
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" fixed="right" width="380">
-        <template #default="scope">
-          <el-button
-            link
-            @click="openForm('detail', scope.row.id)"
-            v-hasPermi="['erp:sale-order:query']"
-          >
-            详情
-          </el-button>
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['erp:sale-order:update']"
-            :disabled="scope.row.status === 20 || scope.row.hasApprovalRecords"
-          >
-            编辑
-          </el-button>
-          <el-button
-            link
-            type="success"
-            @click="handleSubmitApproval(scope.row.id)"
-            v-hasPermi="['erp:sale-order:submit-approval']"
-            v-if="scope.row.status === 10 && !scope.row.hasApprovalRecords"
-          >
-            提交审批
-          </el-button>
-          <el-button
-            link
-            type="info"
-            @click="handleViewApproval(scope.row.id)"
-            v-hasPermi="['erp:sale-order:query-approval']"
-            v-if="scope.row.hasApprovalRecords"
-          >
-            审批记录
-          </el-button>
-          <el-button
-            link
-            type="primary"
-            @click="handleProcessApproval(scope.row.id)"
-            v-hasPermi="['erp:approval-record:process']"
-            v-if="scope.row.hasApprovalRecords && scope.row.status !== 20"
-          >
-            处理审批
-          </el-button>
+    <!-- 卡片列表 -->
+    <div class="mobile-list" v-loading="loading">
+      <div v-if="list.length === 0 && !loading" class="mobile-empty">
+        <el-empty description="暂无销售订单" />
+      </div>
+      <div
+        v-for="item in list"
+        :key="item.id"
+        class="mobile-card"
+        @click="handleCardClick(item)"
+      >
+        <div class="mobile-card__header">
+          <span class="mobile-card__no">{{ item.no }}</span>
+          <dict-tag :type="DICT_TYPE.ERP_AUDIT_STATUS" :value="item.status" />
+        </div>
+        <div class="mobile-card__body">
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">客户</span>
+            <span class="mobile-card__value">{{ item.customerName || '-' }}</span>
+          </div>
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">产品</span>
+            <span class="mobile-card__value mobile-card__value--ellipsis">{{ item.productNames || '-' }}</span>
+          </div>
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">订单时间</span>
+            <span class="mobile-card__value">{{ formatDate2(item.orderTime) }}</span>
+          </div>
+          <div class="mobile-card__row">
+            <span class="mobile-card__label">创建人</span>
+            <span class="mobile-card__value">{{ item.creatorName || '-' }}</span>
+          </div>
+          <div class="mobile-card__nums">
+            <div class="mobile-card__num-item">
+              <div class="mobile-card__num-val">{{ erpCountInputFormatter(item.totalCount) }}</div>
+              <div class="mobile-card__num-label">总数量</div>
+            </div>
+            <div class="mobile-card__num-item">
+              <div class="mobile-card__num-val">{{ erpCountInputFormatter(item.outCount) }}</div>
+              <div class="mobile-card__num-label">出库</div>
+            </div>
+            <div class="mobile-card__num-item">
+              <div class="mobile-card__num-val">{{ erpCountInputFormatter(item.returnCount) }}</div>
+              <div class="mobile-card__num-label">退货</div>
+            </div>
+            <div class="mobile-card__num-item">
+              <div class="mobile-card__num-val mobile-card__num-val--price">¥{{ erpPriceInputFormatter(item.totalPrice) }}</div>
+              <div class="mobile-card__num-label">含税金额</div>
+            </div>
+          </div>
+        </div>
+        <div class="mobile-card__footer">
+          <el-button size="small" @click.stop="openForm('detail', item.id)" v-hasPermi="['erp:sale-order:query']">详情</el-button>
+          <el-button size="small" type="primary" @click.stop="openForm('update', item.id)" v-hasPermi="['erp:sale-order:update']" :disabled="item.status === 20 || item.hasApprovalRecords">编辑</el-button>
+          <el-button size="small" type="success" @click.stop="handleSubmitApproval(item.id)" v-hasPermi="['erp:sale-order:submit-approval']" v-if="item.status === 10 && !item.hasApprovalRecords">提交审批</el-button>
+          <el-button size="small" type="info" @click.stop="handleViewApproval(item.id)" v-hasPermi="['erp:sale-order:query-approval']" v-if="item.hasApprovalRecords">审批记录</el-button>
+          <el-button size="small" type="primary" @click.stop="handleProcessApproval(item.id)" v-hasPermi="['erp:approval-record:process']" v-if="item.hasApprovalRecords && item.status !== 20">处理审批</el-button>
+          <el-button size="small" type="primary" @click.stop="handleUpdateStatus(item.id, 20)" v-hasPermi="['erp:sale-order:update-status']" v-if="item.status === 10">审批</el-button>
+          <el-button size="small" type="danger" @click.stop="handleUpdateStatus(item.id, 10)" v-hasPermi="['erp:sale-order:update-status']" v-if="item.status === 20">反审批</el-button>
+          <el-button size="small" type="danger" @click.stop="handleDelete([item.id])" v-hasPermi="['erp:sale-order:delete']" :disabled="item.hasApprovalRecords">删除</el-button>
+        </div>
+      </div>
+    </div>
 
-          <el-button
-            link
-            type="primary"
-            @click="handleUpdateStatus(scope.row.id, 20)"
-            v-hasPermi="['erp:sale-order:update-status']"
-            v-if="scope.row.status === 10"
-          >
-            审批
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleUpdateStatus(scope.row.id, 10)"
-            v-hasPermi="['erp:sale-order:update-status']"
-            v-else
-          >
-            反审批
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete([scope.row.id])"
-            v-hasPermi="['erp:sale-order:delete']"
-            :disabled="scope.row.hasApprovalRecords"
-          >
-            删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
     <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
+    <div class="mobile-pagination" v-if="total > 0">
+      <Pagination
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        :page-sizes="[10, 20]"
+        layout="total, prev, pager, next"
+        :pager-count="5"
+        @pagination="getList"
+      />
+    </div>
 
-  <!-- 表单弹窗：添加/修改 -->
-  <SaleOrderForm ref="formRef" @success="getList" />
+    <!-- 筛选抽屉 -->
+    <el-drawer v-model="filterVisible" title="筛选条件" direction="btt" size="70%">
+      <el-form :model="queryParams" ref="queryFormRef" label-position="top">
+        <el-form-item label="产品" prop="productId">
+          <el-select v-model="queryParams.productId" clearable filterable placeholder="请选择产品" style="width:100%">
+            <el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="客户" prop="customerId">
+          <el-select v-model="queryParams.customerId" clearable filterable placeholder="请选择客户" style="width:100%">
+            <el-option v-for="item in customerList" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="订单时间" prop="orderTime">
+          <el-date-picker
+            v-model="queryParams.orderTime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+            style="width:100%"
+          />
+        </el-form-item>
+        <el-form-item label="创建人" prop="creator">
+          <el-select v-model="queryParams.creator" clearable filterable placeholder="请选择创建人" style="width:100%">
+            <el-option v-for="item in userList" :key="item.id" :label="item.nickname" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width:100%">
+            <el-option v-for="dict in getIntDictOptions(DICT_TYPE.ERP_AUDIT_STATUS)" :key="dict.value" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="出库状态" prop="outStatus">
+          <el-select v-model="queryParams.outStatus" placeholder="请选择" clearable style="width:100%">
+            <el-option label="未出库" value="0" />
+            <el-option label="部分出库" value="1" />
+            <el-option label="全部出库" value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="退货状态" prop="returnStatus">
+          <el-select v-model="queryParams.returnStatus" placeholder="请选择" clearable style="width:100%">
+            <el-option label="未退货" value="0" />
+            <el-option label="部分退货" value="1" />
+            <el-option label="全部退货" value="2" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="resetQuery">重置</el-button>
+        <el-button type="primary" @click="handleFilterConfirm">确认筛选</el-button>
+      </template>
+    </el-drawer>
 
-  <!-- 提交审批对话框 -->
-  <SubmitApprovalDialog ref="submitApprovalDialogRef" @success="getList" />
+    <!-- 表单弹窗：添加/修改 -->
+    <SaleOrderForm ref="formRef" @success="getList" />
 
-  <!-- 审批记录对话框 -->
-  <ApprovalRecordsDialog ref="approvalDialogRef" />
+    <!-- 提交审批对话框 -->
+    <SubmitApprovalDialog ref="submitApprovalDialogRef" @success="getList" />
 
-  <!-- 处理审批对话框 -->
-  <ProcessApprovalDialog ref="processApprovalDialogRef" @success="getList" />
+    <!-- 审批记录对话框 -->
+    <ApprovalRecordsDialog ref="approvalDialogRef" />
+
+    <!-- 处理审批对话框 -->
+    <ProcessApprovalDialog ref="processApprovalDialogRef" @success="getList" />
+  </div>
 </template>
 
 <script setup lang="ts">
+import { Search, Filter, Plus } from '@element-plus/icons-vue'
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
-import { dateFormatter2 } from '@/utils/formatTime'
+import { formatDate } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { SaleOrderApi, SaleOrderVO } from '@/api/erp/sale/order'
 import SaleOrderForm from './SaleOrderForm.vue'
 import { ProductApi, ProductVO } from '@/api/erp/product/product'
 import { UserVO } from '@/api/system/user'
 import * as UserApi from '@/api/system/user'
-import { erpCountTableColumnFormatter, erpPriceTableColumnFormatter } from '@/utils'
+import { erpCountInputFormatter, erpPriceInputFormatter } from '@/utils'
 import { CustomerApi, CustomerVO } from '@/api/erp/sale/customer'
-import {PurchaseOrderVO} from "@/api/erp/purchase/order";
 import { SubmitApprovalDialog, ApprovalRecordsDialog, ProcessApprovalDialog } from '@/components/Approval'
 import { ApprovalRecordApi, ApprovalRecordVO } from '@/api/erp/approval/index'
 
@@ -340,6 +193,7 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const list = ref<SaleOrderVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
+const filterVisible = ref(false) // 筛选抽屉
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -359,6 +213,11 @@ const productList = ref<ProductVO[]>([]) // 产品列表
 const customerList = ref<CustomerVO[]>([]) // 客户列表
 const userList = ref<UserVO[]>([]) // 用户列表
 
+const formatDate2 = (date: any) => {
+  if (!date) return '-'
+  return formatDate(new Date(date), 'YYYY-MM-DD')
+}
+
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -399,7 +258,13 @@ const handleQuery = () => {
 
 /** 重置按钮操作 */
 const resetQuery = () => {
-  queryFormRef.value.resetFields()
+  queryFormRef.value?.resetFields()
+  handleQuery()
+}
+
+/** 筛选确认 */
+const handleFilterConfirm = () => {
+  filterVisible.value = false
   handleQuery()
 }
 
@@ -409,6 +274,15 @@ const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
+/** 卡片点击 */
+const handleCardClick = (row: SaleOrderVO) => {
+  if (row.status === 20) {
+    openForm('detail', row.id)
+  } else if (row.status === 10) {
+    openForm('update', row.id)
+  }
+}
+
 /** 提交审批 */
 const submitApprovalDialogRef = ref()
 const handleSubmitApproval = (id: number) => {
@@ -427,32 +301,6 @@ const handleProcessApproval = (id: number) => {
   processApprovalDialogRef.value.open(String(id), 'erp_sale_order')
 }
 
-
-/** 行点击操作 */
-const handleRowClick = (row: SaleOrderVO, column: any, event: MouseEvent) => {
-  // 检查是否点击了按钮、链接或其他交互元素
-  const target = event.target as HTMLElement
-  if (
-    target.tagName === 'BUTTON' ||
-    target.tagName === 'A' ||
-    target.tagName === 'I' ||
-    target.tagName === 'svg' ||
-    target.closest('button') ||
-    target.closest('a') ||
-    target.closest('.el-button') ||
-    target.closest('.el-checkbox')
-  ) {
-    return
-  }
-
-  // 已审核打开详情页面，未审核打开编辑页面
-  if (row.status === 20) {
-    openForm('detail', row.id)
-  } else if (row.status === 10) {
-    openForm('update', row.id)
-  }
-}
-
 /** 删除按钮操作 */
 const handleDelete = async (ids: number[]) => {
   try {
@@ -463,7 +311,6 @@ const handleDelete = async (ids: number[]) => {
     message.success(t('common.delSuccess'))
     // 刷新列表
     await getList()
-    selectionList.value = selectionList.value.filter((item) => !ids.includes(item.id))
   } catch {}
 }
 
@@ -495,12 +342,6 @@ const handleExport = async () => {
   }
 }
 
-/** 选中操作 */
-const selectionList = ref<SaleOrderVO[]>([])
-const handleSelectionChange = (rows: SaleOrderVO[]) => {
-  selectionList.value = rows
-}
-
 /** 初始化 **/
 onMounted(async () => {
   await getList()
@@ -509,6 +350,134 @@ onMounted(async () => {
   customerList.value = await CustomerApi.getCustomerSimpleList()
   userList.value = await UserApi.getSimpleUserList()
 })
-// TODO 芋艿：可优化功能：列表界面，支持导入
-// TODO 芋艿：可优化功能：详情界面，支持打印
 </script>
+
+<style lang="scss" scoped>
+.mobile-sale-order {
+  padding: 12px;
+  background: #f5f5f5;
+  min-height: 100vh;
+}
+
+.mobile-header {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 12px;
+
+  &__search {
+    flex: 1;
+  }
+
+  &__actions {
+    display: flex;
+    gap: 4px;
+    flex-shrink: 0;
+  }
+}
+
+.mobile-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.mobile-empty {
+  padding: 40px 0;
+}
+
+.mobile-card {
+  background: #fff;
+  border-radius: 10px;
+  padding: 14px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  &__no {
+    font-weight: 600;
+    font-size: 15px;
+    color: #303133;
+  }
+
+  &__body {
+    font-size: 13px;
+  }
+
+  &__row {
+    display: flex;
+    justify-content: space-between;
+    padding: 3px 0;
+  }
+
+  &__label {
+    color: #909399;
+    flex-shrink: 0;
+    margin-right: 12px;
+  }
+
+  &__value {
+    color: #606266;
+    text-align: right;
+
+    &--ellipsis {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 200px;
+    }
+  }
+
+  &__nums {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 10px;
+    padding: 10px 0;
+    border-top: 1px solid #f0f0f0;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  &__num-item {
+    text-align: center;
+  }
+
+  &__num-val {
+    font-size: 15px;
+    font-weight: 600;
+    color: #303133;
+
+    &--price {
+      color: #e6a23c;
+    }
+  }
+
+  &__num-label {
+    font-size: 11px;
+    color: #909399;
+    margin-top: 2px;
+  }
+
+  &__footer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 10px;
+  }
+}
+
+.mobile-pagination {
+  margin-top: 12px;
+  display: flex;
+  justify-content: center;
+
+  :deep(.el-pagination) {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+}
+</style>