<template>
	<view>
		<!-- 状态栏 -->
		<u-sticky bgColor="#FFFFFF">
			<view class="status_bar"></view>
			<view class="college-bar">
				<view class="college-bar-title">商学院</view>
				<view class="college-bar-input">
					<navigator class="navigator" url="">
						<image class="navigator-icon" src="@/static/icons/search_icon.png"></image>
						搜索
					</navigator>
				</view>
				<view class="college-bar-icons">
					<u-icon class="icon" name="bell" color="#333" bold size="24"></u-icon>
				</view>
			</view>
		</u-sticky>
		<!-- 轮播图 -->
		<view class="banner">
			<view class="banner-swiper">
				<u-swiper
					class="uswiper"
					height="100%"
					indicator
					radius="6"
					bgColor="#fff"
					indicatorMode="dot"
					:list="bannerArr"
				></u-swiper>
			</view>
		</view>
		<!-- 快捷入口 -->
		<view class="diamond-flex">
			<view class="diamond-item">
				<image class="icon" src="@/static/icons/diamond_icon_00.png" mode="widthFix"></image>
				<view class="text">公开课</view>
			</view>
			<view class="diamond-item">
				<image class="icon" src="@/static/icons/diamond_icon_01.png" mode="widthFix"></image>
				<view class="text">网授课</view>
			</view>
			<view class="diamond-item">
				<image class="icon" src="@/static/icons/diamond_icon_02.png" mode="widthFix"></image>
				<view class="text">面授班</view>
			</view>
			<view class="diamond-item">
				<image class="icon" src="@/static/icons/diamond_icon_03.png" mode="widthFix"></image>
				<view class="text">图书</view>
			</view>
			<view class="diamond-item">
				<image class="icon" src="@/static/icons/diamond_icon_04.png" mode="widthFix"></image>
				<view class="text">优选课程</view>
			</view>
			<view class="diamond-item">
				<image class="icon" src="@/static/icons/diamond_icon_05.png" mode="widthFix"></image>
				<view class="text">课表</view>
			</view>
			<view class="diamond-item">
				<image class="icon" src="@/static/icons/diamond_icon_06.png" mode="widthFix"></image>
				<view class="text">全国分校</view>
			</view>
			<view class="diamond-item">
				<image class="icon" src="@/static/icons/diamond_icon_07.png" mode="widthFix"></image>
				<view class="text">师资团队</view>
			</view>
			<view class="diamond-item">
				<image class="icon" src="@/static/icons/diamond_icon_08.png" mode="widthFix"></image>
				<view class="text">法律法规</view>
			</view>
			<view class="diamond-item">
				<image class="icon" src="@/static/icons/diamond_icon_09.png" mode="widthFix"></image>
				<view class="text">增补勘误</view>
			</view>
		</view>
		<!-- 快捷入口 -->
		<view class="quick-flex">
			<view class="quick-flex-item" :style="'background-image: url(' + require('@/static/imgs/quick_back_00.png') + ');'">
				<view class="quick-colum">
					<view class="quick-title">考试习题</view>
					<view class="quick-sumit">海量学习包</view>
					<image class="quick-icon" src="@/static/icons/quick_icon.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="quick-flex-item" :style="'background-image: url(' + require('@/static/imgs/quick_back_01.png') + ');'" @click="onNav('CollegeTest')">
				<view class="quick-colum">
					<view class="quick-title">考试</view>
					<view class="quick-sumit">专业考试题</view>
					<image class="quick-icon" src="@/static/icons/quick_icon.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<!-- 热门网授课 -->
		<view class="college-title">
			<view class="college-title-text">热门网授课</view>
			<navigator class="college-title-more" url="">
				更多<u-icon class="college-title-icon" name="arrow-right" size="28rpx" color="#ADADAD"></u-icon>
			</navigator>
		</view>
		<view class="hot">
			<view class="hot-scroll">
				<view class="hot-item" v-for="(item, index) in 3" :key="index">
					<view class="cover">
						<image src="@/static/imgs/hot_img.png" mode="aspectFill"></image>
					</view>
					<view class="title nowrap">2022年至尊先锋VIP班</view>
					<view class="flex">
						<view class="price nowrap"><text>￥</text>2200</view>
						<view class="number nowrap">1698人购买</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 名师面授班 -->
		<view class="college-title">
			<view class="college-title-text">名师面授班</view>
			<navigator class="college-title-more" url="">
				更多<u-icon class="college-title-icon" name="arrow-right" size="28rpx" color="#ADADAD"></u-icon>
			</navigator>
		</view>
		<view class="famous">
			<view class="famous-item" v-for="(item, index) in 3" :key="index">
				<image class="famous-cover" src="@/static/imgs/famous_img.png" mode="aspectFill"></image>
				<view class="famous-content">
					<view class="title nowrap">e学主客一体延考上岸班（上海）</view>
					<view class="number nowrap">2028人报名</view>
					<view class="price nowrap"><text>￥</text>2200</view>
				</view>
			</view>
		</view>
		<!-- 热销图书 -->
		<view class="college-title">
			<view class="college-title-text">热销图书</view>
			<navigator class="college-title-more" url="">
				更多<u-icon class="college-title-icon" name="arrow-right" size="28rpx" color="#ADADAD"></u-icon>
			</navigator>
		</view>
		<view class="new-book">
			<view class="new-book-item" v-for="(item, index) in 4" :key="index">
				<view class="cover">
					<image src="@/static/imgs/new_book.png" mode="aspectFill"></image>
				</view>
				<view class="new-content">
					<view class="title nowrap">2022年客观题精讲8...</view>
					<view class="flex">
						<view class="price"><text>￥</text>2200</view>
						<view class="number">1698人购买</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 法考资讯 -->
		<view class="college-title">
			<view class="college-title-text">法考资讯</view>
			<navigator class="college-title-more" url="">
				更多<u-icon class="college-title-icon" name="arrow-right" size="28rpx" color="#ADADAD"></u-icon>
			</navigator>
		</view>
		<view class="news-lists">
			<view class="news-lists-item" v-for="(item, index) in 3" :key="index">
				<view class="text">
					<view class="title">法律服务工作者</view>
					<view class="submit">2028人浏览</view>
				</view>
				<image class="cover" src="@/static/imgs/news_img.png" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerArr: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				]
			};
		},
		methods: {
			onNav(e) {
				this.$Router.push({
					name: e
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	// 热门课程
	.hot{
		padding: 20rpx 0 30rpx;
		.hot-scroll{
			overflow-x: scroll;
			white-space:nowrap;
			.hot-item{
				display: inline-block;
				margin-left: 30rpx;
				width: 40vw;
				&:last-child{
					margin-right: 30rpx;
				}
				.cover{
					width: 100%;
					padding-top: 67%;
					position: relative;
					border-radius: $radius-lg;
					overflow: hidden;
					image{
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}
				}
				.title{
					padding-top: 20rpx;
					line-height: 40rpx;
					color: #111111;
				}
				.flex{
					display: flex;
					align-items: center;
					line-height: 40rpx;
					padding-top: 10rpx;
					.price{
						width: 50%;
						color: $text-price;
						font-weight: bold;
						font-size: 32rpx;
						text{
							font-size: 80%;
						}
					}
					.number{
						width: 50%;
						text-align: right;
						font-size: 26rpx;
						color: #999999;
					}
				}
			}
		}
	}
	// 名师课程班
	.famous{
		padding: 20rpx 30rpx 0;
		.famous-item{
			margin-bottom: 30rpx;
			display: flex;
			flex-wrap: wrap;
			.famous-cover{
				width: 160rpx;
				height: 160rpx;
				border-radius: $radius;
				overflow: hidden;
			}
			.famous-content{
				width: calc(100% - 160rpx);
				padding-left: 30rpx;
				box-sizing: border-box;
				.title{
					line-height: 40rpx;
					font-weight: 400;
				}
				.number{
					margin-top: 10rpx;
					font-size: 26rpx;
					line-height: 40rpx;
					color: #999999;
				}
				.price{
					padding-top: 30rpx;
					line-height: 40rpx;
					font-weight: bold;
					color: $text-price;
					font-size: 32rpx;
					text{
						font-size: 80%;
					}
				}
			}
			
		}
	}
	// 热销图书
	.new-book{
		padding: 20rpx 15rpx 20rpx;
		display: flex;
		flex-wrap: wrap;
		&-item{
			width: calc(50% - 30rpx);
			margin: 0 15rpx 30rpx;
			background: white;
			box-shadow: 0 0 10rpx 10rpx rgba(0, 0, 0, .02);
			border-radius: $radius;
			.cover{
				position: relative;
				width: 100%;
				padding-top: 67%;
				overflow: hidden;
				border-radius: $radius;
				image{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
			}
			.new-content{
				padding: 20rpx;
				.title{
					font-size: 32rpx;
					padding-bottom: 10rpx;
					line-height: 40rpx;
				}
				.flex{
					display: flex;
					justify-content: space-between;
					align-items: center;
					line-height: 40rpx;
					.price{
						width: 50%;
						text-align: left;
						font-size: 32rpx;
						font-weight: bold;
						color: $text-price;
						text{
							font-size: 80%;
						}
					}
					.number{
						width: 50%;
						text-align: right;
						font-size: 26rpx;
						color: gray;
					}
				}
			}
		}
	}
	// 法考资讯
	.news-lists{
		padding-bottom: 30rpx;
		&-item{
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			.text{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: calc(100% - 200rpx);
				.title{
					font-size: 32rpx;
					color: #111111;
					line-height: 50rpx;
					@extend .ellipsis;
				}
				.submit{
					line-height: 40rpx;
					font-size: 28rpx;
					color: #999999;
				}
			}
			.cover{
				width: 200rpx;
				height: 133rpx;
				border-radius: $radius;
			}
		}
	}
	// 通用标题
	.college-title{
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		&-text{
			font-weight: bold;
			font-size: 36rpx;
			color: #111111;
		}
		&-more{
			background: #F5F5F5;
			font-size: 28rpx;
			color: #999999;
			height: 50rpx;
			line-height: 50rpx;
			padding: 0 15rpx 0 25rpx;
			border-radius: 25rpx;
		}
		.college-title-icon{
			display: inline-block;
			vertical-align: middle;
			margin-top: -8rpx;
		}
	}
	// 快捷入口
	.quick-flex{
		padding: 20rpx 15rpx 30rpx;
		display: flex;
		&-item{
			position: relative;
			width: calc(50% - 30rpx);
			padding-top: calc(24% - 10rpx);
			background-size: cover;
			border-radius: $radius;
			margin: 0 15rpx;
			.quick-colum{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				padding: 0 30rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: center;
				color: white;
				.quick-title{
					font-weight: bold;
					font-size: 32rpx;
					@extend .nowrap;
				}
				.quick-sumit{
					font-size: 24rpx;
					@extend .nowrap;
				}
				.quick-icon{
					margin-top: 10rpx;
					width: 26rpx;
				}
			}
		}
	}
	// 金刚区
	.diamond-flex{
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.diamond-item{
			width: 20%;
			padding: 20rpx 10rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.icon{
				width: 70rpx;
				height: 70rpx;
			}
			.text{
				padding-top: 15rpx;
				color: #111111;
				font-size: 28rpx;
				@extend .nowrap;
			}
		}
	}
	// 轮播图
	.banner{
		padding: 10rpx 30rpx;
		.banner-swiper{
			width: 100%;
			padding-top: 43%;
			position: relative;
			overflow: hidden;
			.uswiper{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
			}
		}
	}
	// 自定义状态栏
	.college-bar{
		height: 44px;
		padding: 5px 30rpx 9px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		&-title{
			width: 150rpx;
			font-weight: bold;
			line-height: 30px;
			color: #111111;
			font-size: 36rpx;
			@extend .nowrap;
		}
		&-input{
			height: 30px;
			width: calc(100% - 210rpx);
			margin: 0 $margin;
			.navigator{
				position: relative;
				width: 100%;
				box-sizing: border-box;
				display: inline-block;
				background: #F6F6F6;
				height: 30px;
				line-height: 30px;
				border-radius: 15px;
				padding: 0 50rpx 0 60rpx;
				color: #999999;
				font-size: 30rpx;
				text-align: center;
				.navigator-icon{
					position: absolute;
					left: 20rpx;
					top: 50%;
					width: 36rpx;
					height: 36rpx;
					margin-top: -18rpx;
				}
			}
		}
		&-icons{
			width: 60rpx;
			text-align: right;
			.icon{
				display: inline-block;
			}
		}
	}
</style>
