微信直播及微信自定义tabs页。

本是古典何须时尚 2023-02-16 05:52 12阅读 0赞

**直播：**

微信文档：[https://developers.weixin.qq.com/miniprogram/dev/framework/liveplayer/live-player-plugin.html][https_developers.weixin.qq.com_miniprogram_dev_framework_liveplayer_live-player-plugin.html]  
json：

{ 
    	"navigationBarTitleText": "直播间",
    	"usingComponents": { 
    		"loading": "/component/loading/loading",
    		"subscribe": "plugin-private://wx2b03c6e691cd7370/components/subscribe/subscribe"
    	}
    }

wxml：

<view class="m-live">
    	<view class="live-item" wx:for="{ {liveRoom.list}}" wx:key="{ {index}}" bindtap="jumpLivePlayer" data-id="{ {item.room_id}}">
    		<view class="g-left">
    			<view class="live-status">
    				<view class="status-start iconfont icon-zhibozhong-0" wx:if="{ {item.live_status==101}}"></view>
    				<view class="status-unstart" wx:elif="{ {item.live_status==102}}"></view>
    				<view class="status-text">{ { item.status_zh}}</view>
    			</view>
    			<image class="live-img" src="{ {item.cover_img}}"></image>
    		</view>
    
    		<view class="g-right">
    			<view class="title s-ellpipsis">{ { item.name}}</view>
    			<view class="user-message">
    				<image class="user-avatar" src="{ {HOST + '/' + item.anchor_img}}"></image>
    				<view class="user-name">{ { item.anchor_name}}</view>
    			</view>
    
    			<view wx:if="{ {item.live_status == 102}}">
    				<view class="play-time">
    					<view class="s-text">开播时间</view>
    					<view class="s-date">{ { item.live_time}}</view>
    				</view>
    				
    				<subscribe stopPropagation="{ {true}}"  room-id="{ {item.room_id}}"></subscribe>
    			</view>
    
    			<view class="g-bottom" wx:elif="{ {item.goods.length}}" catchtap="clickSub">
    				<view class="goods-item" wx:if="{ {sonIndex<=2}}" wx:for="{ {item.goods}}" catchtap="jumpGoods" wx:for-item="sonItem"
    				 wx:for-index="sonIndex">
    					<navigator hover-class="btn-hover" url="{ {sonItem.useUrl}}">
    						<image class="s-img" src="{ {sonItem.cover_img}}"></image>
    						<view class="goods-price">￥{ { sonItem.price}}</view>
    					</navigator>
    				</view>
    				<view class="right-arrow" wx:if="{ {item.goods.lenth>2}}" bindtap="nextGoods" data-index="{ {index}}"> > </view>
    			</view>
    		</view>
    
    		<loading page="{ {liveRoom.page}}" count="{ {liveRoom.count}}" nowLength="{ {liveRoom.list.length}}" loading="{ {loading}}"></loading>
    	</view>
    </view>

js：

// pages/live/list/list.js
    const api = require('../../../utils/api.js');
    const HOST = require('../../../utils/host.js');
    const util = require('../../../utils/util.js');
    const ajax = util.ajax;
    let livePlayer = requirePlugin('live-player-plugin');
    
    Page({ 
    	data: { 
    		HOST: HOST,
    		liveRoom: { 
    			list: [],
    			page: 1,
    			count: 0,
    		},
    		count: 0,
    		loading: false,
    	},
    
    	/** 生命周期函数--监听页面加载 */
    	onLoad: function(options) { 
    		var vm = this;
    		vm.getLiveList();
    	},
    
    	/** 生命周期函数--监听页面初次渲染完成 */
    	onReady: function() { 
    
    	},
    	/* 下拉触底加载更多 */
    	onReachBottom: function() { 
    		var vm = this;
    		/* if (vm.data.liveRoom.list.length >= vm.data.liveRoom.count) return false; */
    		// 请求列表数据
    		vm.getLiveList();
    	},
    	/* 得到展示的时间 */
    	getShowDate: function(date) { 
    		//console.log(123, date)
    		if (date && date.length) { 
    			//console.log(date.split('-'), date.split('-')[2].split(' ')[0], 'monthArr')
    			var monthArr = date.split('-');
    			console.log(monthArr[2].split(' ')[0], 'monthArr')
    			var month = monthArr[1];
    			var date = monthArr[2].split(' ');
    			return month + '月' + date[0] + '日 ' + date[1];
    		}
    		return date;
    	},
    
    	/* 获取直播列表 */
    	getLiveList: function() { 
    		var vm = this;
    		var postData = { 
    			page_index: vm.data.liveRoom.page,
    		};
    		vm.setData({ 
    			loading: true
    		});
    		ajax({ 
    			url: api.getRoomList,
    			data: postData,
    			success: function(res) { 
    				var roomList = vm.data.liveRoom.list.concat(res.retval.data);
    				for (var i in roomList) { 
    					if (roomList[i].live_status == 102) { 
    						roomList[i].live_time = vm.getShowDate(roomList[i].start_time);
    					} else { 
    						for (var j in roomList[i].goods) { 
    							if (roomList[i].goods[j]) { 
    								var url = roomList[i].goods[j].url;
    								var removeId = url.substring(0, url.indexOf("="));
    								var roomId = url.substring(url.indexOf("=") + 1, url.length);
    								roomList[i].goods[j].useUrl = `/${removeId.replace(".html", "")}=${Number(roomId)}`;
    							}
    						}
    					}
    				}
    				vm.setData({ 
    					'liveRoom.list': roomList,
    					'liveRoom.count': res.retval.data.count ? res.retval.data.count : vm.data.liveRoom.count,
    					'liveRoom.page': res.retval.data.count != roomList.length ? vm.data.liveRoom.page + 1 : vm.data.liveRoom.page,
    				});
    			},
    			complete: function() { 
    				vm.setData({ 
    					loading: false
    				})
    				wx.stopPullDownRefresh();
    			}
    		})
    	},
    
    
    	/** 跳转进入直播间 */
    	jumpLivePlayer: function(event) { 
    		var vm = this;
    		var roomId = event.currentTarget.dataset.id;
    		var customParams = encodeURIComponent(JSON.stringify({ 
    			path: 'pages/list/live/live',
    		}));
    		console.log(roomId, 'roomId55')
    		wx.navigateTo({ 
    			url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
    		});
    	},
    
    	clickSub: function(event) { 
    		stopPropagation: false;
    	},
    
    	/* 加载下一个商品 */
    	nextGoods: function(event) { 
    		/* var vm = this; var list = vm.data.liveRoom.list; var index = event.currentTarget.dataset.index; if (list[index].goods && list[index].goods.length) { for (var i=0;i<list[index].goods.length;i++) { list[index].goods[i]; } } */
    	}
    })

css：

/* pages/live/list/list.wxss */
    page{ 
    	background-color: #f5f5f5;
    }
    .m-live{ 
    	display: flex;
    	flex-direction: column;
    	justify-content: center;
    	align-items: center;
    	
    }
    .m-live .live-item{ 
    	margin-top: 31rpx;
    	display: flex;
    	width:700rpx;
    	height:297rpx;
    	background:rgba(255,255,255,1);
    	box-shadow:0px 10rpx 40rpx 0px rgba(128,128,128,0.1);
    	border-radius:20rpx;
    	padding: 22rpx 24rpx 22rpx 20rpx;	
    }
    .m-live .g-left{ 
    	position: relative;
    }
    
    .m-live .live-status { 
    	position: absolute;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	top: 11rpx;
    	left: 11rpx;
    	text-align: center;
    	line-height: 30rpx;
    	width: 96rpx;
    	height: 30rpx;
    	background: rgba(35, 35, 35, 0.5);
    
    	border-radius: 15rpx;
    	font-size: 18rpx;
    	font-family: PingFang SC;
    	font-weight: 500;
    	color: rgba(255, 255, 255, 1);
    }
    
    .m-live .status-start { 
    	color: #FFFFFF;
    	font-size: 18rpx;
    }
    .m-live .status-text{ 
    	margin-left: 6rpx;
    }
    .m-live .status-unstart { 
    	width: 8rpx;
    	height: 8rpx;
    	background: rgba(255, 255, 255, 1);
    	border-radius: 4rpx;
    }
    .m-live .g-left,.live-img{ 
    	width:343rpx;
    	height:252rpx;
    	border-radius:10rpx;
    }
    
    
    
    .m-live .g-right{ 
    	margin-left: 12rpx;
    }
    .m-live .title{ 
    	font-size:28rpx;
    	font-family:PingFang SC;
    	font-weight:500;
    	color:rgba(35,35,35,1);
    	line-height:40rpx;
    }
    
    .m-live .user-message{ 
    	display: flex;
    	align-items: center;
    	margin: 28rpx 0 25rpx 16rpx;
    }
    .m-live .user-avatar{ 
    	width:36rpx;
    	height:36rpx;
    	border-radius:50%;
    }
    .m-live .user-name{ 
    	margin-left: 28rpx;
    	font-size:22rpx;
    	font-family:PingFang SC;
    	font-weight:500;
    	color:rgba(128,128,128,1);
    }
    .m-live .play-time{ 
    	display: flex;
    	width:300rpx;
    	height:37rpx;
    	background:rgba(255,245,231,1);
    	border:1rpx solid rgba(236,204,164,1);
    	border-radius:19rpx;
    }
    .m-live .s-text{ 
    	text-align: center;
    	line-height: 37rpx;
    	width:104rpx;
    	background:linear-gradient(-49deg,rgba(246,229,205,1) 0%,rgba(234,199,157,1) 100%);
    	border-radius:19rpx;
    	font-size:20rpx;
    	font-family:PingFang SC;
    	font-weight:500;
    	color:rgba(145,104,55,1);
    }
    .m-live .s-date{ 
    	margin-left: 8rpx;
    	text-align: center;
    	line-height: 37rpx;
    	font-size:20rpx;
    	font-family:PingFang SC;
    	font-weight:500;
    	color:rgba(145,104,55,1);
    }
    
    .m-live .g-bottom{ 
    	display: flex;
    	align-items: center;
    }
    .m-live .goods-item{ 
    	position: relative;
    }
    .m-live .goods-price{ 
    	text-align: center;
    	position: absolute;
    	line-height: 25rpx;
    	bottom:0;
    	left:0;
    	width:106rpx;
    	height:25rpx;
    	background:rgba(0,0,0,1);
    	opacity:0.7;
    	border-radius:0px 0px 10px 10px;
    	font-size:18rpx;
    	font-family:PingFang SC;
    	font-weight:500;
    	color:rgba(255,254,254,1);
    }
    .m-live .s-img{ 
    	width:106rpx;
    	height:106rpx;
    	border-radius:10rpx;
    	margin-right: 30rpx;
    	overflow: hidden;
    }
    .m-live .right-arrow{ 
    	width:18rpx;
    	height:32rpx;
    	color: #B3B3B3;
    }
    .m-live .remain-btn{ 
    	float: right;
    	text-align: center;
    	line-height: 56rpx;
    	width:162rpx;
    	height:56rpx;
    	background:rgba(253,26,33,1);
    	border-radius:10rpx;
    	font-size:24rpx;
    	font-family:PingFang SC;
    	font-weight:500;
    	color:rgba(255,255,255,1);
    	margin-top: 23rpx;
    }
    .m-live .remain-btn:before{ 
    	content:'开播提醒';
    }
    
    
    
    .subscribe--live-player-subscribe__btn{ 
    	float: right;
    	text-align: center;
    	line-height: 56rpx !important;
    	width:162rpx !important;
    	height:56rpx !important;
    	background:rgba(253,26,33,1) !important;
    	border-radius:10rpx !important;
    	font-size:24rpx !important;
    	font-family:PingFang SC !important;
    	font-weight:500 !important;
    	color:rgba(255,255,255,1) !important;
    	margin-top: 23rpx !important;
    }
    
    .m-live .subscribe{ 
    	visibility: hidden;
    }
    .s-ellpipsis { 
    	display: -webkit-box;
    	overflow: hidden;
    	text-overflow: ellipsis;
    	word-break: break-all;
    	-webkit-box-orient: vertical;
    	-webkit-line-clamp: 2;
    }

**scroll-view+swiper 的 tabs页。**

wxml：

<view class="level-container">
    	<image src="../../../public/img/header.png" mode="widthFix" lazy-load></image>
    	<scroll-view class="level-nav" scroll-x="{ {true}}" show-scrollbar="{ {false}}" scroll-into-view="{ {scrollInto}}">
    		<view class="uni-tab-item" wx:for="{ {levelList}}" wx:key="{ {index}}" data-current="{ {index}}" bindtap="ontabtap">
    			<text class="uni-tab-item-title { {status == index? 'uni-tab-item-title-active' : ''}}">{ {  item.rank_name }}</text>
    		</view>
    	</scroll-view>
    
    	<swiper current="{ {status}}" class="swiper-box" style="flex: 1;height:{ {contentHeight}}rpx" duration="200" bindchange="ontabchange">
    		<swiper-item class="swiper-item" wx:for="{ {levelList}}" wx:key="{ {index}}">
    			<scroll-view class="level-list" scroll-y="{ {true}}" style="height:{ {contentHeight}}rpx;">
    				<view class="level-content">
    					<image src="{ {HOST + '/' + item.image}}" mode="widthFix" lazy-load></image>
    				</view>
    			</scroll-view>
    			<view class="m-bottom" bindtap="showModal">
    				<view class="btn">
    					<view class="txt">开通会员</view>
    					<view class="price">{ { item.price}}元/月</view>
    				</view>
    			</view>
    			
    			<view class="m-modals { {isModalShow ? 'z-show' : ''}}">
    					<view class="mask" catchtap="hideModal"></view>
    					<view class="ct">
    						<view class="top">
    							<view class="title">开通会员</view>
    							<view class="icon-right iconfont iconguanbi" bindtap="hideModal"></view>
    						</view>
    						<view class="content">
    							<view class="item">
    								<view class="iconfont iconyonghu"></view>
    								<input class="txt" placeholder="请输入您的姓名" bindinput="changeName"></input>
    							</view>
    							<view class="item">
    								<view class="iconfont iconshoujihaoma"></view>
    								<input class="txt" placeholder="请输入手机号码" bindinput="changeMobile"></input>
    							</view>
    							<view class="contract"><text class="txt">会员有效期：</text><text class="num"> { { item.expire}}天</text></view>
    							<view class="contract"><text class="txt">合计支付：</text><text class="num"> { { item.price}}元</text></view>
    							<checkbox class="s-checkbox">已阅读并同意《<text class="agreement" bindtap="jumpAgreement">产融家会员服务协议</text>》</checkbox>
    							<view class="btn" bindtap="paidMoney" data-id="{ {item.mr_id}}">
    								<view class="txt">立即支付</view>
    							</view>
    						</view>
    					</view>
    				</view>
    			
    		</swiper-item>
    		
    	</swiper>
    	
    
    	
    </view>

js:

// pages/member/level/level.js
    const api = require('../../../utils/api.js');
    const util = require('../../../utils/util.js');
    const HOST = require('../../../utils/host.js');
    const ajax = util.ajax;
    
    Page({ 
    	/** * 页面的初始数据 */
    	data: { 
    		scrollInto: '',
    		status: 0,
    		HOST: HOST,
    		levelList: [],
    		isModalShow: false,
    		contentHeight: 800,
    
    		real_name: '',
    		mobile: '',
    		member_rank_id: '',
    		user_id: '',
    		loading: false,
    	},
    
    	/** * 生命周期函数--监听页面加载 */
    	onLoad: function() { 
    		/* var query = wx.createSelectorQuery(); var vm = this; query.select('.level-content').boundingClientRect(function(rect) { vm.setData({ contentHeight: rect.height + 10 + 'rpx' }) }) */
    		var vm = this;
    		var height = wx.getSystemInfoSync().windowHeight; //height为可用区域高 单位px
    		let windowHeight = height * (750 / wx.getSystemInfoSync().windowWidth); //将px转为rpx
    		this.setData({ 
    			//contentHeight = 总高度 - 除了swiper的其他内容的高度 
    			//我这里是减去了除了swiper的其他三块内容的高度，算出了剩余多少高度
    			contentHeight: windowHeight - 470
    		});
    		vm.getMemebrRankList();
    	},
    
    	onShow: function() { 
    		var userId = wx.getStorageSync('user_id');
    		this.setData({ 
    			user_id: userId,
    		})
    	},
    	showModal: function() { 
    		this.setData({ 
    			isModalShow: true,
    		})
    	},
    	hideModal: function() { 
    		this.setData({ 
    			isModalShow: false,
    		})
    	},
    	ontabtap: function(e) { 
    		var index = e.target.dataset.current || e.currentTarget.dataset.current;
    		this.switchTab(index);
    	},
    	switchTab: function(index) { 
    		var vm = this;
    		if (vm.data.status === index) { 
    			return;
    		}
    		vm.setData({ 
    			status: index,
    			scrollInto: vm.data.levelList[index].id,
    		})
    	},
    	ontabchange: function(e) { 
    		var index = e.target.current || e.detail.current;
    		this.switchTab(index);
    	},
    
    	jumpAgreement: function(e) { 
    		wx.navigateTo({ 
    			url: '/pages/member/agreement/agreement'
    		})
    	},
    
    	getMemebrRankList: function() { 
    		var vm = this;
    		ajax({ 
    			url: api.getMemebrRankList,
    			success: function(res) { 
    				console.log(res.retval.member_rank_list, '?')
    				vm.setData({ 
    					levelList: res.retval.member_rank_list
    				})
    			}
    		})
    	},
    
    	changeName: function(e) { 
    		var real_name = e.detail.value;
    		console.log(real_name, 'gaganame')
    		this.setData({ 
    			real_name: real_name,
    		})
    	},
    	changeMobile: function(e) { 
    		var phone = e.detail.value;
    		this.setData({ 
    			mobile: phone,
    		})
    	},
    
    	paidMoney: function(e) { 
    		var vm = this;
    		var paidData = { 
    			user_id: vm.data.user_id,
    			member_rank_id: e.currentTarget.dataset.id,
    			real_name: vm.data.real_name,
    			mobile: vm.data.mobile,
    		};
    		vm.setData({ 
    			loading: true,
    		})
    		ajax({ 
    			url: api.paidMemberMoney,
    			data: paidData,
    			success: function(res) { 
    				var receiveData = res.retval.wxPayData;
    				var obj = { 
    					appId: receiveData.appId,
    					nonceStr: receiveData.nonceStr,
    					package: receiveData.package,
    					paySign: receiveData.paySign,
    					signType: receiveData.signType,
    					timeStamp: receiveData.timeStamp,
    				}
    				wx.requestPayment(obj);
    			},
    			complete: function() { 
    				vm.setData({ 
    					loading: false,
    				})
    				wx.stopPullDownRefresh()
    			}
    		})
    	}
    
    })

css：

/* pages/member/level/level.wxss */
    page { 
    	/* background-color: #1E2133; */
    	height: 100%;
    	width: 100%;
    }
    
    .level-container .record-nav .uni-scroll-view::-webkit-scrollbar { 
    	display: none;
    }
    
    .level-container { 
    	height: 100%;
    	margin-bottom: 34rpx;
    }
    
    .swiper-box { 
    	height: 100vh;
    }
    
    .level-nav { 
    	width: 750rpx;
    	height: 80rpx;
    	flex-direction: row;
    	white-space: nowrap;
    	background: #fff;
    	text-align: center;
    	border-radius: 20rpx 20rpx 0px 0px;
    	border-bottom: 2rpx solid $ns-border-color-gray;
    }
    
    .uni-tab-item { 
    	display: inline-block;
    	flex-wrap: nowrap;
    	padding-left: 24rpx;
    	padding-right: 24rpx;
    }
    
    .uni-tab-item-title { 
    	color: #555;
    	font-size: 30rpx;
    	display: block;
    	height: 76rpx;
    	line-height: 76rpx;
    	border-bottom: 2px solid #fff;
    	padding: 0 10rpx;
    	flex-wrap: nowrap;
    	white-space: nowrap;
    }
    
    .uni-tab-item-title-active { 
    	display: block;
    	height: 76rpx;
    	color: #F8AD8F;
    	border-bottom: 6rpx solid #F8AD8F;
    	padding: 0 10rpx;
    }
    
    .record-nav::-webkit-scrollbar { 
    	width: 0;
    	height: 0;
    	color: transparent;
    }
    
    .swiper-item { 
    	height: 100% !important;
    }
    
    
    .m-bottom { 
    	position: fixed;
    	bottom: 34rpx;
    	left: 25rpx;
    }
    
    .m-bottom .btn { 
    	display: flex;
    	flex-flow: column nowrap;
    	justify-content: center;
    	align-items: center;
    	width: 700rpx;
    	height: 100rpx;
    	background: linear-gradient(90deg, rgba(100, 99, 104, 1) 0%, rgba(37, 37, 37, 1) 100%);
    	border-radius: 10rpx;
    }
    
    .m-bottom .txt { 
    	font-size: 36rpx;
    	font-family: Microsoft YaHei;
    	font-weight: 400;
    	color: rgba(255, 255, 255, 1);
    	margin-bottom: 11rpx;
    }
    
    .m-bottom .price { 
    	font-size: 24rpx;
    	font-family: Microsoft YaHei;
    	font-weight: 400;
    	color: rgba(255, 255, 255, 1);
    }
    
    .m-modals { 
    	position: fixed;
    	z-index: 5;
    	width: 100%;
    	height: 100%;
    	box-sizing: border-box;
    	top: 100%;
    	left: 0;
    
    }
    
    .m-modals>.mask { 
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	box-sizing: border-box;
    	background-color: rgba(0, 0, 0, 0.4);
    }
    
    .m-modals>.ct { 
    	position: absolute;
    	bottom: -640rpx;
    	left: 0;
    	width: 100%;
    	box-sizing: border-box;
    	background-color: #fff;
    	height: 640rpx;
    	transition: all 0.4s ease;
    	border-radius: 20rpx 20rpx 0px 0px;
    	overflow: hidden;
    	padding: 36rpx 25rpx 33rpx 25rpx;
    }
    
    .m-modals.z-show { 
    	top: 0;
    }
    
    .m-modals.z-show>.ct { 
    	bottom: 0
    }
    
    .m-modals .top { 
    	display: flex;
    	margin-bottom: 60rpx;
    }
    
    .m-modals .top .title { 
    	flex:1;
    	font-size: 32rpx;
    	font-family: Microsoft YaHei;
    	font-weight: 400;
    	color: #232323;
    }
    .m-modals .icon-right{ 
    	flex:1;
    	text-align: right;
    	font-size:32rpx;
    	color: #B3B3B3;
    }
    
    .m-modals .content { 
    	font-size: 32rpx;
    	font-family: Microsoft YaHei;
    	font-weight: 400;
    	color: rgba(35, 35, 35, 1);
    }
    
    .m-modals .content .item { 
    	display: flex;
    	align-items: center;
    	padding-left: 13rpx;
    	width: 700rpx;
    	height: 64rpx;
    	background: rgba(255, 255, 255, 1);
    	box-shadow: 0px 2rpx 0px 0px rgba(0, 0, 0, 0.1);
    	border-radius: 22rpx;
    	margin-bottom: 47rpx;
    	color: #B3B3B3;
    }
    
    .m-modals .content .item .txt { 
    	padding-left: 9rpx;
    	font-size: 28rpx;
    	font-family: Microsoft YaHei;
    	font-weight: 400;
    }
    
    .m-modals .content .contract { 
    	font-size: 24rpx;
    	font-family: Microsoft YaHei;
    	font-weight: 400;
    	color: rgba(179, 179, 179, 1);
    	margin-bottom: 21rpx;
    }
    
    .m-modals .content .contract .txt { 
    	color: #B3B3B3;
    }
    
    .m-modals .content .contract .num { 
    	color: #232323;
    }
    
    .m-modals .content .s-checkbox { 
    	margin-top: 10rpx;
    	font-size: 24rpx;
    	font-family: Microsoft YaHei;
    	font-weight: 400;
    	color: rgba(179, 179, 179, 1);
    }
    
    .m-modals .content .agreement { 
    	color: #F8AD8F;
    }
    
    .m-modals .btn { 
    	display: flex;
    	flex-flow: column nowrap;
    	justify-content: center;
    	align-items: center;
    	width:700rpx;
    	height:80rpx;
    	background:linear-gradient(90deg,rgba(100,99,104,1) 0%,rgba(37,37,37,1) 100%);
    	border-radius:10rpx;
    	margin-top: 34rpx;
    	font-size:32rpx;
    	font-family:Microsoft YaHei;
    	font-weight:400;
    	color:rgba(255,255,255,1);
    }
    
    .level-content{ 
    	width: 100%;
    /* height: 100vh; */
    }
    .level-content image{ 
    	height: 100%;
    }
    
    checkbox .wx-checkbox-input { 
    	width: 30rpx !important;
    	height: 30rpx !important;
    	border: 2px solid #F8AD8F !important;
    }
    
    checkbox .wx-checkbox-input.wx-checkbox-input-checked { 
    	color: #fff;
    	background: #F8AD8F;
    }

[https_developers.weixin.qq.com_miniprogram_dev_framework_liveplayer_live-player-plugin.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/liveplayer/live-player-plugin.html