评论

pages.json

@@ -301,6 +301,14 @@
 				"navigationBarTitleText" : "太湖公益"
 				// "enablePullDownRefresh": true
 			}
+		},
+		{
+			"path" : "pages/course/learn",
+			"style" : 
+			{
+				"navigationBarTitleText" : "课程学习",
+				"enablePullDownRefresh": true
+			}
 		}		
 	],
 	"globalStyle": {

pages/course/courseDetail.vue

@@ -34,13 +34,13 @@
 						size="mini" type="primary" />
 				</view>
 				<view class="showAll zhezhe" v-show="fold">
-					<view class="flexbox icon" @click="tozhankai()"><u-icon class="icon_item" name="arrow-left-double" color="#258feb"
-							size="28"></u-icon></view>
+					<view class="flexbox icon" @click="tozhankai()"><u-icon class="icon_item" name="arrow-left-double"
+							color="#258feb" size="28"></u-icon></view>
 					<text>查看全部</text>
 				</view>
 				<view class="showFew zhezhe" v-show="!fold">
-					<view class="flexbox icon" @click="toZhedie()"><u-icon class="icon_item1" name="arrow-left-double" color="#258feb"
-							size="28"></u-icon></view>
+					<view class="flexbox icon" @click="toZhedie()"><u-icon class="icon_item1" name="arrow-left-double"
+							color="#258feb" size="28"></u-icon></view>
 					<text>收 起</text>
 				</view>
 				<view class="video_audio_audition_list">
@@ -68,7 +68,7 @@
 			</view>
 			<u-divider v-else text="暂无数据"></u-divider>
 			<!-- <uni-section class="mb-10" title="教学体系" type="line"> -->
-				<!-- <template v-slot:right>
+			<!-- <template v-slot:right>
 								查看更多 >>
 							</template> -->
 			<!-- </uni-section> -->
@@ -101,17 +101,89 @@
 			</view>
 			<uni-section class="mb-10 graybg" title="留言板" type="line">
 			</uni-section>
-			<u-popup :show="pricespop" :round="10" @close="closePup">
+			<view class="liuyanBox">
+				<view class="box">
+					<view class="firstLeve flexbox leve">
+						<view class="imgbox">
+							<view class="img">
+								<image src="@/static/logo.png" mode="aspectFit"></image>
+							</view>
+						</view>
+						<view class="contentBox">
+							<view class="name">
+								这是名字这是名字这是名字
+							</view>
+							<view class="content">
+								这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
+							</view>
+							<view class="others flexbox">
+								<view class="dianzan flexbox">
+									<!-- <u-icon name="heart-fill" color="#999" size="24"></u-icon> -->
+									<u-icon name="heart" color="#999" size="24"></u-icon>
+									<text>387</text>
+								</view>
+								<view class="pinglun flexbox" @click="addSay()">
+									<!-- <u-icon name="chat-fill" color="#999" size="24"></u-icon> -->
+									<u-icon name="chat" color="#999" size="24"></u-icon>
+									<text>555</text>
+								</view>
+								<text>2024-06-12 09：15</text>
+							</view>
+						</view>
+					</view>
+					<!--  -->
+					<view class="firstLeve flexbox leve">
+						<view class="imgbox">
+							<view class="img">
+								<image src="@/static/logo.png" mode="aspectFit"></image>
+							</view>
+						</view>
+						<view class="contentBox">
+							<view class="name">
+								这是名字这是名字这是名字
+							</view>
+							<view class="content">
+								这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
+							</view>
+							<view class="others flexbox">
+								<view class="dianzan flexbox">
+									<!-- <u-icon name="heart-fill" color="#999" size="24"></u-icon> -->
+									<u-icon name="heart" color="#999" size="24"></u-icon>
+									<text>387</text>
+								</view>
+								<view class="pinglun flexbox">
+									<!-- <u-icon name="chat-fill" color="#999" size="24"></u-icon> -->
+									<u-icon name="chat" color="#999" size="24"></u-icon>
+									<text>555</text>
+								</view>
+								<text>2024-06-12 09：15</text>
+							</view>
+						</view>
+					</view>
+					<!--  -->
+				</view>
+			</view>
+			<u-popup key="1" :show="pricespop" :round="10" @close="closePup">
 				<view class="proListPrice" v-if="proPriceList.length > 0">
 					<view class="title">
-						请选择您的购买时长
+						请选择
 					</view>
 					<view class="list">
-						<view class="item" v-for="(item,index) in proPriceList" :key="index" @click="choosePrice(item)">
+						<view :class="['item',curProId == item.productId ? 'active' : '']"
+							v-for="(item,index) in proPriceList" :key="index" @click="choosePrice(item)">
 							{{item.productName}} - ￥{{item.price}}
 						</view>
 					</view>
-
+					<view class="tbn flexbox" style="padding-bottom: 20px;">
+						<view class="saveBtnss buybtn flexbox" @click="">
+							<u-icon name="bag" color="#fff" size="28"></u-icon>
+							<text>立即购买</text>
+						</view>
+						<view class="saveBtnss gouwuche flexbox" @click="">
+							<uni-icons type="cart" size="28" style="color: #666;"></uni-icons>
+							<text>加入购物车</text>
+						</view>
+					</view>
 				</view>
 			</u-popup>
 			<view>
@@ -119,6 +191,34 @@
 					:iconStyle="iconStyle"></u-back-top>
 			</view>
 			<!-- </view> -->
+			<!-- 评论弹出 -->
+			<u-popup key="2" :show="sayVisible" :round="10" @close="sayclose">
+				<view class="contentBox">
+					<view class="input_addIcon flexbox">
+						<view class="editorBox">
+							<editor id="editor" class="ql-container" placeholder="开始输入..." show-img-size
+								show-img-toolbar show-img-resize @statuschange="onStatusChange" :read-only="readOnly"
+								@ready="onEditorReady">
+							</editor>
+						</view>
+						<view class="icon flexbox" >
+							<u-icon v-show="!showEdit " @click="chooseImg" name="plus" color="#2979ff" size="28"></u-icon>
+							<u-icon v-show="showEdit " @click="editEditor" name="edit-pen" color="#2979ff" size="28"></u-icon>
+						</view>
+					</view>
+					<!-- 选择表情还是图片 -->
+					<view class="chooseImgType flexbox" v-if="showImgType">
+						<text class="addEmoji" @click="addEmoji">表情</text><text @click="addPic">图片</text>
+					</view>
+					<!-- 表情 -->
+					<view class="emoji" v-if="showEmoji">
+						<text class="" @click="closeEmoji">关闭</text>
+						<emotion @emotion="handleEmj" :height="220" windowWidth="windowWidth">
+						</emotion>
+					</view>
+				</view>
+				
+			</u-popup>
 			<public-module></public-module>
 			<z-navigation></z-navigation>
 			<!-- <music-play :playData="playData"></music-play> -->
@@ -128,6 +228,8 @@
 
 <script>
 	// import musicPlay from '@/components/music.vue'
+	import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
+	import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
 	import $http from '@/config/requestConfig.js';
 	var clear;
 	import {
@@ -166,14 +268,24 @@
 				curId: null,
 				curIndex: 0,
 				proPriceList: [],
-				fold:true,
+				fold: true,
+				curProId: null,
+				sayVisible: false,
 
+				// 评论
+				readOnly: false,
+				formats: {},
+				showEmoji:false,
+				showImgType: false,
+				showEdit:false,
+				windowWidth:0,
 			};
 		},
 		//第一次加载
 		onLoad(e) {
 			// 隐藏原生的tabbar
 			uni.hideTabBar();
+			this.windowWidth = uni.getSystemInfoSync().windowWidth;
 			// this.pageTitle = e.title
 			console.log(e, '传入分类id')
 			// this.getCateList(this.courseId)
@@ -199,9 +311,84 @@
 		},
 		components: {
 			// musicPlay
+			emotion,
+			
 		},
 		//方法
 		methods: {
+			// 评论
+			// 获得输入的表情数组
+			handleEmj(i) {
+				console.log(i, 'i---------');
+				this.editorCtx.insertImage({
+											src: i.emotion,
+											alt: '图像',
+											success: function() {
+												console.log('insert image success')
+											}
+										})				
+				if (i.emotioni == '[em_98]') {
+					//匹配最后一个表情符号并删除11。
+					// this.formData.content = this.formData.content.replace(/(\[[^\]]+\]|[\s\S])$/, '');
+					// if (this.emoji.length > 0) {
+					// 	this.emoji = this.emoji.slice(0, -1)
+					// }
+				} else {
+					
+					// this.emoji.push({
+					// 	'tag': i.emotion,
+					// 	'name': i.emotioni
+					// })					
+					// this.formData.content += i.emotioni;
+				}
+			},
+			chooseImg(){
+				this.showImgType = true
+				this.showEdit = true
+			},
+			editEditor(){				
+				this.showImgType = false
+				this.showEdit = false
+				this.showEmoji = false
+				
+			},
+			closeEmoji(){
+				this.showEmoji = false
+				this.showEdit = false
+			},
+			addPic(){
+				// 上传图片
+			},
+			addEmoji(){
+				this.showEmoji = true
+				this.showImgType = false
+				// this.showEdit = true
+			},
+			onStatusChange(e) {
+							const formats = e.detail
+							this.formats = formats
+						},
+			readOnlyChange() {
+				this.readOnly = !this.readOnly
+			},
+			onEditorReady() {
+				// #ifdef MP-BAIDU
+				this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
+				// #endif
+
+				// #ifdef APP-PLUS || MP-WEIXIN || H5
+				uni.createSelectorQuery().select('#editor').context((res) => {
+					this.editorCtx = res.context
+				}).exec()
+				// #endif
+			},
+			// end
+			addSay(item) {
+				this.sayVisible = true
+			},
+			sayclose() {
+				this.sayVisible = false
+			},
 			getSuperMarketList() {
 				$http.request({
 						url: "medical/labelAndMarket/getMarketShopProductList",
@@ -270,6 +457,7 @@
 						if (res.code == 0) {
 							if (res.productList.length > 0) {
 								this.proPriceList = res.productList
+								this.curProId = this.proPriceList[0].productId
 							} else {
 								this.proPriceList = []
 							}
@@ -287,24 +475,29 @@
 			},
 			choosePrice(item) {
 				console.log(item, 'choosePrice')
-				uni.showModal({
-					title: '提示',
-					cancelText: '再想想',
-					content: `您正在购买 ${item.productName}，价格是${item.price}元，是否继续？`,
-					success: function(res) {
-						if (res.confirm) {
-							console.log('用户点击确定');
-						} else if (res.cancel) {
-							console.log('用户点击取消');
-						}
-					}
-				});
+				this.curProId = item.productId
+				// uni.showModal({
+				// 	title: '提示',
+				// 	cancelText: '再想想',
+				// 	content: `您正在购买 ${item.productName}，价格是${item.price}元，是否继续？`,
+				// 	success: function(res) {
+				// 		if (res.confirm) {
+				// 			console.log('用户点击确定');
+				// 		} else if (res.cancel) {
+				// 			console.log('用户点击取消');
+				// 		}
+				// 	}
+				// });
 			},
-			chooseChapter(item,index) {
+			chooseChapter(item, index) {
 				// 检查课程是否已经购买了 是否为试听
 				if (item.isAudition == 1) {
 					// 未购买仅试听
-					this.getPath(item, index)
+					// this.getPath(item, index)
+					uni.navigateTo({
+						url: `/pages/course/learn?courseId=${this.course.id}&catalogueId
+=${this.curId}&chapterId=${item.id}`
+					})
 				} else if (this.librayList[this.curIndex].isBuy == 1) {
 					uni.showModal({
 						title: '提示',
@@ -336,28 +529,28 @@
 					})
 				}
 			},
-			getPath(item,index){
+			getPath(item, index) {
 				$http.request({
-						url: "sociology/course/getCourseCatalogueChapterDetail",
-						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
-						data: {
-							"id": item.id
-						},
-						header: { //默认 无 说明：请求头
-							'Content-Type': 'application/json'
-						},
-					}).then(res => {
-						if (res.code == 0) {
-							
-							// if (res.page.length > 0) {
-							// 	this.learnList = res.page
-							// } else {
-							// 	this.learnList = []
-							// }
-						}
-						// console.log(res,'-------------')
-				
-					});
+					url: "sociology/course/getCourseCatalogueChapterDetail",
+					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+					data: {
+						"id": item.id
+					},
+					header: { //默认 无 说明：请求头
+						'Content-Type': 'application/json'
+					},
+				}).then(res => {
+					if (res.code == 0) {
+
+						// if (res.page.length > 0) {
+						// 	this.learnList = res.page
+						// } else {
+						// 	this.learnList = []
+						// }
+					}
+					// console.log(res,'-------------')
+
+				});
 			},
 			clicklib(item, index) {
 				if (item.id == this.curId) {
@@ -367,10 +560,10 @@
 				this.curId = item.id
 				this.getChapterList(item.id)
 			},
-			toZhedie(){
+			toZhedie() {
 				this.fold = true
 			},
-			tozhankai(){
+			tozhankai() {
 				this.fold = false
 			},
 			getChapterList(id) {
@@ -409,13 +602,84 @@
 </script>
 <style lang="scss" scoped>
 	@import '@/style/mixin.scss';
-	.showFew{
+	::v-deep .contentBox{
+		.ql-editor{font-size: 26rpx ; font-style: normal; min-height: 50rpx !important; padding: 20rpx;}
+		img{width: 20px;}
+	}
+	.input_addIcon{}
+	.editorBox{width: calc(100vw - 100rpx);}
+	.ql-container{ min-height: 50rpx !important; height: auto!important; border: 1px solid #eee; border-radius: 50rpx;}
+	.contentBox {
+		padding: 20rpx;
+		.icon{width: 80rpx; justify-content: center; margin-left: 10rpx; height: 80rpx; align-items: center; border: 1px solid #eee; border-radius: 50rpx;}
+		.addEmoji{margin-right: 20rpx;}
+	}
+
+	// 
+
+	.liuyanBox {
+		padding: 0 20rpx;
+		margin-top: 20rpx;
+	}
+
+	.leve {
+		margin-bottom: 20rpx;
+
+		.imgbox {
+			margin-right: 10rpx;
+		}
+
+		.img {
+			width: 80rpx;
+			height: 80rpx;
+			border-radius: 100%;
+
+			image {
+				width: 100%;
+				height: 80rpx;
+			}
+		}
+
+		.contentBox {
+			font-size: 24rpx;
+
+			.name {
+				color: #999;
+				@include toe();
+			}
+
+			.content {
+				color: #333;
+				font-size: 26rpx;
+				margin-top: 10rpx;
+			}
+
+			.others {
+				margin-top: 10rpx;
+				color: #999;
+				align-items: center;
+
+				.dianzan {
+					align-items: center;
+				}
+
+				.pinglun {
+					align-items: center;
+					margin-left: 10rpx;
+					margin-right: 20rpx;
+				}
+			}
+		}
+	}
+
+	.showFew {
 		.icon_item1 {
 			-moz-transform: rotate(90deg);
 			-webkit-transform: rotate(90deg);
 		}
 	}
-	.showAll{
+
+	.showAll {
 		.icon_item {
 			-moz-transform: rotate(-90deg);
 			-webkit-transform: rotate(-90deg);
@@ -424,7 +688,8 @@
 
 	.fold {
 		// 折叠状态
-		height: 500rpx; overflow: hidden;
+		height: 500rpx;
+		overflow: hidden;
 	}
 
 	.linkPro {
@@ -435,7 +700,9 @@
 	}
 
 	.zhezhe {
-		text-align: center; width: 100%; box-sizing: border-box;
+		text-align: center;
+		width: 100%;
+		box-sizing: border-box;
 		padding: 20rpx;
 		z-index: 1;
 		position: absolute;
@@ -444,17 +711,21 @@
 		background-position: left bottom;
 		background-image: url(@/static/zhedieBg.png);
 		background-repeat: repeat-x;
-		
+
 		.icon {
-			justify-content: center;			
-		}		
-		
+			justify-content: center;
+		}
+
 		text {
 			color: $themeColor ;
 			font-size: 26rpx;
 		}
 	}
-	.graybg{background-color: $containerColor;}
+
+	.graybg {
+		background-color: $containerColor;
+	}
+
 	.scroll-view_H {
 		background-color: #fff;
 		white-space: nowrap;
@@ -500,17 +771,64 @@
 		}
 
 		.list {
+			padding: 0 10px;
 			padding-bottom: 20rpx;
 
 			.item {
 				font-size: 26rpx;
-				color: $themeColor;
+				color: #333;
+				margin-bottom: 10rpx;
 				line-height: 80rpx;
-				border-bottom: 1px solid #eee;
+				border-radius: 50rpx;
+				border: 1px solid #eee;
+			}
+
+			.item.active {
+				color: $themeColor;
+				border: 1px solid $themeColor;
 			}
 
 			.item:last-child {
-				border-bottom: none
+				// border-bottom: none
+			}
+		}
+
+		.tbn {
+			justify-content: center;
+		}
+
+		.buybtn {
+			background-color: #00d8df;
+			margin: 0;
+			margin-right: 20rpx;
+
+			text {
+				color: #fff;
+			}
+		}
+
+		.saveBtnss {
+			align-items: center;
+			justify-content: center;
+			height: 80rpx;
+
+			// width: 46%;
+			overflow: hidden;
+			border-radius: 50rpx;
+
+			text {
+				padding-left: 10rpx;
+				font-size: 28rpx;
+
+			}
+		}
+
+		.gouwuche {
+			border: 1px solid #666;
+			padding-right: 20rpx;
+
+			text {
+				// color: #fff;
 			}
 		}
 	}

pages/course/learn.vue

@@ -0,0 +1,204 @@
+<template>
+	<view>
+		<!-- 公共组件-每个页面必须引入 -->
+		<public-module></public-module>
+		<z-nav-bar :title="chapter.detail.id ? chapter.detail.title : '课程详情'"></z-nav-bar>
+		<view class="box">
+			<view class="topImg" v-if="chapter.detail.imgUrl != ''">
+				<image :src="chapter.detail.imgUrl" mode="widthFix"></image>
+			</view>
+			
+			<view class="sourcesList" v-if="chapter.videos.length > 0">
+				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
+					<view class="scroll-view-item_H item" v-for="(item, index) in chapter.videos" :key="index">
+						<!-- .mp3 -->
+						<view class="" v-if="item.type == 2">
+							<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio>
+							
+						</view>
+						<view class="" v-if="item.type == 1">
+							<video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
+								                     enable-danmu danmu-btn controls></video>
+							
+						</view>
+						</view>					
+				</scroll-view>
+			</view>
+			
+			
+		</view>
+		<u-tabs :class="['tabList']" @click="" :current="curTagId"
+			:activeStyle="activeStyle" :scrollable="scrollable" :list="tabList"
+			itemStyle="padding-left: 15px; background-color:#fff;  padding-right: 15px; height: 50px;"></u-tabs>
+		<view class="box">
+			<rich-text v-if="chapter.detail.content" class="content"
+				:nodes="formatRichText(chapter.detail.content)"></rich-text>
+		</view>
+		<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
+		<!-- <music-play :playData="playData"></music-play> -->
+		<z-navigation></z-navigation>
+	</view>
+</template>
+
+<script>
+	// import musicPlay from '@/components/music.vue'
+	import $http from '@/config/requestConfig.js';
+	var clear;
+	import {
+		mapState
+	} from 'vuex';
+	export default {
+		data() {
+			return {
+				playData: {},
+				scrollable:false,
+				current: {
+								poster: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png',
+								name: '致爱丽丝',
+								author: '暂无',
+								src: 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3',
+							},
+							audioAction: {
+								method: 'pause'
+							},
+							activeStyle: {
+								color: '#333',
+								fontWeight: 'bold',
+								transform: 'scale(1.2)',
+								// backgroundColor: '#258feb'
+							
+							},
+				chapter: {
+					detail: {}, // type:0. 不加密 //1. mp4 2. mp3 
+					videos: []
+				},
+				bgiStyle: {
+					background: '#fff'
+				},
+				curTagId:1,
+				iconStyle: {
+					fontSize: '40rpx',
+					fontWeight: 'bold',
+					color: '#258feb',
+				},
+				tabList:[
+					{id:1, name:"章节介绍"},{id:2, name:"评论"},
+				],
+				scrollTop: 0,
+				courseId: null,
+				catalogueId: null,
+				chapterId: null,
+				
+			};
+		},
+		//第一次加载
+		onLoad(e) {
+			// 隐藏原生的tabbar
+			uni.hideTabBar();
+			// this.newsId = e.newsId
+			this.courseId = e.courseId
+			this.catalogueId = e.catalogueId
+			this.chapterId = e.chapterId
+			console.log(e, '------')
+		},
+		computed: {
+			...mapState(['userInfo'])
+		},
+		//页面显示
+		onShow() {
+			// 隐藏原生的tabbar
+			uni.hideTabBar();
+			this.getData();
+
+		},
+		onPullDownRefresh() {
+			uni.stopPullDownRefresh()
+		},
+		components: {
+			// musicPlay
+		},
+		//方法
+		methods: {			
+			onPageScroll(e) {
+				this.scrollTop = e.scrollTop;				
+			},
+			getData() {
+
+				$http.request({
+					url: `sociology/course/getCourseCatalogueChapterDetail`,
+					method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
+					data: {
+						id: this.chapterId
+					},
+					header: { //默认 无 说明：请求头
+						'Content-Type': 'application/json'
+					},
+				}).then(res => {
+					if (res.code == 0) {
+						this.chapter = res.data
+					}
+				}).catch(e => {
+					console.log(e, '获取新闻详情报错')
+				});
+
+			},
+			formatRichText(html) { //控制图片大小
+				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
+					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
+					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
+					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
+					return match;
+				});
+				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
+					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
+						'max-width:100%;');
+					return match;
+				});
+				// newContent = newContent.replace(/<img[^>]*>/gi, function(match, capture) {
+				// 	match = match.replace(/<img[^>]*>/gi, "@click='1111'").replace(/<img[^>]*>/gi, "@click='1111'");
+				// 	return match;
+				// });
+				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
+				newContent = newContent.replace(/\<img/gi,
+					'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
+				return newContent;
+			},
+		},
+	};
+</script>
+<style lang="scss" scoped>
+	@import '@/style/mixin.scss';
+
+	.scroll-view_H {
+		white-space: nowrap;
+		width: 100%;
+	}
+
+	.scroll-view-item_H {
+		display: inline-block;
+		// width: 100%;
+		// height: 300rpx;
+		line-height: 300rpx;
+		text-align: center;
+		font-size: 36rpx;
+	}
+
+	.box {
+		background-color: #fff;
+		@include pleft_right(10px);
+		min-height: calc(100vh - 270rpx);
+	}
+
+	.title {
+		font-size: 32rpx;
+		font-weight: bold;
+		display: block;
+		text-align: center;
+	}
+
+	.content {
+		font-size: 26rpx;
+		line-height: 48rpx;
+		margin-top: 10rpx;
+	}
+</style>