<template>
	<view style="background: #F0D8B0;width: 100%;height:100vh">
		<view class="myub-top">
			<view class="ub-content">
				<view class="ub-heard">
					<view class="ub-tab" @click="ubtab(1)" :class="tab == 1 ? 'ub-tabactive' : ' ' ">课程学习<text></text></view>
					<view class="ub-tab" @click="ubtab(2)" :class="tab == 2 ? 'ub-tabactive' : ' ' ">知识贡献<text></text></view>
					<view class="ub-tab" @click="ubtab(3)" :class="tab == 3 ? 'ub-tabactive' : ' ' ">平台活跃<text></text></view>
				</view>
				<view class="ub-listbox">
					<view class="listbox-list">
						<view class="classify" style="text-align: center;">分类</view>
						<view class="description" style="text-align: center;">描述</view>
						<view class="upper" style="text-align: center;">经验值/U币</view>
						<view class="upper" style="text-align: center;">每日上限</view>
					</view>
					<view class="lsitbox-info">
						<view class="classify">发布音视频教程</view>
						<view class="description">每上传一个音视频课</view>
						<view class="upper" style="text-align: center;">+60</view>
						<view class="upper" style="text-align: center;">30</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab:1,
			}
		},
		methods: {
			ubtab(num){
				this.tab = num
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lsitbox-info{
		display:flex ;
		width: 100%;
		font-size: 28upx;
		color: #834B3B;
		margin-top: 20upx;
		padding-bottom: 20upx;
		border-bottom: 2px solid rgba(153,153,153,0.1);
	}
	.classify{
		width: 25%;
	}
	.description{
		flex: 1;
	}
	.upper{
		width: 20%;
	}
	.ub-listbox{
		width: 100%;
		height: 100%;
		.listbox-list {
			display:flex ;
			color: #FF7721;
			font-size: 24upx;
			
		}
	}
.myub-top{
	width: 100%;
	height: 484upx;
	background-image: url(../../static/images/myubimg.png);
	background-repeat: no-repeat;
	background-size: 100% / 100%;
	padding-top: 245upx;
	.ub-content{
		background-color: #fff;
		margin: 0 30upx;
		height: 100%;
		border-radius: 6px;
		padding: 45upx 30upx;
		.ub-heard{
			width: 100%;
			height: 100upx;
			.ub-tab{
				color: #999999;
				float: left;
				font-size: 32upx;
				margin-right: 44upx;
				position: relative;
				text{
					width: 84upx;
					height: 8upx;
					background: linear-gradient(180deg, #FFA31F 0%, #FF6E0E 100%);
					border-radius: 13px;
					position: absolute;
					left: 15%;
					top: 120%;
					display: none;
				}
			}
			.ub-tabactive{
				font-weight: 500;
				color: #333333;
				text{
					display: inline-block;
				}
			}
		}
		
	}
}
</style>
