<template>
	<div class="whole">
		<view class="topHead" id="topHead">
			<view class="box">
				<view class="item" v-for="item in itemList" :key="item.id" :class="tabIndex === item.id ? 'active' : ''" @click="changeTop(item.id)">{{item.text}}</view>
			</view>
		</view>
		
		<view class="listBox">
			<swiper class="vanswiper" :circular="false" :current="tabIndex" @animationfinish="finishSwiper">
				<swiper-item>
					<scroll-view :scroll-y="true" style="height: 100%;" class="msgBox">
						<div class="guanzhu" v-if="!is_subscribe && showTips">
							<div :style="{color: Color}">订阅关注公众号，查看及时消息</div>
							<div class="anniu">
								<text @click="followSubscribe()">订阅</text>&nbsp;
								<up-icon name="close" size="14" @click="showTips = false" />
							</div>
						</div>
						
						<view class="vanBox" v-if="role == 0">
							<view class="box">
								<view class="left">
									<view class="title">专属管家服务~</view>
									<view class="text">贴心解答、退货包运费</view>
									<view class="btn">
										<text>长按右侧二维码</text>
										<view class="click" :style="{backgroundImage: 'url(' + sp2 + ')'}"></view>
									</view>
								</view>
								<image :src="qr_img" mode="widthFix" show-menu-by-longpress class="qr_img"></image>
							</view>
						</view>
						
						<view class="row" v-for="(item, index) in messageList" :key="index" @click="viewMsg(item.type)">
							<view class="icon">
								<view class="img">
									<text v-if="item.type == 1" class="iconfont icon-notice"></text>
									<text v-else-if="item.type == 2" class="iconfont icon-set"></text>
									<text v-else-if="item.type == 3" class="iconfont icon-gongdan"></text>
									<text v-else-if="item.type == 4" class="iconfont icon-warn"></text>
									<text v-else-if="item.type == 5" class="iconfont icon-gongzuotai"></text>
									<text v-else-if="item.type == 6" class="iconfont icon-gonggaolan"></text>
									<text v-else class="iconfont icon-notice"></text>
								</view>
								<view class="num" v-if="item.un_read_count">{{item.un_read_count > 99 ? '99+' : item.un_read_count}}</view>
							</view>
							<view class="box">
								<view class="title">
									<view class="tit">{{titObj[item.type]}}</view>
									<view class="time">{{item.last_message && item.last_message.created_at && item.last_message.created_at.slice(0, 16)}}</view>
								</view>
								<view class="txt">{{item.last_message && item.last_message.content && item.last_message.content.title}}</view>
							</view>
						</view>
						
						<view class="row" @click="toJump('/pages/mine/msg/select')" v-if="role == 0">
							<view class="icon flex"><up-icon name="info-circle" color="#333" :size="26" /></view>
							<view class="box">
								<view class="title">
									<view class="tit">投诉与反馈</view>
								</view>
							</view>
						</view>
						
						<view class="noMsg" v-if="!messageList.length && role !== 0">
							<up-empty mode="message" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/message.png" text="暂无消息"></up-empty>
						</view>
						
						<view v-if="messageList.length || role == 0" style="margin-top: 30rpx;">
							<cf-cloud></cf-cloud>
						</view>
					</scroll-view>
				</swiper-item>
				
				<swiper-item>
					<scroll-view :scroll-y="true" style="height: 100%;" @scrolltolower="scorllGrassBottom" class="grassBox">
						<view class="item" v-for="item in infoList" :key="item.id">
							<view class="oneBox" @click="toPage('/pages/mine/other/grassShare?id=' + item.id)">
								<image :src="item.user.avatar"></image>
								<view class="right">
									<view class="flex1">
										<view class="name">{{item.user.nickname}}</view>
										<view class="time">{{item.created_at}}</view>
									</view>
									<view class="sku">购买商品：{{item.item.goods_name}}
										<text v-if="item.item.sku_name">【{{item.item.sku_name}}】</text>
									</view>
								</view>
							</view>
							<view class="desc" @click="toPage('/pages/mine/other/grassShare?id=' + item.id)">{{item.comment}}</view>
							<view class="box_zong" v-if="item.material.length">
								<view class="box_imgs" v-for="(it, index) in item.material" :key="index">
									<image :src="it.url" v-if="it.type === 1" @click="preView(it, item.material)" mode="aspectFill"></image>
									<template v-else>
										<image :src="it.img_video" mode="aspectFill"></image>
										<view class="play" @click="preView(it)"><van-icon name="play-circle" color="#fff" size="40" /></view>
									</template>
								</view>
							</view>
							<view v-if="item.group_goods" class="twoBox" @click="toPage('/pages/groups/index?id=' + item.group_goods.id)">
								<view class="face_img">
									<image class="img" :src="item.group_goods.face_img" mode="aspectFill"></image>
									<view class="out flex" v-if="item.group_goods.sold_status === 2">
										<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/01/16/Cr6cRRhhqYNhScigxIyumyV9hXXMI3vKvsE1jgt0.png" class="out_img" mode="widthFix"></image>
									</view>
									<view class="out flex" v-else-if="item.group_goods.sold_status === 0">
										<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/08/21/QBhUheeYWSJ3OGM27fkAufJAlFSA8GBhWjpY5oNy.png" class="out_img" mode="widthFix"></image>
									</view>
									<view class="out flex" v-else-if="item.group_goods.total_stock === 0">
										<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/08/21/pMTv6QiZZEpSqkJmk7hMcbEzIuNzMyp7YVBbe42H.png" class="out_img" mode="widthFix"></image>
									</view>
								</view>
								<view class="box">
									<view class="tit">{{item.group_goods.title}}</view>
									<view class="text">{{item.group_goods.visitor}}人看过 | {{item.group_goods.order_count}}人跟团</view>
									<view class="flex1">
										<view class="price" v-if="item.group_goods.min_price == item.group_goods.max_price">￥{{item.group_goods.min_price}}</view>
										<view class="price" v-else>￥{{item.group_goods.min_price}}-{{item.group_goods.max_price}}</view>
										<view class="buy flex">立即跟团</view>
									</view>
								</view>
							</view>
						</view>
						<view class="bottom" v-if="page >= lastPage && !loading1 && infoList.length">- 到底啦 -</view>
						<view class="bottom" v-if="loading1">加载中...</view>
						
						<view v-if="!loading1 && !infoList.length">
							<up-empty mode="message" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/comment.png" text="暂无数据喔"></up-empty>
						</view>
					</scroll-view>
				</swiper-item>
				
				<swiper-item>
					<scroll-view :scroll-y="true" style="height: 100%;" @scrolltolower="scorllVideoBottom">
						<view class="videoBox">
							<view class="left">
								<template v-for="(item, index) in videoList" :key="item.id">
									<view class="row" @click="toPage('/pages/groups/video?id=' + item.id)" v-if="index % 2 == 0">
										<view class="img">
											<image :src="item.explain_video + '?x-oss-process=video/snapshot,t_1000,m_fast'" mode="widthFix"></image>
											<view class="icon"><up-icon name="play-right-fill" size="18" color="#fff" /></view>
										</view>
										<view class="desc">{{item.description}}</view>
										<view class="num">{{item.visitor}}人看过 | {{item.order_count}}人跟团</view>
									</view>
								</template>
							</view>
							<view class="left">
								<template v-for="(item, index) in videoList" :key="item.id">
									<view class="row" @click="toPage('/pages/groups/video?id=' + item.id)" v-if="index % 2 == 1">
										<view class="img">
											<image :src="item.explain_video + '?x-oss-process=video/snapshot,t_1000,m_fast'" mode="widthFix"></image>
											<view class="icon"><up-icon name="play-right-fill" size="18" color="#fff" /></view>
										</view>
										<view class="desc">{{item.description}}</view>
										<view class="num">{{item.visitor}}人看过 | {{item.order_count}}人跟团</view>
									</view>
								</template>
							</view>
						</view>
						
						<view class="noMore" v-if="videoList.length && !has_more && !loading2">— 没有更多了 —</view>
						<view v-if="!videoList.length && !loading2">
							<up-empty mode="message" icon="https://ct-upimg.yx090.com/ju8hn6/shop/image/2023/12/05/0BciBSqb3FuUU3EYvXDjqcblM4i6wNZUfZSaJNWV.png" text="暂无数据"></up-empty>
						</view>
						<view v-if="loading2" class="loadbox">
							<up-loading-icon text="加载中..." textSize="14"></up-loading-icon>
						</view>
					</scroll-view>
				</swiper-item>
				
				<swiper-item>
					<scroll-view :scroll-y="true" style="height: 100%;" @scrolltolower="scorllLiveBottom" class="liveBox">
						<view class="item" v-for="item in liveList" :key="item.id" @click="toPage('/pages/live/index?live_id=' + item.id)">
							<image class="img" :src="item.cover_img" mode="aspectFill"></image>
							<view class="box">
								<view class="tit">{{item.name}}</view>
								<view class="time" v-if="item.live_start_time">{{item.live_start_time.slice(5, 16)}}开播</view>
							</view>
							<text class="iconfont icon-liveing"></text>
						</view>
						<view v-if="!liveList.length">
							<up-empty mode="message" icon="https://ct-upimg.yx090.com/ju8hn6/shop/image/2023/12/05/0BciBSqb3FuUU3EYvXDjqcblM4i6wNZUfZSaJNWV.png" text="暂无直播"></up-empty>
						</view>
					</scroll-view>
				</swiper-item>
				
			</swiper>
		</view>
		
		<video-dialog :url="videoUrl" :show="showVideo" @close="showVideo = false"></video-dialog>
		
	</div>
	
	<tabbar :chooseIndex="2" :num="cartNum" :msgNum="msgNum" />
	
</template>

<script>
	import { get, post } from '@/api/request.js'
	import { ref, reactive, toRefs } from 'vue'
	import tabbar from '@/components/tabbar/index.vue'
	import { sp2 } from '@/components/img.js'
	import { Style } from '@/utils/list.js'
	import cfCloud from '@/components/cfCloud/index.vue'
	import videoDialog from '@/components/videoDialog/index.vue'
	
	export default {
		components: {
			tabbar, cfCloud, videoDialog
		},
		setup() {
			const data = reactive({
				sp2: sp2,
				cartNum: 0,
				messageList: [],
				msgNum: 0,
				titObj: {
					'1': '系统通知',
					'2': '订单通知',
					'3': '工单通知',
					'4': '投诉通知',
					'5': '平台通知',
					'6': '公告栏'
				},
				is_subscribe: 0,
				showTips: true,
				Color: uni.getStorageSync('theme_color'),
				bgColor: Style[uni.getStorageSync('theme_index') * 1].bgColor,
				tagColor: Style[uni.getStorageSync('theme_index') * 1].tagColor,
				qr_img: '',
				topHeight: 66,
				itemList: [
					{ id: 0, value: 'msg', text: '消息',  },
					{ id: 1, value: 'grass', text: '种草' },
					{ id: 2, value: 'video', text: '视频' },
					{ id: 3, value: 'live', text: '直播' }
				],
				tabIndex: 0,
				role: uni.getStorageSync('role'),
				infoList: [],
				page: 1,
				lastPage: 0,
				loading1: false,
				last_id: 0,
				loading2: true,
				has_more: true,
				videoList: [],
				showVideo: false,
				videoUrl: '',
				imageUrl: 'https://ct-upimg.yx090.com/g.ii090/images/sprite/follow_buy.jpg',
				liveList: [],
				loading3: false,
				lastPage3: 0,
				page3: 1
			})
			
			// 消息类型 1-系统通知 2-订单通知 3-工单通知 4-投诉通知
			function getMsgNum() {
				get('/api/v1/messages/count').then((res) => {
					data.messageList = res.data.types || []
					data.msgNum = res.data.total
					uni.setStorageSync('msgNum', data.msgNum)
				})
			}
			
			function viewMsg(type) {
				let tit = data.titObj[type]
				uni.navigateTo({
					url: '/pages/mine/msg/list?tit=' + tit + '&type=' + type
				})
			}
			
			const followSubscribe = () => {
				wx.navigateTo({
					url: '/pages/article/index'
				})
			}
			
			function getUserInfo() {
				get('/api/v1/shopScore/user').then((res) => {
					data.is_subscribe = res.data.user && res.data.user.is_subscribe
					wx.setStorageSync('subscribe', data.is_subscribe)
				})
			}
			
			async function getQrCodeImg() {
				await get('/api/v1/user/qrCode').then((res) => {
					data.qr_img = res.data.qr_code
				})
			}
			
			function toJump(url) {
				uni.navigateTo({
					url: url
				})
			}
			
			const changeTop = (id) => {
				if(id !== data.tabIndex) {
					data.tabIndex = id
				}
			}
			
			function finishSwiper(e) {
				data.tabIndex = e.detail.current
			}
			
			function fetchGrassList(val = 0) {
				data.loading1 = true
				get(`/api/v1/orderComment/recommend`, {
					page: data.page,
					pageSize: 20
				}).then((res) => {
					data.infoList = val == 0 ? res.data : data.infoList.concat(res.data)
					data.lastPage = res.last_page
					data.loading1 = false
				}).catch(() => {
					data.loading1 = false
				})
			}
			
			const preView = (it, imgs) => {
				var img = []
				imgs && imgs.forEach((res) => {
					if (res.type == 1) {
						img.push(res.url)
					}
				})
				if (it.type === 1) {
					uni.previewImage({
						current: it.url,
						urls: img
					})
				} else {
					data.showVideo = true
					data.videoUrl = it.url
				}
			}
			
			function scorllGrassBottom() {
				if (data.page < data.lastPage) {
					data.page ++
					fetchGrassList(1)
				}
			}
			
			function scorllVideoBottom() {
				if (data.has_more && !data.loading) {
					getVideoList()
				}
			}
			
			function scorllLiveBottom() {
				if (data.page3 < data.lastPage3) {
					data.page3 ++
					getLiveList(1)
				}
			}
			
			function getVideoList() {
				data.loading2 = true
				get('/api/v1/goods/videos', {last_id: data.last_id, pageSize: 20}).then(res => {
					data.videoList = data.videoList.concat(res.data)
					data.last_id = res.last_id
					data.has_more = res.has_more
					data.loading2 = false
				}).catch(() => {
					data.loading2 = false
				})
			}
			
			function getLiveList(val = 0) {
				data.loading3 = true
				get('/api/v1/live/customer/lives', {page: data.page3, pageSize: 20}).then(res => {
					data.liveList = data.liveList.concat(res.data)
					data.lastPage3 = res.meta.last_page
					data.loading3 = false
				}).catch(() => {
					data.loading3 = false
				})
			}
			
			function toPage(url) {
				uni.navigateTo({
					url: url
				})
			}
			
			return {
				...toRefs(data),
				getMsgNum,
				viewMsg,
				followSubscribe,
				getUserInfo,
				getQrCodeImg,
				changeTop,
				finishSwiper,
				toJump,
				fetchGrassList,
				scorllGrassBottom,
				scorllVideoBottom,
				getVideoList,
				toPage,
				preView,
				getLiveList,
				scorllLiveBottom
			}
		},
		async onLoad(options) {
			this.tabIndex = (options.index || 0) * 1
			this.fetchGrassList()
			this.getVideoList()
			this.getLiveList()
		},
		onShow() {
			setTimeout(() => {
				if(uni.getStorageSync('msg_index')) {
					this.tabIndex = uni.getStorageSync('msg_index') * 1
					uni.removeStorageSync('msg_index')
				}
			}, 400)
			this.cartNum = Number(uni.getStorageSync('cartNum')) || 0
			this.getMsgNum()
			this.getUserInfo()
			if(this.role === 0) {
				this.getQrCodeImg()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.flex1{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.whole {
		position: relative;
		height: calc(100vh - 110rpx);
		overflow: hidden;
		.topHead{
			width: 100%;
			height: 100rpx;
			z-index: 10;
			background: #fff;
			padding: 0 24rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			.box{
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
			}
			.item {
				font-size: 32rpx;
				color: #111;
				position: relative;
				margin-right: 40rpx;
				&.active{
					font-weight: 600;
					font-size: 38rpx;
					&::before{
						position: absolute;
						width: 36px;
						height: 4px;
						content: '';
						background: linear-gradient(to right , v-bind('bgColor'), v-bind('Color'));
						left: 50%;
						margin-left: -20px;
						bottom: -4px;
					}
				}
			}
		}
		.listBox{
			height: calc(100% - 100rpx);
			box-sizing: border-box;
			overflow: hidden;
			.vanswiper{
				height: 100%;
			}
		}
		.msgBox{
			.vanBox{
				padding: 24rpx;
				box-sizing: border-box;
				.box{
					background-color: #fff;
					padding: 24rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					border-radius: 10rpx;
					.left{
						width: calc(100% - 270rpx);
						.title{
							font-size: 34rpx;
							color: #333;
						}
						.text{
							font-size: 24rpx;
							color: #999;
							margin: 20rpx 0;
						}
						.btn{
							width: 300rpx;
							height: 70rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							border-radius: 70rpx;
							color: #fff;
							font-size: 24rpx;
							padding: 0 20rpx;
							background-color: v-bind('Color');
							.click{
								width: 27px;
								height: 27px;
								background-repeat: no-repeat;
								background-size: 452px 408px;
								background-position: -416.33px -85.33px;
								transform: scale(0.8);
							}
						}
					}
					.qr_img{
						width: 200rpx;
						height: 200rpx;
					}
				}
			}
			.row{
				display: flex;
				padding: 30rpx;
				border-bottom: 1px solid #F2F2F2;
				background-color: #fff;
				justify-content: space-between;
				.icon{
					width: 48.5px;
					height: 48.5px;
					position: relative;
					&.flex{
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #F2F2F2;
						border-radius: 8rpx;
					}
					.img{
						width: 100%;
						height: 100%;
						background-color: #F1F1F1;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 10rpx;
						.iconfont{
							font-size: 24px;
							color: #373536;
						}
					}
					.num{
						border-radius: 20rpx 20rpx 20rpx 0;
						border: 1px solid #fff;
						background-color: v-bind('tagColor');
						font-size: 22rpx;
						color: #fff;
						padding: 6rpx 10rpx;
						position: absolute;
						top: -26rpx;
						left: 100%;
						margin-left: -18rpx;
						line-height: 1;
					}
				}
				.box{
					width: calc(100% - 130rpx);
					.title{
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 16rpx;
						.tit{
							font-size: 32rpx;
							color: #333;
							width: calc(100% - 260rpx);
						}
						.time{
							font-size: 24rpx;
							color: #9D9D9D;
						}
					}
					.txt{
						font-size: 28rpx;
						color: #9D9D9D;
					}
				}
			}
		}
		
		
		.noMsg{
			width: 100%;
			height: calc(100vh - 64rpx);
			display: flex;
			align-items: center;
			flex-direction: column;
			padding-top: 20%;
			box-sizing: border-box;
			font-size: 26rpx;
			color: #9D9D9D;
		}
		.guanzhu {
			font-size: 26rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: v-bind('bgColor');
			padding: 15rpx 30rpx;
			.anniu {
				text{
					background: v-bind('Color');
					border-radius: 8rpx;
					color: #fff;
					font-size: 24rpx;
					padding: 5rpx 25rpx;
				}
			}
		}
		.grassBox{
			.item{
				background-color: #fff;
				margin-bottom: 20rpx;
				box-sizing: border-box;
				padding: 24rpx;
				.oneBox{
					display: flex;
					image{
						width: 70rpx;
						height: 70rpx;
						border-radius: 8rpx;
						background: #666;
						margin-right: 20rpx;
					}
					.right{
						width: calc(100% - 90rpx);
						.name{
							font-size: 28rpx;
							color: #333;
							line-height: 1;
						}
						.time{
							font-size: 24rpx;
							color: #999;
						}
						.sku{
							color: #999;
							margin-top: 10rpx;
							font-size: 24rpx;
						}
					}
				}
				.desc{
					font-size: 28rpx;
					line-height: 48rpx;
					margin-top: 14rpx;
				}
				.pic{
					margin-top: 14rpx;
					image{
						width: 48%;
						vertical-align: bottom;
						margin-right: 4%;
						&:nth-child(2n+2) {
							margin-right: 0;
						}
					}
				}
				.twoBox{
					margin-top: 20rpx;
					background-color: #F7F7F7;
					border-radius: 10rpx;
					display: flex;
					justify-content: space-between;
					.face_img{
						width: 180rpx;
						height: 180rpx;
						position: relative;
						.img{
							width: 100%;
							height: 100%;
							vertical-align: bottom;
						}
						.out{
							position: absolute;
							width: 100%;
							height: 100%;
							left: 0;
							top: 0;
							.out_img{
								width: 100rpx;
								height: 100rpx;
							}
						}
					}
					.box{
						padding: 16rpx;
						box-sizing: border-box;
						flex: 1;
					}
					.tit{
						font-size: 28rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						white-space: break-spaces;
					}
					.text{
						font-size: 24rpx;
						margin: 6rpx 0 10rpx;
						color: #999;
					}
					.price{
						color: v-bind('priceColor');
						font-size: 30rpx;
						font-weight: 600;
					}
					.buy{
						color: #fff;
						font-size: 26rpx;
						width: 150rpx;
						height: 54rpx;
						background: v-bind('Color');
						border-radius: 10rpx;
					}
				}
			}
			.bottom {
				text-align: center;
				font-size: 24rpx;
				color: #999999;
				margin: auto;
				line-height: 80rpx;
			}
			.box_zong{
				display: flex;
				flex-wrap: wrap;
				.box_imgs{
					margin: 20rpx 20rpx 0 0;
					position: relative;
					width: calc(50% - 13rpx);
					height: 340rpx;
					&:nth-child(2n+2) {
						margin-right: 0;
					}
					image{
						width: 100%;
						height: 100%;
						vertical-align: bottom;
					}
					.play{
						position: absolute;
						left: 0;
						top: 0;
						background-color: rgba(0, 0, 0, 0.4);
						display: flex;
						align-items: center;
						justify-content: center;
						width: 100%;
						height: 100%;
						z-index: 1;
					}
				}
			}
		}
		.videoBox{
			padding: 24rpx 1.5%;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			.left{
				width: 50%;
				padding: 0 1.5%;
				box-sizing: border-box;
			}
			.row{
				background-color: #fff;
				border-radius: 10rpx;
				width: 100%;
				margin-bottom: 24rpx;
				overflow: hidden;
				.img{
					width: 100%;
					position: relative;
					image{
						width: 100%;
						height: auto;
					}
					.icon{
						position: absolute;
						top: 20rpx;
						right: 20rpx;
						background-color: rgba(0,0,0,0.5);
						border-radius: 50%;
						width: 26px;
						height: 26px;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				.desc{
					font-size: 28rpx;
					overflow: hidden !important;
					text-overflow: ellipsis !important;
					display: -webkit-box !important;
					-webkit-line-clamp: 2 !important;
					-webkit-box-orient: vertical !important;
					white-space: break-spaces !important;
					padding: 0 20rpx;
					margin: 10rpx 0;
				}
				.num{
					font-size: 24rpx;
					padding: 10rpx 20rpx 20rpx;
					color: #999;
				}
			}
		}
		.noMore{
			text-align: center;
			font-size: 24rpx;
			color: #999;
			margin: auto;
			padding: 30rpx 0 60rpx;
			width: 100%;
		}
		.noMsg{
			width: 100%;
			height: 100vh;
			display: flex;
			align-items: center;
			flex-direction: column;
			padding-top: 20%;
			box-sizing: border-box;
			font-size: 26rpx;
			color: #9D9D9D;
		}
		.loadbox{
			padding: 30rpx 0;
			text-align: center;
			color: #666;
		}
		.liveBox{
			.item{
				background-color: #fff;
				margin-bottom: 20rpx;
				box-sizing: border-box;
				padding: 24rpx;
				display: flex;
				position: relative;
				.img{
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
				.box{
					width: calc(100% - 200rpx);
					padding: 20rpx;
					box-sizing: border-box;
					.tit{
						font-weight: 600;
						font-size: 30rpx;
						margin-bottom: 20rpx;
					}
					.time{
						color: #f90;
						font-size: 24rpx;
					}
				}
				.icon-liveing{
					position: absolute;
					left: 24rpx;
					bottom: 24rpx;
					font-size: 20px;
					color: v-bind('Color');
					background: #fff;
				}
			}
		}
	}
</style>
