<template>
	<view class="recommend-index">
		<view class="index-banner">
			<image style="width: 100%;height:301upx" src="../../static/images/banner-index.png" mode=""></image>
		</view>
		<view class="course-re">
			<view class="recommend-index-title">
				<text class="title-line"></text>
				热门课程推荐
				<text class="tetle-text">查看更多</text>
			</view>
			<view class="course-re-list">
				<view class="course-re-index" v-for="course in 6">
					<view class="course-img">
						<text class="img-score">
							<image style="width:28upx;height:28upx;margin-right: 6upx;" src="../../static/images/icon/index-start.png" mode=""></image>
							4.9分</text>
						<image style="width: 100%;height:100%;border-radius: 16upx;" src="../../static/images/course.png" mode=""></image>
					</view>
					<view class="course-title">
						零基础后期课程
					</view>
					<view class="course-text">
						京小方 | 800+人已学
					</view>
					<view class="course-type">
						<text class="type-index">通用力</text>
						<text class="type-index">产品经理</text>
					</view>
				</view>
			</view>
		</view>
		<view style="margin:30upx 0 60upx 0">
			<image style="width: 100%;height:220upx" src="../../static/images/banner-tow.png" mode=""></image>
		</view>
		<view class="ranking-list">
			<view class="recommend-index-title">
				<text class="title-line"></text>
				排行榜
			</view>
			<view class="list-box">
				<view class="list-box-index">
				    <view class="list-box-title">
				    	课程排行榜
				    </view>	
					<view class="list-box-text" v-for="(list,index) in 3">
						<image v-if="index == 0" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue01.png" mode=""></image>
						<image v-if="index == 1" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue02.png" mode=""></image>
						<image v-if="index == 2" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue03.png" mode=""></image>
						<text>BOE京东方位列世界知识产权组织202…</text>
					</view>
				</view>
				<view class="list-box-index">
				    <view class="list-box-title">
				    	热门文章排行榜
				    </view>	
					<view class="list-box-text" v-for="(list,index) in 3">
						<image v-if="index == 0" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue01.png" mode=""></image>
						<image v-if="index == 1" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue02.png" mode=""></image>
						<image v-if="index == 2" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue03.png" mode=""></image>
						<text>BOE京东方位列世界知识产权组织202…</text>
					</view>
				</view>
				<view class="list-box-index">
				    <view class="list-box-title">
				    	热门问答排行榜
				    </view>	
					<view class="list-box-text" v-for="(list,index) in 3">
						<image v-if="index == 0" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue01.png" mode=""></image>
						<image v-if="index == 1" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue02.png" mode=""></image>
						<image v-if="index == 2" style="width:50upx;height: 50upx;vertical-align: middle;" src="../../static/images/ranking/listblue03.png" mode=""></image>
						<text>BOE京东方位列世界知识产权组织202…</text>
					</view>
				</view>
			</view>
		</view>
		<view class="articl-recommend">
			<view class="recommend-index-title">
				<text class="title-line"></text>
				热门文章推荐
				<text class="tetle-text">查看更多</text>
			</view>
			<view class="articl-box">
				<view class="articl-box-index" v-for="ar in 4">
					<image style="width: 560upx;height: 314upx;border-radius: 24upx 24upx 0 0;" src="../../static/images/course.png" mode=""></image>
					<view class="box-index">
						<view class="box-index-title">
							这里是标题字节显示效果图片放大至120，卡片浮影加深展示最多字…
						</view>
						<view class="box-index-authr">
							<image style="width: 64upx;height:64upx;vertical-align: middle;margin-right: 24upx;" src="../../static/images/woman.png" mode=""></image>
							学习小助手
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="qa-recommend">
			<view class="recommend-index-title">
				<text class="title-line"></text>
				热门问答推荐
				<text class="tetle-text">查看更多</text>
			</view>
			<view class="qa-box" style="display: flex;overflow-x: auto;">
				<view class="qa-box-index" v-for="ar in 4">
					<view class="box-index-title">
						大家最近看了哪些好书，可以推荐一下吗？
					</view>
					<view class="box-index-authr">
						<image style="width: 64upx;height:64upx;vertical-align: middle;margin-right: 24upx;" src="../../static/images/woman.png" mode=""></image>
						<text style="font-size: 28upx;color: #39424C;">学习小助手</text> 
						<text style="font-size: 28upx;color: #6E7B84;">「最热答案」</text>
					</view>
					<view class="box-index-text">
						智慧物联是利用互联网进行的运营方式,还是其他用互联网进行的运，2021年…
					</view>
				</view>
			</view>
		</view>
		<u-divider text="没有更多了"></u-divider>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
.recommend-index{
	background-color: #fff;
	padding:8upx 30upx;
	padding-bottom: 100upx;
	.recommend-index-title{
		font-size: 36upx;
		font-weight: 600;
		height: 40upx;
		line-height: 40upx;
		color: #04243C;
		margin-top: 50upx;
		.title-line{
			display: inline-block;
			width: 8upx;
			height: 28upx;
			background: #387DF7;
			border-radius: 8upx;
			margin-right: 12upx;
		}
		.tetle-text{
			float: right;
			font-size: 24upx;
			color: #6E7B84;
			font-weight: 400;
		}
	}
	.course-re-list{
		display: flex;
		flex-wrap: wrap;
		.course-re-index{
			padding: 15upx 0;
			&:nth-child(2n-1){
				margin-right: 20upx;
			}
			.course-img{
				width: 335upx;
				height: 188upx;
				border-radius: 16upx;
				position: relative;
				.img-score{
					display: inline-block;
					padding: 7upx 15upx;
					box-sizing: border-box;
					position: absolute;
					right:0;
					bottom: 0;
					color: #FFFFFF;
					font-size: 28upx;
					z-index: 99999;
					width: 136upx;
					height: 44upx;
					// background: ;
					background: rgba($color: #1767FF, $alpha: 0.2);
					border-radius: 24upx 0px 0px 0px;
					backdrop-filter: blur(20px);
				}
			}
			.course-title{
				margin-top: 20upx;
				font-size: 28upx;
				color: #39424C;
			}
			.course-text{
				margin-top: 20upx;
				font-size: 28upx;
				color: #6E7B84;
			}
			.course-type{
				margin-top: 20upx;
				.type-index{
					font-size: 22upx;
					color: #6E7B84;
					background: rgba($color: #387DF7, $alpha: 0.1);
					border-radius: 8upx;
					margin-right: 12upx;
					padding: 2upx 6upx;
				}
			}
		}
		
	}
    .ranking-list{
		.list-box{
			// width: 1720upx;
			margin-top: 30upx;
			display: flex;
			overflow-x: auto;
		}
	   .list-box-index{
		   width: 560upx;
		   min-width: 560upx;
		   height: 332upx;
		   box-sizing: border-box;
		   border-radius: 24upx;
		   border: 2upx solid #E4EAEF;
		   padding: 34upx 30upx;
		   background: url(../../static/images/ranking/qa-box.png) no-repeat 100% / 100%;
		   background-position: 0 0;
		   margin-right: 20upx;
		  
		   .list-box-title{
			   font-size: 32upx;
			   font-weight: 600;
			   color: #04243C;
			   margin-bottom: 4upx;
		   }
		   .list-box-text{
			   margin-top: 26upx;
			   font-size: 28upx;
			   color: #39424C;
			   overflow: hidden;
			   text-overflow: ellipsis;
			   -webkit-box-orient: vertical; 
			   display: -webkit-box;-webkit-line-clamp: 1; 
			   word-break:break-all;
		   }
	   }
    }
	.articl-recommend{
		.articl-box{
			margin-top: 28upx;
			display: flex;
			overflow-x: auto;
			.articl-box-index{
				width: 560upx;
				border-radius: 24upx;
				border: 2upx solid #E4EAEF;
				margin-right: 20upx;
				.box-index{
					padding: 30upx;
					.box-index-title{
						font-size: 32upx;
						font-weight: 600;
						color: #39424C;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical; 
						display: -webkit-box;-webkit-line-clamp: 2; 
						word-break:break-all;
					}
					.box-index-authr{
						margin-top: 30upx;
						font-size: 28upx;
						color: #6E7B84;
					}
				}
			}
		}
	}
    .qa-recommend{
		.qa-box{
			margin-top: 32upx;
			margin-bottom: 60upx;
			
			.qa-box-index{
				background: url(../../static/images/ranking/qa-bg.png) no-repeat 100% / 100%;
				background-position: 0 0;
				margin-right: 20upx;
				width: 560upx;
				min-width: 560upx;
				border: 2upx solid #E4EAEF;
				border-radius: 24upx;
				padding: 30upx;
				box-sizing: border-box;
				.box-index-title{
					font-size: 32upx;
					font-weight: 600;
					color: #02233C;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-box-orient: vertical; 
					display: -webkit-box;-webkit-line-clamp: 2; 
					word-break:break-all;
				}
				.box-index-authr{
					margin-top: 30upx;
					margin-bottom: 20upx;
				}
				.box-index-text{
					font-size: 28upx;
					color: #6E7B84;
					margin-bottom: 10upx;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-box-orient: vertical; 
					display: -webkit-box;-webkit-line-clamp: 2; 
					word-break:break-all;
				}
			}
			
		}
	}
}
</style>
