<template>
	<view class="box">
		<!-- 直播详情 -->
		<view class="sinaTvTitle flex a-center p-32">
			<view class="mr-18">
				<u-avatar :src="sinaTv.url" size="80"></u-avatar>
			</view>
			<view class="flex-1">
				<h4>{{sinaTv.title}}</h4>
				<view class="flex j-between a-center font-color font-24">
					<text>开始时间：{{sinaTv.time}}</text>
					<text>{{sinaTv.number}}人观看</text>
				</view>
			</view>
		</view>
		<u-gap height="8" bgColor="#F5F5F5"></u-gap>
		<!-- 老师介绍 -->
		<scroll-view class="parse" scroll-y="true">
			<view class="teacher flex a-center p-32">
				<view class="mr-18">
					<u-avatar :src="sinaTv.url" size="80" shape="square"></u-avatar>
				</view>
				<view class="flex-1 flex flex-col">
					<h4 class="flex-1">{{teacher.name}}</h4>
					<!-- <view class="flex j-between a-center font-color font-24 flex-1">
					<text class="flex-1 teacher-details">{{teacher.text}}</text>
					<u-icon name="arrow-down"></u-icon>
				</view> -->
					<u-collapse @close="falg = false" @open="falg = true" :border="false">
						<u-collapse-item name="Docs guide">
							<text slot="title" class=" teacher-details">
								{{falg ? "简介：" : "简介：" + teacher.text}}
							</text>
							<text class="">{{teacher.text}}</text>
						</u-collapse-item>
					</u-collapse>
				</view>
			</view>
			<u-gap height="8" bgColor="#F5F5F5" textIndent="28"></u-gap>
			<!-- 富文本编辑器 -->
			<view class="p-32">
				<u-parse :content="content"></u-parse>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "sinatv",
		data() {
			return {
				falg: false,
				sinaTv: {
					title: "欧畅云特别功能讲解直播内容",
					time: "2022-09-18 15:00",
					number: 1534,
					url: "/static/images/gift/599778030eff04b11420e3d8751bfbb6 1@2x.png"
				},
				teacher: {
					url: "/static/images/gift/599778030eff04b11420e3d8751bfbb6 1@2x.png",
					name: "李老师",
					text: "本人主修钢琴。具有高级教师资格证广东省本人主修钢琴。具有高级教师资格证广东省,本人主修钢琴。具有高级教师资格证广东省本人主修钢琴。具有高级教师资格证广东省本人主修钢琴。具有高级教师资格证广东省本人主修钢琴。具有高级教师资格证广东省"
				},
				content: `
					<p>直播营销：最直观的方式，打造商品品牌，给更多粉丝用户传递品牌形象。大数据覆盖，挖掘潜在用户，增进商家和其私域用户感情，提高私域用户感情，提高私域流量活跃度，提升</p>
					<img src="/static/images/gift/599778030eff04b11420e3d8751bfbb6 1@2x.png" />
					<p>直播营销：最直观的方式，打造商品品牌，给更多粉丝用户传递品牌形象。大数据覆盖，挖掘潜在用户，增进商家和其私域用户感情，提高私域用户感情，提高私域流量活跃度，提升</p>
					<img src="/static/images/gift/599778030eff04b11420e3d8751bfbb6 1@2x.png" />
					<p>直播营销：最直观的方式，打造商品品牌，给更多粉丝用户传递品牌形象。大数据覆盖，挖掘潜在用户，增进商家和其私域用户感情，提高私域用户感情，提高私域流量活跃度，提升</p>
					<img src="/static/images/gift/599778030eff04b11420e3d8751bfbb6 1@2x.png" />
				`
			};
		}
	}
</script>

<style lang="scss" scoped>
	.border {
		border: 1px solid grey;
	}

	.font-color {
		color: #777777;
	}

	.font-24 {
		font-size: 24rpx;
	}

	.mr-18 {
		margin-right: 18rpx;
	}

	.p-32 {
		padding: 32rpx;
	}

	.teacher-details {
		width: 534rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
		transform: translate(-30rpx);
	}

	.parse {
		height: calc(100vh - 700rpx);
	}
</style>