<template>
	<view class="view_body">
		<u-navbar :is-back="true" title='班级详情' title-color="#000" :border-bottom="false" :background="true" id="navbar">
		</u-navbar>
		<view class="view_botton">
			<view class="view_spoken">
				<view>
					<image src="https://file.langsi.online/yasiimg/web/static/uXJ24nLEqmCb0FkFpmfy" mode=""></image>
				</view>
				<view class="view_span">
					<text>雅思1班</text>
					<view>基础班</view>
				</view>
			</view>
			<view class="view_yellowBotton">
				安排作业
			</view>
		</view>
		<view class="view_zy">


			<view class="view_left" v-for="(item,index) in clas" :key="index">
				<view class="veiw_left2">
					<view class="view_class">
						<text>{{item.title}}</text>
						<u-icon name="arrow-right" color="#646D7B" size="16"></u-icon>
					</view>
					<view class="view_images">
						<image :src="item1.url" mode="" v-for="(item1,index) in item.image"></image>
					</view>
				</view>
			</view>

		</view>
		<view class="view_operation">
			<view class="view_class">
				<text>作业安排</text>
				<u-icon name="arrow-right" color="#646D7B" size="16"></u-icon>
			</view>
			<view class="view_no" v-if="isShow">
				暂未安排作业哦!<text class="organization">去安排</text>
			</view>
			<view class="view_show" v-if="!isShow">
				<view class="view_crossbar" v-for="(item,index) in operation" :key="index">
					<image :src="item.image" mode=""></image>
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>
		<view class="view_footer">
			<view>
				<text>作业提交记录</text>
				<view class="view_icon">
					七天内<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			<view class="view_image">
				<view></view>
				<text class="text">暂无学习记录，快去安排作业吧！</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {

			return {
				isShow: false,
				clas:[
					{
						title:'班级成员',
						image:[
							{
								url:'https://file.langsi.online/yasiimg/web/static/uXJ24nLEqmCb0FkFpmfy',
							},
							{
								url:'https://file.langsi.online/yasiimg/web/static/ufg5N01CbfezyG5wt48Q'
							},
							{
								url:'https://file.langsi.online/yasiimg/web/static/uXJ24nLEqmCb0FkFpmfy'
							},
							{
								url:'https://file.langsi.online/yasiimg/web/static/uy3xEPgyYPnRqPbpamya'
							},
							{
								url:'https://file.langsi.online/yasiimg/web/static/uY8idjLvCQSuYCzvus9A'
							},{
								url:'https://file.langsi.online/yasiimg/web/static/ucf2g8fGLqNtW7OpGNT6'
							},
						]
					},
					{
						title:'带班老师',
						image:[
							{
								url:'https://file.langsi.online/yasiimg/web/static/uXJ24nLEqmCb0FkFpmfy',
							},
							{
								url:'https://file.langsi.online/yasiimg/web/static/ufg5N01CbfezyG5wt48Q'
							},
							{
								url:'https://file.langsi.online/yasiimg/web/static/uXJ24nLEqmCb0FkFpmfy'
							},
							{
								url:'https://file.langsi.online/yasiimg/web/static/uy3xEPgyYPnRqPbpamya'
							},
							{
								url:'https://file.langsi.online/yasiimg/web/static/uY8idjLvCQSuYCzvus9A'
							},{
								url:'https://file.langsi.online/yasiimg/web/static/ucf2g8fGLqNtW7OpGNT6'
							},
						]
					}
				],
				operation:[
					{
						image:'https://file.langsi.online/yasiimg/web/static/ukPnTLkhCKU5zhbM7SMu',
						title:'课后作业'
					},
					{
						image:'https://file.langsi.online/yasiimg/web/static/udltPEywiuFFxqFMSFJE',
						title:'单科模考'
					},
					{
						image:'https://file.langsi.online/yasiimg/web/static/uT04VQSSNlabXp1bhXSG',
						title:'写作作业'
					},
					{
						image:'https://file.langsi.online/yasiimg/web/static/uBWxObS2WAFtu2BIIx9l',
						title:'五一作业'
					},
					{
						image:'https://file.langsi.online/yasiimg/web/static/uo08OdTA2zsojWQEap69',
						title:'更多'
					}
					
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.view_body {
		height: 100vh;
		background: linear-gradient(183deg, #F0F6FF 0%, #FAFAFA 100%);
		padding: 0 32rpx;

		.view_botton {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 124rpx;
			background: #fff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 24rpx;

			.view_spoken {
				display: flex;
				align-items: center;

				.view_span {
					display: flex;
					flex-direction: column;
					margin-left: 16rpx;
				}

				.view_span text:nth-child(1) {
					height: 32rpx;
					font-size: 32rpx;
					font-family: 'PingFang';
					font-weight: bold;
					color: #072F5A;
					line-height: 32rpx;

				}

				.view_span view {
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					ling-height: 40rpx;
					background: #EBF3FF;
					margin-top: 10rpx;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					font-size: 20rpx;
					color: #2D7CE6;
					font-weight: 500;
				}
			}

			image {
				width: 76rpx;
				height: 76rpx;
			}
		}

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

		.view_left {
			width: 333rpx;
			display: flex;
			justify-content: space-evenly;
			height: 160rpx;
			background: linear-gradient(174deg, #FFF2E4 0%, #FFFFFF 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			// padding: 60rpx;

		}
		.veiw_left2{
			width: 333rpx;
			padding: 24rpx;
		}

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

		.view_class text {
			width: 128rpx;
			font-size: 32rpx;
			font-family: 'PingFang';
			font-weight: 800;
			color: #2E4975;
		}

		.view_images {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
			

			image {
			
				width: 36rpx;
				height: 36rpx;
				
			}
		}

		.view_operation {
			width: 686rpx;
			height: 196rpx;
			background: linear-gradient(170deg, #FFF2E4 0%, #FFFFFF 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 24rpx;
			text-align: center;

			.view_no {
				font-size: 28rpx;
				font-family: 'PingFang';
				font-weight: 500;
				color: #627698;
				margin: 40rpx 0rpx;
					
			}
			.view_no .organization{
				font-size: 28rpx;
				font-family: 'PingFang';
				font-weight: 500;
				color: #2D7CE6;
				border-bottom: 2px solid #2D7CE6;
				margin-left: 10rpx;
			}
				
			.view_show{
				display: flex;
				justify-content: space-between;
				margin: 25rpx 0rpx;
			}
			.view_crossbar{
				width: 80rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 20rpx;
				font-family: 'PingFang';
				font-weight: 500;
				color: #F39852;
				
				
			}
			 .view_crossbar image {
					width: 40rpx;
					height: 35rpx;
					margin-bottom: 12rpx;
			}
				
		}
		.view_footer view {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx 0rpx;
			text {
				font-size: 32rpx;
				font-family: 'PingFang';
				font-weight: 800;
				color: #2E4975;
			}
		}
		.view_image{
			display:flex;
			flex-direction: column;
			width: 100%;
			height: 300rpx;
			view {
				width: 100%;
				height: 500rpx;
				background: url('https://file.langsi.online/yasiimg/web/static/ulqScWZvBYd22CW5uV0H') no-repeat center;
				background-size: 30%;
			}
		
			
			
			.text {
				font-size: 24rpx;
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				color: #0E3B77;
				margin-top: 10rpx;
			}
			
		}
		.view_icon{
			font-size: 24rpx;
			font-family: 'PingFang';
			font-weight: 500;
			color: rgba(7,47,90,0.6);
		}
		.view_yellowBotton{
				padding: 20rpx 50rpx;
				background: #F39852;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				font-size: 24rpx;
				font-family: 'PingFang';
				font-weight: 800;
				color: #FFFFFF;
		}
	}
</style>