tearoom/pages/Mystudent/arrange_work.vue

<template>
	<view class="pagebox">
		<u-navbar title="作业安排"
				  :border-bottom="false"
				  :background="bgc"
				  title-color='#2E4975'
				  title-size='36'
				  height='36'></u-navbar>
		<view class="serchbox">
			<view class="serchimg">
				<image src="https://file.langsi.online/yasiimg/web/static/uVMACkynkipOxuTYDqm0">

				</image>
			</view>
			<input type="text"
				   placeholder="搜索相关内容..."
				   class="input"
				   placeholder-style="color:#C7CDD3 ">
		</view>
		<view class="checkbox">
			<view class="chekcont">
				时间排序
				<view class="iconfont icon-arow_down"></view>
			</view>
			<view class="chekcont">
				题库类型
				<view class="iconfont icon-arow_down"></view>
			</view>
			<view class="chekcont">
				状态
				<view class="iconfont icon-arow_down"></view>
			</view>
		</view>
		<view class="card_bigbox">
			<view class="work_card" v-for="(item,index ) in work" :key="index"
			:class="item.iswork === '1' ? 'act1' : (item.iswork === '2' ? 'act3' : 'default')">
				<view class="work_card_top">
					<view class="work_card_top_left">
						<view class="work_card_top_left_img">
							<image src="https://file.langsi.online/yasiimg/web/static/u07sCQb6mW6OSamVr1Va"></image>
						</view>
						课后作业
					</view>
					<view class="work_card_top_right"
						  :class="isalready == true ? 'act2' : ''">
						进行中
					</view>
				</view>
				<view class="work_card_cont_box">
					<view class="work_card_cont">
						<view class="work_card_cont_point"></view>
						<view class="work_card_cont_text">
							IELTS 18-Test 2-Part 1
						</view>
						<view class="work_card_cont_tag">
							听力
						</view>
					</view>
					<view class="work_card_cont">
						<view class="work_card_cont_point"></view>
						<view class="work_card_cont_text">
							IELTS 18-Test 2-Part 1
						</view>
						<view class="work_card_cont_tag">
							听力
						</view>
					</view>
					<view class="work_card_cont">
						<view class="work_card_cont_point"></view>
						<view class="work_card_cont_text">
							IELTS 18-Test 2-Part 1
						</view>
						<view class="work_card_cont_tag">
							听力
						</view>
					</view>
				</view>
				<view class="work_card_info_box">
					<view class="work_card_info_top">
						<view class="work_card_info_topimg">
							<image src="https://file.langsi.online/yasiimg/web/static/uw2jJ5BraHhwDDaIZ0MC"></image>
						</view>
						描述
					</view>
					<view class="work_card_info_bot">
						最好在中午十二点之前完成交上作业，过期不候
					</view>
				</view>
				<view class="work_card_info_box">
					<view class="work_card_info_top">
						<view class="work_card_info_topimg">
							<image src="https://file.langsi.online/yasiimg/web/static/uhApaomh5maFP29oecp3">

							</image>
						</view>
						时间
					</view>

					<view class="work_card_info_bot">
						02-12 12:00
					</view>
				</view>
			</view>
		</view>
		<view class="botbtn">
			<view class="btn">
				添加作业
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			bgc: {
				backgroundColor: "#F0F6FF",
			},
			isalready: true,
			work: [
				{ "iswork": "0" },
				{ "iswork": "1" },
				{ "iswork": "2" },
				{ "iswork": "0" }
			],
		}
	},
	methods: {

	}
}
</script>

<style lang="scss" >
page {
	background: linear-gradient(183deg, #F0F6FF 0%, #FAFAFA 100%);
	padding-bottom: 170rpx;
}

.pagebox {
	padding: 0 32rpx;

	.serchbox {
		padding: 0 32rpx;
		display: flex;
		flex-wrap: nowrap;
		margin-top: 30rpx;
		align-items: center;
		width: 686rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.serchimg {
			width: 30.51rpx;
			height: 32rpx;
			margin-right: 24rpx;
		}

		.input {
			margin: 0 auto;
			width: 568rpx;
			height: 88rpx;
			border-radius: 30rpx;
			// background-color: #f5f8fc;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			// text-align: center;
			font-size: 28rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Light;
			font-weight: 300;
			text-align: left;
			color: #a7b9cd;
			letter-spacing: 1.2rpx;
			line-height: 36rpx;
			// padding: 0 100rpx;
			// padding-right: 135rpx;
			box-sizing: border-box;

		}
	}

	.checkbox {
		
		margin-top: 32rpx;
		padding: 0 34rpx;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;

		.chekcont {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			font-size: 24rpx;
			font-family:'PingFang','PingFang';
			font-weight: 500;
			color: rgba(7, 47, 90, 0.6);

			.icon-arow_down {
				margin-left: 6rpx;
				font-size: 16rpx;
			}
		}

	}

	.card_bigbox {
		.work_card {
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;
			width: 686rpx;
			padding: 32rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			border-left: 8rpx solid #F18F21;

			.work_card_top {
				width: 100%;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: space-between;

				.work_card_top_left {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					font-size: 28rpx;
					font-family:'PingFang','PingFang';
					font-weight: 800;
					color: #2E4975;

					.work_card_top_left_img {
						margin-right: 8rpx;
						width: 38rpx;
						height: 32rpx;
					}
				}

				.work_card_top_right {
					font-size: 24rpx;
					font-family:'PingFang','PingFang';
					font-weight: 500;
					color: #F18F21;
				}

				.act2 {
					color: #2D7CE6;
				}
			}

			.work_card_cont_box {
				margin-top: 16rpx;
				padding: 24rpx;
				width: 100%;
				background: #F9F9F9;
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				.work_card_cont:last-child {
					margin-bottom: 0;
				}

				.work_card_cont {
					margin-bottom: 24rpx;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;

					.work_card_cont_point {
						width: 8rpx;
						height: 8rpx;
						background: #2E4975;
						border-radius: 50%;
					}

					.work_card_cont_text {
						margin-left: 20rpx;
						font-size: 24rpx;
						font-family:'PingFang','PingFang';
						font-weight: 500;
						color: #2E4975;
					}

					.work_card_cont_tag {
						margin-left: 30rpx;
						padding: 8rpx 18rpx;
						background: #FFF2E4;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						font-size: 20rpx;
						font-family:'PingFang','PingFang';
						font-weight: 500;
						color: #F18F21;
					}

				}
			}

			.work_card_info_box {
				display: flex;
				flex-wrap: wrap;
				margin-top: 22rpx;

				.work_card_info_top {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					width: 100%;
					font-size: 20rpx;
					font-family:'PingFang','PingFang';
					font-weight: 500;
					color: rgba(46, 73, 117, 0.6);

					.work_card_info_topimg {
						margin-right: 8rpx;
						width: 18.74rpx;
						height: 20rpx;
					}
				}

				.work_card_info_bot {
					margin-top: 4rpx;
					font-size: 24rpx;
					font-family:'PingFang','PingFang';
					font-weight: 500;
					color: #2E4975;
				}
			}
		}

		.act1 {
			border-left: 8rpx solid #2D7CE6;
		}

		.act3 {
			border-left: 8rpx solid #DFDFDF;
		}
	}
	.botbtn{
		padding: 32rpx 32rpx 0 32rpx;
		margin-left: -32rpx;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 200rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -10rpx 16rpx 0rpx rgba(202,202,202,0.25);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		.btn{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-family:'PingFang','PingFang';
			font-weight: 800;
			color: #FFFFFF;
			width: 686rpx;
			height: 80rpx;
			background: linear-gradient(180deg, #74AFFF 0%, #2D7CE6 100%);
			border-radius: 104rpx 104rpx 104rpx 104rpx;
		}
	}
}</style>