<template>
	<view class='Rstudy' :style="{
		'padding-top':info.PaddingTop+'px',
		'padding-right':info.PaddingRight+'px',
		'padding-bottom':info.PaddingBottom+'px',
		'padding-left':info.PaddingLeft+'px',
		'bottom':posiTop+'px'
	}"
		v-if="isshow==true"
	>
		<view class='Rstudy-box' :style="{width:windowWidth+'px'}">
			<view class="close" v-if="info.isleft==1" @click="isshow=false">
				<u-icon name="cross" color="#FFF" size="40"></u-icon>
			</view>
			<view class="content" :style="{width:textWidth+'px'}">
				<view class="cover" v-if='info.isimg ==1'>
					<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601282872605&di=686b8ba4f0e837522a97d77267a2da18&imgtype=0&src=http%3A%2F%2Ft8.baidu.com%2Fit%2Fu%3D2247852322%2C986532796%26fm%3D79%26app%3D86%26f%3DJPEG%3Fw%3D1280%26h%3D853" style="width: 100%;height: 100%;border-radius: 5px;"></image>
				</view>
				<view class="content-r" :style="{width:(textWidth-70-10)+'px'}">
					<text class="content-Name" v-if='info.isName ==1'>vue初级入门最新</text>
					<text class="progress" v-if='info.isschedule ==1'>小白入门-ref的使用</text>
				</view>
			</view>
			<view class="close" v-if="info.isleft==2" @click="isshow=false">
				<u-icon name="cross" color="#FFF" size="40"></u-icon>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				info:{
					PaddingTop:0,
					PaddingRight:0,
					PaddingBottom:0,
					PaddingLeft:0,
					isimg:1,
					isName:1,
					isschedule:1,
					isleft:2,
				},
				textWidth:0,
				windowWidth:0,
				isshow:false,
				posiTop:0,
				
			}
			
		},
		created(){
			this.posiTop = this.$uiConfig.is_bang?80:52;
			this.windowWidth = this.$utils.SystemInfo().windowWidth;
			this.textWidth = this.windowWidth - this.info.PaddingRight-this.info.PaddingLeft - 30 - 20-10
		}
	}
</script>

<style>
	.Rstudy{
		position: absolute;
		left: 0;
		
	}
	.Rstudy-box{
		width: 100%;
		padding: 10px;
		display: flex;flex-direction: row;
		align-items: center;
		background: rgba(99, 99, 107, 0.8);
		
		border-radius: 5px;
		justify-content: space-between;
		
	}
	.Rstudy .close{
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.Rstudy .content{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.Rstudy .content .cover{
		width: 70px;
		height: 35px;
		margin-right: 10px;
		border-radius: 5px;
	}
	.Rstudy .content .content-r{
		height: 35px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
		color: #FFF;
		font-family: aa;
	}
	.Rstudy .content .content-Name{
		font-size: 12px;
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.Rstudy .content .progress{
		font-size: 14px;
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>
