From 71a2d530ccece78566defa28e3975e85cf09048d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E6=96=87=E6=B6=9B?= <1909118034@qq.com>
Date: Thu, 27 Mar 2025 00:10:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B8=E9=94=80=E4=B8=AD=E5=BF=83=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E7=AD=89(home)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                            |  11 +-
 pagesA/my_order/detail.vue            | 616 ++++++++++++++++++++------
 pagesA/my_order/list.vue              | 290 ++++++++++--
 pagesA/verification/history.vue       |   8 +-
 pagesA/verification/historyDetail.vue | 365 +++++++++++++++
 pagesA/warehousing/index.vue          | 329 ++++++++++++--
 unocss/a-hua-unocss/index.scss        | 169 +------
 7 files changed, 1403 insertions(+), 385 deletions(-)
 create mode 100644 pagesA/verification/historyDetail.vue

diff --git a/pages.json b/pages.json
index 2817b05..2aebcf0 100644
--- a/pages.json
+++ b/pages.json
@@ -148,6 +148,15 @@
 					"navigationBarTitleText": "核销历史记录"
 				}
 			},
+			{
+				"path": "verification/historyDetail",
+				"style": {
+					"navigationStyle": "custom",
+					"enablePullDownRefresh": false,
+					"navigationBarTextStyle": "black",
+					"navigationBarTitleText": "核销历史记录详情"
+				}
+			},
 			{
 				"path": "message/index",
 				"style": {
@@ -163,7 +172,7 @@
 		"current": 0, // 当前激活的条件，默认为 0
 		"list": [{
 			"name": "", // 条件名称
-			"path": "pagesA/warehousing/index", // 要打开的页面路径
+			"path": "pagesA/my_order/list", // 要打开的页面路径
 			"query": "" // 可选的页面参数
 		}]
 	}
diff --git a/pagesA/my_order/detail.vue b/pagesA/my_order/detail.vue
index 217a1c9..60e4306 100644
--- a/pagesA/my_order/detail.vue
+++ b/pagesA/my_order/detail.vue
@@ -1,150 +1,173 @@
 <template>
-	<view class="li-message-page">
+	<view class="detail-page">
 		<!-- 自定义导航栏 -->
 		<wd-navbar :bordered="false"
 			custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
 			safeAreaInsetTop fixed placeholder>
 			<template #left>
-				<view class="li-ml-15 li-mt-10 li-flex li-items-center">
-					<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70"
+				<view class="navbar-content">
+					<text v-if="hasMultiplePages" class="ri-arrow-left-s-line back-icon"
 						@click="toPages({type:'nav'})"></text>
-					<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mb-8 li-mr-10"
+					<text v-if="!hasMultiplePages" class="ri-home-5-line home-icon"
 						@click="toPages({type:'home'})"></text>
-					<text class="li-text-42">工单详情</text>
+					<text class="page-title">工单详情</text>
 				</view>
 			</template>
 		</wd-navbar>
 		<!-- 导航栏背景 -->
 		<view class="nav-bg-layer"></view>
-		<!-- card -->
-		<view class="bg-#FFFFFF li-w-92% li-mx-auto  li-rd-20 li-task-card li-pb-25 overflow-hidden li-mt-40">
-			<view class="li-flex li-items-start li-justify-between bg-#f9f9f9">
-				<view class="li-mb-20">
-					<view class="li-flex li-items-center li-text-#5f5f5f li-pl-20 li-pt-20 li-text-28 li-mb-12">
-						<text class="ri-todo-line li-mr-3"></text>
-						<text>{{ticketInfo.ticket_no}}</text>
-						<text class="ri-file-copy-line li-text-#009aff li-ml-15"></text>
+		
+		<!-- 工单状态卡片 -->
+		<view class="ticket-card">
+			<view class="ticket-header">
+				<view class="ticket-info">
+					<view class="ticket-id">
+						<text class="ri-file-list-line id-icon"></text>
+						<text class="id-text">{{ticketInfo.ticket_no}}</text>
+						<text class="ri-file-copy-line copy-icon"></text>
 					</view>
-					<text class="li-pl-20 li-text-28 li-text-#5f5f5f">创建时间:&nbsp;{{ticketInfo.create_time}}</text>
+					<view class="create-time">创建时间: {{ticketInfo.create_time}}</view>
 				</view>
-				<view class="li-text-28 !li-rd-bl-50 li-px-40 li-py-6" style="color: #37A5FF; backgroundColor: #e8f4ff">
-					<text v-if="ticketInfo.type == 'F2'">派送</text>
+				
+				<view class="ticket-type" :class="'type-'+ticketInfo.type">
+					<text v-if="ticketInfo.type == 'F2'">配送</text>
 					<text v-if="ticketInfo.type == 'F4'">量房</text>
 					<text v-if="ticketInfo.type == 'F6'">维修</text>
 				</view>
 			</view>
-			<view class="li-flex li-items-start li-pt-20 li-pl-20">
-				<view class="ri-checkbox-circle-fill li-text-#009aff li-mr-12 li-text-40 li-pt-2"></view>
-				<!-- <text class="ri-close-circle-fill li-text-#ff0000"></text> -->
-				<view v-if="ticketInfo.status == 0" class="li-flex li-flex-col">
-					<text class="li-text-32">待接单</text>
-					<text class="li-text-28">待接单</text>
+			
+			<view class="ticket-status">
+				<view class="status-icon" :class="'status-'+ticketInfo.status">
+					<text v-if="ticketInfo.status == 2 || ticketInfo.status == 1" class="ri-checkbox-circle-fill"></text>
+					<text v-else-if="ticketInfo.status == 3" class="ri-close-circle-fill"></text>
+					<text v-else class="ri-time-line"></text>
 				</view>
-				<view v-if="ticketInfo.status == 1" class="li-flex li-flex-col">
-					<text class="li-text-32">已接单</text>
-					<text class="li-text-28">已接单</text>
-				</view>
-				<view v-if="ticketInfo.status == 2" class="li-flex li-flex-col">
-					<text class="li-text-32">已完结</text>
-					<text class="li-text-28">已完结</text>
-				</view>
-				<view v-if="ticketInfo.status == 3" class="li-flex li-flex-col">
-					<text class="li-text-32">已取消</text>
-					<text class="li-text-28">已取消</text>
+				<view class="status-text">
+					<text class="status-title">
+						{{ticketInfo.status == 0 ? '待接单' : 
+						  ticketInfo.status == 1 ? '已接单' : 
+						  ticketInfo.status == 2 ? '已完结' : 
+						  ticketInfo.status == 3 ? '已取消' : ''}}
+					</text>
+					<text class="status-desc">
+						{{ticketInfo.status == 0 ? '等待服务人员接单' : 
+						  ticketInfo.status == 1 ? '服务人员已接单' : 
+						  ticketInfo.status == 2 ? '工单已完成' : 
+						  ticketInfo.status == 3 ? '工单已取消' : ''}}
+					</text>
 				</view>
 			</view>
 		</view>
+		
 		<!-- 联系信息 -->
-		<view class="bg-#FFFFFF li-w-92% li-mx-auto li-mt-20 li-rd-20 li-task-card li-pb-30 overflow-hidden">
-			<view class="li-pl-30 li-pt-30">联系信息</view>
-			<view class="li-pl-30 li-pr-30 li-mt-30">
-				<view class="li-flex li-items-start li-justify-between li-text-28">
-					<text class="li-w-150  li-text-#9a9a9a">小区名称</text>
-					<text class="li-w-400  li-two-line li-text-right">{{ticketInfo?.order?.village_name}}</text>
+		<view class="info-card">
+			<view class="card-title">
+				<text class="ri-user-3-line title-icon"></text>
+				<text>联系信息</text>
+			</view>
+			
+			<view class="info-content">
+				<view class="info-item">
+					<text class="item-label">小区名称</text>
+					<text class="item-value">{{ticketInfo?.order?.village_name}}</text>
 				</view>
-				<view class="li-flex li-items-center li-justify-between li-mt-30 li-text-28">
-					<text class="li-w-150  li-text-#9a9a9a">联系人</text>
-					<text class="li-w-400  li-single-line li-text-right">{{ticketInfo.order.name}}</text>
+				
+				<view class="info-item">
+					<text class="item-label">联系人</text>
+					<text class="item-value">{{ticketInfo?.order?.name}}</text>
 				</view>
-				<view class="li-flex li-items-center li-justify-between li-mt-30 li-text-28">
-					<text class="li-w-150  li-text-#9a9a9a">联系电话</text>
-					<view class="li-flex li-items-center li-w-400  li-single-line justify-between">
-						<!-- 左侧留空 -->
-						<view></view>
-						<!-- 右侧内容 -->
-						<view class="li-flex li-items-center">
-							<text class="ri-phone-line li-text-#009aff li-mr-6"></text>
-							<text>{{ticketInfo.order.mobile}}</text>
+				
+				<view class="info-item">
+					<text class="item-label">联系电话</text>
+					<view class="phone-value">
+						<text class="ri-phone-line phone-icon"></text>
+						<text class="phone-number">{{ticketInfo?.order?.mobile}}</text>
+					</view>
+				</view>
+				
+				<view class="info-item product-info">
+					<text class="item-label">商品信息</text>
+					<view class="product-detail">
+						<text class="product-name">燕京 8度U8 500ML*12瓶/箱*2 送燕京9度菊花听500ML*12听</text>
+						<view class="product-images">
+							<image class="product-image" src="../../static/swiper/1.png" mode="aspectFill"></image>
+							<image class="product-image" src="../../static/swiper/1.png" mode="aspectFill"></image>
 						</view>
 					</view>
 				</view>
-<!-- 				<view class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
-					<text class="li-w-150  li-text-#9a9a9a">商品信息</text>
-					<view class="li-flex li-flex-col li-w-400 justify-end">
-						<text class="li-two-line li-text-right">燕京 8度U8 500ML*12瓶/箱*2 送燕京9度菊花听500ML*12听</text>
-						<view class="li-flex justify-between li-items-center li-mt-20">
-							<view></view>
-							<view class="li-flex li-items-center">
-								<image class="li-w-110 li-h-110 li-rd-10" src="../../static/swiper/1.png" mode="">
-								</image>
-								<image class="li-w-110 li-h-110 li-rd-10 li-ml-20" src="../../static/swiper/1.png"
-									mode=""></image>
-							</view>
-						</view>
-					</view>
-				</view> -->
 			</view>
 		</view>
 		
 		<!-- 报修信息 -->
-		<view v-if="ticketInfo?.type == 'F6'" class="bg-#FFFFFF li-w-92% li-mx-auto li-mt-20 li-rd-20 li-task-card li-pb-30 overflow-hidden">
-			<view class="li-pl-30 li-pt-30">报修信息</view>
-			<view class="li-pl-30 li-pr-30 li-mt-30">
-				<view class="li-flex li-items-center li-justify-between li-text-28">
-					<text class="li-w-150  li-text-#9a9a9a">报修位置</text>
-					<text class="li-w-400  li-single-line li-text-right">{{ticketInfo?.order?.region_name}}{{ticketInfo?.order?.cell_name}}{{ticketInfo?.order?.house_name}}{{ticketInfo?.order?.address}}</text>
+		<view v-if="ticketInfo?.type == 'F6'" class="info-card">
+			<view class="card-title">
+				<text class="ri-tools-line title-icon"></text>
+				<text>报修信息</text>
+			</view>
+			
+			<view class="info-content">
+				<view class="info-item">
+					<text class="item-label">报修位置</text>
+					<text class="item-value">{{ticketInfo?.order?.region_name}}{{ticketInfo?.order?.cell_name}}{{ticketInfo?.order?.house_name}}{{ticketInfo?.order?.address}}</text>
 				</view>
-				<view class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
-					<text class="li-w-150  li-text-#9a9a9a">问题描述</text>
-					<text class="li-w-400  li-two-line li-text-right">{{ticketInfo.order.content}}</text>
+				
+				<view class="info-item">
+					<text class="item-label">问题描述</text>
+					<text class="item-value">{{ticketInfo?.order?.content}}</text>
 				</view>
-				<view v-if="ticketInfo.order.images" class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
-					<text class="li-w-150  li-text-#9a9a9a">现场照片</text>
-					<view class="li-flex li-flex-col li-w-400 justify-end">
-						<view class="li-flex justify-between li-items-center li-mt-20">
-							<!-- 左侧留空 -->
-							<view></view>
-							<view class="li-flex li-items-center">
-								<image v-for="(item) in ticketInfo?.order?.images?.split(',')" :key="item" class="li-w-110 li-h-110 li-rd-10 li-mr-20" :src="item">
-								</image>
-							</view>
-						</view>
+				
+				<view v-if="ticketInfo?.order?.images" class="info-item">
+					<text class="item-label">现场照片</text>
+					<view class="scene-images">
+						<image v-for="(item) in ticketInfo?.order?.images?.split(',')" :key="item" 
+							class="scene-image" 
+							:src="item"
+							mode="aspectFill">
+						</image>
 					</view>
 				</view>
 			</view>
 		</view>
 		
 		<!-- 工单记录 -->
-		<view class="bg-#FFFFFF li-w-92% li-mx-auto li-mt-20 li-rd-20 li-task-card li-pb-30 overflow-hidden">
-			<view class="li-pl-30 li-pt-30">工单记录</view>
-			<view class="li-pl-30 li-pr-30 li-mt-30">
-				<!-- todo 此处最好用时间线展示 类似物流信息 -->
+		<view class="info-card">
+			<view class="card-title">
+				<text class="ri-history-line title-icon"></text>
+				<text>工单记录</text>
+			</view>
+			
+			<view class="timeline">
+				<view class="timeline-item">
+					<view class="timeline-dot"></view>
+					<view class="timeline-content">
+						<view class="timeline-time">{{ticketInfo.create_time}}</view>
+						<view class="timeline-text">创建工单</view>
+					</view>
+				</view>
+				
+				<view v-if="ticketInfo.status >= 1" class="timeline-item">
+					<view class="timeline-dot"></view>
+					<view class="timeline-content">
+						<view class="timeline-time">2025-03-13 11:25:18</view>
+						<view class="timeline-text">工单已接单</view>
+					</view>
+				</view>
+				
+				<view v-if="ticketInfo.status >= 2" class="timeline-item">
+					<view class="timeline-dot"></view>
+					<view class="timeline-content">
+						<view class="timeline-time">2025-03-13 15:42:36</view>
+						<view class="timeline-text">工单已完成</view>
+					</view>
+				</view>
 			</view>
 		</view>
-		<!-- footer -->
-		<view
-			class="li-flex li-fixed li-bottom-0 li-bg-white li-w-100% li-items-center li-justify-between li-py-35 li-task-card li-rd-10">
-			<!-- 左侧留空 -->
-			<view></view>
-			<view class="li-flex li-items-center li-mr-30">
-				<view>
-					<!-- todo 退单要进行二次确认 -->
-					<wd-button :round="false" type="error">退单</wd-button>
-				</view>
-				<view class="li-ml-15">
-					<!-- todo 结单根据要求，是否跳转到结单页，拍照+填写信息 -->
-					<wd-button :round="false">结单</wd-button>
-				</view>
+		
+		<!-- 底部按钮 -->
+		<view class="footer-actions">
+			<view class="action-buttons">
+				<wd-button class="action-btn cancel-btn" type="error" :round="true">退单</wd-button>
+				<wd-button class="action-btn confirm-btn" :round="true">结单</wd-button>
 			</view>
 		</view>
 	</view>
@@ -155,8 +178,8 @@
 	import { onLoad, onShow } from '@dcloudio/uni-app'
 	import { useNavigation } from '@/hooks/useNavigation'
 	import {myTicketInfo} from '@/api/ticket'
-		import { useToast } from '@/uni_modules/wot-design-uni'
-		
+	import { useToast } from '@/uni_modules/wot-design-uni'
+	
 	const Toast = useToast()
 	const loading = ref<boolean>(false)
 	const bntloading = ref<boolean>(false)
@@ -195,13 +218,13 @@
 		}
 	})
 	
-	const loadInfo = async (ticket_id : string) => {
+	const loadInfo = async (ticket_id) => {
 		const res = await myTicketInfo({ ticket_id })
 		ticketInfo.value = res.data
 	}
 
 	// 状态文字配置
-	const getStatusText = (status : number) => {
+	const getStatusText = (status) => {
 		const textMap = {
 			1: '待配送',
 			2: '已完成',
@@ -211,7 +234,7 @@
 		return textMap[status] || '未知状态'
 	}
 
-	const toPages = (item : any) => {
+	const toPages = (item) => {
 		console.log(item);
 		switch (item.type) {
 			case 'nav':
@@ -230,36 +253,43 @@
 	}
 
 
-	const handleAction = (action : string) => {
+	const handleAction = (action) => {
 		console.log(action);
 	}
 </script>
 
 <style lang="scss">
-	.li-message-page {
+	.detail-page {
 		width: 100%;
 		min-height: 100vh;
 		background: linear-gradient(to bottom,
-				rgba(217, 237, 255, 0.9) 0%,
-				rgba(217, 237, 255, 0.9) 20%,
-				rgba(207, 207, 207, 0.2) 40%,
-				rgba(207, 207, 207, 0.2) 60%,
-				rgba(207, 207, 207, 0.2) 80%,
-				rgba(207, 207, 207, 0.2) 100%);
+				rgba(233, 245, 255, 0.9) 0%,
+				rgba(245, 250, 255, 0.9) 30%,
+				rgba(245, 250, 255, 0.9) 70%,
+				rgba(233, 245, 255, 0.9) 100%);
 		background-attachment: fixed;
-		/* #ifdef H5 */
-		padding-bottom: 160rpx;
-		/* #endif */
-		/* #ifdef APP-PLUS */
 		padding-bottom: 180rpx;
-		/* #endif */
-		/* #ifdef MP-WEIXIN */
-		padding-bottom: 170rpx;
-		/* #endif */
+	}
+	
+	.navbar-content {
+		display: flex;
+		align-items: center;
+		padding-left: 20rpx;
+		
+		.back-icon, .home-icon {
+			font-size: 60rpx;
+			color: #333;
+			margin-right: 10rpx;
+		}
+		
+		.page-title {
+			font-size: 36rpx;
+			font-weight: 500;
+			color: #333;
+		}
 	}
 
-
-	// 导航栏背景层
+	/* 导航栏背景层 */
 	.nav-bg-layer {
 		position: fixed;
 		top: 0;
@@ -273,15 +303,331 @@
 		-webkit-backdrop-filter: blur(10px);
 		z-index: 998;
 	}
-
-	.li-task-card {
-		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
-		transition: all 0.3s ease;
+	
+	/* 卡片通用样式 */
+	.ticket-card, .info-card {
+		width: 92%;
+		margin: 0 auto;
+		margin-bottom: 30rpx;
+		border-radius: 20rpx;
+		background: #fff;
+		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.05);
+		overflow: hidden;
+		
+		&:active {
+			transform: scale(0.99);
+			transition: transform 0.2s;
+		}
 	}
-
+	
+	/* 工单状态卡片 */
+	.ticket-card {
+		margin-top: 40rpx;
+		padding-bottom: 30rpx;
+		
+		.ticket-header {
+			display: flex;
+			justify-content: space-between;
+			align-items: flex-start;
+			padding: 20rpx;
+			background-color: #f8faff;
+			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+			
+			.ticket-info {
+				.ticket-id {
+					display: flex;
+					align-items: center;
+					margin-bottom: 12rpx;
+					
+					.id-icon {
+						font-size: 32rpx;
+						color: #666;
+						margin-right: 8rpx;
+					}
+					
+					.id-text {
+						font-size: 28rpx;
+						color: #333;
+						font-weight: 500;
+					}
+					
+					.copy-icon {
+						font-size: 28rpx;
+						color: #009aff;
+						margin-left: 15rpx;
+					}
+				}
+				
+				.create-time {
+					font-size: 26rpx;
+					color: #666;
+				}
+			}
+			
+			.ticket-type {
+				padding: 6rpx 20rpx;
+				border-bottom-left-radius: 20rpx;
+				font-size: 26rpx;
+				font-weight: 500;
+				color: #37A5FF;
+				background-color: #e8f4ff;
+				
+				&.type-F2 {
+					color: #ff9d00;
+					background-color: #fff6e9;
+				}
+				
+				&.type-F6 {
+					color: #00b42a;
+					background-color: #e8ffea;
+				}
+				
+				&.type-F4 {
+					color: #7e3ff2;
+					background-color: #f0e8ff;
+				}
+			}
+		}
+		
+		.ticket-status {
+			display: flex;
+			align-items: center;
+			padding: 20rpx;
+			
+			.status-icon {
+				margin-right: 20rpx;
+				font-size: 40rpx;
+				color: #009aff;
+				
+				&.status-2 {
+					color: #00b42a;
+				}
+				
+				&.status-3 {
+					color: #f42429;
+				}
+				
+				&.status-0 {
+					color: #ff9d00;
+				}
+			}
+			
+			.status-text {
+				display: flex;
+				flex-direction: column;
+				
+				.status-title {
+					font-size: 32rpx;
+					font-weight: 500;
+					color: #333;
+				}
+				
+				.status-desc {
+					font-size: 26rpx;
+					color: #999;
+				}
+			}
+		}
+	}
+	
+	/* 详情卡片样式 */
+	.info-card {
+		padding: 0 0 20rpx 0;
+		
+		.card-title {
+			display: flex;
+			align-items: center;
+			padding: 25rpx 30rpx;
+			font-size: 30rpx;
+			font-weight: 600;
+			color: #333;
+			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+			
+			.title-icon {
+				margin-right: 10rpx;
+				color: #009aff;
+			}
+		}
+		
+		.info-content {
+			padding: 20rpx 30rpx;
+			
+			.info-item {
+				display: flex;
+				justify-content: space-between;
+				align-items: flex-start;
+				margin-bottom: 25rpx;
+				
+				.item-label {
+					width: 150rpx;
+					font-size: 26rpx;
+					color: #999;
+				}
+				
+				.item-value {
+					width: 400rpx;
+					font-size: 26rpx;
+					color: #333;
+					text-align: right;
+					word-break: break-all;
+				}
+				
+				.phone-value {
+					display: flex;
+					align-items: center;
+					justify-content: flex-end;
+					
+					.phone-icon {
+						color: #009aff;
+						margin-right: 8rpx;
+					}
+					
+					.phone-number {
+						font-size: 26rpx;
+						color: #009aff;
+						font-weight: 500;
+					}
+				}
+				
+				&.product-info {
+					align-items: flex-start;
+					
+					.product-detail {
+						width: 400rpx;
+						display: flex;
+						flex-direction: column;
+						align-items: flex-end;
+						
+						.product-name {
+							font-size: 26rpx;
+							color: #333;
+							text-align: right;
+							margin-bottom: 15rpx;
+						}
+						
+						.product-images {
+							display: flex;
+							justify-content: flex-end;
+							flex-wrap: wrap;
+							
+							.product-image {
+								width: 110rpx;
+								height: 110rpx;
+								border-radius: 10rpx;
+								margin-left: 20rpx;
+								margin-bottom: 10rpx;
+								box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
+							}
+						}
+					}
+				}
+				
+				.scene-images {
+					display: flex;
+					justify-content: flex-end;
+					flex-wrap: wrap;
+					width: 400rpx;
+					
+					.scene-image {
+						width: 110rpx;
+						height: 110rpx;
+						border-radius: 10rpx;
+						margin-left: 20rpx;
+						margin-bottom: 10rpx;
+						box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
+					}
+				}
+			}
+		}
+	}
+	
+	/* 时间线样式 */
+	.timeline {
+		padding: 10rpx 30rpx 10rpx 40rpx;
+		position: relative;
+		
+		&::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 50rpx;
+			width: 2rpx;
+			height: 100%;
+			background-color: rgba(0, 154, 255, 0.2);
+			z-index: 1;
+		}
+		
+		.timeline-item {
+			position: relative;
+			padding: 15rpx 0 15rpx 30rpx;
+			
+			.timeline-dot {
+				position: absolute;
+				left: -12rpx;
+				top: 25rpx;
+				width: 24rpx;
+				height: 24rpx;
+				border-radius: 50%;
+				background-color: #009aff;
+				border: 4rpx solid rgba(0, 154, 255, 0.3);
+				z-index: 2;
+			}
+			
+			.timeline-content {
+				.timeline-time {
+					font-size: 24rpx;
+					color: #999;
+					margin-bottom: 6rpx;
+				}
+				
+				.timeline-text {
+					font-size: 28rpx;
+					color: #333;
+					font-weight: 500;
+				}
+			}
+		}
+	}
+	
+	/* 底部按钮样式 */
+	.footer-actions {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 30rpx 30rpx;
+		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
+		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+		background-color: #fff;
+		box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.05);
+		z-index: 99;
+		
+		.action-buttons {
+			display: flex;
+			justify-content: flex-end;
+			
+			.action-btn {
+				min-width: 180rpx !important;
+				height: 80rpx !important;
+				border-radius: 40rpx !important;
+				font-size: 28rpx !important;
+				box-shadow: 0 6rpx 10rpx rgba(0, 0, 0, 0.1);
+				
+				&.cancel-btn {
+					background: linear-gradient(to right, #ff6b6b, #ff4757) !important;
+				}
+				
+				&.confirm-btn {
+					background: linear-gradient(to right, #5eafff, #4090ff) !important;
+				}
+			}
+		}
+	}
+	
 	::v-deep .wd-button {
-		width: 160rpx !important;
-		height: 65rpx !important;
-		min-width: 160rpx !important;
+		width: auto !important;
+		height: 80rpx !important;
+		min-width: 180rpx !important;
+		margin-right: 20rpx !important;
 	}
 </style>
\ No newline at end of file
diff --git a/pagesA/my_order/list.vue b/pagesA/my_order/list.vue
index d0fb65d..61494d2 100644
--- a/pagesA/my_order/list.vue
+++ b/pagesA/my_order/list.vue
@@ -34,41 +34,63 @@
 		<!-- 工单列表 -->
 		<view class="li-w-92% li-mx-auto li-mt-list-costom">
 			<view v-for="(item, index) in taskList" :key="index" @click="toPages({type:'detail',value:item})"
-				class="li-task-card li-bg-white li-mt-20 li-rd-15 li-pt-25 li-pb-30 li-px-30">
-				<view class="li-flex li-items-center li-justify-between li-bottom-border2 li-pb-15">
-					<view class="li-text-28 li-flex li-items-center li-justify-between li-text-#999">
-						<text class="ri-todo-line sli-mr-3"></text>
-						{{item.ticket_no}}
-						<text class="ri-file-copy-line li-text-#009aff li-ml-15"></text>
+				class="order-card">
+				<!-- 订单头部 -->
+				<view class="order-header">
+					<view class="order-id">
+						<text class="ri-file-list-line id-icon"></text>
+						<text class="id-text">{{item.ticket_no}}</text>
+						<text class="ri-file-copy-line copy-icon"></text>
 					</view>
-					<wd-tag custom-class="space" :color="getStatusColor(item.status)"
-						:bg-color="getStatusBgColor(item.status)">
+					<view class="order-status" :style="{
+						color: getStatusColor(item.status),
+						backgroundColor: getStatusBgColor(item.status)
+					}">
 						{{getStatusText(item.status)}}
-					</wd-tag>
-				</view>
-				<view>
-					<view class="li-flex li-items-center li-justify-between li-text-26 li-mt-20">
-						<text class="li-text-#9a9a9a">工单类型</text>
-						<text v-if="item.type == 'F2'">配送</text>
-						<text v-if="item.type == 'F6'">维修</text>
-						<text v-if="item.type == 'F4'">量房</text>
-					</view>
-					<view class="li-flex li-items-center li-justify-between li-text-26 li-mt-20">
-						<text class="li-text-#9a9a9a">小区名称</text>
-						<text>{{item.order.village_name}}</text>
-					</view>
-					<view class="li-flex li-items-center li-justify-between li-text-26 li-mt-20">
-						<text class="li-text-#9a9a9a">联系人</text>
-						<text>{{item.order.name}}</text>
-					</view>
-					<view class="li-flex li-items-center li-justify-between li-text-26 li-mt-20">
-						<text class="li-text-#9a9a9a">联系电话</text>
-						<text>{{item.order.mobile}}</text>
 					</view>
 				</view>
-				<view class="li-flex li-items-center li-justify-between li-mt-20">
-					<text class="li-text-24 li-text-#999">{{item.create_time}}</text>
-					<wd-button custom-class="custom-shadow" size="small" v-if="item.status === 1">详情</wd-button>
+				
+				<!-- 订单内容 -->
+				<view class="order-content">
+					<view class="info-row">
+						<text class="row-label">工单类型</text>
+						<view class="type-tag" :class="'type-'+item.type">
+							<text class="tag-icon" :class="{
+								'ri-truck-line': item.type == 'F2',
+								'ri-tools-line': item.type == 'F6',
+								'ri-ruler-line': item.type == 'F4'
+							}"></text>
+							<text v-if="item.type == 'F2'">配送</text>
+							<text v-if="item.type == 'F6'">维修</text>
+							<text v-if="item.type == 'F4'">量房</text>
+						</view>
+					</view>
+					
+					<view class="info-row">
+						<text class="row-label">小区名称</text>
+						<text class="row-value">{{item.order.village_name}}</text>
+					</view>
+					
+					<view class="contact-info">
+						<view class="contact-row">
+							<text class="contact-icon ri-user-3-line"></text>
+							<text class="contact-label">联系人:</text>
+							<text class="contact-name">{{item.order.name}}</text>
+						</view>
+						<view class="contact-row">
+							<text class="contact-icon ri-phone-line"></text>
+							<text class="contact-phone">{{item.order.mobile}}</text>
+						</view>
+					</view>
+				</view>
+				
+				<!-- 订单底部 -->
+				<view class="order-footer">
+					<view class="time-info">
+						<text class="time-icon ri-time-line"></text>
+						<text class="time-text">{{item.create_time}}</text>
+					</view>
+					<view class="detail-btn" v-if="item.status === 1">详情</view>
 				</view>
 			</view>
 		</view>
@@ -221,7 +243,7 @@
 		poolList()
 	}
 
-	const toPages = (item : any) => {
+	const toPages = (item) => {
 		console.log(item);
 		switch (item.type) {
 			case 'nav':
@@ -245,7 +267,7 @@
 	}
 
 	// 状态颜色配置
-	const getStatusColor = (status : number) => {
+	const getStatusColor = (status) => {
 		const colorMap = {
 			0: '#ff9d00', // 待配送
 			1: '#37A5FF', // 未入库
@@ -256,7 +278,7 @@
 	}
 
 	// 状态背景色配置
-	const getStatusBgColor = (status : number) => {
+	const getStatusBgColor = (status) => {
 		const bgColorMap = {
 			0: '#fff6e9', // 待配送
 			1: '#e8f4ff', // 未入库
@@ -267,7 +289,7 @@
 	}
 
 	// 状态文字配置
-	const getStatusText = (status : number) => {
+	const getStatusText = (status) => {
 		const textMap = {
 			0: '待接单',
 			1: '待完成',
@@ -277,7 +299,7 @@
 		return textMap[status] || '未知状态'
 	}
 
-	const handleStatusChange = (id : any) => {
+	const handleStatusChange = (id) => {
 		query.value.page = 1
 		query.value.status = id
 		taskList.value = []
@@ -363,14 +385,190 @@
 	}
 
 
-	.li-task-card {
-		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
-		transition: all 0.3s ease;
-	}
-
-	.custom-shadow {
-		color: #ffffff !important;
-		background: linear-gradient(to right, #7bbfff, #009aff) !important;
+	.order-card {
+		background-color: #fff;
+		border-radius: 16rpx;
+		padding: 24rpx 30rpx;
+		margin-bottom: 24rpx;
+		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
+		position: relative;
+		overflow: hidden;
+		
+		&:active {
+			transform: scale(0.99);
+			transition: transform 0.2s;
+		}
+		
+		/* 工单头部 */
+		.order-header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-bottom: 20rpx;
+			padding-bottom: 20rpx;
+			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+			
+			.order-id {
+				display: flex;
+				align-items: center;
+				
+				.id-icon {
+					font-size: 32rpx;
+					color: #999;
+					margin-right: 10rpx;
+				}
+				
+				.id-text {
+					font-size: 28rpx;
+					color: #666;
+					font-weight: 500;
+				}
+				
+				.copy-icon {
+					font-size: 28rpx;
+					color: #009aff;
+					margin-left: 16rpx;
+				}
+			}
+			
+			.order-status {
+				font-size: 22rpx;
+				padding: 4rpx 18rpx;
+				border-radius: 20rpx;
+				font-weight: 500;
+			}
+		}
+		
+		/* 工单内容 */
+		.order-content {
+			padding: 10rpx 0 16rpx;
+			
+			.info-row {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-bottom: 20rpx;
+				
+				.row-label {
+					font-size: 26rpx;
+					color: #999;
+				}
+				
+				.row-value {
+					font-size: 26rpx;
+					color: #333;
+					font-weight: 500;
+					max-width: 65%;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+				
+				.type-tag {
+					display: flex;
+					align-items: center;
+					padding: 4rpx 12rpx;
+					border-radius: 12rpx;
+					font-size: 24rpx;
+					font-weight: 500;
+					color: #009aff;
+					background-color: rgba(0, 154, 255, 0.08);
+					
+					&.type-F2 {
+						color: #ff9d00;
+						background-color: rgba(255, 157, 0, 0.08);
+					}
+					
+					&.type-F6 {
+						color: #00b42a;
+						background-color: rgba(0, 180, 42, 0.08);
+					}
+					
+					&.type-F4 {
+						color: #643bed;
+						background-color: rgba(100, 59, 237, 0.08);
+					}
+					
+					.tag-icon {
+						margin-right: 6rpx;
+					}
+				}
+			}
+			
+			.contact-info {
+				padding: 16rpx 20rpx;
+				background-color: rgba(0, 154, 255, 0.03);
+				border-radius: 12rpx;
+				
+				.contact-row {
+					display: flex;
+					align-items: center;
+					margin-bottom: 12rpx;
+					
+					&:last-child {
+						margin-bottom: 0;
+					}
+					
+					.contact-icon {
+						font-size: 28rpx;
+						color: #009aff;
+						margin-right: 10rpx;
+					}
+					
+					.contact-label {
+						font-size: 26rpx;
+						color: #999;
+						margin-right: 10rpx;
+					}
+					
+					.contact-name {
+						font-size: 26rpx;
+						color: #333;
+						font-weight: 500;
+					}
+					
+					.contact-phone {
+						font-size: 26rpx;
+						color: #009aff;
+						font-weight: 500;
+					}
+				}
+			}
+		}
+		
+		/* 工单底部 */
+		.order-footer {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			border-top: 1px dashed rgba(0, 0, 0, 0.05);
+			padding-top: 16rpx;
+			
+			.time-info {
+				display: flex;
+				align-items: center;
+				
+				.time-icon {
+					font-size: 24rpx;
+					color: #999;
+					margin-right: 6rpx;
+				}
+				
+				.time-text {
+					font-size: 24rpx;
+					color: #999;
+				}
+			}
+			
+			.detail-btn {
+				padding: 8rpx 30rpx;
+				background: linear-gradient(to right, #7bbfff, #009aff);
+				color: #fff;
+				font-size: 24rpx;
+				border-radius: 30rpx;
+				box-shadow: 0 4rpx 8rpx rgba(0, 154, 255, 0.15);
+			}
+		}
 	}
 
 	::v-deep .space {
@@ -385,7 +583,7 @@
 	::v-deep .space-check {
 		padding: 10rpx 40rpx !important;
 		margin-right: 20rpx !important;
-		border-radius: 10rpx !important;
+		border-radius: 30rpx !important;
 		font-size: 24rpx !important;
 		transition: all 0.3s ease;
 		color: #ffffff !important;
@@ -399,7 +597,7 @@
 	::v-deep .space-checkOut {
 		padding: 10rpx 40rpx !important;
 		margin-right: 20rpx !important;
-		border-radius: 10rpx !important;
+		border-radius: 30rpx !important;
 		font-size: 24rpx !important;
 		transition: all 0.3s ease;
 		color: #4c4c4c !important;
diff --git a/pagesA/verification/history.vue b/pagesA/verification/history.vue
index c4d8f6a..0059f51 100644
--- a/pagesA/verification/history.vue
+++ b/pagesA/verification/history.vue
@@ -24,7 +24,7 @@
 		<!-- 历史记录列表 -->
 		<view class="li-w-92% li-mx-auto li-mt-30">
 			<view v-if="filteredRecords.length > 0" class="records-list">
-				<view v-for="(record, index) in filteredRecords" :key="index"
+				<view v-for="(record, index) in filteredRecords" :key="index" @click="btnDetail"
 					class="record-item li-flex li-items-center li-justify-between li-bg-white li-rd-20 li-px-30 li-py-25 li-mb-20 li-shadow-sm">
 					<view class="li-flex li-flex-col">
 						<view class="li-flex li-items-center">
@@ -129,6 +129,12 @@
 			operator: '王五' // 新增字段
 		},
 	])
+	
+	const btnDetail = ()=>{
+		uni.navigateTo({
+			url:'/pagesA/verification/historyDetail'
+		})
+	}
 
 	// 过滤后的历史记录
 	const filteredRecords = computed(() => {
diff --git a/pagesA/verification/historyDetail.vue b/pagesA/verification/historyDetail.vue
new file mode 100644
index 0000000..468d2a1
--- /dev/null
+++ b/pagesA/verification/historyDetail.vue
@@ -0,0 +1,365 @@
+<template>
+	<view class="detail-page">
+		<!-- 自定义导航栏 -->
+		<wd-navbar :bordered="false"
+			custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
+			safeAreaInsetTop fixed placeholder>
+			<template #left>
+				<view class="li-ml-15 li-mt-10 li-flex li-items-center">
+					<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70"
+						@click="toPages({type:'nav'})"></text>
+					<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mb-8 li-mr-10"
+						@click="toPages({type:'home'})"></text>
+					<text class="li-text-42">入库详情</text>
+				</view>
+			</template>
+		</wd-navbar>
+
+		<!-- 导航栏背景 -->
+		<view class="nav-bg-layer"></view>
+
+		<!-- 状态卡片 -->
+		<view class="status-card li-w-92% li-mx-auto li-mt-20 li-rd-20 li-py-30">
+			<view class="status-header li-flex li-items-center li-justify-between li-px-30">
+				<view class="li-flex li-items-center">
+					<text class="status-icon ri-checkbox-circle-fill"></text>
+					<text class="status-text">入库成功</text>
+				</view>
+				<text class="status-time">2025-03-05 12:34:56</text>
+			</view>
+			<view class="li-divider li-my-20"></view>
+			<view class="order-info li-px-30">
+				<view class="order-id li-flex li-items-center li-mb-15">
+					<text class="ri-barcode-line li-text-36 li-text-#666 li-mr-10"></text>
+					<text class="li-text-32 li-text-#333">JD202503050001</text>
+				</view>
+				<view class="li-flex li-justify-between li-text-30 li-text-#666 li-mb-10">
+					<text>操作人员：张三</text>
+					<text>负责仓库：北京仓</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 商品信息 -->
+		<view class="product-section li-w-92% li-mx-auto li-mt-30 li-rd-20 li-p-30 li-bg-white">
+			<view class="section-title li-mb-20">
+				<text class="ri-shopping-bag-line li-text-38 li-text-#0070F0 li-mr-10"></text>
+				<text class="li-text-36 li-text-#333">商品信息</text>
+			</view>
+
+			<view class="product-card li-flex li-mb-30">
+				<image src="../../static/swiper/1.png" mode="aspectFill" class="product-image"></image>
+				<view class="product-info li-ml-20">
+					<view class="product-name li-text-32 li-text-#333 li-mb-10">示例商品名称</view>
+					<view class="product-code li-text-26 li-text-#999 li-mb-10">商品编码：SP202505126</view>
+					<view class="li-flex li-items-center li-justify-between">
+						<text class="li-text-28 li-text-#666">规格：默认</text>
+						<view class="product-quantity li-flex li-items-center">
+							<text class="li-text-28 li-text-#666 li-mr-10">数量：</text>
+							<text class="li-text-32 li-text-#0070F0">1</text>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<view class="product-attrs">
+				<view class="attr-item li-flex li-justify-between li-mb-15">
+					<text class="li-text-28 li-text-#666">商品分类</text>
+					<text class="li-text-28 li-text-#333">电子产品</text>
+				</view>
+				<view class="attr-item li-flex li-justify-between li-mb-15">
+					<text class="li-text-28 li-text-#666">供应商</text>
+					<text class="li-text-28 li-text-#333">京东自营</text>
+				</view>
+				<view class="attr-item li-flex li-justify-between li-mb-15">
+					<text class="li-text-28 li-text-#666">单价</text>
+					<text class="li-text-28 li-text-#333">¥299.00</text>
+				</view>
+				<view class="attr-item li-flex li-justify-between li-mb-15">
+					<text class="li-text-28 li-text-#666">库存状态</text>
+					<text class="li-text-28 li-text-#07c160">正常</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 入库详情 -->
+		<view class="detail-section li-w-92% li-mx-auto li-mt-30 li-rd-20 li-p-30 li-bg-white">
+			<view class="section-title li-mb-20">
+				<text class="ri-information-line li-text-38 li-text-#0070F0 li-mr-10"></text>
+				<text class="li-text-36 li-text-#333">入库详情</text>
+			</view>
+
+			<view class="detail-list">
+				<view class="detail-item li-flex li-justify-between li-mb-15">
+					<text class="li-text-28 li-text-#666">入库单号</text>
+					<text class="li-text-28 li-text-#333">RK202503050001</text>
+				</view>
+				<view class="detail-item li-flex li-justify-between li-mb-15">
+					<text class="li-text-28 li-text-#666">入库方式</text>
+					<text class="li-text-28 li-text-#333">扫码入库</text>
+				</view>
+				<view class="detail-item li-flex li-justify-between li-mb-15">
+					<text class="li-text-28 li-text-#666">入库类型</text>
+					<text class="li-text-28 li-text-#333">普通入库</text>
+				</view>
+				<view class="detail-item li-flex li-justify-between li-mb-15">
+					<text class="li-text-28 li-text-#666">所属库位</text>
+					<text class="li-text-28 li-text-#333">A-12-03</text>
+				</view>
+				<view class="detail-item li-flex li-justify-between li-mb-15">
+					<text class="li-text-28 li-text-#666">入库备注</text>
+					<text class="li-text-28 li-text-#333">正常入库</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 操作时间轴 -->
+		<view class="timeline-section li-w-92% li-mx-auto li-mt-30 li-rd-20 li-p-30 li-bg-white li-mb-40">
+			<view class="section-title li-mb-20">
+				<text class="ri-time-line li-text-38 li-text-#0070F0 li-mr-10"></text>
+				<text class="li-text-36 li-text-#333">操作记录</text>
+			</view>
+
+			<view class="timeline">
+				<view class="timeline-item">
+					<view class="timeline-dot active"></view>
+					<view class="timeline-content li-ml-20">
+						<view class="timeline-title li-text-30 li-text-#333">入库完成</view>
+						<view class="timeline-info li-text-26 li-text-#999">2025-03-05 12:34:56</view>
+						<view class="timeline-desc li-text-26 li-text-#666">操作人：张三</view>
+					</view>
+				</view>
+				<view class="timeline-line"></view>
+
+				<view class="timeline-item">
+					<view class="timeline-dot active"></view>
+					<view class="timeline-content li-ml-20">
+						<view class="timeline-title li-text-30 li-text-#333">商品确认</view>
+						<view class="timeline-info li-text-26 li-text-#999">2025-03-05 12:33:42</view>
+						<view class="timeline-desc li-text-26 li-text-#666">操作人：张三</view>
+					</view>
+				</view>
+				<view class="timeline-line"></view>
+
+				<view class="timeline-item">
+					<view class="timeline-dot active"></view>
+					<view class="timeline-content li-ml-20">
+						<view class="timeline-title li-text-30 li-text-#333">扫码录入</view>
+						<view class="timeline-info li-text-26 li-text-#999">2025-03-05 12:32:18</view>
+						<view class="timeline-desc li-text-26 li-text-#666">操作人：张三</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 底部按钮区域 -->
+		<view class="footer-actions li-w-92% li-mx-auto li-flex li-justify-between li-mb-30">
+			<wd-button custom-class="action-btn secondary" @click="printDetail">打印详情</wd-button>
+			<wd-button custom-class="action-btn primary" @click="shareDetail">分享详情</wd-button>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { ref, onLoad } from '@dcloudio/uni-app'
+	import { useNavigation } from '@/hooks/useNavigation'
+	// 使用导航 composable
+	const {
+		hasMultiplePages,   // 是否有多个页面在路由栈中
+		isTabBarPage,       // 当前页面是否为 tabBar 页面
+		checkRouteStack     // 检查当前路由栈状态的方法
+	} = useNavigation()
+
+
+	// 打印详情
+	const printDetail = () => {
+		uni.showToast({
+			title: '打印功能开发中',
+			icon: 'none'
+		})
+	}
+
+	// 分享详情
+	const shareDetail = () => {
+		uni.showToast({
+			title: '分享功能开发中',
+			icon: 'none'
+		})
+	}
+	
+	const toPages = (item : any) => {
+		console.log(item);
+		switch (item.type) {
+			case 'nav':
+				uni.navigateBack({
+					delta: 1
+				});
+				break;
+			case 'home':
+				uni.switchTab({
+					url: '/pages/index/index'
+				})
+				break;
+			default:
+				break;
+		}
+	}
+
+	onLoad((options) => {
+		checkRouteStack()
+		console.log('入库详情页参数:', options)
+	})
+</script>
+
+<style lang="scss">
+	page {
+		background-color: #f7f8fc;
+		min-height: 100%;
+	}
+
+	.detail-page {
+		padding-bottom: 30rpx;
+
+		// 导航栏背景
+		.nav-bg-layer {
+			position: fixed;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: calc(var(--status-bar-height) + 88rpx);
+			background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
+			z-index: -1;
+			backdrop-filter: blur(10px);
+			-webkit-backdrop-filter: blur(10px);
+		}
+
+		// 状态卡片
+		.status-card {
+			background: linear-gradient(135deg, #f6fafe 0%, #edf6ff 100%);
+			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+
+			.status-header {
+				.status-icon {
+					color: #07c160;
+					font-size: 44rpx;
+					margin-right: 10rpx;
+				}
+
+				.status-text {
+					color: #07c160;
+					font-size: 36rpx;
+					font-weight: 500;
+				}
+
+				.status-time {
+					color: #999;
+					font-size: 26rpx;
+				}
+			}
+
+			.li-divider {
+				height: 2rpx;
+				background-color: rgba(0, 0, 0, 0.05);
+			}
+		}
+
+		// 商品卡片
+		.product-section,
+		.detail-section,
+		.timeline-section {
+			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
+
+			.section-title {
+				display: flex;
+				align-items: center;
+				font-weight: bold;
+				margin-bottom: 30rpx;
+			}
+		}
+
+		.product-card {
+			.product-image {
+				width: 180rpx;
+				height: 180rpx;
+				border-radius: 16rpx;
+				background-color: #f5f5f5;
+				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+			}
+
+			.product-info {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+			}
+		}
+
+		.product-attrs,
+		.detail-list {
+			background-color: #f9f9f9;
+			border-radius: 16rpx;
+			padding: 20rpx 30rpx;
+		}
+
+		// 时间轴
+		.timeline {
+			position: relative;
+
+			.timeline-item {
+				display: flex;
+				align-items: flex-start;
+				position: relative;
+				z-index: 1;
+			}
+
+			.timeline-dot {
+				width: 20rpx;
+				height: 20rpx;
+				border-radius: 50%;
+				background-color: #ddd;
+				margin-top: 14rpx;
+
+				&.active {
+					background-color: #0070F0;
+					box-shadow: 0 0 0 6rpx rgba(0, 112, 240, 0.2);
+				}
+			}
+
+			.timeline-line {
+				position: relative;
+				width: 2rpx;
+				height: 60rpx;
+				background-color: #ddd;
+				margin-left: 9rpx;
+				z-index: 0;
+			}
+
+			.timeline-content {
+				margin-bottom: 20rpx;
+			}
+		}
+
+		// 底部按钮
+		.footer-actions {
+			margin-top: 40rpx;
+
+			.action-btn {
+				width: 46%;
+				height: 85rpx;
+				border-radius: 10rpx;
+				font-size: 30rpx;
+
+				&.primary {
+					background: linear-gradient(135deg, #42a5ff 0%, #0070F0 100%) !important;
+					color: #ffffff !important;
+				}
+
+				&.secondary {
+					background: #ffffff !important;
+					color: #0070F0 !important;
+					border: 2rpx solid #0070F0 !important;
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pagesA/warehousing/index.vue b/pagesA/warehousing/index.vue
index 9379aaa..4aa829b 100644
--- a/pagesA/warehousing/index.vue
+++ b/pagesA/warehousing/index.vue
@@ -56,8 +56,9 @@
 			<!-- 扫码模式 -->
 			<view v-if="activeMode === 0" class=" li-flex li-flex-col li-items-center">
 				<view class="scan-button-wrapper li-mt-50" @click="scanCode">
-					<view class="scan-button li-flex li-items-center li-justify-center">
+					<view class="scan-button li-flex li-items-center li-justify-center" :class="{'btn-scanning': isScanning}">
 						<text class="ri-qr-scan-2-line li-text-90"></text>
+						<view class="scan-line" :class="{'scan-active': isScanning}"></view>
 					</view>
 				</view>
 				<view class="li-text-30 li-text-#666 li-mt-30">点击扫描二维码入库</view>
@@ -116,7 +117,7 @@
 
 		<!-- 商品确认弹出框 -->
 		<wd-popup v-model="show9" position="bottom" closable :safe-area-inset-bottom="true"
-			custom-style="height: 500px;">
+			custom-style="height: auto; max-height: 80vh;">
 			<view class="product-confirm-popup">
 				<view class="product-header">
 					<text class="ri-checkbox-circle-line li-text-44 li-text-#0070F0"></text>
@@ -124,44 +125,61 @@
 				</view>
 				<view class="product-content">
 					<view class="product-image li-flex li-justify-between li-items-center li-mt-30 li-px-40">
-						<image src="../../static/swiper/1.png" mode="aspectFill" class="li-w-130 li-h-130 li-rd-20"></image>
+						<view class="image-container" @click="previewImage">
+							<image src="../../static/swiper/1.png" mode="aspectFill" class="product-img"></image>
+							<view class="image-overlay">
+								<text class="ri-zoom-in-line li-text-44 li-text-white"></text>
+							</view>
+						</view>
 						<view class="li-ml-20 li-flex li-flex-col li-justify-center">
-							<view class="li-flex li-items-center">
-								<text class="li-text-30 li-text-#333 li-mr-10">x</text>
-								<text class="li-text-36 li-text-#0070F0">1</text>
+							<view class="li-flex li-flex-col">
+								<view class="li-flex li-items-center">
+									<text class="li-text-30 li-text-#333 li-mr-10">数量:</text>
+									<text class="li-text-36 li-text-#0070F0">1</text>
+								</view>
+								<view class="li-text-24 li-text-#999 li-mt-10">预计入库时间: 今天</view>
 							</view>
 						</view>
 					</view>
 					<view class="product-info li-mt-30 li-px-30">
 						<view class="info-item li-flex li-items-center li-mb-20">
 							<text
-								class="ri-box-2-line li-text-36 li-text-#999 li-mr-10 li-flex li-items-center li-justify-center"></text>
-							<!-- 调整图标与文字对齐 -->
-							<text class="li-text-30 li-text-#333">商品名称: 示例商品</text>
+								class="ri-box-2-line li-text-36 li-text-#0070F0 li-mr-10 li-flex li-items-center li-justify-center"></text>
+							<view class="info-content">
+								<text class="li-text-30 li-text-#333">商品名称: 示例商品</text>
+								<text class="li-text-24 li-text-#999 li-mt-4">商品编码: SP202505126</text>
+							</view>
 						</view>
 						<view class="info-item li-flex li-items-center li-mb-20">
 							<text
-								class="ri-barcode-line li-text-36 li-text-#999 li-mr-10 li-flex li-items-center li-justify-center"></text>
-							<!-- 调整图标与文字对齐 -->
-							<text class="li-text-30 li-text-#333">订单号: 123456789</text>
+								class="ri-barcode-line li-text-36 li-text-#0070F0 li-mr-10 li-flex li-items-center li-justify-center"></text>
+							<view class="info-content">
+								<text class="li-text-30 li-text-#333">订单号: 123456789</text>
+								<text class="li-text-24 li-text-#999 li-mt-4">来源: 京东自营</text>
+							</view>
 						</view>
 						<view class="info-item li-flex li-items-center li-mb-20">
 							<text
-								class="ri-calendar-line li-text-36 li-text-#999 li-mr-10 li-flex li-items-center li-justify-center"></text>
-							<!-- 调整图标与文字对齐 -->
-							<text class="li-text-30 li-text-#333">入库时间: 2023-10-01 12:00</text>
+								class="ri-calendar-line li-text-36 li-text-#0070F0 li-mr-10 li-flex li-items-center li-justify-center"></text>
+							<view class="info-content">
+								<text class="li-text-30 li-text-#333">入库时间: 2023-10-01 12:00</text>
+								<text class="li-text-24 li-text-#999 li-mt-4">类型: 普通入库</text>
+							</view>
 						</view>
 						<view class="info-item li-flex li-items-center li-mb-20">
 							<text
-								class="ri-user-line li-text-36 li-text-#999 li-mr-10 li-flex li-items-center li-justify-center"></text>
-							<!-- 调整图标与文字对齐 -->
-							<text class="li-text-30 li-text-#333">操作人: 张三</text>
+								class="ri-user-line li-text-36 li-text-#0070F0 li-mr-10 li-flex li-items-center li-justify-center"></text>
+							<view class="info-content">
+								<text class="li-text-30 li-text-#333">操作人: 张三</text>
+								<text class="li-text-24 li-text-#999 li-mt-4">负责仓库: 北京仓</text>
+							</view>
 						</view>
 					</view>
 				</view>
-				<view class="confirm-button li-px-30 li-mt-40">
-					<wd-button custom-class="custom-shadow1" type="primary" block
-						@click="confirmProduct">确认入库</wd-button>
+				<view class="action-buttons li-px-30 li-mt-20">
+					<wd-button custom-class="custom-shadow1" type="primary" block :loading="isConfirming"
+						@click="confirmProduct">{{ isConfirming ? '处理中...' : '确认入库' }}</wd-button>
+					<view class="li-text-center li-text-28 li-text-#999 li-mt-15 li-pb-10" @click="show9 = false">稍后处理</view>
 				</view>
 			</view>
 		</wd-popup>
@@ -186,6 +204,8 @@
 	const activeMode = ref(0)  // 0: 扫码模式, 1: 手动输入模式
 	const continuousMode = ref(false)  // 是否开启连续入库模式
 	const orderNumber = ref('')  // 手动输入的订单号
+	const isScanning = ref(false) // 控制扫描动画
+	const isConfirming = ref(false) // 控制确认动画
 
 	// 入库记录
 	const verificationRecords = ref([
@@ -201,8 +221,16 @@
 
 	// 扫码入库
 	const scanCode = () => {
-		show9.value = true
-		return
+		// 激活扫描动画
+		isScanning.value = true;
+		
+		// 延迟显示弹窗并停止动画
+		setTimeout(() => {
+			isScanning.value = false;
+			show9.value = true;
+		}, 800);
+		
+		return;
 		uni.scanCode({
 			success: (res) => {
 				handleVerification(res.result)
@@ -214,7 +242,33 @@
 	}
 
 	const confirmProduct = () => {
-		show9.value = false
+		// 添加动画效果和成功提示
+		isConfirming.value = true;
+		
+		// 模拟API确认时间
+		setTimeout(() => {
+			isConfirming.value = false;
+			show9.value = false;
+			
+			// 显示成功提示并添加记录
+			Toast.success('商品入库成功');
+			
+			// 如果不是连续模式，则显示入库成功结果
+			if (!continuousMode.value) {
+				// 可以在这里跳转到详情页或显示其他结果
+				// uni.navigateTo({
+				//    url: `/pagesA/warehousing/detail?code=123456789`
+				// });
+			} else {
+				// 在连续模式下添加一条记录
+				const newRecord = {
+					orderNumber: '123456789',
+					time: formatDateTime(new Date()),
+					status: 'success'
+				};
+				verificationRecords.value.unshift(newRecord);
+			}
+		}, 800);
 	}
 
 	// 提交订单号入库
@@ -311,6 +365,24 @@
 		}
 	}
 
+	// 打开图片预览
+	const previewImage = () => {
+		uni.previewImage({
+			urls: ['../../static/swiper/1.png'],
+			current: 0,
+			indicator: 'number',
+			loop: false,
+			success: () => {
+				console.log('预览成功');
+			},
+			fail: (err) => {
+				console.error('预览失败', err);
+				// 失败后的备选方案
+				Toast.info('图片预览加载失败');
+			}
+		});
+	}
+
 	onLoad(() => {
 		checkRouteStack()
 	})
@@ -341,6 +413,7 @@
 			width: 300rpx;
 			height: 300rpx;
 			position: relative;
+			animation: pulse 2s ease-in-out infinite;
 
 			.scan-button {
 				width: 100%;
@@ -350,23 +423,149 @@
 				box-shadow: 0 8rpx 30rpx rgba(56, 165, 255, 0.25);
 				color: white;
 				transition: all 0.3s ease;
+				position: relative;
+				overflow: hidden;
+				
+				&.btn-scanning {
+					transform: scale(0.95);
+					box-shadow: 0 4rpx 25rpx rgba(56, 165, 255, 0.4);
+				}
+
+				&::before {
+					content: '';
+					position: absolute;
+					top: 0;
+					left: -100%;
+					width: 100%;
+					height: 100%;
+					background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+					animation: scanLight 3s ease-in-out infinite;
+				}
 
 				&:active {
-					transform: scale(0.95);
+					transform: scale(0.92);
 					box-shadow: 0 4rpx 15rpx rgba(56, 165, 255, 0.2);
 				}
+				
+				&.scanning {
+					animation: scanning 0.8s ease-in-out;
+				}
+				
+				.ri-qr-scan-2-line {
+					animation: iconPulse 1.5s ease-in-out infinite alternate;
+					display: inline-block;
+				}
+				
+				.scan-line {
+					position: absolute;
+					width: 80%;
+					height: 2rpx;
+					background: rgba(255, 255, 255, 0.8);
+					top: 50%;
+					left: 10%;
+					animation: scanAnimation 2s ease-in-out infinite;
+					opacity: 0.2;
+					
+					&.scan-active {
+						opacity: 1;
+						animation: scanAnimation 0.8s ease-in-out infinite;
+					}
+				}
 			}
 
 			&::after {
 				content: '';
 				position: absolute;
-				top: -10rpx;
-				left: -10rpx;
-				right: -10rpx;
-				bottom: -10rpx;
+				top: -15rpx;
+				left: -15rpx;
+				right: -15rpx;
+				bottom: -15rpx;
+				border-radius: 50%;
+				border: 2rpx solid rgba(56, 165, 255, 0.3);
+				z-index: -1;
+				animation: ripple 2s linear infinite;
+			}
+			
+			&::before {
+				content: '';
+				position: absolute;
+				top: -8rpx;
+				left: -8rpx;
+				right: -8rpx;
+				bottom: -8rpx;
 				border-radius: 50%;
 				border: 2rpx solid rgba(56, 165, 255, 0.2);
 				z-index: -1;
+				animation: ripple 2s linear 1s infinite;
+			}
+		}
+
+		@keyframes ripple {
+			0% {
+				transform: scale(1);
+				opacity: 1;
+			}
+			100% {
+				transform: scale(1.2);
+				opacity: 0;
+			}
+		}
+		
+		@keyframes pulse {
+			0%, 100% {
+				transform: translateY(0);
+			}
+			50% {
+				transform: translateY(-10rpx);
+			}
+		}
+		
+		@keyframes scanLight {
+			0% {
+				left: -100%;
+			}
+			50%, 100% {
+				left: 100%;
+			}
+		}
+		
+		@keyframes iconPulse {
+			0% {
+				opacity: 0.7;
+				transform: scale(0.95);
+			}
+			100% {
+				opacity: 1;
+				transform: scale(1.05);
+			}
+		}
+
+		@keyframes scanAnimation {
+			0% {
+				top: 20%;
+				opacity: 0.5;
+			}
+			50% {
+				opacity: 1;
+			}
+			100% {
+				top: 80%;
+				opacity: 0.5;
+			}
+		}
+
+		@keyframes scanning {
+			0% {
+				transform: scale(1);
+				box-shadow: 0 8rpx 30rpx rgba(56, 165, 255, 0.25);
+			}
+			50% {
+				transform: scale(0.92);
+				box-shadow: 0 4rpx 15rpx rgba(56, 165, 255, 0.35);
+			}
+			100% {
+				transform: scale(1);
+				box-shadow: 0 8rpx 30rpx rgba(56, 165, 255, 0.25);
 			}
 		}
 
@@ -439,24 +638,86 @@
 		}
 
 		.product-content {
+			height: 850rpx ;
+			overflow-y: auto;
+			
+			.image-container {
+				position: relative;
+				width: 160rpx;
+				height: 160rpx;
+				border-radius: 16rpx;
+				overflow: hidden;
+				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+				
+				.product-img {
+					width: 100%;
+					height: 100%;
+					object-fit: cover;
+					transition: transform 0.3s ease;
+				}
+				
+				.image-overlay {
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					background: rgba(0, 0, 0, 0.3);
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					opacity: 0;
+					transition: opacity 0.3s ease;
+				}
+				
+				&:active {
+					.product-img {
+						transform: scale(1.1);
+					}
+					
+					.image-overlay {
+						opacity: 1;
+					}
+				}
+			}
+			
 			.product-info {
 				.info-item {
-					padding: 20rpx 0; // 调整元素间距
+					padding: 20rpx 0;
 					border-bottom: 1rpx solid #eee;
+					transition: background-color 0.2s ease;
+					
+					&:active {
+						background-color: rgba(0, 112, 240, 0.05);
+					}
 
 					&:last-child {
 						border-bottom: none;
 					}
+					
+					.info-content {
+						display: flex;
+						flex-direction: column;
+					}
 				}
 			}
 		}
 
-		.confirm-button {
-			position: absolute;
-			bottom: 30rpx;
+		.action-buttons {
+			position: sticky;
+			bottom: 0;
 			left: 0;
 			right: 0;
-			padding: 0 30rpx; // 调整确认按钮位置和样式
+			/* #ifdef APP-PLUS || H5  */
+			padding: 20rpx 30rpx calc(20rpx + constant(safe-area-inset-bottom));
+			padding: 20rpx 30rpx calc(20rpx + env(safe-area-inset-bottom));
+			/* #endif */
+			/* #ifdef MP-WEIXIN  */
+			padding: 20rpx 30rpx 0;
+			/* #endif */
+			border-top: 1rpx solid #f5f5f5;
+			background: white;
+			z-index: 9;
 		}
 	}
 </style>
\ No newline at end of file
diff --git a/unocss/a-hua-unocss/index.scss b/unocss/a-hua-unocss/index.scss
index 28a2c5d..b28b04f 100644
--- a/unocss/a-hua-unocss/index.scss
+++ b/unocss/a-hua-unocss/index.scss
@@ -1,170 +1,3 @@
 
-.li-bg-white{background-color:rgb(255,255,255)}
-.li-flex{display:flex}
-.li-flex-center{display:flex;align-items:center;justify-content:center}
-.li-flex-col{flex-direction:column}
-.li-h-200{height:200rpx}
-.li-items-center{align-items:center}
-.li-justify-between{justify-content:space-between}
-.li-justify-center{justify-content:center}
-.li-mb-20{margin-bottom:20rpx}
-.li-mb-30{margin-bottom:30rpx}
-.li-mb-8{margin-bottom:8rpx}
-.li-ml-10{margin-left:10rpx}
-.li-ml-15{margin-left:15rpx}
-.li-mr-10{margin-right:10rpx}
-.li-mr-25{margin-right:25rpx}
-.li-mr-4{margin-right:4rpx}
-.li-mt-10{margin-top:10rpx}
-.li-mt-20{margin-top:20rpx}
-.li-mt-30{margin-top:30rpx}
-.li-mt-40{margin-top:40rpx}
-.li-mt-50{margin-top:50rpx}
-.li-mt-60{margin-top:60rpx}
-.li-mt-8{margin-top:8rpx}
-.li-mx-auto{margin-left:auto;margin-right:auto}
-.li-px-30{padding-left:30rpx;padding-right:30rpx}
-.li-py-25{padding-top:25rpx;padding-bottom:25rpx}
-.li-py-40{padding-top:40rpx;padding-bottom:40rpx}
-.li-rd-20{border-radius:20rpx}
-.li-text-0070F0-color{color:rgb(0,112,240)}
-.li-text-009aff-color{color:rgb(0,154,255)}
-.li-text-100{font-size:100rpx}
-.li-text-24{font-size:24rpx}
-.li-text-28{font-size:28rpx}
-.li-text-30{font-size:30rpx}
-.li-text-32{font-size:32rpx}
-.li-text-333-color{color:rgb(51,51,51)}
-.li-text-34{font-size:34rpx}
-.li-text-36{font-size:36rpx}
-.li-text-42{font-size:42rpx}
-.li-text-48{font-size:48rpx}
-.li-text-55{font-size:55rpx}
-.li-text-666-color{color:rgb(102,102,102)}
-.li-text-70{font-size:70rpx}
-.li-text-90{font-size:90rpx}
-.li-text-999-color{color:rgb(153,153,153)}
-.li-text-ddd-color{color:rgb(221,221,221)}
-.li-w-200{width:200rpx}
-.li-w-full-90{width:90%}
-.li-w-full-92{width:92%}
-.items-center{align-items:center}
-.justify-end{justify-content:end}
-.justify-center{justify-content:center}
-.justify-between{justify-content:space-between}
-.li-font-bold{font-weight:bold}
-.li-h-160{height:160rpx}
-.li-h-220{height:220rpx}
-.li-h-58{height:58rpx}
-.li-justify-around{justify-content:space-around}
-.li-ml-22{margin-left:22rpx}
-.li-ml-25{margin-left:25rpx}
-.li-ml-35{margin-left:35rpx}
-.li-mr-5{margin-right:5rpx}
-.li-mt-12{margin-top:12rpx}
-.li-mt-14{margin-top:14rpx}
-.li-mt-15{margin-top:15rpx}
-.li-pt-15{padding-top:15rpx}
-.li-px-25{padding-left:25rpx;padding-right:25rpx}
-.li-px-50{padding-left:50rpx;padding-right:50rpx}
-.li-rd-10{border-radius:10rpx}
-.li-rd-15{border-radius:15rpx}
-.li-text-010B3E-color{color:rgb(1,11,62)}
-.li-text-22{font-size:22rpx}
-.li-text-26{font-size:26rpx}
-.li-text-343333-color{color:rgb(52,51,51)}
-.li-text-43{font-size:43rpx}
-.li-text-AFB2B8-color{color:rgb(175,178,184)}
-.li-text-B1B0B0-color{color:rgb(177,176,176)}
-.li-text-F42429-color{color:rgb(244,36,41)}
-.li-w-310{width:310rpx}
-.li-w-58{width:58rpx}
-.li-w-full-70{width:70%}
-.li-w-full-88{width:88%}
-.pt-10{padding-top:10rpx}
-.li-h-90{height:90rpx}
-.li-ml-30{margin-left:30rpx}
-.li-mr-6{margin-right:6rpx}
-.li-mt-300-important{margin-top:300rpx !important}
-.li-pt-2{padding-top:2rpx}
-.li-py-20{padding-top:20rpx;padding-bottom:20rpx}
-.li-text-25{font-size:25rpx}
-.li-text-52{font-size:52rpx}
-.li-w-90{width:90rpx}
-.li-w-full-80{width:80%}
-.border-4-white{border-style:solid;border-color:rgb(255,255,255);border-width:4rpx}
-.bg-FFFFFF{background-color:rgb(255,255,255)}
-.bg-f9f9f9{background-color:rgb(249,249,249)}
-.li-ml-6{margin-left:6rpx}
-.li-p-15{padding:15rpx}
-.li-pb-15{padding-bottom:15rpx}
-.li-pb-30{padding-bottom:30rpx}
-.li-pt-25{padding-top:25rpx}
-.li-pt-4{padding-top:4rpx}
-.li-text-333333-color{color:rgb(51,51,51)}
-.li-text-9a9a9a-color{color:rgb(154,154,154)}
-.li-text-ff0000-color{color:rgb(255,0,0)}
-.li-w-full-100{width:100%}
-.li-h-110{height:110rpx}
-.li-items-start{align-items:start}
-.li-mb-12{margin-bottom:12rpx}
-.li-mr-12{margin-right:12rpx}
-.li-mr-3{margin-right:3rpx}
-.li-mt-90{margin-top:90rpx}
-.li-pb-25{padding-bottom:25rpx}
-.li-pl-20{padding-left:20rpx}
-.li-pl-30{padding-left:30rpx}
-.li-pr-30{padding-right:30rpx}
-.li-pt-20{padding-top:20rpx}
-.li-pt-30{padding-top:30rpx}
-.li-py-6{padding-top:6rpx;padding-bottom:6rpx}
-.li-text-40{font-size:40rpx}
-.li-text-5f5f5f-color{color:rgb(95,95,95)}
-.li-text-right{text-align:right}
-.li-w-110{width:110rpx}
-.li-w-400{width:400rpx}
-.li-w-full-85{width:85%}
-.overflow-hidden{overflow:hidden}
-.li-mb-25{margin-bottom:25rpx}
-.li-h-100{height:100rpx}
-.li-mr-30{margin-right:30rpx}
-.li-rd-full-50{border-radius:50%}
-.li-text-35{font-size:35rpx}
-.li-text-38{font-size:38rpx}
-.li-text-46{font-size:46rpx}
-.li-w-100{width:100rpx}
 
-.li-h-240{height:240rpx}
-.li-h-250{height:250rpx}
-.li-h-50{height:50rpx}
-.li-h-60{height:60rpx}
-.li-items-end{align-items:end}
-.li-justify-start{justify-content:start}
-.li-mb-2{margin-bottom:2rpx}
-.li-ml-4{margin-left:4rpx}
-.li-ml-50{margin-left:50rpx}
-.li-mr-50{margin-right:50rpx}
-.li-mt-26{margin-top:26rpx}
-.li-mt-6{margin-top:6rpx}
-.li-mx-20{margin-left:20rpx;margin-right:20rpx}
-.li-mx-40{margin-left:40rpx;margin-right:40rpx}
-.li-pb-10{padding-bottom:10rpx}
-.li-pb-14{padding-bottom:14rpx}
-.li-pb-20{padding-bottom:20rpx}
-.li-pt-8{padding-top:8rpx}
-.li-rd-tl-30-important{border-top-left-radius:30rpx !important}
-.li-rd-tr-30-important{border-top-right-radius:30rpx !important}
-.li-text-000000-color{color:rgb(0,0,0)}
-.li-text-19171B-color{color:rgb(25,23,27)}
-.li-text-20{font-size:20rpx}
-.li-text-706e70-color{color:rgb(112,110,112)}
-.li-text-B2B2B2-color{color:rgb(178,178,178)}
-.li-text-BBBDDA-color{color:rgb(187,189,218)}
-.li-text-F2F7FD-color{color:rgb(242,247,253)}
-.li-text-F8C883-color{color:rgb(248,200,131)}
-.li-text-FFFFFF-color{color:rgb(255,255,255)}
-.li-text-b1bbc7-color{color:rgb(177,187,199)}
-.li-w-240{width:240rpx}
-.li-w-50{width:50rpx}
-.li-w-60{width:60rpx}
-.li-w-full-94{width:94%}
+