<template>
	<view class="contents">
		<!-- 视频区 -->
		<view class="banner"></view>
		<login></login>
		<tabs @skipComponent = "skip"></tabs>
		<!-- 聊天 -->
		<component :is="currentTabComponent" :specialUrl="special"></component>
		<!-- 底部 -->
		<view class="footer" v-show="currentTabComponent == 'chat'">
			<foot @specialShow="specialShow"></foot>
		</view>
	</view>
</template>

<script>
	import login from "@/components/login/login.vue"
	import tabs from "@/components/tabs/tabs.vue"
	import foot from "@/components/footer/footer.vue"
	import chat from "@/components/chat/chat.vue"
	import sinatv from "@/components/tabs/sinaTv/sinaTv.vue"
	import courseware from "@/components/tabs/courseware/courseware.vue"
	export default {
		components: {
			foot,chat,login,tabs,sinatv,courseware
		},
		data() {
			return {
				loading: true,
				value:'',
				currentTabComponent:'chat',
				special:""
			}
		},
		onLoad() {
			
		},
		onshow() {

		},
		methods: {
			skip(value){
				this.currentTabComponent = value
			},
			specialShow(url){
				this.special = url
				let _this = this
				let timer = setTimeout(() => {
					_this.special = ''
				},1000)
			},
		}
	}
</script>

<style lang="scss">
	.contents {
		width: 750rpx;
		display: flex;
		flex-direction: column;

		.banner {
			width: 100%;
			height: 420rpx;
			background-image: url("../../static/images/banner.png");
			background-repeat: no-repeat;
			background-size: contain;
		}

		.title {
			height: 72rpx;
			background-color: #5E6DF0;
			color: white;
			display: flex;
			align-items: center;
			padding-left: 20rpx;
		}

		.footer {
			height: 88rpx;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			background-color: white;
			box-shadow: 0 -2rpx 30rpx #dadada;;
		}
	}
</style>
