From a6c701250bff9b48a73f7950bba75b1d687c2b6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E6=96=87=E6=B6=9B?= <1909118034@qq.com>
Date: Fri, 28 Feb 2025 23:00:41 +0800
Subject: [PATCH] =?UTF-8?q?=E9=97=AE=E9=A2=98=E8=A7=A3=E7=AD=94=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/z-video/z-video.vue | 200 +++++++++++++++++++++++++++++++++
 pages.json                     |   7 ++
 pages/index/index.vue          |   9 +-
 pagesA/course/detail.vue       | 101 +++++++++++++++++
 unocss/a-hua-unocss/index.scss | 192 +++++++++++++++----------------
 5 files changed, 411 insertions(+), 98 deletions(-)
 create mode 100644 components/z-video/z-video.vue
 create mode 100644 pagesA/course/detail.vue

diff --git a/components/z-video/z-video.vue b/components/z-video/z-video.vue
new file mode 100644
index 0000000..fe58236
--- /dev/null
+++ b/components/z-video/z-video.vue
@@ -0,0 +1,200 @@
+<template>
+	<view class="content">
+		<video id="playVideo" class="top-video" :src="url" :picture-in-picture-mode="wxsetPicture"
+			:show-screen-lock-button="lockButton" :show-casting-button="showCasting" autoplay="true"
+			@fullscreenchange="fullscreenchange" @controlstoggle="controlstoggle">
+
+			<cover-view class="video-heizith-menu" @tap.stop="showSpeedOptions"
+				v-show="isShowControl">{{playbackRateItem == '1.0'?'倍数':playbackRateItem+'x'}}</cover-view>
+			<cover-view v-if="showSpeedModal" class="modal" @tap.stop="hideSpeedOptions">
+				<cover-view class="modal-content" @click.stop>
+					<cover-view class="modal-content-txt">
+						倍数
+					</cover-view>
+					<cover-view class="speed-option" v-for="(items,indexs) in playbackRateList" :key="indexs"
+						@tap.stop="changeSpeed" :data-rate="items" :class="{ active: items == playbackRateItem }">
+						{{ items }}X
+					</cover-view>
+				</cover-view>
+			</cover-view>
+
+		</video>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			showCasting: { // 是否显示投屏按钮
+				type: Boolean,
+				default: false
+			},
+			lockButton: { // 是否显示锁屏按钮
+				type: Boolean,
+				default: false
+			},
+			isSpeed: { // 是否打开倍速功能
+				type: Boolean,
+				default: false
+			},
+			url: { // 视频路径
+				type: String,
+				default: ''
+			},
+		},
+		data() {
+			return {
+				wxsetPicture: [
+					'push',
+					'pop'
+				],
+				// 是否显示视频控件
+				isShowControl: false,
+				// 倍速播放
+				playbackRateItem: '1.0',
+				// 倍速设置选项列表
+				playbackRateList: ['0.5', '0.8', '1.0', '1.25', '1.5', '2.0'],
+				showSpeedModal: false,
+				videoCtx: null,
+				fullScreen: false
+			}
+		},
+		methods: {
+			// 唤起倍速操作
+			showSpeedOptions() {
+				this.showSpeedModal = true;
+			},  
+			// 隐藏倍速操作
+			hideSpeedOptions() {
+				this.showSpeedModal = false;
+			},
+
+			// 倍速切换
+			changeSpeed(e) {
+				this.playbackRateItem = e.currentTarget.dataset.rate;
+				let rate = Number(this.playbackRateItem);
+				this.videoCtx = uni.createVideoContext('playVideo', this);
+				this.videoCtx.playbackRate(rate);
+				this.hideSpeedOptions();
+			},
+
+			// 是否显示控件
+			controlstoggle(e) {
+				if (!e.detail.show) {
+					this.isShowControl = false;
+					return;
+				}
+				this.isShowControl = true;
+			},
+
+			// 全屏操作
+			fullscreenchange(e) {
+				let that = this;
+				that.fullScreen = e.detail.fullScreen;
+				if (that.fullScreen) {
+					wx.setPageOrientation({
+						orientation: 'landscape'
+					});
+				} else {
+					wx.setPageOrientation({
+						orientation: 'portrait'
+					});
+				}
+				// uni.showToast({
+				// 	title: that.fullScreen ? '开启全屏' : '关闭全屏',
+				// 	icon: 'none',
+				// 	duration: 1500
+				// });
+			},
+		}
+	}
+</script>
+
+
+<style>
+	page {
+		width: 100%;
+		height: auto;
+	}
+
+	.content {
+		position: relative;
+		width: 750rpx;
+		height: auto;
+		/* min-height: 100vh; */
+		margin: 0;
+		padding: 0;
+		background-color: #fff;
+
+	}
+
+	.top-video {
+		width: 100%;
+		height: 422rpx;
+	}
+
+	.video-heizith-menu {
+		/* position: absolute; */
+		position: fixed; 
+		right: 30rpx;
+		bottom: 20%;
+		z-index: 998;
+		font-size: 20rpx;
+		width: 52rpx;
+		height: 40rpx;
+		text-align: center;
+		line-height: 38rpx;
+		border: 1rpx solid #c9cccc;
+		border-radius: 8rpx;
+		color: #c9cccc;
+	}
+
+	.modal {
+		position: fixed;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 9999;
+	}
+
+	.modal-content {
+		position: absolute;
+		left: 46rpx;
+		bottom: 20%;
+		z-index: 9999;
+
+	}
+
+	.modal-content-txt {
+		text-align: left;
+		padding-bottom: 20rpx;
+		color: #fff;
+		font-size: 18rpx;
+		z-index: 9999;
+	}
+
+	.speed-option {
+		float: left;
+		width: 72rpx;
+		height: 72rpx;
+		text-align: center;
+		line-height: 68rpx;
+		font-size: 22rpx;
+		color: #fff;
+		background-color: rgba(0, 0, 0, 0.3);
+		border-radius: 4rpx;
+		margin-right: 10rpx;
+		z-index: 9999;
+
+
+	}
+
+	.speed-option.active {
+		/* border-bottom: 2rpx solid #fd750b; */
+		color: #fd750b;
+	}
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 0d23aab..8c5fe80 100644
--- a/pages.json
+++ b/pages.json
@@ -96,6 +96,13 @@
 					"navigationStyle": "custom",
 					"navigationBarTitleText": "工单详情"
 				}
+			},
+			{
+				"path": "course/detail",
+				"style": {
+					"navigationBarTextStyle": "black",
+					"navigationBarTitleText": "视频详情"
+				}
 			}
 		]
 	}],
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 74f6648..e53c0cd 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -68,7 +68,7 @@
 		<view class="li-w-88% li-mx-auto li-mt-30">
 			<text class="li-ml-35 li-text-30">常见问题解答</text>
 			<view class="li-bg-white li-rd-10 li-mt-20 li-px-25">
-				<view v-for="(item,index) in problemList" :key="index"
+				<view v-for="(item,index) in problemList" :key="index" @click="toPages({type:'course'})"
 					class="li-flex justify-between li-py-25 li-bottom-border">
 					<view class="li-w-70%">
 						<text class="li-text-28 li-text-#343333 li-two-line ">{{item.title}}</text>
@@ -223,12 +223,17 @@
 				});
 				break;
 			case 'my_order':
-			console.log('00000');
+				console.log('00000');
 				// 工单大厅
 				uni.navigateTo({
 					url: '/pagesA/my_order/list'
 				});
 				break;
+			case 'course':
+				// 课程详情
+				uni.navigateTo({
+					url: '/pagesA/course/detail'
+				});
 			default:
 				break;
 		}
diff --git a/pagesA/course/detail.vue b/pagesA/course/detail.vue
new file mode 100644
index 0000000..6268ca3
--- /dev/null
+++ b/pagesA/course/detail.vue
@@ -0,0 +1,101 @@
+<template>
+	<view>
+		<wd-sticky :offset-top="0.01">
+			<zVideo url="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" :isSpeed="isSpeed"
+				:showCasting="showCasting" :lockButton="lockButton">
+			</zVideo>
+		</wd-sticky>
+		<view class="li-flex-col li-m-30 li-bg-white">
+			<view class="li-text-32 li-text-#000000">
+				如何新建工单
+			</view>
+			<view class="li-font-400 li-text-24 li-text-#595959 li-mt-10">
+				新建工单的作用与感悟
+			</view>
+			<view class="li-mt-30">
+				<rich-text :nodes="strings"></rich-text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	import zVideo from '@/components/z-video/z-video.vue';
+	import { ref } from 'vue'
+	//是否打开倍速功能
+	const isSpeed = ref<boolean>(true)
+	//是否显示投屏按钮
+	const showCasting = ref<boolean>(true)
+	//是否显示锁屏按钮
+	const lockButton = ref<boolean>(true)
+
+	const strings = `![流程图标] <span style="color: #2E86C1; font-weight: bold;">一、工单提交</span>
+1. 多渠道受理
+业主可通过以下方式发起工单：
+▸ 线上渠道：物业APP/微信公众号-「报事报修」模块
+▸ 电话申报：24小时服务热线（400-XXX-XXXX）
+▸ 现场登记：物业服务中心前台（8:30-18:30）
+
+2. 信息完整性
+需包含：
+✓ 问题类型（水电/设施/环境等）
+✓ 具体位置（楼栋-单元-房号）
+✓ 现场照片/视频（建议上传）
+✓ 紧急程度（普通/加急/特急）
+
+![分类图标] <span style="color: #28B463; font-weight: bold;">二、工单分类派发</span>
+智能分派系统
+
+系统自动识别：
+▶ 水电类→工程部（红色标签）
+▶ 保洁类→环境组（绿色标签）
+▶ 安保类→秩序部（蓝色标签）
+
+人工复核机制：
+
+值班主管15分钟内确认分派合理性
+
+跨部门工单需标注协同处理要求
+
+响应时效标准：
+🔔 特急工单（如爆管断电）→10分钟响应
+🔔 加急工单（如电梯故障）→30分钟响应
+🔔 普通工单→2小时内响应
+![处理图标] <span style="color: #D35400; font-weight: bold;">三、现场处理规范</span>
+1. 服务标准
+
+维修人员佩戴记录仪上岗
+
+入户前穿戴鞋套/出示工牌
+
+现场评估后告知预计处理时间
+
+2. 过程记录
+📝 系统实时上传：
+
+维修前/中/后对比照片
+
+更换配件型号及品牌
+
+业主签字确认单（电子/纸质）
+
+![验收图标] <span style="color: #8E44AD; font-weight: bold;">四、工单验收闭环</span>
+三级验收机制：
+
+业主满意度评分（1-5星）
+
+品质部24小时内电话回访
+
+月度抽取20%工单现场复检
+
+数据应用：
+📊 生成《服务响应分析报表》
+📊 纳入供应商考核指标体系
+
+温馨提示：工单全程可通过「服务进度查询」功能实时追踪，重大复杂问题启动<mark>联席会议制度</mark>，确保48小时内出具解决方案。
+`
+</script>
+
+<style lang="scss">
+	
+</style>
\ No newline at end of file
diff --git a/unocss/a-hua-unocss/index.scss b/unocss/a-hua-unocss/index.scss
index 2f5a739..c58cfd8 100644
--- a/unocss/a-hua-unocss/index.scss
+++ b/unocss/a-hua-unocss/index.scss
@@ -1,90 +1,17 @@
 
-.bg-f9f9f9{background-color:rgb(249,249,249)}
-.bg-FFFFFF{background-color:rgb(255,255,255)}
-.border-4-white{border-style:solid;border-color:rgb(255,255,255);border-width:4rpx}
-.li-bg-white{background-color:rgb(255,255,255)}
-.li-flex{display:flex}
-.li-flex-col{flex-direction:column}
-.li-font-bold{font-weight:bold}
-.li-h-100{height:100rpx}
-.li-h-240{height:240rpx}
-.li-h-250{height:250rpx}
-.li-h-50{height:50rpx}
-.li-h-60{height:60rpx}
 .li-items-center{align-items:center}
-.li-items-end{align-items:end}
-.li-justify-between{justify-content:space-between}
-.li-justify-center{justify-content:center}
-.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-20{margin-right:20rpx}
-.li-mr-50{margin-right:50rpx}
-.li-mt-20{margin-top:20rpx}
-.li-mt-26{margin-top:26rpx}
-.li-mt-30{margin-top:30rpx}
-.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-mx-auto{margin-left:auto;margin-right:auto}
-.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-010B3E-color{color:rgb(1,11,62)}
-.li-text-19171B-color{color:rgb(25,23,27)}
-.li-text-20{font-size:20rpx}
-.li-text-24{font-size:24rpx}
-.li-text-26{font-size:26rpx}
-.li-text-32{font-size:32rpx}
-.li-text-34{font-size:34rpx}
-.li-text-38{font-size:38rpx}
-.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-100{width:100rpx}
-.li-w-240{width:240rpx}
-.li-w-50{width:50rpx}
-.li-w-60{width:60rpx}
-.li-w-full-70{width:70%}
-.li-w-full-94{width:94%}
-.li-font-550{font-weight:550}
-.li-h-130{height:130rpx}
-.li-h-68{height:68rpx}
-.li-mt-100{margin-top:100rpx}
-.li-mt-28{margin-top:28rpx}
-.li-mt-300{margin-top:300rpx}
-.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-2EA1EA-color{color:rgb(46,161,234)}
-.li-text-a5a5a5-color{color:rgb(165,165,165)}
-.li-w-130{width:130rpx}
-.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%}
 .items-center{align-items:center}
+.li-justify-center{justify-content:center}
 .justify-end{justify-content:end}
 .justify-center{justify-content:center}
+.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-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}
@@ -97,6 +24,9 @@
 .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}
@@ -105,7 +35,10 @@
 .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)}
@@ -113,19 +46,102 @@
 .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-300{margin-top:300rpx}
+.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-h-100{height:100rpx}
 .li-ml-20{margin-left:20rpx}
 .li-ml-200{margin-left:200rpx}
 .li-ml-30{margin-left:30rpx}
 .li-mr-10{margin-right:10rpx}
 .li-mr-30{margin-right:30rpx}
 .li-pt-2{padding-top:2rpx}
+.li-py-20{padding-top:20rpx;padding-bottom:20rpx}
+.li-rd-full-50{border-radius:50%}
 .li-text-25{font-size:25rpx}
 .li-text-35{font-size:35rpx}
 .li-text-42{font-size:42rpx}
 .li-text-46{font-size:46rpx}
+.li-w-100{width:100rpx}
+.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-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-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-rd-20{border-radius:20rpx}
+.li-rd-tl-30-important{border-top-left-radius:30rpx !important}
+.li-rd-tr-30-important{border-top-right-radius:30rpx !important}
+.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)}
+.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%}
+.li-ml-15{margin-left:15rpx}
+.li-ml-6{margin-left:6rpx}
+.li-mr-6{margin-right: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-323232-color{color:rgb(50,50,50)}
+.li-text-333333-color{color:rgb(51,51,51)}
+.li-text-36{font-size:36rpx}
+.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-bottom-0{bottom:0}
 .li-fixed{position:fixed}
@@ -133,13 +149,10 @@
 .li-items-start{align-items:start}
 .li-mb-12{margin-bottom:12rpx}
 .li-mb-20{margin-bottom:20rpx}
-.li-ml-15{margin-left:15rpx}
 .li-mr-12{margin-right:12rpx}
 .li-mr-3{margin-right:3rpx}
-.li-mr-6{margin-right:6rpx}
 .li-mt-40{margin-top:40rpx}
 .li-pb-25{padding-bottom:25rpx}
-.li-pb-30{padding-bottom:30rpx}
 .li-pl-20{padding-left:20rpx}
 .li-pl-30{padding-left:30rpx}
 .li-pr-30{padding-right:30rpx}
@@ -150,25 +163,12 @@
 .li-text-009aff-color{color:rgb(0,154,255)}
 .li-text-40{font-size:40rpx}
 .li-text-5f5f5f-color{color:rgb(95,95,95)}
-.li-text-70{font-size:70rpx}
-.li-text-9a9a9a-color{color:rgb(154,154,154)}
 .li-text-right{text-align:right}
 .li-w-110{width:110rpx}
 .li-w-400{width:400rpx}
-.li-w-full-100{width:100%}
-.li-w-full-92{width:92%}
 .overflow-hidden{overflow:hidden}
 
 .li-mb-25{margin-bottom:25rpx}
-.li-p-15{padding:15rpx}
-.li-pb-15{padding-bottom:15rpx}
-.li-pt-25{padding-top:25rpx}
 .li-text-999-color{color:rgb(153,153,153)}
 
-.li-ml-6{margin-left:6rpx}
-.li-pt-4{padding-top:4rpx}
-.li-text-323232-color{color:rgb(50,50,50)}
-.li-text-333333-color{color:rgb(51,51,51)}
-.li-text-36{font-size:36rpx}
-.li-text-ff0000-color{color:rgb(255,0,0)}