<template>
	<view class="ranking-list-info">
		<view class="ranking-list-box">
			<u-tabs :list="tabList" @click="clickTabs"></u-tabs>
			<view class="box-info-top">
				<text class="top-text">我的排名：<text class="text-num">128</text></text>
				<text class="top-text" style="margin-left: 30upx;">我的经验值：<text  class="text-num">367</text></text>
			</view>
			<view class="ran-table">
				<view class="ran-table-haeder">
					<view class="table-cell-one">排名</view>
					<view class="table-cell-tow">姓名</view>
					<view class="table-cell-three">经验值</view>
				</view>
				<view class="ran-table-body">
					<view class="table-cell-one"><image style="width: 60upx;height:60upx" src="../../static/images/ranking/ran-one.png" mode=""></image></view>
					<view class="table-cell-tow">
						<image style="width: 80upx;height:80upx" src="../../static/images/woman.png" mode=""></image>
					</view>
					<view class="table-cell-three">经验值</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// tabList
	export default {
		data() {
			return {
				tabList:[
					{ name: '经验值'},
				    { name: '学习时长'},
					{ name: '学习天数'},
				]
			}
		},
		onPullDownRefresh() {
			
		},
		onReachBottom() {
			
		},
		onLoad(options) {
			
		},
		methods:{
			clickTabs(item) {
				console.log(item,'item')
			}
		
		}
	}
</script>

<style scoped lang="scss">
	.ranking-list-info{
		padding-top: 376upx;
		background: url(../../static/images/ranking-list.png) no-repeat 100% / 100%;
		background-position: 0 0;
		.ranking-list-box{
			padding: 34upx 20upx;
			border-radius: 40upx 40upx 0 0;
			background-color: #fff;
			.box-info-top{
				margin-top: 20upx;
				padding: 10upx 35upx 12upx 38upx;
				height: 100upx;
				line-height: 100upx;
				background: #FFFFFF;
				box-shadow: 0upx 4upx 10upx 2upx rgba(0,0,0,0.05);
				border-radius: 8upx;
				color: #333333;
				font-size: 26upx;
				.text-num{
					font-size: 30upx;
					color: #000;
					font-weight: 600;
				}
			}
			.ran-table{
				margin-top: 62upx;
				.ran-table-haeder{
					font-size: 28upx;
					color: #999999;
					display: flex;
					.table-cell-one{
						width: 120upx;
					}
					.table-cell-tow{
						flex: 100%;
					}
					.table-cell-three{
						width: 188upx;
					}
				}
				.ran-table-body{
					display: flex;
					.table-cell-one{
						width: 76upx;
					}
					.table-cell-tow{
						flex: 100%;
					}
					.table-cell-three{
						width: 188upx;
					}
				}
				
			}
		}
	}
</style>
