<template>
	<view class="view_body">
		<view class="view_bulk">
			<!-- navbar -->
			<u-navbar :is-back="true" title='详情' title-color="#000" :border-bottom="false" :background="true" id="navbar">
			</u-navbar>
			<!-- 听力题库作业 -->
			<view class="view_hearing">
				<view class="view_line">
					<view class="view_first_line">
						<view class="image_earphones">
							<u-icon name="kefu-ermai" color="#F18F21"></u-icon>
						</view>
						<view class="view_first_wz">
							听力题库作业
						</view>
					</view>

					<view class="toward">进行中</view>
				</view>
				<!-- 描述 -->
				<view class="view_descriptive">
					<view class="view_icon">
						<u-icon name="order"></u-icon>
						<view>描述</view>
					</view>
					<view class="view_textual">
						最好在中午十二点之前完成交上作业，过期不候
					</view>
				</view>
				<view class="view_descriptive">
					<view class="view_icon">
						<u-icon name="clock"></u-icon>
						<view>时间</view>
					</view>
					<view class="view_textual">
						02-12 12:00
					</view>
				</view>
				<view class="view_descriptive">
					<view class="view_icon">
						<u-icon name="clock"></u-icon>
						<view>已完成</view>
					</view>
					<u-line-progress active-color="#2979ff" :percent="40" class="progress"></u-line-progress>
				</view>
			</view>
			<!-- 班级 -->
			<view class="ap_class">
				<!-- 安排班级 -->
				<view class="ap_classes">
					<view class="ad_organization">
						<view class="ad_ap">安排班级</view>
						<view class="ad_icon">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="ad_images">
						<view>
							<image src="https://file.langsi.online/yasiimg/web/static/uD0fdxpAjuTJRW3i17oC" mode=""></image>
						</view>
						<view>
							<image src="https://file.langsi.online/yasiimg/web/static/uYx2XEq9tGjmezlk86Nv" mode=""></image>
						</view>
						<view>
							<image src="https://file.langsi.online/yasiimg/web/static/uD0fdxpAjuTJRW3i17oC" mode=""></image>
						</view>
						<view>
							<image src="https://file.langsi.online/yasiimg/web/static/uZY30bUj2rGdQ5DbzhHp" mode=""></image>
						</view>
						<view>
							<image src="https://file.langsi.online/yasiimg/web/static/ueBRYf4JiLyck19y1ub8" mode=""></image>
						</view>
						<view>
							<image src="https://file.langsi.online/yasiimg/web/static/u0EhnGWy9EIdBXEF1saO" mode=""></image>
						</view>
					</view>
				</view>
				<!-- 成员安排 -->
				<view class="ap_classes">
					<view class="ad_organization">
						<view class="ad_ap">成员安排</view>
						<view class="ad_icon">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="ad_images">
						<view>
							<image src="https://file.langsi.online/yasiimg/web/static/uD0fdxpAjuTJRW3i17oC" mode=""></image>
						</view>
						<view>
							<image src="https://file.langsi.online/yasiimg/web/static/uYx2XEq9tGjmezlk86Nv" mode=""></image>
						</view>
						<view>
							<image src="https://file.langsi.online/yasiimg/web/static/uD0fdxpAjuTJRW3i17oC" mode=""></image>
						</view>
						<view>
							<image src="https://file.langsi.online/yasiimg/web/static/uZY30bUj2rGdQ5DbzhHp" mode=""></image>
						</view>
						<view>
							<image src="https://file.langsi.online/yasiimg/web/static/ueBRYf4JiLyck19y1ub8" mode=""></image>
						</view>
						<view>
							<image src="https://file.langsi.online/yasiimg/web/static/u0EhnGWy9EIdBXEF1saO" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 时间线 -->
			<view class="view_timeline">
				<u-time-line>
					<!-- 时间线1 -->
					<u-time-line-item nodeTop="2" node-color="red">
						<template v-slot:content>
							<view>
								<view class="u-order-title">
									<view class="fickle">
										<view class="view_first_wz">Test 1</view>
										<view class="changeable greenish">听力</view>
									</view>
									<!-- 图标 -->
									<view class="timeline_tb">
										<view class="timeline_image">
											<image src="https://file.langsi.online/yasiimg/web/static/uzcmU6SwjDXXKQ9viZQP" mode=""></image>
										</view>
										<view class="timeline_image">
											<image src="https://file.langsi.online/yasiimg/web/static/uw8DV7o16Uh5h5pXR0sY" mode=""></image>
										</view>
									</view>

								</view>
								<veiw class="blue-green">
									<view class="blue_qs">
										<view class="text_wrap">Part 1：Questions1-10 Complete the notes belowtex </view>


									</view>
									<view class="text-right">
										<u-icon name="arrow-right" size="18rpx" color="#072F5A"></u-icon>
									</view>
								</veiw>
							</view>
						</template>
					</u-time-line-item>
					<!-- 时间线2 -->
					<u-time-line-item>
						<template v-slot:content>
						<view>
							<view class="u-order-title">
							<view class="fickle">
								<view class="view_first_wz">Test 1</view>
								<view class="changeable yellow">听力</view>
							</view>
								<!-- 图标 -->
								<view class="timeline_tb">
									<view class="timeline_image">
										<image src="https://file.langsi.online/yasiimg/web/static/uzcmU6SwjDXXKQ9viZQP" mode=""></image>
									</view>
									<view class="timeline_image">
										<image src="https://file.langsi.online/yasiimg/web/static/uw8DV7o16Uh5h5pXR0sY" mode=""></image>
									</view>
								</view>
						
							</view>
							<veiw class="blue-green">
								<view class="blue_qs2">
									<view class="text_wrap">Part 1：Questions1-10 Complete the notes belowtex </view>
						
						
								</view>
								<view class="text-right">
										<u-icon name="arrow-right" size="18rpx" color="#072F5A"></u-icon>
								</view>
							</veiw>
						</view>
						</template>
					</u-time-line-item>
				<!-- 时间线3 -->
				<u-time-line-item>
					<template v-slot:content>
					<view>
						<view class="u-order-title">
							<view class="fickle">
								<view class="view_first_wz">Test 1</view>
								<view class="changeable blur">听力</view>
							</view>
							<!-- 图标 -->
							<view class="timeline_tb">
								<view class="timeline_image">
									<image src="https://file.langsi.online/yasiimg/web/static/uzcmU6SwjDXXKQ9viZQP" mode=""></image>
								</view>
								<view class="timeline_image">
									<image src="https://file.langsi.online/yasiimg/web/static/uw8DV7o16Uh5h5pXR0sY" mode=""></image>
								</view>
							</view>
					
						</view>
						<veiw class="blue-green">
							<view class="blue_qs3">
								<view class="text_wrap">Part 1：Questions1-10 Complete the notes belowtex </view>
					
					
							</view>
							<view class="text-right">
								<u-icon name="arrow-right" size="18rpx" color="#072F5A"></u-icon>
							</view>
						</veiw>
					</view>
					</template>
				</u-time-line-item>
				<!-- 时间线4 -->
				<u-time-line-item>
					<template v-slot:content>
					<view>
						<view class="u-order-title">
							<view class="fickle">
								<view class="view_first_wz">Test 1</view>
								<view class="changeable violet">听力</view>
							</view>
							<!-- 图标 -->
							<view class="timeline_tb">
								<view class="timeline_image">
									<image src="https://file.langsi.online/yasiimg/web/static/uzcmU6SwjDXXKQ9viZQP" mode=""></image>
								</view>
								<view class="timeline_image">
									<image src="https://file.langsi.online/yasiimg/web/static/uw8DV7o16Uh5h5pXR0sY" mode=""></image>
								</view>
							</view>
					
						</view>
						<veiw class="blue-green">
							<view class="blue_qs4">
								<view class="text_wrap">Part 1：Questions1-10 Complete the notes belowtex </view>
					
					
							</view>
							<view class="text-right">
									<u-icon name="arrow-right" size="18rpx" color="#072F5A"></u-icon>
							</view>
						</veiw>
					</view>
					</template>
				</u-time-line-item>
				</u-time-line>
			</view>
		</view>
	</view>
</template>
<script>

</script>

<style lang="scss" scoped>
	::v-deep .u-dot {
		
	  /* 在这里编写你的样式代码 */ 
	   background: #2D7CE6 !important;
	}  
	.view_body {
		width: 100%;
		background: linear-gradient(183deg, #F0F6FF 0%, #FAFAFA 100%);
		box-sizing: border-box;
	}

	.view_bulk {
		width: 91.3%;
		margin: 0 auto;

	}

	.view_hearing {
		background-color: #fff;
		padding: 36rpx 32rpx;
	}

	.view_first_line {
		display: flex;
	}

	.view_first_wz {
		font-size: 28rpx;
		font-weight: 800;
		color: #2E4975;
		margin-left: 12rpx;
	}

	.view_line {
		display: flex;
		justify-content: space-between;
	}

	.toward {
		font-size: 24rpx;
		font-weight: 500;
		color: #F18F21;
	}

	.view_descriptive {
		display: flex;
		flex-direction: column;
		margin-top: 22rpx;

	}

	.view_icon {
		display: flex;

		view {
			font-size: 25rpx;
			font-weight: 500;
			color: rgba(46, 73, 117, 0.6);
			margin-left: 10rpx;
		}
	}

	.view_textual {
		font-size: 25rpx;
		font-weight: 500;
		color: #2E4975;
		margin-top: 15rpx;
	}

	.progress {
		margin-top: 15rpx;
	}

	.ap_class {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0rpx;
	}

	.ap_classes {
		display: flex;
		flex-direction: column;
		padding: 24rpx;
		background: linear-gradient(174deg, #FFF2E4 0%, #FFFFFF 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.ad_icon {
		margin-left: 130rpx;
	}

	.ad_organization {
		display: flex;
	}

	.ad_images {
		display: flex;
		justify-content: space-between;
		margin-top: 32rpx;
	}

	.ad_images view {
		width: 36rpx;
		height: 36rpx;

	}

	.ad_ap {
		font-size: 32rpx;
		font-weight: 800;
		color: #2E4975;
	}

	.view_timeline {
		padding: 32rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

	}

	//时间线
	.u-order-title {
		display: flex;
		justify-content: space-between;
	}

	.timeline_image {
		width: 24rpx;
		height: 24rpx;
		margin-left: 40rpx;
	}
	.fickle{
		display:  flex;
	}

	.timeline_tb {
		display: flex;
	}

	.text_wrap {
		width: 380rpx;
		height: 38rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #2E4975;
		line-height: 38rpx;
		padding: 20rpx;
	}

	.blue-green {
		height: 116rpx;
		position: relative;
		display: flex;
		justify-content: space-between;
		background: #F9F9F9;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 20rpx;
		margin-top: 15rpx;
	}

	.blue_qs {
		position: absolute;
		left: 0;
		top: 0;
		width: 268rpx;
		height: 156rpx;
		background: #E8FCF7;
		border-radius: 20rpx 0rpx 0rpx 20rpx;
	}
	.blue_qs2{
		position: absolute;
		left: 0;
		top: 0;
	width: 416rpx;
		height: 156rpx;
		background: #FCF0D4;
		border-radius: 20rpx 0rpx 0rpx 20rpx;
	}
	.blue_qs3{
		position: absolute;
			left: 0;
			top: 0;
		width: 543rpx;
			height: 156rpx;
		background: rgba(63,122,242,0.1);
			border-radius: 20rpx 0rpx 0rpx 20rpx;
	}
	.blue_qs4{
		position: absolute;
			left: 0;
			top: 0;
		width: 543rpx;
			height: 156rpx;
		
			border-radius: 20rpx 0rpx 0rpx 20rpx;
	}


	.text-right {
		position: absolute;
		right: 13rpx;
		top: 20rpx;
	}

	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	.changeable{
		padding: 10rpx 20rpx ;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-size: 20rpx;
		font-weight: 500;
	
		margin-left: 12rpx;
	}



	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
	.greenish{
		background: rgba(27,225,178,0.1);
		color: #1BE1B2;
	}
	.yellow{
		background: rgba(242,182,42,0.2);
		color: #F2AA02;
	}
	.blur{
		background: rgba(63,122,242,0.2);
		color: #3F7AF2;
	}
	.violet{
		background: rgba(242,63,170,0.1);
		color: #F23FEB;
	}
	
	
</style>