<template>

	<view style="background: #F1F2F5;">
		<RefreshView id="mescrollRef" ref="mescrollRef" :pageBg="F1F2F5" text="我的队伍" :useDownScroll="false"
			:useUpScroll="false">

			<view class="top">

				<view class="top_lift">
					<text class="top_lift_text1">对不起，您没有在任何队伍里。</text>
					<text class="top_lift_text2">您可以创建和管理自己队伍参加任何活动。</text>
				</view>

				<text class="btn" @click="onClick(1)">创建队伍</text>

			</view>

			<view class="bom">

				<text class="bom_text1">您可以申请加入招募队员的队伍。</text>
				<text class="bom_text2">通过申请后，您将与队伍共同参与活动。如遇队伍解散或未被任何队伍通过，您可以选择其他队伍。</text>
				<view class="bom_bom">
					<text class="bom_bom_text">{{number}}</text>
					<text class="btn" @click="onClick(2)">查看列表</text>
				</view>

			</view>

		</RefreshView>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number: "石家庄市共有10个队伍在公开招募队员。"
			}
		},
		methods: {
			onClick(id) {
				switch (id) {
					case 1:
						// 新建
						uni.navigateTo({
							url: 'CreateTeam'
						})
						break;
					case 2:
						// 加入
						
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	.btn {
		background-color: #F4CE98;
		color: #fff;
		font-size: 26rpx;
		padding: 5rpx 10rpx;
		display: flex;
		align-items: center;
	}

	.top {
		display: flex;
		margin-top: 20rpx;
		background-color: #fff;
		padding: 36rpx;
		flex-direction: row;
		align-items: center;

		.top_lift {
			flex: 1;
			display: flex;
			flex-direction: column;

			.top_lift_text1 {
				font-size: 28rpx;
				color: #E99D42;
			}

			.top_lift_text2 {
				margin-top: 15rpx;
				font-size: 26rpx;
				color: #E99D42;
			}

		}
	}

	.bom {
		display: flex;
		margin-top: 20rpx;
		background-color: #fff;
		padding: 36rpx;
		flex-direction: column;

		.bom_text1 {
			font-size: 28rpx;
			color: #898989;
		}

		.bom_text2 {
			margin-top: 20rpx;
			font-size: 26rpx;
			color: #BEBEBE;
		}

		.bom_bom {
			margin-top: 24rpx;
			display: flex;
			flex-direction: row;

			.bom_bom_text {
				flex: 1;
				font-size: 28rpx;
				color: #E99D42;
			}
		}
	}
</style>
