<template>
	<view>
		<z-nav-bar :title="bookInfo.name+'-讲书'"></z-nav-bar>
		<view class="mainContent">
			<view class="title">{{talkBookDetail.title}}</view>
			<view class="voices" v-if="talkBookDetail.voices != '' && audioShow">
				<!-- <audio style="text-align: left;  overflow: hidden;" :src="talkBookDetail.voices" @play="audioPlay"
					poster="../../static/icon/home_icon_0.png" :name="talkBookDetail.title"
					:author="bookInfo.author.authorName" :action="audioAction" controls @timeupdate="updateTime"></audio> -->
				<!-- 下面自己写了个播放器 -->
				<view class="audiobox">
					<view class="audioinfo">
						<image class="audioimg" :src="bookInfo.images" mode="aspectFit"></image>
						<image class="audioimgstart" v-if="!this.paused" mode="aspectFit"
							src="../../static/audiostart.png" @click="start"></image>
						<image class="audioimgstart" v-else mode="aspectFit" src="../../static/audiostop.png"
							@click="start"></image>
						<view>
							<view class="audiotitle">{{talkBookDetail.title}}</view>
							<view class="audioauthor">{{bookInfo.author.authorName}}</view>
							<view class="audioauthor">{{currentTime+'/'+duration}}秒</view>
							<slider class="audioslider" block-size="12" v-model="currentTime" :max="duration"
								@change="changeTime"></slider>
							<!-- <view @click="start">点击播放/暂停</view> -->
						</view>
					</view>
				</view>
			</view>
			<view class="content" v-if="talkBookDetail.content != ''" v-html="talkBookDetail.content"></view>
			<view class="content" v-else></view>
			<!-- 	<view class="time">
				<text>{{talkBookDetail.createTime}}</text>
			</view> -->
			<view class="zanche flexbox" style="margin-top:15rpx;">
				<span class="left">{{talkBookDetail.createTime}}</span>
				<span class="right flexbox opbtns">
					<image class="gzicon" v-if="contlikeYN" src="../../static/icon/gz2.png" mode="aspectFill"
						@click.stop="clickLike(talkBookDetail)"></image>
					<image class="gzicon" v-else src="../../static/icon/gz.png" mode="aspectFill"
						@click.stop="clickLike(talkBookDetail)"></image>
					<view style="color: #C0C4CC;">{{contlike}}</view>
					<image class="gzicon" v-if="1" src="../../static/icon/pinglun.png" mode="aspectFill"
						@click="pinglun()"></image>
					<view style="color: #C0C4CC;" @click="pinglun()">{{pTotal}}</view>
				</span>
			</view>
			<view class="tuijin" v-if="!isBuy && bookInfo.productId != null">
				<p>觉得这本书还不错？</p>
				<view class="flexbox"
					style="justify-content: space-between; border: 1px solid #55aa7f; padding: 10rpx; border-radius: 10rpx;">
					<view class="flexbox">
						<view class="img">
							<image v-if="bookInfo.images != ''" :src="bookInfo.images" mode="aspectFit"></image>
							<image v-else src="../../static/icon/wufeng.jpg" mode="aspectFit"></image>
						</view>
						<view>
							<text style=" display: inline-block; margin-top: 40rpx;">{{bookInfo.name}}</text><br />
							<text>作者：{{bookInfo.author.authorName}}</text>
						</view>
					</view>
					<view class="btn" @click="gotoBuy()">
						<text>立即购买</text>
					</view>
				</view>
			</view>
			<!-- <view class="opbtn flexbox">
				<view class="">上一章</view>
				<view class="">下一章</view>
			</view> -->
		</view>

		<view class="pinglunMain">
			<!-- <u-button class="addPl" type='success' plain @click="pinglun()">添加评论</u-button>
			<view class="">
				<view style="font-weight: 700;margin:30rpx 0rpx 30rpx;font-size: 30rpx;color:#55aa00;">精彩热评</view>
			</view> -->
			<!-- <h4>~ 精彩热评 ~</h4> -->
			<view v-if="plList.length > 0">
				<view class="pl-item" v-for="item in plList" :key="item.id">
					<view class="plusername">
						<image :src="item.user.avatar"></image>
						<span v-if="item.user.nickname!=null">{{item.user.nickName}}</span>
						<span v-if="item.user.nickname==null">匿名用户</span>
					</view>
					<view class="content" v-html="item.content"></view>
					<view class="btns flexbox" style="margin-top:10rpx;">
						<span class="left" style="color: #C0C4CC;">{{formatTimeDifferenceFromT(item.createTime)}}</span>
						<span class="condelt" @click="deleteCont(item)" v-if="item.deletUse">删除</span>
					</view>

					<!-- </view> -->
				</view>
			</view>
			<view class="quesheng" v-else>
				<text>暂无评论内容~</text>
			</view>
		</view>
		<view v-if="status==0" style="text-align: center;">
			<u-loading-icon style="display: inline-block;"></u-loading-icon>
			<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font>
		</view>
		<u-divider v-if="status == 1" text="已加载全部评论"></u-divider>
		<!-- 评论书评对话框 -->
		<!-- 回复评论对话框 -->
		<u-popup :show="pingjiaShow" :round="10" @close="closePingjia">
			<view class="tanchu">
				<view class="dp_title">添加评论</view>
				<view style="max-height: 1000rpx;overflow-y: scroll;">
					<view class="padding-bottom-sm flex padding-lr-sm" style="border-bottom: 1px solid #EEEEEE;">

						<view class="flex-sub flexbox">
							<i @click="showEmj()" :class="emojiIcon"></i>
							<textarea class="textarea" v-model="Pform.comment" @focus="InputFocus" @blur="InputBlur"
								@input="textareaBInput" placeholder-style="font-size:24rpx;color:#aaaaaa;"
								placeholder="请输入您要发送的内容"></textarea>
						</view>
						<view class="">
							<u-button type="success" @click="submitPJ">提交</u-button>
						</view>
					</view>

					<view style="position: relative;">
						<emotion @emotion="handleEmj" :height="220" v-if="isShowEmj" :windowWidth="windowWidth">
						</emotion>
					</view>
				</view>
			</view>
		</u-popup>

		<music-play :playData="playData"></music-play>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
	</view>
</template>

<script>
	import $http from '@/config/requestConfig.js';
	import emotion from '@/bkhumor-emojiplus/components/bkhumor-emojiplus/bkhumor-emojiplus.vue';
	import emojiList1 from '../../bkhumor-emojiplus/emoji/biaoqin.js'
	import musicPlay from '@/components/music.vue'

	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				audioAction: {
					method: 'pause'
				},
				audioShow: false,
				isShowEmj: false,
				emojiIcon: 'cuIcon-emoji',
				emoji: [],
				windowWidth: 0,
				voicesImg: '',
				isBuy: false,
				playData: {},
				teachId: null, // 讲书id
				bookId: null, // 书籍id
				bookInfo: {
					author: {
						authorName: ''
					}
				}, // 书籍信息
				talkBookDetail: {},
				windowWidth: 0,
				audio: null,
				duration: 10,
				currentTime: 0,
				paused: false,
				emojiIcon: 'cuIcon-emoji',
				isShowEmj: false,
				status: 3,
				pingjiaShow: false, //添加评价
				Pform: { // 评价表单
					//star:0,
					comment: '',
					//img:[],
					html: ''
				},
				contlike: 0,
				contlikeYN: false,
				pPage: 1,
				pTotal: 0, // 评论的总条数
				plList: [], // 书评的评论list
			}
		},
		onLoad(e) {
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			console.log(e, 'onLoad')
			this.bookId = e.bookId
			this.teachId = e.teachId

			// 初始化播放器实例
			this.audio = uni.createInnerAudioContext();
		},
		onShow() {
			this.getBookInfo()
			this.getTalkBookDetail()
			this.getCommPL()
			this.getGoodNum()
		},
		onHide() {
			// console.log('onHide----',this.paused)
			this.audio.pause() // 暂停播放
			this.paused = false
		},
		onUnload() {
			// console.log('onUnload----',this.paused)
			this.audio.destroy() // 销毁播放器
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			...mapMutations(['setUserInfo']),
			start() {
				this.initAudio() // 开始播放
			},
			formatTimeDifferenceFromT(dateTimeT) {
				const now = new Date();
				const t = new Date(dateTimeT);
				const differenceInSeconds = Math.floor((now - t) / 1000);

				if (differenceInSeconds <= 3600) {
					const minutes = Math.floor(differenceInSeconds / 60);
					return `${minutes} 分钟前`;
				} else if (differenceInSeconds <= 86400) {
					const hours = Math.floor(differenceInSeconds / 3600);
					return `${hours} 小时前`;
				} else if (differenceInSeconds <= 2592000) {
					const days = Math.floor(differenceInSeconds / 86400);
					return `${days} 天前`;
				} else {
					const currentYear = now.getFullYear();
					const tYear = t.getFullYear();
					if (currentYear === tYear) {
						const month = t.getMonth() + 1;
						const day = t.getDate();
						return `${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
					} else {
						const year = t.getFullYear();
						const month = t.getMonth() + 1;
						const day = t.getDate();
						return `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
					}
				}
			},
			initAudio() {
				this.audio.onTimeUpdate(() => {
					this.duration = this.audio.duration.toFixed()
					this.currentTime = this.audio.currentTime.toFixed()
				})
				this.audio.onPause(() => { // 用于被听书组件打断时，设置播放icon状态
					this.paused = false
					// console.log('onPause----------',this.paused)
				})
				this.paused = this.audio.paused
				// console.log('paused',this.paused)
				if (this.paused) {
					this.audio.play()
				} else {
					this.audio.pause()
				}
			},
			updateTime(e) {
				this.currentTime = e.detail.currentTime.toFixed()
				this.duration = e.detail.duration.toFixed()
			},
			changeTime(e) {
				this.audio.seek(e.detail.value) // 设置播放位置
			},
			audioPlay() {
				console.log('播放讲书', this.$music)
				this.$music.setCloseBgm() // 关闭听书音频
				this.setUserInfo({
					'playFlag': false
				})
			},
			// 购买
			gotoBuy() {
				uni.navigateTo({
					url: '../bookShop/commodityDetail?id=' + this.bookInfo.productId
				});
			},
			getBookInfo() {
				// 获取书本基本信息
				this.$http
					.post('book/book/getBookInfo', {
						'bookId': this.bookId,
						'userId': this.userInfo.id
					})
					.then(res => {
						if (res.code == 0) {
							console.log(res, 'res')
							this.bookInfo = res.book

							if (!this.bookInfo.author || this.bookInfo.author == null) {
								this.bookInfo.author = {
									'authorName': '未知'
								}
								console.log(this.bookInfo.author.authorName, 'this.bookInfo.author.authorName')
							}
							//console.log(this.bookInfo.author.authorName,'this.bookInfo.author.authorName')
							this.voicesImg = res.book.images
							// this.bookInfo.name = res.book.name
							this.isBuy = res.book.isBuy
							console.log(this.voicesImg, 'this.voicesImg')
							// this.freeChapterCount = res.book.freeChapterCount
						} else {
							console.log(res.msg)
						}
						console.log(res, '书籍基本信息')
					}).catch((error) => {
						console.log(error)
					})
			},
			// 获取讲书详情
			getTalkBookDetail() {
				this.audioShow = false
				this.$http
					.post('book/teach/getTeachDetail', {
						'teachId': this.teachId
					})
					.then(res => {
						if (res.code == 0) {
							console.log(res, 'res')
							this.talkBookDetail = res.bookTeach

							this.audio.src = this.talkBookDetail.voices // 设置播放资源路径
							this.audio.onCanplay((e) => {
								this.duration = this.audio.duration.toFixed() // 初始化进度条和音频秒数
							})

							// this.isBuy = res.book.isBuy
							// this.freeChapterCount = res.book.freeChapterCount
						} else {
							console.log(res.msg)
						}
						this.audioShow = true
						console.log(res, '讲书信息')
					}).catch((error) => {
						console.log(error)
						this.audioShow = true
					})
			},

			// 表情
			showEmj() {
				let bool = !this.isShowEmj;
				if (bool) {
					this.emojiIcon = 'cuIcon-keyboard';
				} else {
					this.emojiIcon = 'cuIcon-emoji';
				}

				this.isShowEmj = bool;
				this.$emit('show')
			},
			InputBlur(e) {

			},
			InputFocus(e) {
				this.isShowEmj = false;
				this.emojiIcon = 'cuIcon-emoji';
				this.$emit('foc')
			},

			// 获取点赞数和是否点赞
			getGoodNum() {

				this.$http
					.post("book/teach/getLikeCount?teachId=" + this.teachId)
					.then(res => {
						if (res.code == 0) {
							this.contlike = res.count
						}
					}).catch((e) => {
						console.log(e, 'e')
					})

				this.$http
					.post("book/teach/ifLike?teachId=" + this.teachId)
					.then(res => {
						if (res.code == 0) {
							this.contlikeYN = res.flag
						}
					})
					.catch((e) => {
						console.log(e, 'e')
					})


			},

			// 获得书评回复列表
			getCommPL() {

				$http.request({
						url: "book/teach/getCommentList",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data: {
							'teachId': this.teachId,
							'limit': 5,
							'page': this.pPage,
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						this.plList = []
						console.log(res, '书评评论')
						// this.plList = this.plList.concat(res.page.list)
						let plList1 = res.page.records
						this.pTotal = res.page.total
						this.status = 3
						// 评论格式化
						var newarr = []
						plList1.forEach((item1) => {
							item1.content = this.getHtmlComment(item1.content)
							if (item1.userId == this.userInfo.id) {
								item1.deletUse = true
							} else {
								item1.deletUse = false
							}
							newarr.push(item1)
						})
						this.plList = this.plList.concat(newarr)
						console.log('改变格式后', this.plList)

					}).catch(e => {
						console.log(e, 'e')
					});

			},

			// 获取html格式的评论1
			getHtmlComment(comment) {
				// 格式化html
				//	 console.log(comment,'comment')
				// 这里处理 链接   换行符
				let replacedStr = comment.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
					// console.log(item, index)
					var indexss = emojiList1.findIndex(item1 => item1.alt === item)
					// console.log(indexss, 'indexss')
					return '<img src="https://www.nuttyreading.com/emojis/emojis/qq/' + emojiList1[indexss].url +
						'" width="18rpx">';
				});
				// console.log(replacedStr,'replacedStr')
				return replacedStr.replace(/(\r\n)|(\n)/g, '<br>');
			},

			// 点赞
			clickLike(item) {
				this.$http
					.post("book/teach/addOrCancelLike?teachId=" + this.teachId)
					.then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: res.msg,
								icon: 'success'
							})
							this.getGoodNum()
						}
					}).catch((e) => {
						console.log(e, 'e')
					})
			},

			// 显示评论框
			pinglun(val) {
				console.log('pinglun-val', val)
				if (val && val.user && val.user.id && val.puser && val.puser.id) {
					this.Pform.name = val.user.name || ''
					this.Pform.pid = val.pid
					this.Pform.puserId = val.user.id || ''
				} else if (val && val.user && val.user.id) {
					this.Pform.name = val.user.name || ''
					this.Pform.pid = val.id
					this.Pform.puserId = val.user.id || ''
				} else {
					// this.pinglunId = val || null
					this.Pform.pid = ''
					this.Pform.puserId = ''
				}
				this.pingjiaShow = true
			},
			// 提交评论
			submitPJ() {
				if (this.Pform.comment != '') {
					$http.request({
							url: "book/teach/addComment",
							method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
							data: {
								teachId: this.teachId,
								content: this.Pform.comment,
								puserId: 0,
							},
							header: { //默认 无 说明：请求头
								'Content-Type': 'application/json'
							},
						})
						.then(res => {
							uni.showToast({
								title: '评论成功！',
								icon: 'success'
							})
							// this.getCommPL()
							this.pingjiaShow = false
							this.Pform.comment = ''
							this.Pform.name = ''
							this.Pform.pid = ''
							this.Pform.puserId = ''
							// this.pinglunId = null

							// 把回复的评论拼进this.plList回复列表中
							let comment = res.comment

							// comment.content = this.getHtmlComment(comment.content)
							// console.log('this.userInfo', this.userInfo)
							// comment.user = this.userInfo
							// comment.comments = []
							// this.plList.unshift(comment)

							this.getCommPL()

						}).catch(e => {
							console.log(e, 'e')
						});

				} else {
					uni.showToast({
						title: '请先输入您的评价内容 ！',
						icon: 'none'
					})
				}
			},

			// 删除评论
			deleteCont(item) {

				uni.showModal({
					title: '提示',
					content: '确定要删除评论吗？',
					confirmText: "确定",
					cancelText: "取消",
					success: function(res) {
						let _this = this
						if (res.confirm) {
							_this.$http
								.post("book/teach/delComment?commentId=" + item.id)
								.then(res => {
									if (res.code == 0) {
										uni.showToast({
											title: '删除成功',
											icon: 'success'
										})
										_this.getCommPL()
									}
								}).catch((e) => {
									console.log(e, 'e')
								})
						}
					}.bind(this)
				});

			},


			closePingjia() {
				this.pingjiaShow = false
				this.Pform.comment = ''
				this.Pform.html = ''
				this.emoji = []
			},

			// 获得输入的表情数组
			handleEmj(i) {
				console.log(i, 'i---------');
				this.inputValue = i
				// console.log(this.inputValue);
				if (i.emotioni == '[em_98]') {
					//匹配最后一个表情符号并删除11。
					this.Pform.comment = this.Pform.comment.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
					})
					// console.log(this.emoji,'this.emoji')
					this.Pform.comment += i.emotioni;
					/// this.Pform.html += i.emotion
				}
			},

			textareaBInput(e) {
				console.log(e, 'e')
				this.Pform.comment = e.detail.value
				/// this.Pform.html = e.detail.value
			},
			showEmj() {
				let bool = !this.isShowEmj;
				if (bool) {
					this.emojiIcon = 'cuIcon-keyboard';
				} else {
					this.emojiIcon = 'cuIcon-emoji';
				}

				this.isShowEmj = bool;
				this.$emit('show')
			},

			InputBlur(e) {

			},
			InputFocus(e) {
				this.isShowEmj = false;
				this.emojiIcon = 'cuIcon-emoji';
				this.$emit('foc')
			},

			onReachBottom() {
				console.log('到底了')
				if (this.pPage + 1 <= this.pTotal) {
					this.status = 0
					this.pPage++
					this.getCommPL()
				} else {
					this.status = 3
				}
			},
		},
		components: {
			musicPlay,
			emotion
		},
	}
</script>

<style scoped lang="scss">
	.mainContent {
		margin: 20rpx 10rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}

	.flexbox {
		display: flex;
	}

	.voices {
		margin: 10rpx auto;
		text-align: center;

	}

	/deep/ .uni-audio-name {
		// white-space: wrap !important;
		width: 340rpx;
	}

	.title {
		font-size: 30rpx;
		color: #55aa7f;
		font-weight: bold;
		margin: 40rpx 0;
	}

	.time {
		text-align: right;
		font-size: 24rpx;
		margin-top: 20rpx;
		color: #999;
	}

	.content {
		font-size: 28rpx;
		text-align: justify;
		color: #666;
		line-height: 48rpx;
	}

	.tuijin {
		font-size: 26rpx;

		margin-top: 20rpx;

		.img {
			width: 150rpx;
			height: 150rpx;
			overflow: hidden;
		}

		image {
			height: 150rpx;
			width: 100%;
		}

		p {
			font-size: 28rpx;
			margin-bottom: 20rpx;
			color: #55aa7f;
		}
	}

	.btn {
		margin-right: 20rpx;
		font-size: 22rpx;
		justify-content: space-between;
		align-items: center;

		text {
			display: inline-block;
			margin-top: 52rpx;
			font-size: 30rpx;
			padding: 5px 8px;
			background: #55aa7f;
			color: #fff;
			border-radius: 5px;
		}
	}


	.zanche {
		font-size: 22rpx;
		justify-content: space-between;
		align-items: center;

		.left {
			width: 300rpx;
			color: #999;
			font-size: 24rpx;
		}

		.right {
			width: 300rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}

		.gzicon {
			margin: 0 0 0 20rpx;
			height: 40rpx;
			width: 40rpx;
			// float:left;
			// border-radius: 20rpx;
			// border:1rpx solid #e9e9e9;
		}

		.opbtns {
			.pingjia {
				margin-left: 10px;
			}
		}
	}

	// 自定义播放器样式
	.audiobox {
		border: 2rpx solid #d6d5d5;
		border-radius: 8px;

		.audioinfo {
			display: flex;

			.audioimg {
				padding: 10rpx;
				width: 180rpx;
				height: 220rpx;
				border-radius: 5px;
			}

			.audioimgstart {
				position: absolute;
				padding: 20rpx;
				width: 180rpx;
				height: 220rpx;
				border-radius: 5px;
			}

			.audiotitle {
				padding: 10rpx;
				font-size: 28rpx;
				text-align: left;
			}

			.audioauthor {
				padding: 4rpx;
				font-size: 24rpx;
				text-align: left;
				color: #999;
			}

			.audioslider {
				width: 400rpx;
			}
		}


	}

	// .opbtn{font-size: 14rpx;}
	.pinglunMain {
		.pl-item {
			margin: 0 0 14rpx 0;
			padding: 0 0 14rpx 0;
			border-bottom: 1px solid #f0f0f0;

			.condelt {
				color: #fd6004;
			}

		}

		.plusername {
			font-size: 26rpx;
			color: #a1a1a1;
			image{
				width: 40rpx;
				height: 40rpx;
				border-radius: 20rpx;
				display: inline-block;
				margin-right: 15rpx;
				vertical-align: sub;
			}
		}

		.content {
			margin: 30rpx 0rpx;
			line-height: 40rpx;
			color: #000;
			font-size: 30rpx;
		}

		background-color: #fff;
		padding: 10px;

		// h4{color: #55aa00; font-size: 40rpx;  margin:30rpx 0 ; text-align: center;}
		.time {
			color: #888;
			font-size: 24rpx;
		}

		.btns {
			font-size: 22rpx;
			// justify-content: space-between;
			align-items: center;

			.left {
				// width: 300rpx;
				margin-right: 20rpx;
				color: #a1a1a1;
			}

			.right {
				width: 300rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}

			.gzicon {
				margin: 0 0 0 20rpx;
				height: 40rpx;
				width: 40rpx;
				// float:left;
				// border-radius: 20rpx;
				// border:1rpx solid #e9e9e9;
			}

			.opbtns {
				.pingjia {
					margin-left: 10px;
				}
			}
		}

	}

	.quesheng {
		text-align: center;
		color: #8b8a91;
		padding-bottom: 20rpx;
		padding-top: 20rpx;
	}

	.tanchu {
		padding: 40rpx 30rpx 40rpx 30rpx;
		position: relative;


		.dp_title {
			font-size: 32rpx;
			margin-bottom: 50rpx;
			color: #555;
			text-align: center;
			font-weight: bold;
		}

		.dp_add {
			position: absolute;
			top: 40rpx;
			right: 30rpx;
			font-size: 22rpx;
			background-color: #fd6004;
			color: #fff;
			border-radius: 10rpx;
			padding: 5rpx 10rpx;

			.u-icon {
				display: inline-block;
				margin-right: 5rpx;
			}
		}
	}

	.cuIcon-emoji {
		background: url(../../static/biaoqing.png) no-repeat;
		background-size: contain;
		display: block;
		margin-right: 20rpx;
		width: 30px;
	}

	.cuIcon-keyboard {
		background: url(../../static/biaoqing.png) no-repeat;
		background-size: contain;
		display: block;
		width: 30px;
	}
</style>