smartmeter-app/pages_teacher/teacher_teachers/teacher_addOperation.vue

<template>
	<view class="concent">
		<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_header">
				<view class="view_title">标题</view>
				<view class="view_input">
					<u-form-item prop="value">
						<u-input v-model="form.value" :type="type" :border="border" placeholder="输入作业标题" />
					</u-form-item>
				</view>
			</view>
			<!-- 班级安排 -->
			<view>
				<view class="view_tubiao">
					<view class="view_title">班级安排</view>
					<view class="view_tb">

						<view class="view_add">
							<text>+</text>
							添加
						</view>
					</view>
				</view>

				<view class="class_bj">
					<view class="class_images">
						<view class="class_ys">
							<view class="class_tp">
								<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode=""></image>
							</view>
							<view class="class_wz">雅思1班</view>
						</view>
						<view class="class_ys">
							<view class="class_tp">
								<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode=""></image>
							</view>
							<view class="class_wz">雅思1班</view>
						</view>
						<view class="class_ys">
							<view class="class_tp">
								<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode=""></image>
							</view>
							<view class="class_wz">雅思1班</view>
						</view>
					</view>
					<!-- 2 -->
					<view class="class_images">
						<view class="class_ys">
							<view class="class_tp">
								<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode=""></image>
							</view>
							<view class="class_wz">雅思1班</view>
						</view>
						<view class="class_ys">
							<view class="class_tp">
								<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode=""></image>
							</view>
							<view class="class_wz">雅思1班</view>
						</view>
						<view class="class_ys">
							<view class="class_tp">
								<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode=""></image>
							</view>
							<view class="class_wz">雅思1班</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 学员安排 -->
			<view>
				<view class="view_tubiao">
					<view class="view_title">学员安排</view>
					<view class="view_tb">

						<view class="view_add">
							<text>+</text>
							添加
						</view>
					</view>
				</view>

				<view class="class_bj">
					<view class="class_images">
						<view class="class_ys">
							<view class="class_tp">
								<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode=""></image>
							</view>
							<view class="class_wz">LULY</view>
						</view>
						<view class="class_ys">
							<view class="class_tp">
								<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode=""></image>
							</view>
							<view class="class_wz">Bright</view>
						</view>
						<view class="class_ys">
							<view class="class_tp">
								<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode=""></image>
							</view>
							<view class="class_wz">Bright</view>
						</view>
					</view>
					<!-- 2 -->
					<view class="class_images">
						<view class="class_ys">
							<view class="class_tp">
								<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode=""></image>
							</view>
							<view class="class_wz">LULY</view>
						</view>
						<view class="class_ys">
							<view class="class_tp">
								<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode=""></image>
							</view>
							<view class="class_wz">Bright</view>
						</view>
						<view class="class_ys">
							<view class="class_tp">
								<image src="https://file.langsi.online/yasiimg/web/static/u4T48EWFfk5p6yrV3gOw" mode=""></image>
							</view>
							<view class="class_wz">Bright</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 作业安排 -->
			<view>
				<view>
					<view class="view_tubiao">
						<view class="view_title">作业安排</view>
						<view class="view_tb">

							<view class="view_add">
								<text>+</text>
								添加
							</view>
						</view>
					</view>
					<view class="view_operation">
						<view>
							<view class="view_ap">
								<text>听力-IELTS 18-Test 2</text>
								<view class="view_qbs">
									<view class="view_qb">
										<image src="https://file.langsi.online/yasiimg/web/static/uUikvKyGaRLDLWE2KYjv" mode=""></image>
									</view>
									<view class="view_qb">
										<image src="https://file.langsi.online/yasiimg/web/static/uvmKnUiil91Tfpd570Ev" mode=""></image>
									</view>
								</view>
							</view>
							<view></view>
						</view>
						<view class="view_English">
							<view>Part 1：Questions1-10</view>
							<view>Complete the notes below.</view>
						</view>
					</view>
				</view>
				<view>
					<view class="view_operation">
						<view>
							<view class="view_ap">
								<text>听力-IELTS 18-Test 2</text>
								<view class="view_qbs">
									<view class="view_qb">
										<image src="https://file.langsi.online/yasiimg/web/static/uUikvKyGaRLDLWE2KYjv" mode=""></image>
									</view>
									<view class="view_qb">
										<image src="https://file.langsi.online/yasiimg/web/static/uvmKnUiil91Tfpd570Ev" mode=""></image>
									</view>
								</view>
							</view>
							<view></view>
						</view>
						<view class="view_English">
							<view>Part 1：Questions1-10</view>
							<view>Complete the notes below.</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 截止时间 -->
			<view>
				<view class="view_tubiao">
					<view class="view_title">截止时间</view>
				</view>
				<view>
					<view class="view_form">
						<u-picker mode="time" v-model="show" :params="params" @confirm="printValue"></u-picker>
						<u-form-item prop="times">
							<u-input v-model="form.times" :type="type" :border="border" placeholder="选择作业截止的时间" @click="show = true" />
						</u-form-item>


					</view>
				</view>
			</view>
			<!-- 描述 -->
			<view>
				<view class="view_tubiao">
					<view class="view_title">描述</view>
				</view>
				<view class="view_textrea">
					<textarea value="" placeholder="输入你的描述... " />
					</view>
			</view>	
	</view>
	
<!-- 按钮 -->
			<view class="view_footer" @click="submit">
				<view class="view_button" >确认添加 </view>
				
			</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 表单双向数据绑定
				form: {
					value: '',
					times:'',
					
				},
				// prick 时间选择框数据
				params: {
									year: true,
									month: true,
									day: true,
									hour: false,
									minute: false,
									second: false
								},
								show: false,
				radio: '',
				switchVal: false,
			}
		},
		methods:{
			// 获取截止时间
			 printValue(e){
				 this.form.times=`${e.year}-${e.month}-${e.day}`
			 },
			 submit() {
			 			
			 		}
		}
	}
</script>
<style lang="scss" scoped>
	.concent {
		width: 100vw;
		background: linear-gradient(183deg, #F0F6FF 0%, #FAFAFA 100%);
	}

	.view_body {
		width: 91.3%;
		margin: 0 auto;
	}

	.view_title {
		font-size: 28rpx;
		font-family: 'PingFang';
		font-weight: 800;
		color: #2E4975;
	}

	.view_input {
		line-height: 70rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-top: 16rpx;
		padding: 0 24rpx;
	}

	.view_tubiao {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 46rpx;
	}

	.view_tb {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 52rpx;
		background: #FFFFFF;
		border-radius: 26rpx 26rpx 26rpx 26rpx;
		opacity: 1;
		border: 2rpx solid #F1F1F1;
	}

	.view_add {
		font-size: 24rpx;
		font-family: 'PingFang';
		font-weight: 500;
		color: #F18F21;
		padding: 14rpx 24rpx;
		text {
			margin-right: 5rpx;
		}
	}

	.class_bj {
		margin-top: 16rpx;
	}

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

	.class_tp {
		width: 56rpx;
		height: 56rpx;
		margin-right: 12rpx;
	}

	.class_ys {
		width: 215rpx;
		height: 96rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
		// width: 215rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.class_wz {
		font-size: 28rpx;
		font-family: 'PingFang';
		font-weight: 500;
		color: #072F5A;
	}

	.view_qb {
		width: 24rpx;
		height: 24rpx;
		margin-left: 40rpx;
	}

	.view_qbs {
		display: flex;
	}

	.view_ap {
		display: flex;
		justify-content: space-between;

		text {
			font-size: 28rpx;
			font-weight: 800;
			color: #2E4975;
		}
	}

	.view_operation {
		margin-top: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 34rpx 32rpx;
	}

	.view_English {
		margin-top: 24rpx;
		padding: 20rpx;
		background: #F9F9F9;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		view {
			font-size: 24rpx;
			font-weight: 500;
			color: #2E4975;
		}
	}
	.view_form{
		padding: 26rpx 32rpx;
		background: #FFFFFF;
		margin-top: 16rpx;
	}
	.view_textrea{
		height: 260rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;;
		// padding: 26rpx 32rpx;
		margin-top:16rpx;
	}
	.view_button{
		width: 93.1%;
		margin:auto;
		text-align: center;
		line-height: 80rpx;
		background: linear-gradient(180deg, #74AFFF 0%, #2D7CE6 100%);
		border-radius: 104rpx 104rpx 104rpx 104rpx;
		color: #FFFFFF;
	}
	.view_footer{
	width: 100%;
		padding: 0 16rpx;
		height: 144rpx;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 32rpx 0rpx;
		background-color: #fff;
		box-shadow: 0rpx -10rpx 16rpx 0rpx rgba(202,202,202,0.25);
		margin-top: 8rpx;
	}
</style>