<template>
	<view class="study-list uni-padding-wrap uni-common-mt">
		<scroll-view class="scroll-view_H" scroll-x="true">
				<view class="study-item scroll-view-item_H" v-for="(item,index) in list" :key="index"  @click="toStudyDetail(item.id)">
					<view class="day-box acea-row row-middle">
						<image src="../../../static/date-icon.png" v-if="index%2 == 0"></image>
						<image src="../../../static/date-icon2.png" v-if="index%2 != 0"></image>
						<text>{{item.clockTimes}}</text>
					</view>
					<view class="study-content">
						<view class="study-title line1">{{item.listName}}</view>
						<view class="study-time acea-row-nowrap row-between-wrapper">
							<view>{{item.listStartTime}}开始</view>
							<view>{{item.enterNum}}人已参与</view>
						</view>
					</view>
				</view>
		</scroll-view>
	</view>
</template>

<script>
	export default{
		props:{
			list: {
				type: Array,
				default: []
			}
		},
		methods:{
			toStudyDetail(id){
				this.$yrouter.push({
				  path: '/pages/study/detail',
				  query: {
				    id:id,
				  },
				})
			},
		}
	}
</script>

<style lang="less">
.study-list{
	width: 100%;
	.scroll-view_H{
		white-space: nowrap;
		width: 100%;
	}
	.study-item{
		width: 334rpx;
		height: 180rpx;
		display: inline-block;
		background: linear-gradient(143deg, #FDAF97 0%, #ED5E48 100%);
		box-shadow: 0px 4rpx 8rpx 4rpx rgba(250,194,183,0.32);
		border-radius: 10rpx;
		margin-right: 20rpx;
		.day-box{
			color: #E73D21;
			font-size: 48rpx;
			line-height: 58rpx;
			margin-left: 10rpx;
			image{
				width: 34rpx;
				height: 34rpx;
				margin-right: 10rpx;
			}
		}
		.study-content{
			width: calc(100% - 12rpx);
			background: #fff;
			font-size: 24rpx;
			color: #999;
			box-shadow: 0px 4rpx 8rpx 4rpx rgba(250,194,183,0.32);
			border-radius: 10rpx;
			margin: 2rpx auto;
			padding:16rpx 10rpx 10rpx;
			box-sizing: border-box;
			.study-title{
				font-size: 28rpx;
				font-weight: 500;
				color: #222222;
				line-height: 40rpx;
				margin-bottom: 12rpx;
			}
		}
	}
	.study-item:nth-child(2n){
		background: linear-gradient(143deg, #C4DBFF 0%, #7FAAF2 100%);
		.day-box{
			color: #557AB3;
		}
	}
}
</style>
