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

入库(home)

This commit is contained in:
张文涛 2025-03-27 23:43:09 +08:00
parent 71a2d530cc
commit 299b4948b7
5 changed files with 334 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
api/ticket.ts
View File

@ -12,12 +12,11 @@ export const myTicketList = (data : any = {}) => get('v1/ticket/my/list', data);
export const myTicketInfo = (data : any = {}) => get('v1/ticket/my/info', data);
// 获取码信息
export const scanCodeGet = (data : any = {}) => get('v1/scan/code/get', data);
// 入库接口
export const orderStorageAct = (data : any) => post('v1/order/storage/act', data);
// 获取码信息
export const orderStorageVerify = (data : any) => post('v1/order/storage/verify', data);
// 入库&核销记录
export const orderRecord = (data : any = {}) => get('v1/order/record', data);

2
pages.json
View File

@ -172,7 +172,7 @@
"current": 0, // 当前激活的条件，默认为 0
"list": [{
"name": "", // 条件名称
"path": "pagesA/my_order/list", // 要打开的页面路径
"path": "pagesA/warehousing/index", // 要打开的页面路径
"query": "" // 可选的页面参数
}]
}

12
pagesA/my_order/detail.vue
View File

@ -123,7 +123,7 @@
class="scene-image"
:src="item"
mode="aspectFill">
</image>
</image>
</view>
</view>
</view>
@ -150,7 +150,7 @@
<view class="timeline-content">
<view class="timeline-time">2025-03-13 11:25:18</view>
<view class="timeline-text">工单已接单</view>
</view>
</view>
</view>
<view v-if="ticketInfo.status >= 2" class="timeline-item">
@ -178,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)
@ -303,7 +303,7 @@
-webkit-backdrop-filter: blur(10px);
z-index: 998;
}
/* 卡片通用样式 */
.ticket-card, .info-card {
width: 92%;
@ -623,7 +623,7 @@
}
}
}
::v-deep .wd-button {
width: auto !important;
height: 80rpx !important;

465
pagesA/warehousing/index.vue
View File

@ -41,7 +41,7 @@
</wd-tabs>
</view>
<view class="li-w-90% li-mx-auto li-mt-50 li-flex li-items-center">
<view v-if="activeMode === 0" class="li-w-90% li-mx-auto li-mt-50 li-flex li-items-center">
<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>
@ -56,7 +56,8 @@
<!-- 扫码模式 -->
<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" :class="{'btn-scanning': isScanning}">
<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>
@ -66,7 +67,7 @@
</view>
<!-- 手动输入模式 -->
<view v-else class="input-mode-container">
<view v-else class="input-mode-container li-mt-100">
<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 />
@ -104,10 +105,9 @@
</view>
<!-- 空状态提示 -->
<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 v-if="verificationRecords.length==0" class="!li-mt-100">
<wd-status-tip image="search" tip="暂无入库记录" />
</view>
@ -120,76 +120,121 @@
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>
<text class="li-text-32 li-text-#333 li-ml-10">商品确认</text>
<text class="ri-checkbox-circle-line li-text-42 li-text-#0070F0"></text>
<text class="li-text-32 li-text-#333 li-ml-10">商品确认 ({{orderInfo.product.length}}件)</text>
</view>
<view class="product-content">
<view class="product-image li-flex li-justify-between li-items-center li-mt-30 li-px-40">
<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-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>
<scroll-view scroll-y class="product-scroll">
<view class="product-content">
<view v-for="(item, index) in orderInfo.product" :key="index" class="product-item">
<view class="product-image li-flex li-justify-between li-items-center li-mt-30 li-px-40">
<view class="image-container" @click="previewImage(item.picture)">
<image :src="item.picture" 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 li-w-500">
<view class="li-flex li-flex-col li-items-end">
<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">{{item.num}}</text>
</view>
<view class="li-text-24 li-text-#999 li-mt-10">商品规格: {{item.spec_name}}</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-#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">商品名称: {{item.product_name}}</text>
</view>
</view>
</view>
<view v-if="index !== orderInfo.product.length - 1" class="item-divider"></view>
</view>
<view class="order-info li-mt-30 li-px-30">
<view class="info-grid">
<view class="info-item">
<view class="li-flex li-items-center">
<text class="ri-barcode-line li-text-36 li-text-#0070F0"></text>
<text class="li-text-30 li-text-#333 li-ml-15">订单号</text>
</view>
<view class="info-content">
<text class="li-text-24 li-text-#999 li-mt-4">{{orderInfo.order_no}}</text>
</view>
</view>
<view class="info-item">
<view class="li-flex li-items-center">
<text class="ri-calendar-line li-text-36 li-text-#0070F0"></text>
<text class="li-text-30 li-text-#333 li-ml-15">下单时间</text>
</view>
<view class="info-content">
<text class="li-text-24 li-text-#999 li-mt-4">{{orderInfo.create_time}}</text>
</view>
</view>
<view class="info-item">
<view class="li-flex li-items-center">
<text class="ri-user-line li-text-36 li-text-#0070F0"></text>
<text class="li-text-30 li-text-#333 li-ml-15">操作人</text>
</view>
<view class="info-content">
<text class="li-text-24 li-text-#999 li-mt-4">{{userInfo.realname}}</text>
</view>
</view>
<view class="info-item">
<view class="li-flex li-items-center">
<text class="ri-store-line li-text-36 li-text-#0070F0"></text>
<text class="li-text-30 li-text-#333 li-ml-15">负责仓库</text>
</view>
<view class="info-content">
<text
class="li-text-24 li-text-#999 li-mt-4">{{orderInfo.distribute_name}}</text>
</view>
</view>
<view class="info-item">
<view class="li-flex li-items-center">
<text class="ri-truck-line li-text-36 li-text-#0070F0"></text>
<text class="li-text-30 li-text-#333 li-ml-15">来源</text>
</view>
<view class="info-content">
<text class="li-text-24 li-text-#999 li-mt-4">{{orderInfo.supplier_name}}</text>
</view>
</view>
<view class="info-item">
<view class="li-flex li-items-center">
<text class="ri-price-tag-3-line li-text-36 li-text-#0070F0"></text>
<text class="li-text-30 li-text-#333 li-ml-15">订单类型</text>
</view>
<view class="info-content">
<text
class="li-text-24 li-text-#999 li-mt-4">{{orderInfo.type==1?'普通订单':(orderInfo.type==2?'秒杀订单':'拼团订单')}}</text>
</view>
</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-#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-#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-#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-#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>
</scroll-view>
<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>
@click="GetorderStorageAct">
{{ 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>
<zero-loading type="wobble" v-if="loading"></zero-loading>
</view>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { scanCodeGet, orderStorageAct, orderRecord } from '@/api/ticket'
import { useNavigation } from '@/hooks/useNavigation'
import { useToast } from '@/uni_modules/wot-design-uni'
const Toast = useToast()
@ -206,6 +251,9 @@
const orderNumber = ref('') // 手动输入的订单号
const isScanning = ref(false) // 控制扫描动画
const isConfirming = ref(false) // 控制确认动画
const orderInfo = ref({}) //扫码订单详情
const userInfo = ref(uni.getStorageSync('userInfo'))
const loading = ref<boolean>(false)
// 入库记录
const verificationRecords = ref([
@ -220,16 +268,15 @@
const show9 = ref<boolean>(false)
// 扫码入库
const scanCode = () => {
const scanCode = async () => {
// 激活扫描动画
isScanning.value = true;
// 延迟显示弹窗并停止动画
setTimeout(() => {
isScanning.value = false;
show9.value = true;
// show9.value = true;
}, 800);
handleVerification('20250326214053344401')
return;
uni.scanCode({
success: (res) => {
@ -241,34 +288,51 @@
})
}
const confirmProduct = () => {
const GetorderStorageAct = async () => {
// 添加动画效果和成功提示
isConfirming.value = true;
// 模拟API确认时间
setTimeout(() => {
isConfirming.value = false;
show9.value = false;
// 显示成功提示并添加记录
try {
const res = await orderStorageAct({ order_id: orderInfo.value.order_id })
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);
show9.value = false;
// 请求入库记录接口
getOrderRecord()
} catch (error) {
Toast.error('入库失败')
} finally {
isConfirming.value = false;
}
}
const contOrderStorageAct = async () => {
try {
const res = await orderStorageAct({ order_id: orderInfo.value.order_id })
Toast.success('商品入库成功');
scanCode()
// 请求入库记录接口
getOrderRecord()
} catch (error) {
Toast.error('入库失败')
} finally {
}
}
// 处理入库逻辑
const handleVerification = async (code) => {
const res = await scanCodeGet({ code: code })
// 模拟多条商品数据
orderInfo.value = res.data
// 连续入库
if (continuousMode.value) {
contOrderStorageAct()
} else {
// 非连续入库
show9.value = true;
}
}
// 提交订单号入库
@ -281,53 +345,12 @@
orderNumber.value = '' // 清空输入
}
// 处理入库逻辑
const handleVerification = (code : string) => {
// 模拟入库处理过程
// 实际项目中这里应该调用API进行入库
// 模拟API调用延迟
if (continuousMode.value) {
// 添加一条处理中的记录
const newRecord = {
orderNumber: code,
time: formatDateTime(new Date()),
status: 'pending'
}
verificationRecords.value.unshift(newRecord)
// 模拟API请求处理时间
setTimeout(() => {
// 模拟随机结果 (实际项目中应根据API响应决定)
const isSuccess = Math.random() > 0.2 // 80%概率成功
// 更新记录状态
const record = verificationRecords.value.find(r => r.orderNumber === code && r.status === 'pending')
if (record) {
record.status = isSuccess ? 'success' : 'fail'
}
// 显示结果提示
Toast[isSuccess ? 'success' : 'fail'](isSuccess ? '入库成功' : '入库失败')
}, 800)
} else {
// 非连续模式 - 直接跳转到详情页
Toast.loading('入库中...')
// 模拟API请求
setTimeout(() => {
Toast.close()
// 这里应该根据实际API响应决定是否跳转
// 模拟80%概率成功
if (Math.random() > 0.2) {
// 跳转到详情页，传递订单号参数
uni.navigateTo({
url: `/pagesA/verification/detail?orderNumber=${code}`
})
} else {
Toast.error('入库失败，请重试')
}
}, 800)
const getOrderRecord = async () => {
try {
const res = await orderRecord({ page: 1, limit: 10, type: 1 })
verificationRecords.value = res.data
} catch (error) {
} finally {
}
}
@ -366,25 +389,19 @@
}
// 打开图片预览
const previewImage = () => {
const previewImage = (imageUrl) => {
uni.previewImage({
urls: ['../../static/swiper/1.png'],
urls: [imageUrl],
current: 0,
indicator: 'number',
loop: false,
success: () => {
console.log('预览成功');
},
fail: (err) => {
console.error('预览失败', err);
// 失败后的备选方案
Toast.info('图片预览加载失败');
}
});
loop: true
})
}
onLoad(() => {
checkRouteStack()
// 请求入库记录接口
getOrderRecord()
})
</script>
@ -425,7 +442,7 @@
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);
@ -446,16 +463,16 @@
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%;
@ -465,7 +482,7 @@
left: 10%;
animation: scanAnimation 2s ease-in-out infinite;
opacity: 0.2;
&.scan-active {
opacity: 1;
animation: scanAnimation 0.8s ease-in-out infinite;
@ -485,7 +502,7 @@
z-index: -1;
animation: ripple 2s linear infinite;
}
&::before {
content: '';
position: absolute;
@ -505,35 +522,42 @@
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
@keyframes pulse {
0%, 100% {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10rpx);
}
}
@keyframes scanLight {
0% {
left: -100%;
}
50%, 100% {
50%,
100% {
left: 100%;
}
}
@keyframes iconPulse {
0% {
opacity: 0.7;
transform: scale(0.95);
}
100% {
opacity: 1;
transform: scale(1.05);
@ -545,9 +569,11 @@
top: 20%;
opacity: 0.5;
}
50% {
opacity: 1;
}
100% {
top: 80%;
opacity: 0.5;
@ -559,10 +585,12 @@
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);
@ -629,33 +657,54 @@
}
.product-confirm-popup {
.product-scroll {
/* #ifdef MP-WEIXIN */
max-height: calc(80vh - 280rpx);
/* #endif */
/* #ifdef APP-PLUS || H5 */
max-height: calc(80vh - 380rpx);
/* #endif */
}
.product-item {
position: relative;
padding: 20rpx 0;
.item-divider {
position: absolute;
bottom: 0;
left: 40rpx;
right: 40rpx;
height: 2rpx;
background: rgba(0, 0, 0, 0.05);
}
}
.product-header {
padding: 20rpx 30rpx;
border-bottom: 1rpx solid #eee;
padding: 30rpx;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
}
.product-content {
height: 850rpx ;
overflow-y: auto;
padding-bottom: 30rpx;
}
.product-image {
.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;
@ -667,57 +716,55 @@
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
&:active {
.product-img {
transform: scale(1.1);
}
.image-overlay {
transition: opacity 0.3s;
&:active {
opacity: 1;
}
}
}
.product-info {
.info-item {
padding: 20rpx 0;
border-bottom: 1rpx solid #eee;
transition: background-color 0.2s ease;
&:active {
background-color: rgba(0, 112, 240, 0.05);
}
}
.order-info {
margin-top: 20rpx;
padding-top: 20rpx;
border-top: 2rpx solid rgba(0, 0, 0, 0.05);
.info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30rpx;
padding: 20rpx 0;
.info-item {
display: flex;
flex-direction: column;
justify-content: center;
padding: 20rpx 20rpx 20rpx;
background: #f8faff;
border-radius: 16rpx;
&:last-child {
border-bottom: none;
}
.info-content {
display: flex;
flex-direction: column;
margin-left: 4rpx;
flex: 1;
}
}
}
}
.action-buttons {
position: sticky;
bottom: 0;
left: 0;
right: 0;
/* #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;
padding: 30rpx;
padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
background: #fff;
border-top: 2rpx solid rgba(0, 0, 0, 0.05);
.custom-shadow1 {
box-shadow: 0 8rpx 16rpx rgba(0, 112, 240, 0.2);
}
}
}
::v-deep .wd-status-tip__text{
margin: 0 auto !important;
}
</style>

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

@ -1,3 +1,66 @@
.li-font-550{font-weight:550}
.li-h-68{height:68rpx}
.li-items-center{align-items:center}
.li-justify-between{justify-content:space-between}
.li-justify-center{justify-content:center}
.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}
.li-w-full-80{width:80%}
.li-w-full-85{width:85%}
.li-w-full-90{width:90%}
.li-items-end{align-items:end}
.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-ml-20{margin-left:20rpx}
.li-ml-6{margin-left:6rpx}
.li-mr-10{margin-right:10rpx}
.li-mr-4{margin-right:4rpx}
.li-mt-4{margin-top: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-pb-10{padding-bottom:10rpx}
.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-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-44{font-size:44rpx}
.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-center{text-align:center}
.li-text-ddd-color{color:rgb(221,221,221)}
.li-text-white{color:rgb(255,255,255)}
.li-w-500{width:500rpx}
.li-w-full-92{width:92%}