<template>
	<div class="pb_content">
		<!-- <div class="pb_head">
			<span>我的资料</span>
		</div> -->
		<div class="pb_content_body">
			<div class="left">
				<div class="tips">请跟随下面的步骤,逐步上传你的课程或房间內容:</div>
				<div class="info_steps">
					<span class="" :class="steps > 0 ? 'steps_active' : ''"
						>{{ this.steps > 1 ? "√" : "1" }} </span
					><span>填写项目基本信息</span>
				</div>
				<div class="info_solid"></div>
				<div class="info_steps">
					<span class="" :class="steps > 1 ? 'steps_active' : ''"
						>{{ this.steps > 2 ? "√" : "2" }} </span
					><span>填写项目阶段性</span>
				</div>
				<div class="info_solid"></div>
				<div class="info_steps">
					<span class="" :class="steps > 2 ? 'steps_active' : ''"
						>{{ this.steps > 4 ? "√" : "3" }} </span
					><span>上传课程内容</span>
				</div>
				<div class="info_solid"></div>
				<div class="info_steps">
					<span class="" :class="steps > 3 ? 'steps_active' : ''"
						>{{ this.steps > 4 ? "√" : "4" }} </span
					><span>上传成功</span>
				</div>
			</div>
			<div class="right">
				<div v-if="this.steps == 1">
					<div class="basic_box">
						<h3 class="info_title">项目内容填写</h3>
						<div class="big_box">
							<div class="left_first">
								<div>
									<div class="bInfo_title">
										<span style="color: red">*</span>项目名称
									</div>
									<div>
										<input
											type="text"
											placeholder="项目名称"
											class="binfo_input"
											v-model="courseName"
										/>
									</div>
								</div>
								<div style="margin-top: 30px">
									<div class="bInfo_title">
										<span style="color: red">*</span>简要描述
									</div>
									<div>
										<textarea
											rows="4"
											placeholder="简要描述"
											class="binfo_input"
											cols=""
											v-model="courseText"
										></textarea>
									</div>
								</div>
								<el-switch
									v-model="isTeacherSee"
									active-text="允许给其他老师查看"
									style="margin: 40px 0 0 25px"
								>
								</el-switch>
							</div>
							<div class="right_first">
								<div>
									<div style="flex: 0.5 1 0%; margin: 0 20px 0 0">
										<div class="bInfo_title">
											课程封面
											<div class="chapter_beizhu">PNG,GIF,JPEG</div>
										</div>
										<div class="chapter_uploadBox1">
											<div
												class="chapter_add"
												v-if="unitJson[unitIndex].cover.length == 0"
												@click="addImg($event)"
											>
												<div class="chapter_add_l">+</div>
												<div class="chapter_add_r">添加文件</div>
												<input
													type="file"
													accept="image/png,image/gif,image/jpeg"
													style="display: none"
													@change="beforeUpload1"
												/>
											</div>
											<div
												v-if="unitJson[unitIndex].cover.length != 0"
												class="chapter_upload_move"
												style="height: 100%"
											>
												<div class="chapter_upload_t" style="width: 100%"></div>
												<div class="chapter_upload_o" style="top: 7px">
													<div class="chapter_upload_l">
														<div class="chapter_upload_l_i"></div>
													</div>
													<div class="chapter_upload_ic">
														<div class="chapter_upload_ic_l">
															<div
																style="
																	backgroundposition: -5px -131px;
																	display: block;
																"
															></div>
														</div>
														<div
															class="chapter_upload_ic_r"
															style="cursor: pointer"
														>
															<div></div>
														</div>
													</div>
													<div class="chapter_upload_n">
														{unitJson[unitIndex].cover[0].substr(unitJson[unitIndex].
														[0].lastIndexOf("/")).slice(1)}
													</div>
												</div>
											</div>
										</div>
									</div>
									<div style="flex: 0.5 1 0%;margin-top: 30px;">
										<div class="bInfo_title">
											<span style="color: red">*</span>选择项目成员
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="line"></div>
					</div>
				</div>
				<div v-if="this.steps == 2">
					<div class="basic_box">
						<h3 class="info_title">上传课程阶段性内容：项目阶段填写</h3>
						<div class="cru_selectBox">
							<div
								v-for="(item, index) in unitJson"
								:key="item.id"
								class="cru_select"
								:class="unitIndex == index ? 'cru_selected' : 'cru_select'"
								@click="unitSet(index)"
							>
								第{{ index + 1 }}单元
							</div>
							<img
								src="../../assets/line.png"
								class="cru_line"
								:style="{
									left: offsetLetfPx + 'px',
								}"
							/>
						</div>
						<div class="chapter_box" style="max-height: 500px">
							<div>
								<div class="chapter_contentbox">
									<div>第{{ unitIndex + 1 }}单元</div>
									<div>
										<input
											type="text"
											placeholder="单元标题"
											class="binfo_input"
											v-model="unitJson[unitIndex].dyName"
										/>
									</div>
									<div
										v-if="unitJson.length > 1"
										@click="deleteUnit(unitIndex)"
									></div>
								</div>
								<div class="time">
									<div class="small_title">
										开始时间<span style="color: red">*</span>
									</div>
									<el-date-picker
										v-model="unitJson[unitIndex].startTime"
										type="date"
										placeholder="选择日期"
										style="margin-left: 5px"
									>
									</el-date-picker>
									<div class="small_title" style="margin-left: 40px">
										结束时间<span style="color: red">*</span>
									</div>
									<el-date-picker
										v-model="unitJson[unitIndex].endTime"
										type="date"
										placeholder="选择日期"
										style="margin-left: 5px"
									>
									</el-date-picker>
								</div>
								<el-switch
									v-model="unitJson[unitIndex].isTalk"
									active-text="是否开启评价"
									style="margin: 40px 0 0 25px"
								>
								</el-switch>
							</div>
						</div>
					</div>
					<div class="chapter_btnbox" @click="addunit">
						<div class="icon_add">
							<i></i>
							<i></i>
						</div>
						<div class="chapter_btn_w">新增阶段</div>
					</div>
				</div>
				<div v-if="this.steps == 3">
					<div class="basic_box">
						<h3 class="info_title">项目内容填写</h3>
						<div>
							<div class="bInfo_title">
								<span style="color: red">*</span>项目名称
							</div>
							<div>
								<input
									type="text"
									placeholder="项目名称"
									class="binfo_input"
									v-model="courseName"
								/>
							</div>
						</div>
						<div>
							<div class="bInfo_title">
								<span style="color: red">*</span>简要描述
							</div>
							<div>
								<textarea
									rows="4"
									placeholder="简要描述"
									class="binfo_input"
									cols=""
									v-model="courseText"
								></textarea>
							</div>
						</div>
						<div style="display: flex">
							<div style="flex: 0.5 1 0%; margin: 0 20px 0 0">
								<div class="bInfo_title">
									课程封面
									<div class="chapter_beizhu">PNG,GIF,JPEG</div>
								</div>
								<div class="chapter_uploadBox1">
									<div
										class="chapter_add"
										v-if="unitJson[unitIndex].cover.length == 0"
										@click="addImg($event)"
									>
										<div class="chapter_add_l">+</div>
										<div class="chapter_add_r">添加文件</div>
										<input
											type="file"
											accept="image/png,image/gif,image/jpeg"
											style="display: none"
											@change="beforeUpload1"
										/>
									</div>
								</div>
							</div>
							<div style="flex: 0.5 1 0%">
								<div class="bInfo_title">
									课程预览视频
									<div class="chapter_beizhu">MP4,M4V,MOV,AVI</div>
								</div>
								<div class="chapter_uploadBox1">
									<div
										class="chapter_add"
										v-if="unitJson[unitIndex].cover.length == 0"
										@click="addImg($event)"
									>
										<div class="chapter_add_l">+</div>
										<div class="chapter_add_r">添加文件</div>
										<input
											type="file"
											accept="image/png,image/gif,image/jpeg"
											style="display: none"
											@change="beforeUpload1"
										/>
									</div>
								</div>
							</div>
						</div>
						<el-switch
							v-model="isTeacherSee"
							active-text="允许给其他老师查看"
							style="margin: 40px 0 0 25px"
						>
						</el-switch>
						<div class="line"></div>
						<div class="cru_selectBox">
							<div
								v-for="(item, index) in unitJson"
								:key="item.id"
								class="cru_select"
								:class="unitIndex == index ? 'cru_selected' : 'cru_select'"
								@click="unitSet(index)"
							>
								第{{ index + 1 }}单元
							</div>
							<img
								src="../../assets/line.png"
								class="cru_line"
								:style="{
									left: offsetLetfPx + 'px',
								}"
							/>
						</div>
						<div class="chapter_box" style="max-height: 500px">
							<div>
								<div class="chapter_contentbox">
									<div>第{{ unitIndex + 1 }}单元</div>
									<div>
										<input
											type="text"
											placeholder="单元标题"
											class="binfo_input"
											v-model="unitJson[unitIndex].dyName"
										/>
									</div>
									<div
										v-if="unitJson.length > 1"
										@click="deleteUnit(unitIndex)"
									></div>
								</div>
								<div class="time">
									<div class="small_title">
										开始时间<span style="color: red">*</span>
									</div>
									<el-date-picker
										v-model="unitJson[unitIndex].startTime"
										type="date"
										placeholder="选择日期"
										style="margin-left: 5px"
									>
									</el-date-picker>
									<div class="small_title" style="margin-left: 40px">
										结束时间<span style="color: red">*</span>
									</div>
									<el-date-picker
										v-model="unitJson[unitIndex].endTime"
										type="date"
										placeholder="选择日期"
										style="margin-left: 5px"
									>
									</el-date-picker>
									<el-switch
										v-model="unitJson[unitIndex].isTalk"
										active-text="是否开启评价"
										style="margin: 10px 0px 0px 30px"
									>
									</el-switch>
								</div>
							</div>
						</div>
						<div class="line"></div>
						<div class="basic_box" style="margin: 45px 0 0 15px; min-height: 0">
							<h3 class="info_title">添加教学文档</h3>
							<el-upload
								action="#"
								list-type="picture-card"
								v-loading="uploadLoading1"
								:class="{ disUoloadSty: noneBtnImg }"
								:http-request="beforeUpload1"
								ref="upload1"
								:on-preview="handlePictureCardPreview"
								:on-remove="handle_remove1"
								:show-file-list="true"
								:file-list="fileList1"
								accept="image/*"
								:limit="1"
								class="imgLeft"
							>
								<i class="el-icon-plus"></i>
							</el-upload>
						</div>
						<div class="line"></div>
						<div class="basic_box" style="margin: 45px 0 0 15px; min-height: 0">
							<h3 class="info_title">附件添加</h3>
							<div class="add_info_box">
								<button class="info_btn" @click="add($event, unitIndex, j)">
									添加视频
									<input
										type="file"
										accept="video/mp4,video/quicktime,video/x-msvideo"
										style="display: none"
										@change="upload($event, unitIndex, j)"
									/>
								</button>
								<button class="info_btn" @click="add($event, unitIndex, j)">
									添加附件
									<input
										type="file"
										accept="application/pdf,.ppt,.pptx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
										style="display: none"
										@change="upload($event, unitIndex, j)"
									/>
								</button>
							</div>
							<div>
								<div class="add_chapters_box"></div>
							</div>
						</div>
						<div class="line"></div>
						<div class="basic_box" style="margin: 45px 0 0 15px; min-height: 0">
							<h3 class="info_title">作业设置</h3>
							<div class="homework_box">
								<div
									class="course_homework"
									v-for="(item, index) in itemCount"
									:key="index"
								>
									<el-image
										style="width: 35px; height: 50px"
										:src="require('../../assets/homework.png')"
										fit="contain"
									></el-image>
									<el-input
										placeholder="请输入作业名称"
										v-model="homeworkList[index].name"
									></el-input>
								</div>
								<div>
									<el-button size="small" type="primary" @click="addHomeworkBox"
										>点击添加</el-button
									>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="info_btnBox">
					<button
						class="info_btn"
						v-if="this.steps == 1"
						@click="goTo('/course')"
					>
						返回课程
					</button>
					<button
						class="info_btn"
						v-if="this.steps > 1 && this.steps != 5"
						@click="lastSteps"
					>
						{{ this.steps == 3 ? "返回修改" : "上一步" }}
					</button>
					<button class="info_btn" v-if="this.steps < 5" @click="nextSteps">
						{{ this.steps == 3 ? "确认上传" : "下一步" }}
					</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import "../../common/aws-sdk-2.235.1.min.js";
	import $ from "jquery";

	export default {
		data() {
			return {
				steps: 1,
				courseName: "",
				courseText: "",
				itemCount: 1,
				uploadLoading1: false,
				homeworkList: [{ name: "" }],
				noneBtnImg: false,
				unitIndex: 0,
				isTeacherSee: false,
				unitJson: [
					{
						dyName: "", //单元标题
						startTime: "", //开始时间
						endTime: "", //结束时间
						isTalk: false, //是否开启评价
						cover: [], //课程封面
						chapterInfo: [
							{
								isread: false,
								chapterid: this.guid(),
								title: "",
								courseName: "",
								chapterData: [],
								video: [],
								testData: [],
								pData: [],
							},
						],
					},
				],
				fileList1: [],
			};
		},
		computed: {
			offsetLetfPx: function () {
				//addnum可以直接在模板语法里面用，相当于data内的值
				return (
					$(".cru_select")[this.unitIndex] &&
					$(".cru_select")[this.unitIndex].offsetLeft
				);
			},
		},
		methods: {
			imgChange(file, fileList) {
				var _tmp = this.fileList1;
				this.noneBtnImg = _tmp.length >= 1;
			},
			goTo(path) {
				this.$router.push(path);
			},
			guid() {
				var _num,
					i,
					_guid = "";
				for (i = 0; i < 32; i++) {
					_guid += Math.floor(Math.random() * 16).toString(16); //随机0  - 16 的数字 转变为16进制的字符串
					_num = Math.floor((i - 7) / 4); //计算 (i-7)除4
					if (_num > -1 && _num < 4 && i == 7 + 4 * _num) {
						//会使guid中间加 "-"   形式为xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
						_guid += "-";
					}
				}
				return _guid;
			},
			lastSteps() {
				this.steps--;
			},
			nextSteps() {
				var a = 1;
				if (this.steps == 1) {
					if (this.courseName != "" && this.courseText != "") {
						this.steps++;
					} else {
						this.$message.error("请输入项目名称及简要描述");
					}
				} else if (this.steps == 2) {
					if (
						this.unitJson[this.unitIndex].dyName != "" &&
						this.unitJson[this.unitIndex].startTime != "" &&
						this.unitJson[this.unitIndex].endTime != ""
					) {
						this.steps++;
					} else {
						this.$message.error("请输入单元标题及开始和结束时间");
					}
				}
			},
			unitSet(i) {
				this.unitIndex = i;
			},
			time() {
				if (!this.now) {
					this.now = new Date().getTime();
					return true;
				} else {
					let time = new Date().getTime();
					if (time - this.now > 3000) {
						this.now = time;
						return true;
					} else {
						return false;
					}
				}
			},
			deleteUnit(i) {
				var _this = this;
				if (_this.time()) {
					_this
						.$confirm("确定删除此单元吗?", "提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning",
						})
						.then(() => {
							_this.unitJson.splice(i, 1);
							var a = 0;
							if (_this.unitIndex > 0) {
								a = _this.unitIndex - 1;
							}

							_this.$message.success("删除成功");
						})
						.catch(() => {
							return;
						});
				}
			},

			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
			},
			handle_remove1(file, fileList) {
				var _tmp = this.fileList1;
				for (var i = 0, len = _tmp.length; i < len; i++) {
					if (_tmp[i].uid == file.uid) {
						_tmp.splice(i, 1);
						break;
					}
					this.fileList1 = _tmp;
				}
				this.noneBtnImg = _tmp.length >= 1;
			},
			addImg(e) {
				var el = e.currentTarget;
				el.getElementsByTagName("input")[0].click();
			},
			beforeUpload1(event) {
				this.uploadLoading1 = true;
				var file = event.target.files[0];
				var credentials = {
					accessKeyId: "AKIATLPEDU37QV5CHLMH",
					secretAccessKey: "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",
				}; //秘钥形式的登录上传
				window.AWS.config.update(credentials);
				window.AWS.config.region = "cn-northwest-1"; //设置区域

				var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
				var _this = this;

				if (file) {
					var params = {
						Key:
							file.name.split(".")[0] +
							new Date().getTime() +
							"." +
							file.name.split(".")[1],
						ContentType: file.type,
						Body: file,
						"Access-Control-Allow-Credentials": "*",
						ACL: "public-read",
					}; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
					var options = {
						partSize: 2048 * 1024 * 1024,
						queueSize: 2,
						leavePartsOnError: true,
					};
					bucket
						.upload(params, options)
						.on("httpUploadProgress", function (evt) {
							//这里可以写进度条
							// console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
						})
						.send(function (err, data) {
							_this.uploadLoading1 = false;
							if (err) {
								var a = _this.$refs.upload1.uploadFiles;
								a.splice(a.length - 1, a.length);
								_this.$message.error("上传失败");
							} else {
								//上传成功处理
								_this.fileList1.push({
									name: file.name,
									url: data.Location,
									uid: file.uid,
								});
								_this.imgChange();
								console.log(data.Location);
							}
						});
				}
			},
			addunit() {
				this.unitJson.push({
					dyName: "",
					startTime: "",
					endTime: "",
					isTalk: false,
					cover: [], //课程封面
					chapterInfo: [
						{
							isread: false,
							chapterid: this.guid(),
							title: "",
							courseName: "",
							chapterData: [],
							video: [],
							testData: [],
							pData: [],
						},
					],
				});
			},
			add(e, i) {
				var el = e.currentTarget;
				el.getElementsByTagName("input")[0].click();
			},

			upload(e, i, j) {
				var input = e.currentTarget;
				if (input.files.length !== 0) {
					// create bucket instance
					var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
					var file = input.files[0];
					var _this = this;

					if (file) {
						var _uploadid = window.localStorage["uploadid"] || "";
						var params = {
							Key: file.name,
							ContentType: file.type,
							Body: file,
							"Access-Control-Allow-Credentials": "*",
							ACL: "public-read",
						}; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
						var options = {
							partSize: 2048 * 1024 * 1024,
							queueSize: 2,
							leavePartsOnError: true,
						};
						bucket
							.upload(params, options)
							.on("httpUploadProgress", function (evt) {})
							.send(function (err, data) {
								if (err) {
									_this.$message.error("上传失败");
								} else {
									_this.$message.error("上传成功");
									this.unitJson[i].chapterInfo[j].chapterData.push({
										src: data.Location, //视频地址
										status: false,
										minutiaName: data.Key, //视频名字
										typeName: "视频",
										checkout: false,
									});
								}
							});
						input.value = "";
					}
				}
			},

			addHomeworkBox() {
				this.homeworkList.push({ name: "" });
				this.itemCount++;
			},
		},
		created() {},
	};
</script>

<style scoped>
	.left {
		border-right: 1px solid rgb(60, 94, 143);
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 600px;
		width: 385px;
		height: 80%;
	}

	.tips {
		color: rgb(128, 128, 128);
		font-size: 12px;
		width: 270px;
		margin: 40px;
	}

	.pb_content {
		background: #fff;
		height: 100%;
	}

	.pb_content_body {
		display: flex;
		margin: 0 auto !important;
		width: 100% !important;
		height: 100%;
	}

	.info_solid {
		width: 270px;
		height: 30px;
		border-left: 1px solid #bdbdbd;
		margin: 10px 0px 10px 30px;
	}

	.info_steps {
		width: 270px;
		font-size: 0.875rem;
		display: flex;
		align-items: center;
	}

	.info_steps span:nth-child(1) {
		width: 30px;
		height: 30px;
		background: rgba(0, 0, 0, 0.38);
		display: block;
		color: #fff;
		border-radius: 40px;
		text-align: center;
		line-height: 30px;
	}

	.steps_active {
		background: #3d67bc !important;
	}

	.info_steps span:nth-child(2) {
		margin-left: 5px;
	}

	.right {
		height: 100%;
		width: calc(100% - 385px);
		overflow: auto;
	}

	.basic_box {
		width: 80%;
		min-height: 455px;
		margin: 50px auto;
		position: relative;
	}

	.info_title {
		font-size: 1.5em;
	}

	.bInfo_title {
		font-size: 16px;
		font-weight: bold;
		text-align: left;
		margin-top: 20px;
		margin-bottom: 10px;
	}

	.small_title {
		font-size: 14px;
		line-height: 40px;
	}

	.binfo_input {
		font: inherit;
		color: currentColor;
		width: 100%;
		margin: 0;
		padding: 15px 14px;
		display: block;
		min-width: 0;
		outline: none;
		box-sizing: content-box;
		background: none;
		-webkit-tap-highlight-color: transparent;
		border: 1px solid rgba(0, 0, 0, 0.23);
		border-radius: 4px;
		box-sizing: border-box;
	}

	.binfo_input:focus-visible {
		border: 1px solid rgba(61, 103, 188);
	}

	.chapter_beizhu {
		font-size: 12px;
		font-weight: bold;
		float: right;
		color: rgb(128, 128, 128);
		margin-top: 5px;
	}

	.chapter_uploadBox1 {
		text-align: left;
		background-color: rgb(242, 242, 242);
		width: 100%;
		height: 67px;
		padding: 0px 15px;
		border-radius: 8px;
		overflow: hidden;
		font-size: 16px;
		box-sizing: border-box;
		position: relative;
	}

	.chapter_add {
		width: 100%;
		height: 32px;
		margin-top: 15px;
		cursor: pointer;
	}

	.chapter_add_l {
		margin-left: 5px;
		width: 30px;
		height: 30px;
		float: left;
		border: 1px solid #aaa;
		color: #aaa;
		border-radius: 50%;
		font-size: 25px;
		text-align: center;
	}

	.chapter_add_r {
		font-size: 18px;
		height: 40px;
		line-height: 30px;
		text-indent: 10px;
		color: #aaa;
	}

	.chapter_add_r span {
		font-size: 12px;
		color: rgb(204, 204, 204);
	}

	.chapter_add_input {
		display: none;
	}

	.line {
		width: 100%;
		border-top: 1px solid;
		margin-top: 60px;
	}

	.info_btnBox {
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		margin: 60px 0;
	}

	.info_btn {
		color: #fff;
		background-color: #3d67bc;
		padding: 8px 24px;
		font-size: 0.9375rem;
		box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%),
			0px 3px 1px -2px rgb(0 0 0 / 12%);
		min-width: 64px;
		font-weight: 500;
		border-radius: 4px;
		box-sizing: border-box;
		border: none;
		cursor: pointer;
	}

	.info_btn:hover {
		background-color: #1f4082 !important;
	}

	.cru_selectBox {
		display: flex;
		margin: 30px 0 10px;
		flex-wrap: nowrap;
		width: 100%;
		white-space: nowrap;
		overflow: auto;
		position: relative;
		height: 47px;
	}

	.cru_selectBox::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 6px;
		/*高宽分别对应横竖滚动条的尺寸*/
		height: 6px;
	}

	/*定义滚动条轨道 内阴影+圆角*/
	.cru_selectBox::-webkit-scrollbar-track {
		border-radius: 10px;
		background-color: #eee;
	}

	/*定义滑块 内阴影+圆角*/
	.cru_selectBox::-webkit-scrollbar-thumb {
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		background-color: rgba(0, 0, 0, 0.1);
	}

	.cru_line {
		position: absolute;
		bottom: 0px;
		transition: all 0.5s;
		left: 0px;
		width: 125px;
		margin-left: -25px;
	}

	.cru_select {
		font-size: 21px;
		margin-right: 37px;
		margin-left: 5px;
		cursor: pointer;
		color: #a6a6a6;
	}

	.cru_selected {
		color: #0b7fc2 !important;
	}

	.chapter_box {
		max-height: 300px;
		overflow: auto;
	}

	.chapter_contentbox {
		display: flex;
		align-items: center;
		margin-top: 15px;
	}

	.chapter_contentbox div:nth-child(1) {
		width: 150px;
		margin: 0px;
		font-size: 2em;
		color: black;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-weight: 600;
	}

	.chapter_contentbox div:nth-child(2) {
		width: 100%;
	}

	.chapter_contentbox div:nth-child(3) {
		background-image: url(../../assets/remove.png);
		cursor: pointer;
		opacity: 0.5;
		width: 40px;
		height: 50px;
		background-repeat: no-repeat;
		background-position: 5px 10px;
	}

	.binfo_input {
		font: inherit;
		color: currentColor;
		width: 100%;
		margin: 0;
		padding: 15px 14px;
		display: block;
		min-width: 0;
		outline: none;
		box-sizing: content-box;
		background: none;
		-webkit-tap-highlight-color: transparent;
		border: 1px solid rgba(0, 0, 0, 0.23);
		border-radius: 4px;
		box-sizing: border-box;
	}

	.binfo_input:focus-visible {
		border: 1px solid rgba(61, 103, 188);
	}

	.time {
		display: flex;
		margin-top: 35px;
	}

	.chapter_btnbox {
		width: 160px;
		border-radius: 5px;
		border: 2px dashed gray;
		display: flex;
		padding: 8px 50px;
		align-items: center;
		justify-content: center;
		margin: 30px auto 0;
		cursor: pointer;
	}

	.icon_add {
		position: relative;
		width: 24px;
		padding-top: 20px;
		border-radius: 100%;
		border-width: 2px;
		border-style: solid;
		border-color: gray;
	}

	.icon_add i:nth-child(1) {
		position: absolute;
		left: 50%;
		top: 50%;
		height: 60%;
		transform: translate(-50%, -50%);
		border-width: 1px;
		border-style: solid;
		border-color: inherit;
	}

	.icon_add i:nth-child(2) {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 60%;
		transform: translate(-50%, -50%);
		border-width: 1px;
		border-style: solid;
		border-color: inherit;
	}

	.chapter_btn_w {
		font-size: 0.9375rem;
		font-weight: bold;
		color: gray;
		margin-left: 20px;
	}

	.disUoloadSty >>> .el-upload--picture-card {
		display: none; /* 上传按钮隐藏 */
	}

	.imgLeft {
		margin: 15px 0;
	}

	.add_info_box {
		margin: 20px 0;
	}

	.add_info_box button {
		margin: 0 10px 10px 0;
	}

	.add_chapters_box {
		text-align: left;
		background-color: rgb(242, 242, 242);
		width: 100%;
		height: 240px;
		padding: 0px 15px;
		border-radius: 8px;
		overflow: auto;
		font-size: 16px;
		box-sizing: border-box;
		position: relative;
		padding: 0 10px 5px;
	}

	.homework_box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.course_homework {
		width: 130px;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		margin: 0 10px 10px 0;
	}

	.chapter_upload_move {
		position: relative;
		background-color: #fff;
		position: absolute;
		width: 100%;
		top: 0px;
		left: 0px;
		border: 1px solid #eee;
		border-radius: 5px;
		transition: width 2s;
		-moz-transition: width 2s;
		-webkit-transition: width 2s;
		-o-transition: width 2s;
	}

	.chapter_upload_t {
		background-color: #e3f3ff;
		position: absolute;
		width: 0%;
		height: 100%;
		top: 0px;
		left: 0px;
	}

	.chapter_upload_o {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 1;
	}

	.chapter_upload_l {
		width: 50px;
		height: 50px;
		border-right: 1px solid #eee;
		float: left;
	}

	.chapter_upload_l_i {
		background-image: url("../../assets/icon.png");
		background-position: 3px -165px;
		width: 30px;
		height: 30px;
		margin: 10px auto 0 auto;
	}

	.chapter_upload_ic {
		height: 30px;
		float: right;
	}

	.chapter_upload_ic_l {
		width: 50px;
		height: 50px;
		float: left;
		border-right: 1px solid #eee;
	}

	.chapter_upload_ic_l div {
		width: 30px;
		height: 35px;
		background: url("../../assets/icon.png");
		margin: 10px auto 0 auto;
	}

	.chapter_upload_ic_r {
		width: 40px;
		height: 40px;
		float: left;
		margin-left: 5px;
	}
	.chapter_upload_ic_r div {
		width: 30px;
		height: 30px;
		background-image: url("../../assets/icon.png");
		background-position: -39px -163px;
		margin: 10px auto 0 auto;
	}

	.chapter_upload_n {
		height: 50px;
		line-height: 50px;
		text-indent: 10px;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.big_box {
		display: flex;
	}

	.left_first,
	.right_first {
		display: flex;
		flex-direction: column;
		width: 50%;
	}

	.right_first {
		margin-left: 60px;
	}
</style>
