austin
/
staff
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

核销 入库UI完成 历史记录完成

This commit is contained in:
张文涛 2025-03-15 03:20:07 +08:00
parent dcdde91a49
commit 2ca50ae86b
9 changed files with 632 additions and 469 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
pages.json
View File

@ -140,11 +140,12 @@
}
},
{
"path": "verification/detail",
"path": "verification/history",
"style": {
"navigationStyle": "custom",
"enablePullDownRefresh": false,
"navigationBarTextStyle": "black",
"navigationBarTitleText": "核销详情"
"navigationBarTitleText": "核销历史记录"
}
},
{
@ -162,7 +163,7 @@
"current": 0, // 当前激活的条件，默认为 0
"list": [{
"name": "", // 条件名称
"path": "pagesA/verification/index", // 要打开的页面路径
"path": "pagesA/warehousing/index", // 要打开的页面路径
"query": "" // 可选的页面参数
}]
}

43
pages/index/index.vue
View File

@ -86,7 +86,15 @@
</view>
</view>
</view>
<view class="">
<!-- 悬浮按钮 -->
<!-- #ifdef MP-WEIXIN -->
<view class="floating-button" @click="toPages({type:'warehousing'})">
<view class="button-inner">
<text class="ri-qr-scan-2-line"></text>
</view>
</view>
<!-- #endif -->
<view>
<wd-loadmore loading-text="努力加载中" finished-text="没有更多了" :state="state" @reload="loadmore" />
</view>
</view>
@ -347,4 +355,37 @@
border: none !important;
margin: 0 !important;
}
.floating-button {
position: fixed;
bottom: 60rpx;
right: 40rpx;
width: 120rpx;
height: 120rpx;
border-radius: 50%;
background: linear-gradient(135deg, #42a5ff 0%, #0070F0 100%);
box-shadow: 0 8rpx 30rpx rgba(56, 165, 255, 0.25);
display: flex;
align-items: center;
justify-content: center;
animation: float 3s ease-in-out infinite;
.button-inner {
color: white;
font-size: 60rpx;
padding-top: 10rpx;
}
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10rpx);
}
}
</style>

4
pagesA/my_order/list.vue
View File

@ -72,6 +72,10 @@
</view>
</view>
</view>
<view v-if="taskList.length==0" class="!li-mt-300">
<wd-status-tip image="search" tip="您还没有待处理的订单哦~" />
</view>
</view>
</template>

2
pagesA/task_hall/list.vue
View File

@ -19,7 +19,7 @@
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">
<text class="ri-file-list-line li-mr-10"></text>
<text class="ri-file-list-line li-mr-10 li-text-#009aff"></text>
<text>{{item.ticket_no}}</text>
</view>
<view class="task-type-tag li-flex li-items-center">

264
pagesA/verification/detail.vue
View File

@ -1,264 +0,0 @@
<template>
<view class="li-message-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>
<!-- 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>JD2424234324325</text>
<text class="ri-file-copy-line li-text-#009aff li-ml-15"></text>
</view>
<text class="li-pl-20 li-text-28 li-text-#5f5f5f">创建时间:&nbsp;2025-07-09</text>
</view>
<view class="li-text-28 !li-rd-bl-50 li-px-40 li-py-6"
:style="{ color: getStatusColor(3), backgroundColor: getStatusBgColor(3) }">
{{getStatusText(3)}}
</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> -->
<text class="ri-error-warning-fill li-text-#a3a3a3 li-mr-12 li-text-40 li-pt-2"></text>
<view class="li-flex li-flex-col">
<text class="li-text-32">{{getStatusText(3)}}</text>
<text class="li-text-28">工单待入库，请确认入库</text>
</view>
</view>
</view>
<!-- card -->
<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-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">邓大仙儿</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>177****4485</text>
</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>
<text class="li-w-400 li-two-line li-text-right">中金北区17号楼一单元201室号</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">放在门口即可</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>
<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>
<!-- <text class="li-text-#009aff li-text-right">x2</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>
<!-- card -->
<!-- <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-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">张三丰</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>135****6645</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">敲门未应答，已按照业主要求放在门口</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>
<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 class="li-w-110 li-h-110 li-rd-10" src="../../static/logo.png" mode="">
</image>
<image class="li-w-110 li-h-110 li-rd-10 li-ml-20" src="../../static/logo.png" mode="">
</image>
</view>
</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-40">
<view>
<wd-button :round="false" type="info">继续录入</wd-button>
</view>
<view class="li-ml-15">
<wd-button :round="false">确认入库</wd-button>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useNavigation } from '@/hooks/useNavigation'
// 使用导航 composable
const {
hasMultiplePages, // 是否有多个页面在路由栈中
isTabBarPage, // 当前页面是否为 tabBar 页面
checkRouteStack // 检查当前路由栈状态的方法
} = useNavigation()
onLoad(() => {
checkRouteStack()
})
// 状态颜色配置
const getStatusColor = (status : number) => {
const colorMap = {
1: '#ff9d00', // 待配送
2: '#00b42a', // 已完成
3: '#37A5FF', // 未入库
4: '#F42429' // 已取消
}
return colorMap[status] || '#666666'
}
// 状态背景色配置
const getStatusBgColor = (status : number) => {
const bgColorMap = {
1: '#fff6e9', // 待配送
2: '#e8ffea', // 已完成
3: '#e8f4ff', // 未入库
4: '#ffe8e8' // 已取消
}
return bgColorMap[status] || '#f5f5f5'
}
// 状态文字配置
const getStatusText = (status : number) => {
const textMap = {
1: '待配送',
2: '已完成',
3: '未入库',
4: '已取消'
}
return textMap[status] || '未知状态'
}
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;
}
}
const handleAction = (action : string) => {
console.log(action);
}
</script>
<style lang="scss">
.li-message-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%);
background-attachment: fixed;
/* #ifdef H5 */
padding-bottom: 160rpx;
/* #endif */
/* #ifdef APP-PLUS */
padding-bottom: 180rpx;
/* #endif */
/* #ifdef MP-WEIXIN */
padding-bottom: 170rpx;
/* #endif */
}
// 导航栏背景层
.nav-bg-layer {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--window-top);
background: linear-gradient(to bottom,
rgba(217, 237, 255, 0.95),
rgba(217, 237, 255, 0.85));
backdrop-filter: blur(10px);
-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;
}
::v-deep .wd-button {
width: 160rpx !important;
height: 65rpx !important;
min-width: 160rpx !important;
}
</style>

224
pagesA/verification/history.vue Normal file
View File

@ -0,0 +1,224 @@
<template>
<view class="li-history-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="li-w-90% li-mx-auto li-mt-30">
<wd-search placeholderStyle="color:#d9d9d9" v-model="searchKeyword" hide-cancel placeholder-left
placeholder="关键字搜索"></wd-search>
</view>
<!-- 历史记录列表 -->
<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"
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">
<text class="ri-file-list-3-line li-mr-10 li-text-#009aff"></text>
<text class="li-text-30">{{record.orderNumber}}</text>
</view>
<view class="li-flex li-items-center li-mt-8">
<text class="li-text-24 li-text-#999">商品名称: {{ record.productName }}</text>
</view>
<text class="li-text-24 li-text-#999 li-mt-8">{{record.time}}</text>
<view class="li-flex li-items-center li-mt-8">
<text class="li-text-24 li-text-#999">操作人: {{ record.operator }}</text>
</view>
</view>
<view class="status-badge" :class="[record.status === 'success' ? 'status-success' :
record.status === 'fail' ? 'status-fail' : 'status-pending']">
{{record.status === 'success' ? '入库成功' :
record.status === 'fail' ? '入库失败' : '处理中'}}
</view>
</view>
</view>
<!-- 空状态提示 -->
<view v-else class="empty-state li-w-92% li-mx-auto li-mt-60 li-flex li-flex-col li-items-center">
<text class="ri-inbox-line li-text-100 li-text-#ddd"></text>
<view class="li-text-30 li-text-#999 li-mt-20">暂无入库记录</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useNavigation } from '@/hooks/useNavigation'
// 使用导航 composable
const {
hasMultiplePages, // 是否有多个页面在路由栈中
isTabBarPage, // 当前页面是否为 tabBar 页面
checkRouteStack // 检查当前路由栈状态的方法
} = useNavigation()
// 搜索关键词
const searchKeyword = ref('')
// 历史记录数据
const records = ref([
{
orderNumber: 'JD202503050001',
time: '2025-03-05 21:58:34',
status: 'success',
productName: '示例商品1', // 新增字段
operator: '张三' // 新增字段
},
{
orderNumber: 'JD202503050002',
time: '2025-03-05 22:10:12',
status: 'pending',
productName: '示例商品2', // 新增字段
operator: '李四' // 新增字段
},
{
orderNumber: 'JD202503050003',
time: '2025-03-05 22:15:45',
status: 'fail',
productName: '示例商品3', // 新增字段
operator: '王五' // 新增字段
},
{
orderNumber: 'JD202503050003',
time: '2025-03-05 22:15:45',
status: 'fail',
productName: '示例商品3', // 新增字段
operator: '王五' // 新增字段
},
{
orderNumber: 'JD202503050003',
time: '2025-03-05 22:15:45',
status: 'fail',
productName: '示例商品3', // 新增字段
operator: '王五' // 新增字段
},
{
orderNumber: 'JD202503050003',
time: '2025-03-05 22:15:45',
status: 'fail',
productName: '示例商品3', // 新增字段
operator: '王五' // 新增字段
},
{
orderNumber: 'JD202503050003',
time: '2025-03-05 22:15:45',
status: 'fail',
productName: '示例商品3', // 新增字段
operator: '王五' // 新增字段
},
{
orderNumber: 'JD202503050003',
time: '2025-03-05 22:15:45',
status: 'fail',
productName: '示例商品3', // 新增字段
operator: '王五' // 新增字段
},
])
// 过滤后的历史记录
const filteredRecords = computed(() => {
if (!searchKeyword.value) return records.value
return records.value.filter(record =>
record.orderNumber.includes(searchKeyword.value)
)
})
onLoad(() => {
checkRouteStack()
})
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;
}
}
</script>
<style lang="scss">
page {
background-color: #f7f8fc;
}
.li-history-page {
padding-bottom: 40rpx;
.records-list {
.record-item {
&:not(:last-child) {
margin-bottom: 30rpx; // 调整间距
}
}
}
// 状态标签
.status-badge {
padding: 4rpx 20rpx;
border-radius: 30rpx;
font-size: 24rpx;
&.status-success {
color: #07c160;
background-color: rgba(7, 193, 96, 0.1);
}
&.status-fail {
color: #fa5151;
background-color: rgba(250, 81, 81, 0.1);
}
&.status-pending {
color: #f0ad4e;
background-color: rgba(240, 173, 78, 0.1);
}
}
// 空状态
.empty-state {
padding-top: 100rpx;
}
}
::v-deep .wd-search {
background-color: #F6F7FB !important;
padding: 0 !important;
}
::v-deep .wd-search__block {
background-color: #FFFFFF !important;
width: 480rpx !important;
padding: 4rpx !important;
}
::v-deep .uni-input-placeholder,
.uni-input-input {
width: auto !important;
}
</style>

135
pagesA/verification/index.vue
View File

@ -69,7 +69,7 @@
<view class="li-text-32 li-mb-30 li-text-#333">请输入订单号</view>
<wd-input v-model="orderNumber" placeholder="请输入需要核销的订单号" clear-able />
<view class="li-flex li-justify-center li-mt-30">
<wd-button type="primary" @click="submitOrderNumber" block>立即核销</wd-button>
<wd-button custom-class="custom-shadow" type="primary" @click="submitOrderNumber" block>立即核销</wd-button>
</view>
</view>
</view>
@ -77,14 +77,14 @@
<!-- 连续核销模式下的结果展示区域 -->
<view v-if="verificationRecords.length > 0" class="verification-records li-w-92% li-mx-auto li-mt-40">
<view class="li-text-34 li-text-#333 li-mb-20">最近核销记录</view>
<view class="li-text-30 li-text-#333 li-mb-20">最近核销记录</view>
<view class="records-list">
<view v-for="(record, index) in verificationRecords" :key="index"
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">
<text class="ri-file-list-3-line li-mr-10 li-text-#0070F0"></text>
<text class="ri-file-list-3-line li-mr-10 li-text-#009aff"></text>
<text class="li-text-30">{{record.orderNumber}}</text>
</view>
<text class="li-text-24 li-text-#999 li-mt-8">{{record.time}}</text>
@ -110,6 +110,59 @@
<!-- 顶部提示条（成功/失败消息提示） -->
<wd-toast />
<!-- 商品确认弹出框 -->
<wd-popup v-model="show9" position="bottom" closable :safe-area-inset-bottom="true"
custom-style="height: 500px;">
<view class="product-confirm-popup">
<view class="product-header">
<text class="ri-checkbox-circle-line li-text-44 li-text-#0070F0"></text>
<text class="li-text-32 li-text-#333 li-ml-10">商品确认</text>
</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="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>
</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>
</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>
</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>
</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>
</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>
</view>
</wd-popup>
</view>
</template>
@ -141,8 +194,16 @@
}
])
const show9 = ref<boolean>(false)
const confirmProduct = () => {
show9.value = false
}
// 扫码核销
const scanCode = () => {
show9.value = true
return
uni.scanCode({
success: (res) => {
handleVerification(res.result)
@ -229,21 +290,25 @@
const toVerificationHistory = () => {
// 这里应该跳转到历史记录页面
// 目前示例仅显示提示
Toast.info('查看历史记录')
// uni.navigateTo({
// url: '/pagesA/verification/history'
// })
// Toast.info('查看历史记录')
uni.navigateTo({
url: '/pagesA/verification/history'
})
}
// 页面跳转
const toPages = (item : any) => {
if (item.type === 'nav') {
uni.navigateBack()
} else if (item.type === 'home') {
// 这里是项目内部的跳转逻辑
uni.switchTab({
url: '/pages/index/index'
})
switch (item.type) {
case 'nav':
uni.navigateBack()
break;
case 'home':
uni.switchTab({
url: '/pages/index/index'
})
break;
default:
break;
}
}
@ -353,4 +418,46 @@
width: 90rpx !important;
font-size: 22px !important;
}
.custom-shadow {
color: #ffffff !important;
background: linear-gradient(135deg, #42a5ff 0%, #0070F0 100%) !important;
}
.custom-shadow1 {
color: #ffffff !important;
height: 85rpx !important;
background: linear-gradient(135deg, #42a5ff 0%, #0070F0 100%) !important;
}
.product-confirm-popup {
.product-header {
padding: 20rpx 30rpx;
border-bottom: 1rpx solid #eee;
display: flex;
align-items: center;
justify-content: center;
}
.product-content {
.product-info {
.info-item {
padding: 20rpx 0; // 调整元素间距
border-bottom: 1rpx solid #eee;
&:last-child {
border-bottom: none;
}
}
}
}
.confirm-button {
position: absolute;
bottom: 30rpx;
left: 0;
right: 0;
padding: 0 30rpx; // 调整确认按钮位置和样式
}
}
</style>

168
pagesA/warehousing/index.vue
View File

@ -1,4 +1,5 @@
<template>
<page-meta :page-style="`overflow:${show9 ? 'hidden' : 'visible'};`"></page-meta>
<view class="verification-page">
<!-- 自定义导航栏 -->
<wd-navbar :bordered="false"
@ -10,7 +11,7 @@
@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>
<text class="li-text-42">商品入库</text>
</view>
</template>
<!-- #ifdef MP-WEIXIN -->
@ -32,18 +33,18 @@
<!-- 导航栏背景 -->
<view class="nav-bg-layer"></view>
<!-- 功能模式切换和连续核销开关 -->
<!-- 功能模式切换和连续入库开关 -->
<view class=" li-w-92% li-mx-auto li-flex li-justify-between li-items-center li-mt-20">
<wd-tabs v-model="activeMode" :sticky="false" :line-width="18" line-height="4" active-color="#0070F0">
<wd-tab title="入库核销"></wd-tab>
<wd-tab title="扫码入库"></wd-tab>
<wd-tab title="手动输入"></wd-tab>
</wd-tabs>
</view>
<view class="li-w-90% li-mx-auto li-mt-50 li-flex li-items-center">
<wd-tooltip placement="bottom-start" content="开启后可以连续核销多个订单">
<wd-tooltip placement="bottom-start" content="开启后可以连续入库多个订单">
<view class="li-flex li-items-center li-mr-10">
<view class="li-mr-4 li-text-28 li-text-#666">连续核销</view>
<view class="li-mr-4 li-text-28 li-text-#666">连续入库</view>
<text class="ri-question-fill li-text-36 li-text-#666"></text>
</view>
</wd-tooltip>
@ -59,32 +60,33 @@
<text class="ri-qr-scan-2-line li-text-90"></text>
</view>
</view>
<view class="li-text-30 li-text-#666 li-mt-30">点击扫描二维码入库核销</view>
<view class="li-text-24 li-text-#999 li-mt-10">{{continuousMode ? '连续核销模式已开启' : ''}}</view>
<view class="li-text-30 li-text-#666 li-mt-30">点击扫描二维码入库</view>
<view class="li-text-24 li-text-#999 li-mt-10">{{continuousMode ? '连续入库模式已开启' : ''}}</view>
</view>
<!-- 手动输入模式 -->
<view v-else class="input-mode-container">
<view class="li-bg-white li-rd-20 li-px-30 li-py-40 li-shadow-sm li-mt-30">
<view class="li-text-32 li-mb-30 li-text-#333">请输入订单号</view>
<wd-input v-model="orderNumber" placeholder="请输入需要核销的订单号" clear-able />
<wd-input v-model="orderNumber" placeholder="请输入需要入库的订单号" clear-able />
<view class="li-flex li-justify-center li-mt-30">
<wd-button type="primary" @click="submitOrderNumber" block>立即核销</wd-button>
<wd-button custom-class="custom-shadow" type="primary" @click="submitOrderNumber"
block>立即入库</wd-button>
</view>
</view>
</view>
</view>
<!-- 连续核销模式下的结果展示区域 -->
<!-- 连续入库模式下的结果展示区域 -->
<view v-if="verificationRecords.length > 0" class="verification-records li-w-92% li-mx-auto li-mt-40">
<view class="li-text-34 li-text-#333 li-mb-20">最近核销记录</view>
<view class="li-text-34 li-text-#333 li-mb-20">最近入库记录</view>
<view class="records-list">
<view v-for="(record, index) in verificationRecords" :key="index"
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">
<text class="ri-file-list-3-line li-mr-10 li-text-#0070F0"></text>
<text class="ri-file-list-3-line li-mr-10 li-text-#009aff"></text>
<text class="li-text-30">{{record.orderNumber}}</text>
</view>
<text class="li-text-24 li-text-#999 li-mt-8">{{record.time}}</text>
@ -93,8 +95,8 @@
record.status === 'success' ? 'status-success' :
record.status === 'fail' ? 'status-fail' : 'status-pending'
]">
{{record.status === 'success' ? '核销成功' :
record.status === 'fail' ? '核销失败' : '处理中'}}
{{record.status === 'success' ? '入库成功' :
record.status === 'fail' ? '入库失败' : '处理中'}}
</view>
</view>
</view>
@ -104,12 +106,66 @@
<view v-if="verificationRecords.length === 0"
class="empty-state li-w-92% li-mx-auto li-mt-60 li-flex li-flex-col li-items-center">
<text class="ri-inbox-line li-text-100 li-text-#ddd"></text>
<view class="li-text-30 li-text-#999 li-mt-20">暂无核销记录</view>
<view class="li-text-30 li-text-#999 li-mt-20">暂无入库记录</view>
</view>
<!-- 顶部提示条（成功/失败消息提示） -->
<wd-toast />
<!-- 商品确认弹出框 -->
<wd-popup v-model="show9" position="bottom" closable :safe-area-inset-bottom="true"
custom-style="height: 500px;">
<view class="product-confirm-popup">
<view class="product-header">
<text class="ri-checkbox-circle-line li-text-44 li-text-#0070F0"></text>
<text class="li-text-32 li-text-#333 li-ml-10">商品确认</text>
</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="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>
</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>
</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>
</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>
</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>
</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>
</view>
</wd-popup>
</view>
</template>
@ -128,10 +184,10 @@
// 模式选择
const activeMode = ref(0) // 0: 扫码模式, 1: 手动输入模式
const continuousMode = ref(false) // 是否开启连续核销模式
const continuousMode = ref(false) // 是否开启连续入库模式
const orderNumber = ref('') // 手动输入的订单号
// 核销记录
// 入库记录
const verificationRecords = ref([
// 示例数据，实际应为空数组
{
@ -141,8 +197,12 @@
}
])
// 扫码核销
const show9 = ref<boolean>(false)
// 扫码入库
const scanCode = () => {
show9.value = true
return
uni.scanCode({
success: (res) => {
handleVerification(res.result)
@ -153,7 +213,11 @@
})
}
// 提交订单号核销
const confirmProduct = () => {
show9.value = false
}
// 提交订单号入库
const submitOrderNumber = () => {
if (!orderNumber.value) {
Toast.error('请输入订单号')
@ -163,10 +227,10 @@
orderNumber.value = '' // 清空输入
}
// 处理核销逻辑
// 处理入库逻辑
const handleVerification = (code : string) => {
// 模拟核销处理过程
// 实际项目中这里应该调用API进行核销
// 模拟入库处理过程
// 实际项目中这里应该调用API进行入库
// 模拟API调用延迟
if (continuousMode.value) {
@ -190,11 +254,11 @@
}
// 显示结果提示
Toast[isSuccess ? 'success' : 'fail'](isSuccess ? '核销成功' : '核销失败')
Toast[isSuccess ? 'success' : 'fail'](isSuccess ? '入库成功' : '入库失败')
}, 800)
} else {
// 非连续模式 - 直接跳转到详情页
Toast.loading('核销中...')
Toast.loading('入库中...')
// 模拟API请求
setTimeout(() => {
@ -207,7 +271,7 @@
url: `/pagesA/verification/detail?orderNumber=${code}`
})
} else {
Toast.error('核销失败，请重试')
Toast.error('入库失败，请重试')
}
}, 800)
}
@ -225,14 +289,14 @@
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
// 跳转到核销历史记录页面
// 跳转到入库历史记录页面
const toVerificationHistory = () => {
// 这里应该跳转到历史记录页面
// 目前示例仅显示提示
Toast.info('查看历史记录')
// uni.navigateTo({
// url: '/pagesA/verification/history'
// })
// Toast.info('查看历史记录')
uni.navigateTo({
url: '/pagesA/verification/history'
})
}
// 页面跳转
@ -306,7 +370,7 @@
}
}
// 核销记录状态标签
// 入库记录状态标签
.status-badge {
padding: 4rpx 20rpx;
border-radius: 30rpx;
@ -353,4 +417,46 @@
width: 90rpx !important;
font-size: 22px !important;
}
.custom-shadow {
color: #ffffff !important;
background: linear-gradient(135deg, #42a5ff 0%, #0070F0 100%) !important;
}
.custom-shadow1 {
color: #ffffff !important;
height: 85rpx !important;
background: linear-gradient(135deg, #42a5ff 0%, #0070F0 100%) !important;
}
.product-confirm-popup {
.product-header {
padding: 20rpx 30rpx;
border-bottom: 1rpx solid #eee;
display: flex;
align-items: center;
justify-content: center;
}
.product-content {
.product-info {
.info-item {
padding: 20rpx 0; // 调整元素间距
border-bottom: 1rpx solid #eee;
&:last-child {
border-bottom: none;
}
}
}
}
.confirm-button {
position: absolute;
bottom: 30rpx;
left: 0;
right: 0;
padding: 0 30rpx; // 调整确认按钮位置和样式
}
}
</style>

254
unocss/a-hua-unocss/index.scss
View File

@ -1,20 +1,58 @@
.li-items-center{align-items:center}
.li-items-center{align-items:center}
.items-center{align-items:center}
.li-justify-center{justify-content:center}
.justify-end{justify-content:end}
.li-justify-center{justify-content:center}
.justify-center{justify-content:center}
.li-justify-between{justify-content:space-between}
.li-justify-between{justify-content:space-between}
.justify-between{justify-content:space-between}
.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-130{height:130rpx}
.li-h-160{height:160rpx}
.li-h-220{height:220rpx}
.li-h-58{height:58rpx}
@ -23,59 +61,79 @@
.li-ml-25{margin-left:25rpx}
.li-ml-35{margin-left:35rpx}
.li-mr-5{margin-right:5rpx}
.li-mt-10{margin-top:10rpx}
.li-mt-12{margin-top:12rpx}
.li-mt-14{margin-top:14rpx}
.li-mt-15{margin-top:15rpx}
.li-mt-20{margin-top:20rpx}
.li-mt-30{margin-top:30rpx}
.li-mx-auto{margin-left:auto;margin-right:auto}
.li-pt-15{padding-top:15rpx}
.li-px-25{padding-left:25rpx;padding-right:25rpx}
.li-px-30{padding-left:30rpx;padding-right:30rpx}
.li-px-40{padding-left:40rpx;padding-right:40rpx}
.li-px-50{padding-left:50rpx;padding-right:50rpx}
.li-py-25{padding-top:25rpx;padding-bottom:25rpx}
.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-24{font-size:24rpx}
.li-text-26{font-size:26rpx}
.li-text-28{font-size:28rpx}
.li-text-30{font-size:30rpx}
.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-130{width:130rpx}
.li-w-310{width:310rpx}
.li-w-58{width:58rpx}
.li-w-full-70{width:70%}
.li-w-full-88{width:88%}
.li-font-550{font-weight:550}
.li-h-68{height:68rpx}
.li-mt-100{margin-top:100rpx}
.li-mt-28{margin-top:28rpx}
.li-mt-32{margin-top:32rpx}
.li-mt-90{margin-top:90rpx}
.li-mx-10{margin-left:10rpx;margin-right:10rpx}
.li-pt-270{padding-top:270rpx}
.li-rd-40{border-radius:40rpx}
.li-text-000000-color{color:rgb(0,0,0)}
.li-text-2EA1EA-color{color:rgb(46,161,234)}
.li-text-38{font-size:38rpx}
.li-text-a5a5a5-color{color:rgb(165,165,165)}
.li-w-150{width:150rpx}
.li-w-420{width:420rpx}
.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%}
.li-w-full-85{width:85%}
.li-w-full-90{width:90%}
.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)}
.border-4-white{border-style:solid;border-color:rgb(255,255,255);border-width:4rpx}
.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}
@ -85,27 +143,20 @@
.li-mb-2{margin-bottom:2rpx}
.li-ml-4{margin-left:4rpx}
.li-ml-50{margin-left:50rpx}
.li-mr-20{margin-right:20rpx}
.li-mr-50{margin-right:50rpx}
.li-mt-26{margin-top:26rpx}
.li-mt-6{margin-top:6rpx}
.li-mt-60{margin-top:60rpx}
.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-20{padding-top:20rpx}
.li-pt-8{padding-top:8rpx}
.li-py-20{padding-top:20rpx;padding-bottom:20rpx}
.li-rd-20{border-radius:20rpx}
.li-rd-full-50{border-radius:50%}
.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-32{font-size:32rpx}
.li-text-34{font-size:34rpx}
.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)}
@ -113,114 +164,7 @@
.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-100{width:100rpx}
.li-w-240{width:240rpx}
.li-w-50{width:50rpx}
.li-w-60{width:60rpx}
.li-w-full-94{width:94%}
.li-mb-8{margin-bottom:8rpx}
.li-ml-15{margin-left:15rpx}
.li-ml-6{margin-left:6rpx}
.li-mr-10{margin-right:10rpx}
.li-mr-6{margin-right:6rpx}
.li-mt-300-important{margin-top:300rpx !important}
.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-36{font-size:36rpx}
.li-text-42{font-size:42rpx}
.li-text-55{font-size:55rpx}
.li-text-70{font-size:70rpx}
.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-w-full-92{width:92%}
.li-mb-25{margin-bottom:25rpx}
.li-text-009aff-color{color:rgb(0,154,255)}
.li-text-999-color{color:rgb(153,153,153)}
.li-bottom-0{bottom:0}
.li-fixed{position:fixed}
.li-h-110{height:110rpx}
.li-items-start{align-items:start}
.li-mb-12{margin-bottom:12rpx}
.li-mb-20{margin-bottom:20rpx}
.li-ml-20{margin-left:20rpx}
.li-mr-12{margin-right:12rpx}
.li-mr-3{margin-right:3rpx}
.li-mr-30{margin-right:30rpx}
.li-mt-40{margin-top:40rpx}
.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-2{padding-top:2rpx}
.li-pt-30{padding-top:30rpx}
.li-py-35{padding-top:35rpx;padding-bottom:35rpx}
.li-py-6{padding-top:6rpx;padding-bottom:6rpx}
.li-rd-bl-50-important{border-bottom-left-radius:50rpx !important}
.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}
.overflow-hidden{overflow:hidden}
.li-font-400{font-weight:400}
.li-m-30{margin:30rpx}
.li-text-595959-color{color:rgb(89,89,89)}
.li-text-666-color{color:rgb(102,102,102)}
.li-mb-30{margin-bottom:30rpx}
.li-mr-200{margin-right:200rpx}
.li-mr-4{margin-right:4rpx}
.li-mt-50{margin-top:50rpx}
.li-mt-8{margin-top:8rpx}
.li-py-40{padding-top:40rpx;padding-bottom:40rpx}
.li-text-0070F0-color{color:rgb(0,112,240)}
.li-text-100{font-size:100rpx}
.li-text-333-color{color:rgb(51,51,51)}
.li-text-48{font-size:48rpx}
.li-text-90{font-size:90rpx}
.li-text-ddd-color{color:rgb(221,221,221)}
.li-mr-40{margin-right:40rpx}
.li-text-a3a3a3-color{color:rgb(163,163,163)}
.li-h-90{height:90rpx}
.li-ml-200{margin-left:200rpx}
.li-ml-30{margin-left:30rpx}
.li-text-25{font-size:25rpx}
.li-text-47{font-size:47rpx}
.li-w-90{width:90rpx}
.li-text-35{font-size:35rpx}
.li-text-46{font-size:46rpx}
.li-mb-20{margin-bottom:20rpx}
.li-mb-30{margin-bottom:30rpx}
.li-mb-8{margin-bottom:8rpx}
.li-ml-15{margin-left:15rpx}
.li-mr-10{margin-right:10rpx}
.li-mr-4{margin-right:4rpx}
.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-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-100{font-size:100rpx}
.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-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-full-90{width:90%}
.li-w-full-92{width:92%}