<template>
	<view class="dabang-index">
		<view class="top-box">
			<view class="dabang-name">连续21天打榜站桩</view>
			<view class="desc">抱朴书院孕育自华夏优秀传统文化，以“博学致用，朴含虚”为院训，以“弘扬国粹，利益社会”为动力。</view>
			<view class="time-box">
				 <span>时间：2021年5月31日 - 2021年6月20日（共21天）</span>
				 <view class="sanjiao"></view>
			</view>
		</view>
		<view class="join-num">参与人数：231人</view>
		<view class="my-progress-box">
			<view class="t-word acea-row row-between-wrapper">
				<text>我的进度</text>
				<view>
					<text class="to-more" @click="toMyBangdan">我的打榜日记</text>
					<text class="iconfont icon-jiantou"></text>
				</view>
			</view>
			<view class="progress-info-box acea-row-nowrap row-between">
				<view class="acea-row">
					<view class="user-headerimg">
						<image src="../../static/img1.png" mode=""></image>
					</view>
					<view class="user-progress">
						<view class="name">失宠的猫咪</view>
						<view class="progress">
							<view class="pro-icon"><image src="../../static/course-icon2.png" mode=""></image></view>
							已坚持<text class="colO">7</text>/21
						</view>
						<view class="progress">
							<view class="pro-icon"><image src="../../static/course-icon4.png" mode=""></image></view>
							完成进度<text class="colO">33</text>%
						</view>
						<view class="progress">
							<view class="pro-icon"><image src="../../static/course-icon3.png" mode=""></image></view>
							全榜排名<text class="colO">12</text>
						</view>
					</view>
				</view>
				<view class="progress-r acea-row row-column row-center-wrapper">
					<text>今日未打榜</text>
					<view class="dabang-btn" @click="toEdit">立即打卡</view>
				</view>
			</view>
		</view>
		<view class="tab-box acea-row row-middle">
			<view class="tab-item" :class="active == 0 ? 'tab-item-a' : ''" @click="tabClick(0)">打榜分享</view>
			<view class="tab-item" :class="active == 1 ? 'tab-item-a' : ''" @click="tabClick(1)">排行榜</view>
		</view>
		<!-- 排行榜 -->
		<view class="rank-list" v-if="active == 1">
			<view class="rank-item acea-row row-between-wrapper" v-for="(item,index) in 6" :key="index">
				<view class="acea-row row-middle">
					<view class="ranking">{{index+1}}</view>
					<view class="header-img"><image src="../../static/img1.png" mode=""></image></view>
					<view class="name">失宠的猫咪</view>
				</view>
				<view class="acea-row row-column row-center-wrapper">
					<view>完成打榜30项</view>
					<view class="jifen">3000积分</view>
				</view>
			</view>
		</view>
		<!-- 打榜分享 -->
		<view class="dabang-share-box" v-else>
			<view class="dabang-share-item" v-for="(item,index) in 6" :key="index">
				<view class="user-info-box acea-row row-middle">
					<view class="header-img">
						<image src="../../static/img1.png" mode=""></image>
					</view>
					<view class="acea-row row-column row-center">
						<view class="name">失宠的猫咪</view>
						<view class="create-time">5小时前</view>
					</view>
				</view>
				<view class="share-word">
					抱朴书院孕育自华夏优秀传统文化，以“博学致用，朴含虚”为院训，以“弘扬国粹…
				</view>
				<view class="img-box acea-row row-around">
					<image src="../../static/img1.png"></image>
					<image src="../../static/img1.png"></image>
					<image src="../../static/img1.png"></image>
				</view>
				<view class="zan-box acea-row row-middle row-right">
					<image src="../../static/zan.png"></image>
					<text class="zan-conunt">55</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				active: 0
			}
		},
		methods:{
			tabClick(idx){
				this.active = idx;
			},
			toMyBangdan(){
				this.$yrouter.push({
					path:'/pages/study/bangdanRecord'
				})
			},
			toEdit(){
				this.$yrouter.push({
					path:'/pages/study/editDabang'
				})
			},
		}
	}
</script>

<style lang="less" scoped>
.dabang-index{
	min-height: 100vh;
	background: #fff;
	padding-bottom: 100rpx;
	.top-box{
		width: 100%;
		height: 396rpx;
		background: linear-gradient(135deg, #E5B964 0%, #CE9F45 100%);
		box-sizing: border-box;
		padding: 40rpx 0;
		color: #fff;
		position: relative;
		.dabang-name{
			width: 80%;
			font-size: 50rpx;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 72rpx;
			margin: 40rpx auto;
		}
		.desc{
			width: 80%;
			margin: 0 auto;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 36rpx;
			text-indent: 2em;
		}
		.time-box{
			width: 100%;
			height: 78rpx;
			line-height: 78rpx;
			background: rgba(0,0,0,.1);
			font-size: 28rpx;
			position: absolute;
			bottom: 0;
			text-indent: 1em;
		}
		.sanjiao{
			width:0;
			height:0;
			border-right:14rpx solid transparent;
			border-left:14rpx solid transparent;
			border-bottom:16rpx solid #fff;
			position: absolute;
			left: 50%;
			top: 64rpx;
			transform: translateX(-50%);
		}
	}
	.join-num{
		width: 406rpx;
		height: 58rpx;
		background: #FFF2DA;
		border-radius: 46rpx;
		margin: 30rpx auto;
		text-align: center;
		line-height: 58rpx;
		color: #E49600;
	}
	.my-progress-box{
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		font-size: 36rpx;
		color: #222;
		.t-word{
			font-size: 36rpx;
			color: #222;
			font-weight: 600;
			.to-more{
				font-size: 28rpx;
				color: #666;
				font-weight: normal;
			}
			.iconfont{
				font-size: 30rpx;
			}
		}
		.progress-info-box{
			margin-top: 30rpx;
			width: 690rpx;
			height: 280rpx;
			background: #FFFFFF;
			box-shadow: 0px 4px 8px 0px rgba(239,239,239,0.5);
			border-radius: 10rpx;
			padding: 30rpx;
			.user-headerimg{
				width: 130rpx;
				height: 130rpx;
				margin-right: 20rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 50px;
				}
			}
			.user-progress{
				font-size: 28rpx;
				.name{
					font-size: 32rpx;
					font-weight: 500;
					color: #222222;
					line-height: 44rpx;
				}
				.colO{
					font-size: 40rpx;
					color: #F36F5E;
				}
				.progress{
					display: flex;
					align-items: center;
					.pro-icon{
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			.progress-r{
				font-size: 24rpx;
				color: #666;
				.dabang-btn{
					width: 160rpx;
					height: 56rpx;
					background: linear-gradient(180deg, #F7D08E 0%, #E2B35D 100%);
					border-radius: 35rpx;
					text-align: center;
					line-height: 56rpx;
					color: #fff;
					font-size: 28rpx;
					margin-top: 10rpx;
				}
			}
		}
	}
	
	.tab-box{
		width: 100%;
		padding: 0rpx 30rpx;
		font-size: 36rpx;
		color: #222;
		.tab-item{
			width: 50%;
			text-align: center;
			border-bottom: 1px solid #ECECEC;
			padding: 20rpx 0;
		}
		.tab-item-a{
			color: #EA533E;
			border-bottom: 1px solid #EA533E;
		}
	}

	.rank-list{
		width: 100%;
		padding: 0rpx 30rpx;
		.rank-item{
			width: 100%;
			padding: 32rpx 0;
			border-bottom: 1px solid #ececec;
			font-size: 28rpx;
			color: #222;
			.ranking{
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				line-height: 32rpx;
				text-align: center;
				color: #fff;
				font-size: 24rpx;
				background: #EA533E;
			}
			.header-img{
				width: 82rpx;
				height: 82rpx;
				border-radius: 50px;
				overflow: hidden;
				margin: 0 30rpx 0 22rpx; 
			}
			.jifen{
				color: #E5B764;
			}
		}
	}
	
	.dabang-share-box{
		width: 100%;
		padding: 30rpx;
		.dabang-share-item{
			color: #222;
			padding:20rpx 0;
			border-bottom: 1px solid #ececec;
			.header-img{
				width: 76rpx;
				height: 76rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 10rpx;
			}
			.name{
				font-size: 28rpx;
				line-height: 40rpx;
			}
			.create-time{
				font-size: 24rpx;
				color: #999;
				line-height: 34rpx;
			}
			.share-word{
				font-size: 28rpx;
				line-height: 46rpx;
				margin: 22rpx 0 30rpx;
			}
			.img-box{
				image{
					width: 224rpx;
					height: 206rpx;
				}
			}
			.zan-box{
				margin-top: 20rpx;
				image{
					width: 30rpx;
					height: 32rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
	image{
		width: 100%;
		height: 100%;
	}
}
</style>
