learning-system-mobile/pages/my/myubrules.vue

<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" v-for="item,idx in list">
						<view class="classify">{{ item.name }}</view>
						<view class="description">{{ item.hear }}</view>
						<view class="upper" style="text-align: center;">{{ item.value }}</view>
						<view class="upper" style="text-align: center;">{{ item.upperlimit }}</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab:1,
				list:[],
				 tableData: [{
				            name: '试听学习',
				            hear: '每日累计学习10分钟',
				            value: '+10', 
				            upperlimit: 50
				          },
						  {
						    name: ' ',
						    hear:  '每日累计学习20分钟', 
						    value:  '+20',
						    upperlimit: 50
						 },
						 {
						    name: ' ',
						    hear:  '每日累计学习30分钟',
						    value:  '+30',
						    upperlimit: 50
						 },
						 {
						    name: ' ',
						    hear:  '每日累计学习45分钟',
						    value:  '+40',
						    upperlimit: 50
						 },
						 {
						    name: ' ',
						    hear:  '每日累计学习60分钟',
						    value:  '+50',
						    upperlimit: 50
						 },
				          {
				            name: '案例学习',
				            hear: '完成一个案例的阅读', 
				            value: '+5',
				            upperlimit: 30,
				            label: '（最低3分钟）'
				          },
				          {
				            name: '文章学习',
				            hear: '完成一个文章的阅读',
				            value: '+5',
				            upperlimit: 30,
				            label: '（最低2分钟）'
				          },
				        ],
						tableList: [{
						            name: '发布音视频课程',
						            hear: '完成一个音视频课发布',
						            value: '+60',
						            upperlimit: null
						          },
						          {
						            name: '面授课记录',
						            hear: '有一个完成的面授课记录（<4h）', 
						            value: '+40',
						            upperlimit: null
						          },
								  {
								    name: ' ',
								    hear: '有一个完成的面授课记录（>=4h）',
								    value: '+60',
								    upperlimit: null
								  },
						          {
						            name: '发布文章',
						            hear: '每发布1篇文章',
						            value: '+40',
						            upperlimit: null
						          },
						          {
						            name: '发布案例',
						            hear: '每发布1篇案例',
						            value: '+50',
						            upperlimit: null
						          },
						          {
						            name: '发布笔记',
						            hear: '每发布公开笔记1篇',
						            value: "+5",
						            upperlimit: 30
						          },
						          {
						            name: '发表评论',
						            hear: '在课程，问答，案例中发表1个评论',
						            value: '+2',
						            upperlimit: 20
						          },
						        ],
			}
		},
	    mounted() {
			this.tab = 1;
	    	this.ubtab(1);
	    },
		methods: {
			ubtab(num){
				this.tab = num;
				if(num == 1){
					this.list = this.tableData
					console.log(this.list)
				}else if(num == 2){
					this.list = this.tableList;
				}
				
			}
		}
	}
</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%;
	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>