From 7c917becee71c52a97ed2c8bcd52214537f9725f Mon Sep 17 00:00:00 2001
From: liuning <807852472@qq.com>
Date: Thu, 12 Mar 2026 17:40:20 +0800
Subject: [PATCH] =?UTF-8?q?=C2=96=E6=96=B0=E5=A2=9E=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=87=BA=E5=BA=93=E5=88=97=E8=A1=A8=E9=A1=B5=E9=9D=A2=20?=
 =?UTF-8?q?=E5=92=8C=20=E5=87=BA=E5=BA=93=E8=AF=A6=E6=83=85=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=EF=BC=8C=E5=87=BA=E5=BA=93=E5=88=97=E8=A1=A8=E5=B8=A6?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/plugin/inList.vue     |  71 ++++++-
 pages/plugin/outDetails.vue | 338 +++++++++++++++++++++++++++++++++
 pages/plugin/outList.vue    | 362 ++++++++++++++++++++++++++++++++++++
 3 files changed, 768 insertions(+), 3 deletions(-)
 create mode 100644 pages/plugin/outDetails.vue
 create mode 100644 pages/plugin/outList.vue

diff --git a/pages/plugin/inList.vue b/pages/plugin/inList.vue
index a0b9bfe..24ea8cb 100644
--- a/pages/plugin/inList.vue
+++ b/pages/plugin/inList.vue
@@ -3,10 +3,23 @@
 		<scroll-view scroll-y class="page">
 			<cu-custom bgColor="bg-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">入库列表</block></cu-custom>
 			
+			<!-- 搜索框 -->
+			<view class="search-box">
+				<input
+					class="search-input"
+					type="text"
+					v-model="searchKeyword"
+					placeholder="请输入入库批次"
+					placeholder-class="search-placeholder"
+				/>
+				<text class="search-icon" v-if="!searchKeyword">🔍</text>
+				<text class="clear-icon" v-else @click="clearSearch">✕</text>
+			</view>
+			
 			<!-- 空数据提示 -->
-			<view v-if="!inListData || inListData.length === 0" class="empty-container">
+			<view v-if="!filteredInListData || filteredInListData.length === 0" class="empty-container">
 				<text class="empty-icon">📦</text>
-				<text class="empty-text">暂无入库数据</text>
+				<text class="empty-text">{{searchKeyword ? '未找到匹配的入库批次' : '暂无入库数据'}}</text>
 			</view>
 			
 			<!-- 表格展示 -->
@@ -57,6 +70,7 @@
 				name: '',
 				duty: '',
 				inListData: [],
+				searchKeyword: '',
 				currentPage: 1,
 				pageSize: 20,
 				totalItems: 0,
@@ -64,14 +78,28 @@
 			}
 		},
 		computed: {
+			filteredInListData() {
+				if (!this.searchKeyword) {
+					return this.inListData
+				}
+				return this.inListData.filter(item => {
+					return item.in_ware_batch && item.in_ware_batch.includes(this.searchKeyword)
+				})
+			},
 			currentPageData() {
 				const start = (this.currentPage - 1) * this.pageSize
 				const end = start + this.pageSize
-				return this.inListData.slice(start, end)
+				return this.filteredInListData.slice(start, end)
 			}
 		},
 		watch: {
 			inListData(newVal) {
+				this.currentPage = 1
+			},
+			searchKeyword() {
+				this.currentPage = 1
+			},
+			filteredInListData(newVal) {
 				this.totalItems = newVal.length
 				this.totalPages = Math.ceil(this.totalItems / this.pageSize)
 				if (this.currentPage > this.totalPages && this.totalPages > 0) {
@@ -122,6 +150,10 @@
 				} else if (direction === 'next' && this.currentPage < this.totalPages) {
 					this.currentPage++
 				}
+			},
+			// 清空搜索
+			clearSearch() {
+				this.searchKeyword = ''
 			}
 		}
 	}
@@ -133,6 +165,39 @@
 		height: 100vh;
 	}
 	
+	/* 搜索框 */
+	.search-box {
+		margin: 12rpx;
+		padding: 0 24rpx;
+		background-color: #fff;
+		border-radius: 30rpx;
+		display: flex;
+		align-items: center;
+		box-shadow: 0 2rpx 12rpx rgba(74, 144, 226, 0.15);
+		border: 1px solid #e1e8f0;
+	}
+	
+	.search-input {
+		flex: 1;
+		height: 70rpx;
+		font-size: 26rpx;
+		color: #333;
+	}
+	
+	.search-placeholder {
+		color: #999;
+	}
+	
+	.search-icon, .clear-icon {
+		font-size: 28rpx;
+		margin-left: 10rpx;
+	}
+	
+	.clear-icon {
+		color: #999;
+		padding: 10rpx;
+	}
+	
 	/* 空数据容器 */
 	.empty-container {
 		display: flex;
diff --git a/pages/plugin/outDetails.vue b/pages/plugin/outDetails.vue
new file mode 100644
index 0000000..67ff12c
--- /dev/null
+++ b/pages/plugin/outDetails.vue
@@ -0,0 +1,338 @@
+<template>
+	<view>
+		<scroll-view scroll-y class="page">
+			<cu-custom bgColor="bg-green" :isBack="true"><block slot="backText">返回</block><block slot="content">出库详情</block></cu-custom>
+			
+			<!-- 出库批次信息 -->
+			<view class="batch-info-card">
+				<view class="batch-title">出库批次：{{batch}}</view>
+				<view class="batch-meta">
+					<text class="meta-item">🏥 {{organ_name}}</text>
+					<text class="meta-item">👤 出库人：{{comp_recl_name}}</text>
+				</view>
+				<view class="batch-meta">
+					<text class="meta-item">📊 总重量：{{totalWeight}} kg</text>
+					<text class="meta-item">📦 总袋数：{{totalCount}} 袋</text>
+				</view>
+			</view>
+			
+			<!-- 空数据提示 -->
+			<view v-if="!detailData || detailData.length === 0" class="empty-container">
+				<text class="empty-icon">📋</text>
+				<text class="empty-text">暂无详情数据</text>
+			</view>
+			
+			<!-- 表格展示 -->
+			<view v-else class="table-wrapper">
+				<view class="table-container">
+					<view class="table-header">
+						<view class="table-cell cell-type">医废类型</view>
+						<view class="table-cell cell-dept">科室</view>
+						<view class="table-cell cell-weight">重量</view>
+						<view class="table-cell cell-person">收集人</view>
+						<view class="table-cell cell-time">收集时间</view>
+					</view>
+					<view class="table-row" v-for="(item, index) in currentPageData" :key="index">
+						<view class="table-cell cell-type">
+							<img :src="item.image" class="type-icon">
+							<text>{{item.waste_type}}</text>
+						</view>
+						<view class="table-cell cell-dept">{{item.dept_name}}</view>
+						<view class="table-cell cell-weight">{{item.weight}}</view>
+						<view class="table-cell cell-person">{{item.recl_name}}</view>
+						<view class="table-cell cell-time">{{formatTime(item.recl_time)}}</view>
+					</view>
+				</view>
+				
+				<!-- 分页控件 -->
+				<view class="pagination-wrapper">
+					<view class="pagination-info">
+						<text>共 {{totalItems}} 条，第 {{currentPage}}/{{totalPages}} 页</text>
+					</view>
+					<view class="pagination-controls">
+						<button class="page-btn" :disabled="currentPage === 1" @click="changePage('prev')">上一页</button>
+						<button class="page-btn" :disabled="currentPage === totalPages" @click="changePage('next')">下一页</button>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				batch: '',
+				organ_name: '',
+				comp_recl_name: '',
+				totalCount: 0,
+				totalWeight: 0,
+				detailData: [],
+				currentPage: 1,
+				pageSize: 20,
+				totalItems: 0,
+				totalPages: 0
+			}
+		},
+		computed: {
+			currentPageData() {
+				const start = (this.currentPage - 1) * this.pageSize
+				const end = start + this.pageSize
+				return this.detailData.slice(start, end)
+			}
+		},
+		watch: {
+			detailData(newVal) {
+				this.totalItems = newVal.length
+				this.totalPages = Math.ceil(this.totalItems / this.pageSize)
+				if (this.currentPage > this.totalPages && this.totalPages > 0) {
+					this.currentPage = this.totalPages
+				}
+			}
+		},
+		mounted(){
+			// 获取页面参数
+			const pages = getCurrentPages()
+			const currentPage = pages[pages.length - 1]
+			this.batch = currentPage.options.batch || ''
+			
+			this.getOutDetailData()
+		},
+		methods: {
+			// 获取出库详情数据
+			getOutDetailData(){
+				let that = this;
+				uni.request({
+					url: 'https://mtx.mini.opmonitor.com/?c=app_api&a=getOutDetailData',
+					data: {batch: that.batch},
+					header: {
+						'Content-type': 'application/json'
+					},
+					success: function(res){
+						const data = res.data.data
+						that.organ_name = data.organ_name || ''
+						that.comp_recl_name = data.comp_recl_name || ''
+						that.totalCount = data.totalCount || 0
+						that.totalWeight = data.totalWeight || 0
+						that.detailData = data.details || []
+					},
+					fail: () => {
+						console.info('获取出库详情失败')
+					}
+				})
+			},
+			// 格式化时间 m-d H:i
+			formatTime(timeStr) {
+				if (!timeStr) return ''
+				const date = new Date(timeStr.replace(/-/g, '/'))
+				const month = String(date.getMonth() + 1).padStart(2, '0')
+				const day = String(date.getDate()).padStart(2, '0')
+				const hours = String(date.getHours()).padStart(2, '0')
+				const minutes = String(date.getMinutes()).padStart(2, '0')
+				return `${month}-${day} ${hours}:${minutes}`
+			},
+			// 切换页面
+			changePage(direction) {
+				if (direction === 'prev' && this.currentPage > 1) {
+					this.currentPage--
+				} else if (direction === 'next' && this.currentPage < this.totalPages) {
+					this.currentPage++
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+	.page {
+		width: 100vw;
+		height: 100vh;
+	}
+	
+	/* 批次信息卡片 */
+	.batch-info-card {
+		margin: 12rpx;
+		padding: 24rpx;
+		background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
+		border-radius: 12rpx;
+		box-shadow: 0 4rpx 16rpx rgba(39, 174, 96, 0.25);
+		color: #fff;
+	}
+	
+	.batch-title {
+		font-size: 28rpx;
+		font-weight: 600;
+		margin-bottom: 16rpx;
+	}
+	
+	.batch-meta {
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 12rpx;
+	}
+	
+	.batch-meta:last-child {
+		margin-bottom: 0;
+	}
+	
+	.meta-item {
+		font-size: 24rpx;
+		opacity: 0.95;
+	}
+	
+	/* 空数据容器 */
+	.empty-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 200rpx 0;
+	}
+	
+	.empty-icon {
+		font-size: 120rpx;
+		margin-bottom: 30rpx;
+	}
+	
+	.empty-text {
+		font-size: 32rpx;
+		color: #999;
+	}
+	
+	/* 表格包裹层 */
+	.table-wrapper {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+	}
+	
+	/* 表格容器 - 出库详情使用紧凑风格 */
+	.table-container {
+		flex: 1;
+		overflow-y: auto;
+		margin: 0 12rpx;
+		background-color: #fff;
+		border-radius: 12rpx;
+		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
+		border: 1px solid #e8f5e9;
+	}
+	
+	/* 表头 */
+	.table-header {
+		display: flex;
+		background: linear-gradient(90deg, #27ae60 0%, #1e8449 100%);
+		color: #fff;
+		font-weight: 600;
+		font-size: 22rpx;
+		padding: 0;
+		position: sticky;
+		top: 0;
+		z-index: 10;
+	}
+	
+	/* 表格行 */
+	.table-row {
+		display: flex;
+		border-bottom: 1px solid #f1f8f3;
+		background-color: #fff;
+		min-height: 68rpx;
+	}
+	
+	.table-row:last-child {
+		border-bottom: none;
+	}
+	
+	.table-row:nth-child(even) {
+		background-color: #f8fff9;
+	}
+	
+	/* 表格单元格 */
+	.table-cell {
+		padding: 12rpx 10rpx;
+		font-size: 22rpx;
+		color: #333;
+		display: flex;
+		align-items: center;
+		word-break: break-all;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	
+	.cell-type {
+		flex: 1.8;
+		min-width: 200rpx;
+	}
+	
+	.cell-dept {
+		flex: 1.3;
+		min-width: 120rpx;
+	}
+	
+	.cell-weight {
+		flex: 0.8;
+		min-width: 80rpx;
+		justify-content: center;
+		color: #27ae60;
+		font-weight: 600;
+	}
+	
+	.cell-person {
+		flex: 1;
+		min-width: 100rpx;
+	}
+	
+	.cell-time {
+		flex: 1.5;
+		min-width: 120rpx;
+	}
+	
+	/* 类型图标 */
+	.type-icon {
+		width: 28rpx;
+		height: 28rpx;
+		margin-right: 10rpx;
+		border-radius: 4rpx;
+		flex-shrink: 0;
+	}
+	
+	/* 分页包裹层 */
+	.pagination-wrapper {
+		margin: 12rpx;
+		padding: 14rpx 20rpx;
+		background-color: #fff;
+		border-radius: 12rpx;
+		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+	
+	.pagination-info {
+		font-size: 22rpx;
+		color: #666;
+	}
+	
+	.pagination-controls {
+		display: flex;
+		gap: 12rpx;
+	}
+	
+	.page-btn {
+		padding: 8rpx 24rpx;
+		background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
+		color: #fff;
+		border-radius: 16rpx;
+		font-size: 22rpx;
+		border: none;
+		box-shadow: 0 1rpx 6rpx rgba(39, 174, 96, 0.25);
+	}
+	
+	.page-btn[disabled] {
+		background: #ccc;
+		box-shadow: none;
+		opacity: 0.5;
+	}
+</style>
diff --git a/pages/plugin/outList.vue b/pages/plugin/outList.vue
new file mode 100644
index 0000000..5afe52a
--- /dev/null
+++ b/pages/plugin/outList.vue
@@ -0,0 +1,362 @@
+<template>
+	<view>
+		<scroll-view scroll-y class="page">
+			<cu-custom bgColor="bg-green" :isBack="true"><block slot="backText">返回</block><block slot="content">出库列表</block></cu-custom>
+			
+			<!-- 搜索框 -->
+			<view class="search-box">
+				<input
+					class="search-input"
+					type="text"
+					v-model="searchKeyword"
+					placeholder="请输入出库批次"
+					placeholder-class="search-placeholder"
+				/>
+				<text class="search-icon" v-if="!searchKeyword">🔍</text>
+				<text class="clear-icon" v-else @click="clearSearch">✕</text>
+			</view>
+			
+			<!-- 空数据提示 -->
+			<view v-if="!filteredOutListData || filteredOutListData.length === 0" class="empty-container">
+				<text class="empty-icon">📤</text>
+				<text class="empty-text">{{searchKeyword ? '未找到匹配的出库批次' : '暂无出库数据'}}</text>
+			</view>
+			
+			<!-- 表格展示 -->
+			<view v-else class="table-wrapper">
+				<view class="table-container">
+					<view class="table-header">
+						<view class="table-cell cell-batch">出库批次</view>
+						<view class="table-cell cell-count">总袋数</view>
+						<view class="table-cell cell-bags">总重量</view>
+						<view class="table-cell cell-time">出库时间</view>
+						<view class="table-cell cell-person">出库人员</view>
+						<view class="table-cell cell-action">操作</view>
+					</view>
+					<view class="table-row" v-for="(item, index) in currentPageData" :key="index">
+						<view class="table-cell cell-batch">{{item.comp_batch}}</view>
+						<view class="table-cell cell-count">{{item.totalCount}}</view>
+						<view class="table-cell cell-bags">{{item.totalWeight}}</view>
+						<view class="table-cell cell-time">{{formatTime(item.comp_recl_time)}}</view>
+						<view class="table-cell cell-person">{{item.comp_recl_name}}</view>
+						<view class="table-cell cell-action">
+							<navigator :url="'/pages/plugin/outDetails?batch=' + item.comp_batch" hover-class="none" class="detail-btn">详情</navigator>
+						</view>
+					</view>
+				</view>
+				
+				<!-- 分页控件 -->
+				<view class="pagination-wrapper">
+					<view class="pagination-info">
+						<text>共 {{totalItems}} 条，第 {{currentPage}}/{{totalPages}} 页</text>
+					</view>
+					<view class="pagination-controls">
+						<button class="page-btn" :disabled="currentPage === 1" @click="changePage('prev')">上一页</button>
+						<button class="page-btn" :disabled="currentPage === totalPages" @click="changePage('next')">下一页</button>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				hospital: '',
+				sortHospital: '',
+				department: '',
+				name: '',
+				duty: '',
+				outListData: [],
+				searchKeyword: '',
+				currentPage: 1,
+				pageSize: 20,
+				totalItems: 0,
+				totalPages: 0
+			}
+		},
+		computed: {
+			filteredOutListData() {
+				if (!this.searchKeyword) {
+					return this.outListData
+				}
+				return this.outListData.filter(item => {
+					return item.comp_batch && item.comp_batch.includes(this.searchKeyword)
+				})
+			},
+			currentPageData() {
+				const start = (this.currentPage - 1) * this.pageSize
+				const end = start + this.pageSize
+				return this.filteredOutListData.slice(start, end)
+			}
+		},
+		watch: {
+			outListData(newVal) {
+				this.currentPage = 1
+			},
+			searchKeyword() {
+				this.currentPage = 1
+			},
+			filteredOutListData(newVal) {
+				this.totalItems = newVal.length
+				this.totalPages = Math.ceil(this.totalItems / this.pageSize)
+				if (this.currentPage > this.totalPages && this.totalPages > 0) {
+					this.currentPage = this.totalPages
+				}
+			}
+		},
+		mounted(){
+			this.hospital = getApp().globalData.hospital
+			this.sortHospital = getApp().globalData.sortHospital
+			this.department = getApp().globalData.department
+			this.name = getApp().globalData.name
+			this.duty = getApp().globalData.duty
+			this.getOutListData()
+		},
+		methods: {
+			// 获取出库列表数据
+			getOutListData(){
+				let that = this;
+				uni.request({
+					url: 'https://mtx.mini.opmonitor.com/?c=app_api&a=getOutListData',
+					data: {hospital: that.hospital, sortHospital: that.sortHospital, department: that.department, duty: that.duty},
+					header: {
+						'Content-type': 'application/json'
+					},
+					success: function(res){
+						that.outListData = res.data.data
+					},
+					fail: () => {
+						console.info('获取出库列表失败')
+					}
+				})
+			},
+			// 格式化时间 m-d H:i
+			formatTime(timeStr) {
+				if (!timeStr) return ''
+				const date = new Date(timeStr.replace(/-/g, '/'))
+				const month = String(date.getMonth() + 1).padStart(2, '0')
+				const day = String(date.getDate()).padStart(2, '0')
+				const hours = String(date.getHours()).padStart(2, '0')
+				const minutes = String(date.getMinutes()).padStart(2, '0')
+				return `${month}-${day} ${hours}:${minutes}`
+			},
+			// 切换页面
+			changePage(direction) {
+				if (direction === 'prev' && this.currentPage > 1) {
+					this.currentPage--
+				} else if (direction === 'next' && this.currentPage < this.totalPages) {
+					this.currentPage++
+				}
+			},
+			// 清空搜索
+			clearSearch() {
+				this.searchKeyword = ''
+			}
+		}
+	}
+</script>
+
+<style>
+	.page {
+		width: 100vw;
+		height: 100vh;
+	}
+	
+	/* 搜索框 */
+	.search-box {
+		margin: 12rpx;
+		padding: 0 24rpx;
+		background-color: #fff;
+		border-radius: 30rpx;
+		display: flex;
+		align-items: center;
+		box-shadow: 0 2rpx 12rpx rgba(39, 174, 96, 0.15);
+		border: 1px solid #e1f0e8;
+	}
+	
+	.search-input {
+		flex: 1;
+		height: 70rpx;
+		font-size: 26rpx;
+		color: #333;
+	}
+	
+	.search-placeholder {
+		color: #999;
+	}
+	
+	.search-icon, .clear-icon {
+		font-size: 28rpx;
+		margin-left: 10rpx;
+	}
+	
+	.clear-icon {
+		color: #999;
+		padding: 10rpx;
+	}
+	
+	/* 空数据容器 */
+	.empty-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 200rpx 0;
+	}
+	
+	.empty-icon {
+		font-size: 120rpx;
+		margin-bottom: 30rpx;
+	}
+	
+	.empty-text {
+		font-size: 32rpx;
+		color: #999;
+	}
+	
+	/* 表格包裹层 */
+	.table-wrapper {
+		height: calc(100vh - 88rpx);
+		display: flex;
+		flex-direction: column;
+	}
+	
+	/* 表格容器 - 出库列表使用绿色系 */
+	.table-container {
+		flex: 1;
+		overflow-y: auto;
+		margin: 12rpx;
+		background-color: #fff;
+		border-radius: 8rpx;
+		overflow-x: hidden;
+		box-shadow: 0 2rpx 8rpx rgba(39, 174, 96, 0.1);
+		border: 1px solid #e1f0e8;
+	}
+	
+	/* 表头 */
+	.table-header {
+		display: flex;
+		background: linear-gradient(90deg, #27ae60 0%, #1e8449 100%);
+		color: #fff;
+		font-weight: 600;
+		font-size: 22rpx;
+		padding: 0;
+		position: sticky;
+		top: 0;
+		z-index: 10;
+	}
+	
+	/* 表格行 */
+	.table-row {
+		display: flex;
+		border-bottom: 1px solid #eaf4ec;
+		background-color: #fff;
+		min-height: 68rpx;
+	}
+	
+	.table-row:last-child {
+		border-bottom: none;
+	}
+	
+	.table-row:nth-child(even) {
+		background-color: #f8fff9;
+	}
+	
+	/* 表格单元格 */
+	.table-cell {
+		padding: 12rpx 10rpx;
+		font-size: 22rpx;
+		color: #333;
+		display: flex;
+		align-items: center;
+		word-break: break-all;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	
+	.cell-batch {
+		flex: 1.3;
+		min-width: 160rpx;
+	}
+	
+	.cell-count {
+		flex: 0.8;
+		min-width: 80rpx;
+		justify-content: center;
+	}
+	
+	.cell-bags {
+		flex: 0.8;
+		min-width: 80rpx;
+		justify-content: center;
+	}
+	
+	.cell-time {
+		flex: 1.2;
+		min-width: 120rpx;
+	}
+	
+	.cell-person {
+		flex: 1.2;
+		min-width: 110rpx;
+	}
+	
+	.cell-action {
+		flex: 0.8;
+		min-width: 80rpx;
+		justify-content: center;
+	}
+	
+	/* 详情按钮 */
+	.detail-btn {
+		padding: 6rpx 18rpx;
+		background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
+		color: #fff;
+		border-radius: 16rpx;
+		font-size: 20rpx;
+		box-shadow: 0 1rpx 6rpx rgba(39, 174, 96, 0.25);
+		white-space: nowrap;
+	}
+	
+	/* 分页包裹层 */
+	.pagination-wrapper {
+		margin: 0 12rpx 12rpx 12rpx;
+		padding: 14rpx 20rpx;
+		background-color: #fff;
+		border-radius: 8rpx;
+		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+	
+	.pagination-info {
+		font-size: 22rpx;
+		color: #666;
+	}
+	
+	.pagination-controls {
+		display: flex;
+		gap: 12rpx;
+	}
+	
+	.page-btn {
+		padding: 8rpx 24rpx;
+		background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
+		color: #fff;
+		border-radius: 16rpx;
+		font-size: 22rpx;
+		border: none;
+		box-shadow: 0 1rpx 6rpx rgba(39, 174, 96, 0.25);
+	}
+	
+	.page-btn[disabled] {
+		background: #ccc;
+		box-shadow: none;
+		opacity: 0.5;
+	}
+</style>