添加loading功能

src/components/study.vue

@@ -1,122 +1,122 @@
 <template>
-	<div class="pb_content">
-		<div class="pb_content_body" style="display: flex; min-height: 800px">
-			<div
-				style="
-					width: 20%;
-					margin-right: 10px;
-					background: #fff;
-					padding-right: 10px;
-				"
-			>
-				<div class="courseTitle">
-					{{ courseDetail.title }}
-				</div>
-				<div class="ml">目录</div>
-				<div
-					class="blue_box_one"
-					v-for="(item, index) in chapInfoList"
-					:key="index"
-					@click="get(index)"
-				>
-					<div>第{{ index + 1 }}阶段</div>
-					<div>{{ item.dyName }}</div>
-				</div>
-			</div>
-			<div class="body_student">
-				<div class="study_top">
-					<div class="checkbox">
-						<div
-							class="check"
-							:class="{ checked: type == 1 }"
-							@click="type = 1"
-						>
-							<div v-if="type == 1">
-								<img src="../assets/icon/videoActive.png" alt="" />
-							</div>
-							<div v-else><img src="../assets/icon/video.png" alt="" /></div>
-							视频
-						</div>
-						<div
-							class="check"
-							:class="{ checked: type == 2 }"
-							@click="type = 2"
-						>
-							<div v-if="type == 2">
-								<img src="../assets/icon/navActive.png" alt="" />
-							</div>
-							<div v-else><img src="../assets/icon/nav.png" alt="" /></div>
-							文档资料
-						</div>
+  <div class="pb_content">
+    <div class="pb_content_body" style="display: flex; min-height: 800px">
+      <div
+        style="
+          width: 20%;
+          margin-right: 10px;
+          background: #fff;
+          padding-right: 10px;
+        "
+      >
+        <div class="courseTitle">
+          {{ courseDetail.title }}
+        </div>
+        <div class="ml">目录</div>
+        <div
+          class="blue_box_one"
+          v-for="(item, index) in chapInfoList"
+          :key="index"
+          @click="get(index)"
+        >
+          <div>第{{ index + 1 }}阶段</div>
+          <div>{{ item.dyName }}</div>
+        </div>
+      </div>
+      <div class="body_student">
+        <div class="study_top">
+          <div class="checkbox">
+            <div
+              class="check"
+              :class="{ checked: type == 1 }"
+              @click="type = 1"
+            >
+              <div v-if="type == 1">
+                <img src="../assets/icon/videoActive.png" alt="" />
+              </div>
+              <div v-else><img src="../assets/icon/video.png" alt="" /></div>
+              视频
+            </div>
+            <div
+              class="check"
+              :class="{ checked: type == 2 }"
+              @click="type = 2"
+            >
+              <div v-if="type == 2">
+                <img src="../assets/icon/navActive.png" alt="" />
+              </div>
+              <div v-else><img src="../assets/icon/nav.png" alt="" /></div>
+              文档资料
+            </div>
 
-						<div
-							class="check"
-							:class="{ checked: type == 3 }"
-							@click="type = 3"
-						>
-							<div v-if="type == 3">
-								<img src="../assets/icon/wordActive.png" alt="" />
-							</div>
-							<div v-else><img src="../assets/icon/word.png" alt="" /></div>
-							附件
-						</div>
-						<div
-							class="check"
-							:class="{ checked: type == 4 }"
-							@click="type = 4"
-						>
-							<div v-if="type == 4">
-								<img src="../assets/icon/workActive.png" alt="" />
-							</div>
-							<div v-else><img src="../assets/icon/work.png" alt="" /></div>
-							作业与测验
-						</div>
-						<div
-							class="check"
-							:class="{ checked: type == 5 }"
-							@click="type = 5"
-						>
-							<div v-if="type == 5">
-								<img src="../assets/icon/toolActive.png" alt="" />
-							</div>
-							<div v-else><img src="../assets/icon/tool.png" alt="" /></div>
-							工具
-						</div>
-					</div>
-					<div
-						class="returnBtn"
-						@click.stop="
-							goTo(
-								'/courseDetail?userid=' +
-									userid +
-									'&oid=' +
-									oid +
-									'&courseId=' +
-									id
-							)
-						"
-					>
-						返回
-					</div>
-				</div>
-				<div class="student_head" v-if="type == 1">
-					<div class="box_course">
-						<div class="wheel" v-if="vedio.length > 0">
-							<div class="workd_media">
-								<!-- <el-image
+            <div
+              class="check"
+              :class="{ checked: type == 3 }"
+              @click="type = 3"
+            >
+              <div v-if="type == 3">
+                <img src="../assets/icon/wordActive.png" alt="" />
+              </div>
+              <div v-else><img src="../assets/icon/word.png" alt="" /></div>
+              附件
+            </div>
+            <div
+              class="check"
+              :class="{ checked: type == 4 }"
+              @click="type = 4"
+            >
+              <div v-if="type == 4">
+                <img src="../assets/icon/workActive.png" alt="" />
+              </div>
+              <div v-else><img src="../assets/icon/work.png" alt="" /></div>
+              作业与测验
+            </div>
+            <div
+              class="check"
+              :class="{ checked: type == 5 }"
+              @click="type = 5"
+            >
+              <div v-if="type == 5">
+                <img src="../assets/icon/toolActive.png" alt="" />
+              </div>
+              <div v-else><img src="../assets/icon/tool.png" alt="" /></div>
+              工具
+            </div>
+          </div>
+          <div
+            class="returnBtn"
+            @click.stop="
+              goTo(
+                '/courseDetail?userid=' +
+                  userid +
+                  '&oid=' +
+                  oid +
+                  '&courseId=' +
+                  id
+              )
+            "
+          >
+            返回
+          </div>
+        </div>
+        <div class="student_head" v-if="type == 1">
+          <div class="box_course">
+            <div class="wheel" v-if="vedio.length > 0">
+              <div class="workd_media">
+                <!-- <el-image
                 style="width: 100%; height: 300px"
                 :src="require('../../assets/tu4.png')"
               ></el-image> -->
-								<video-player
-									class="video-player vjs-custom-skin"
-									ref="videoPlayer"
-									:playsinline="true"
-									:options="playerO"
-									@play="onPlayerPlay($event)"
-									style="width: 95%; height: 100%; margin: 20px auto"
-								></video-player>
-							</div>
-							<!-- <div class="cd_content_steps">
+                <video-player
+                  class="video-player vjs-custom-skin"
+                  ref="videoPlayer"
+                  :playsinline="true"
+                  :options="playerO"
+                  @play="onPlayerPlay($event)"
+                  style="width: 95%; height: 100%; margin: 20px auto"
+                ></video-player>
+              </div>
+              <!-- <div class="cd_content_steps">
 								<div
 									class="cd_steps_box"
 									v-for="(media, index) in vedio"
@@ -124,81 +124,81 @@
 									@click="switchVideo(media, index)"
 								>
 									 <i :class="{ active: index < 1 }"></i> -->
-							<!-- <i
+              <!-- <i
 										:class="{
 											active: playerOptions.sources[0].src == media,
 										}"
 									></i>
 									<span>视频{{ index + 1 }}</span> -->
-							<!-- </div>
+              <!-- </div>
 							</div> -->
-							<!-- <img src="../assets/sp2.png" alt="" /> -->
-						</div>
-						<div style="font-size: 18px; margin: 15px">
-							{{ chapInfo.dyName }}
-						</div>
-					</div>
-				</div>
-				<div class="student_body">
-					<div class="videoTop">
-						<div v-if="type == 1">视频列表</div>
-						<div v-if="type == 3">{{ chapInfo.dyName }}</div>
-						<div v-if="type == 5">工具</div>
-						<div v-else></div>
-						<div
-							@click="openAddWork"
-							class="upbtn"
-							v-if="type == 1 || type == 2"
-						>
-							提交实践作业
-						</div>
-					</div>
-					<div class="project_box" v-if="type == 2">
-						<div class="detail_content_top">
-							<div class="detail_title">{{ chapInfo.dyName }}</div>
-							<div class="detail_time">{{ courseDetail.time }}</div>
-						</div>
-						<div class="detail_content" v-html="courseDetail.template"></div>
-					</div>
-					<div class="project_box" v-if="type == 1 && vedio.length > 0">
-						<div class="filebox">
-							<div class="media" v-for="(media, index) in vedio" :key="index">
-								<img
-									:src="
-										media.cover != null && media.cover != ''
-											? JSON.parse(media.cover).length > 0
-												? JSON.parse(media.cover)[0].url
-												: mr
-											: mr
-									"
-									alt=""
-								/>
-								<div class="title">{{ media.name }}</div>
-								<div class="btn" @click="lookVedio(media.url)">点击播放</div>
-							</div>
-						</div>
-					</div>
-					<div class="project_box" v-if="type == 1 && vedio.length == 0">
-						暂无视频
-					</div>
-					<div class="project_box" v-if="type == 3">
-						<div class="filebox">
-							<div
-								class="file"
-								v-for="(f, index) in file"
-								:key="index"
-								@click="downFile(index)"
-							>
-								<img :src="require('../assets/file.png')" alt="" />
-								<div>{{ f.name }}</div>
-							</div>
-						</div>
-						<div class="upFile" v-if="type == 3 || type == 4">提交</div>
-					</div>
-					<div class="project_box" v-if="type == 4">
-						<div class="filebox">
-							暂无数据
-							<!-- <div
+              <!-- <img src="../assets/sp2.png" alt="" /> -->
+            </div>
+            <div style="font-size: 18px; margin: 15px">
+              {{ chapInfo.dyName }}
+            </div>
+          </div>
+        </div>
+        <div class="student_body">
+          <div class="videoTop">
+            <div v-if="type == 1">视频列表</div>
+            <div v-if="type == 3">{{ chapInfo.dyName }}</div>
+            <div v-if="type == 5">工具</div>
+            <div v-else></div>
+            <div
+              @click="openAddWork"
+              class="upbtn"
+              v-if="type == 1 || type == 2"
+            >
+              提交实践作业
+            </div>
+          </div>
+          <div class="project_box" v-if="type == 2">
+            <div class="detail_content_top">
+              <div class="detail_title">{{ chapInfo.dyName }}</div>
+              <div class="detail_time">{{ courseDetail.time }}</div>
+            </div>
+            <div class="detail_content" v-html="courseDetail.template"></div>
+          </div>
+          <div class="project_box" v-if="type == 1 && vedio.length > 0">
+            <div class="filebox">
+              <div class="media" v-for="(media, index) in vedio" :key="index">
+                <img
+                  :src="
+                    media.cover != null && media.cover != ''
+                      ? JSON.parse(media.cover).length > 0
+                        ? JSON.parse(media.cover)[0].url
+                        : mr
+                      : mr
+                  "
+                  alt=""
+                />
+                <div class="title">{{ media.name }}</div>
+                <div class="btn" @click="lookVedio(media.url)">点击播放</div>
+              </div>
+            </div>
+          </div>
+          <div class="project_box" v-if="type == 1 && vedio.length == 0">
+            暂无视频
+          </div>
+          <div class="project_box" v-if="type == 3">
+            <div class="filebox">
+              <div
+                class="file"
+                v-for="(f, index) in file"
+                :key="index"
+                @click="downFile(index)"
+              >
+                <img :src="require('../assets/file.png')" alt="" />
+                <div>{{ f.name }}</div>
+              </div>
+            </div>
+            <div class="upFile" v-if="type == 3 || type == 4">提交</div>
+          </div>
+          <div class="project_box" v-if="type == 4">
+            <div class="filebox">
+              暂无数据
+              <!-- <div
                 class="file"
                 v-for="(f, index) in file"
                 :key="index"
@@ -207,54 +207,54 @@
                 <img :src="require('../assets/file.png')" alt="" />
                 <div>{{ f.name }}</div>
               </div> -->
-						</div>
-						<div class="upFile" v-if="type == 3 || type == 4">提交</div>
-					</div>
-					<div class="project_box" v-if="type == 5">
-						<div
-							class="filebox"
-							v-if="chapInfo.chapterInfo[0].toolChoose.length == 0"
-						>
-							暂无数据
-						</div>
-						<div class="filebox" v-else>
-							<div
-								style="
-									display: flex;
-									width: 100%;
-									flex-direction: row;
-									flex-wrap: wrap;
-									margin: 20px auto;
-								"
-							>
-								<div
-									class="tool"
-									v-for="(itemTool, indexTool) in chapInfo.chapterInfo[0]
-										.toolChoose"
-									:key="indexTool"
-								>
-									<div class="whiteBIcon" v-if="itemTool == 1">
-										<img src="../assets/icon/whiteBordIcon.png" alt="" />
-									</div>
-									<div class="whiteBIcon" v-if="itemTool == 2">
-										<img src="../assets/icon/noteIcon.png" alt="" />
-									</div>
-									<div class="whiteBIcon" v-if="itemTool == 3">
-										<img src="../assets/icon/mindIcon.png" alt="" />
-									</div>
-									<div class="whiteBIcon" v-if="itemTool == 4">
-										<img src="../assets/icon/askIcon.png" alt="" />
-									</div>
-									<div class="whiteBIcon" v-if="itemTool == 5">
-										<img src="../assets/icon/scoreIcon.png" alt="" />
-									</div>
-									<div class="whiteBIcon" v-if="itemTool == 6">
-										<img src="../assets/icon/wordIcon.png" alt="" />
-									</div>
-								</div>
-							</div>
+            </div>
+            <div class="upFile" v-if="type == 3 || type == 4">提交</div>
+          </div>
+          <div class="project_box" v-if="type == 5">
+            <div
+              class="filebox"
+              v-if="!chapInfo.chapterInfo[0].toolChoose"
+            >
+              暂无数据
+            </div>
+            <div class="filebox" v-else>
+              <div
+                style="
+                  display: flex;
+                  width: 100%;
+                  flex-direction: row;
+                  flex-wrap: wrap;
+                  margin: 20px auto;
+                "
+              >
+                <div
+                  class="tool"
+                  v-for="(itemTool, indexTool) in chapInfo.chapterInfo[0]
+                    .toolChoose"
+                  :key="indexTool"
+                >
+                  <div class="whiteBIcon" v-if="itemTool == 1">
+                    <img src="../assets/icon/whiteBordIcon.png" alt="" />
+                  </div>
+                  <div class="whiteBIcon" v-if="itemTool == 2">
+                    <img src="../assets/icon/noteIcon.png" alt="" />
+                  </div>
+                  <div class="whiteBIcon" v-if="itemTool == 3">
+                    <img src="../assets/icon/mindIcon.png" alt="" />
+                  </div>
+                  <div class="whiteBIcon" v-if="itemTool == 4">
+                    <img src="../assets/icon/askIcon.png" alt="" />
+                  </div>
+                  <div class="whiteBIcon" v-if="itemTool == 5">
+                    <img src="../assets/icon/scoreIcon.png" alt="" />
+                  </div>
+                  <div class="whiteBIcon" v-if="itemTool == 6">
+                    <img src="../assets/icon/wordIcon.png" alt="" />
+                  </div>
+                </div>
+              </div>
 
-							<!-- <div
+              <!-- <div
                 class="file"
                 v-for="(f, index) in file"
                 :key="index"
@@ -263,92 +263,93 @@
                 <img :src="require('../assets/file.png')" alt="" />
                 <div>{{ f.name }}</div>
               </div> -->
-						</div>
-					</div>
-				</div>
-				<el-dialog
-					title="提交实践作业"
-					:visible.sync="dialogVisible"
-					:append-to-body="true"
-					width="500px"
-					:before-close="handleClose"
-					class="dialog_change"
-				>
-					<div class="first">
-						<div>作业名称:</div>
-						<div>{{ chapInfo.dyName }}</div>
-					</div>
-					<div style="font-size: 20px; margin-bottom: 10px">上传作业</div>
-					<el-input
-						type="textarea"
-						resize="none"
-						rows="7"
-						placeholder="输入文字描述..."
-						v-model="studyJuri[0].content"
-					>
-					</el-input>
-					<div class="marginT">
-						<div>上传图片</div>
-						<div
-							class="chapter_add"
-							v-if="studyJuri[0].cover.length == 0"
-							@click="addImg($event)"
-						>
-							<div class="up_photo">
-								<img src="../assets/photo.png" alt="" />
-							</div>
-							<input
-								type="file"
-								accept="image/png,image/gif,image/jpeg"
-								style="display: none"
-								@change="beforeUpload1($event, 1)"
-							/>
-						</div>
-						<div class="chapter_add" v-else>
-							<img
-								:src="
-									studyJuri[0].cover[0].url != null &&
-									studyJuri[0].cover[0].url != ''
-										? studyJuri[0].cover[0].url
-										: mr
-								"
-								alt=""
-							/>
-							<span>{{ studyJuri[0].cover[0].name }}</span>
-							<div class="deleteWord" @click="clean(1)">
-								<img src="../assets/icon/delete.png" alt="" />
-							</div>
-						</div>
-					</div>
-					<div class="marginT">
-						<div>上传视频</div>
-						<div
-							class="chapter_add"
-							v-if="studyJuri[0].upVedio.length == 0"
-							@click="addImg($event)"
-						>
-							<div class="up_photo">
-								<img src="../assets/vidio.png" alt="" />
-							</div>
-							<input
-								type="file"
-								accept="video/mp4,video/quicktime,video/x-msvideo"
-								style="display: none"
-								@change="beforeUpload2($event, 2)"
-							/>
-						</div>
-						<div class="chapter_add" v-else>
-							<div>
-								<img src="../assets/uploadMp4.png" alt="" />
-								<span>{{ studyJuri[0].upVedio[0].name }}</span>
-							</div>
+            </div>
+          </div>
+        </div>
+        <el-dialog
+          title="提交实践作业"
+          :visible.sync="dialogVisible"
+          :append-to-body="true"
+          width="500px"
+          :before-close="handleClose"
+          class="dialog_change"
+        >
+          <div class="first">
+            <div>作业名称:</div>
+            <div>{{ chapInfo.dyName }}</div>
+          </div>
+          <div style="font-size: 20px; margin-bottom: 10px">上传作业</div>
+          <el-input
+            type="textarea"
+            resize="none"
+            rows="7"
+            placeholder="输入文字描述..."
+            v-model="studyJuri[0].content"
+          >
+          </el-input>
+          <div class="marginT">
+            <div>上传图片</div>
+            <div
+              class="chapter_add"
+              v-if="studyJuri[0].cover.length == 0"
+              @click="addImg($event)"
+            >
+              <div class="up_photo">
+                <img src="../assets/photo.png" alt="" />
+              </div>
+              <input
+                type="file"
+                accept="image/png,image/gif,image/jpeg"
+                style="display: none"
+                @change="beforeUpload1($event, 1)"
+              />
+            </div>
+            <div class="chapter_add" v-else>
+              <img
+                :src="
+                  studyJuri[0].cover[0].url != null &&
+                  studyJuri[0].cover[0].url != ''
+                    ? studyJuri[0].cover[0].url
+                    : mr
+                "
+                alt=""
+              />
+              <span class="picName">{{ studyJuri[0].cover[0].name }}</span>
 
-							<div class="deleteWord" @click="clean(2)">
-								<img src="../assets/icon/delete.png" alt="" />
-							</div>
-						</div>
-					</div>
-					<!-- <div class="marginT">
+              <div class="deleteWord" @click="clean(1)">
+                <img src="../assets/icon/delete.png" alt="" />
+              </div>
+            </div>
+          </div>
+          <div class="marginT">
+            <div>上传视频</div>
+            <div
+              class="chapter_add"
+              v-if="studyJuri[0].upVedio.length == 0"
+              @click="addImg($event)"
+            >
+              <div class="up_photo">
+                <img src="../assets/vidio.png" alt="" />
+              </div>
+              <input
+                type="file"
+                accept="video/mp4,video/quicktime,video/x-msvideo"
+                style="display: none"
+                @change="beforeUpload2($event, 2)"
+              />
+            </div>
+            <div class="chapter_add isAddThings" v-else>
+              <div class="uploadVedio">
+                <img src="../assets/uploadMp4.png" alt="" />
+                <span>{{ studyJuri[0].upVedio[0].name }}</span>
+              </div>
+
+              <div class="deleteWord" @click="clean(2)">
+                <img src="../assets/icon/delete.png" alt="" />
+              </div>
+            </div>
+          </div>
+          <!-- <div class="marginT">
 						<div>附件上传</div>
 						<div
 							class="chapter_add"
@@ -377,765 +378,857 @@
 							</div>
 						</div>
 					</div> -->
-					<div class="upload_send" @click="addWork">提交</div>
-				</el-dialog>
-			</div>
-		</div>
-		<div v-if="proVisible" class="mask">
-			<div class="progressBox">
-				<div class="lbox">
-					<img :src="require('../../assets/loading.gif')" />上传中，请稍后
-				</div>
-				<el-progress
-					:text-inside="true"
-					:stroke-width="20"
-					:percentage="progress"
-					style="width: 80%"
-				></el-progress>
-			</div>
-		</div>
-	</div>
+          <div class="upload_send" @click="addWork">提交</div>
+        </el-dialog>
+      </div>
+    </div>
+    <div v-if="proVisible" class="mask">
+      <div class="progressBox">
+        <div class="lbox">
+          <img src="../assets/loading.gif" />上传中，请稍后
+        </div>
+        <el-progress
+          :text-inside="true"
+          :stroke-width="20"
+          :percentage="progress"
+          style="width: 80%"
+        ></el-progress>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	import "../common/aws-sdk-2.235.1.min.js";
-	export default {
-		data() {
-			return {
-				dialogVisible: false,
-				id: this.$route.query.courseId,
-				userid: this.$route.query.userid,
-				courseType: this.$route.query.type,
-				oid: this.$route.query.oid,
-				type: 1,
-				vedio: [],
-				file: [],
-				rateList: {
-					ca: 0,
-				},
-				rateParams: [],
-				colors: ["#000", "#000", "#000"],
-				studyJuri: [
-					{
-						content: "",
-						cover: [],
-						upVedio: [],
-						upFile: [],
-					},
-				],
-				mr: require("../assets/tu4.png"),
-				courseDetail: {},
-				chapInfo: [],
-				chapInfoList: [],
-				playerOptions: {
-					playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
-					autoplay: false, //如果true,浏览器准备好时开始回放。
-					muted: false, // 默认情况下将会消除任何音频。
-					loop: false, // 导致视频一结束就重新开始。
-					preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
-					language: "zh-CN",
-					aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
-					fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
-					sources: [
-						{
-							type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
-							src: "", //url地址require("../../assets/media/aaa.mp4")
-						},
-					],
-					// poster: require("../../assets/tu31.png"), //你的封面地址
-					// poster: dataRes.imgUrl, //你的封面地址
-					notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
-					controlBar: {
-						timeDivider: true, //当前时间和持续时间的分隔符
-						durationDisplay: true, //显示持续时间
-						remainingTimeDisplay: false, //是否显示剩余时间功能
-						fullscreenToggle: true, //全屏按钮
-					},
-				},
-				playerO: {},
-				noneBtnImg: false,
-				proVisible: false,
-				progress: 0,
-			};
-		},
-		methods: {
-			goTo(path) {
-				this.$router.push(path);
-			},
-			clean(type) {
-				if (type == 1) {
-					this.studyJuri[0].cover.splice(0, 1);
-				} else if (type == 2) {
-					this.studyJuri[0].upVedio.splice(0, 1);
-				} else {
-					this.studyJuri[0].upFile.splice(0, 1);
-				}
-			},
-			handleClose(done) {
-				done();
-				// this.studyJuri[0].push([
-				// 	{
-				// 		content: "",
-				// 		cover: [],
-				// 		upVedio: [],
-				// 		upFile: [],
-				// 	},
-				// ]);
-			},
-			imgChange(file, fileList, type) {
-				if (type == 1) {
-					var _tmp = this.studyJuri[0].cover;
-				} else if (type == 2) {
-					var _tmp = this.studyJuri[0].upVedio;
-				} else {
-					var _tmp = this.studyJuri[0].upFile;
-				}
-				this.noneBtnImg = _tmp.length >= 1;
-			},
-			addImg(e) {
-				var el = e.currentTarget;
-				el.getElementsByTagName("input")[0].click();
-			},
-			beforeUpload1(event, type) {
-				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"; //设置区域
+import "../common/aws-sdk-2.235.1.min.js";
+export default {
+  data() {
+    return {
+      dialogVisible: false,
+      id: this.$route.query.courseId,
+      userid: this.$route.query.userid,
+      courseType: this.$route.query.type,
+      oid: this.$route.query.oid,
+      type: 1,
+      vedio: [],
+      file: [],
+      rateList: {
+        ca: 0,
+      },
+      rateParams: [],
+      colors: ["#000", "#000", "#000"],
+      studyJuri: [
+        {
+          content: "",
+          cover: [],
+          upVedio: [],
+          upFile: [],
+        },
+      ],
+      mr: require("../assets/tu4.png"),
+      courseDetail: {},
+      chapInfo: [],
+      chapInfoList: [],
+      playerOptions: {
+        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+        autoplay: false, //如果true,浏览器准备好时开始回放。
+        muted: false, // 默认情况下将会消除任何音频。
+        loop: false, // 导致视频一结束就重新开始。
+        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+        language: "zh-CN",
+        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+        sources: [
+          {
+            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
+            src: "", //url地址require("../../assets/media/aaa.mp4")
+          },
+        ],
+        // poster: require("../../assets/tu31.png"), //你的封面地址
+        // poster: dataRes.imgUrl, //你的封面地址
+        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+        controlBar: {
+          timeDivider: true, //当前时间和持续时间的分隔符
+          durationDisplay: true, //显示持续时间
+          remainingTimeDisplay: false, //是否显示剩余时间功能
+          fullscreenToggle: true, //全屏按钮
+        },
+      },
+      playerO: {},
+      noneBtnImg: false,
+      proVisible: false,
+      progress: 0,
+    };
+  },
+  methods: {
+    goTo(path) {
+      this.$router.push(path);
+    },
+    clean(type) {
+      if (type == 1) {
+        this.studyJuri[0].cover.splice(0, 1);
+      } else if (type == 2) {
+        this.studyJuri[0].upVedio.splice(0, 1);
+      } else {
+        this.studyJuri[0].upFile.splice(0, 1);
+      }
+    },
+    handleClose(done) {
+      done();
+      // this.studyJuri[0].push([
+      // 	{
+      // 		content: "",
+      // 		cover: [],
+      // 		upVedio: [],
+      // 		upFile: [],
+      // 	},
+      // ]);
+    },
+    imgChange(file, fileList, type) {
+      if (type == 1) {
+        var _tmp = this.studyJuri[0].cover;
+      } else if (type == 2) {
+        var _tmp = this.studyJuri[0].upVedio;
+      } else {
+        var _tmp = this.studyJuri[0].upFile;
+      }
+      this.noneBtnImg = _tmp.length >= 1;
+    },
+    addImg(e) {
+      var el = e.currentTarget;
+      el.getElementsByTagName("input")[0].click();
+    },
+    beforeUpload1(event, type) {
+      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;
+      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
+      var _this = this;
+      _this.progress = 0;
+      _this.proVisible = true;
 
-				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) {
-							if (err) {
-								var a = _this.$refs.upload1.uploadFiles;
-								a.splice(a.length - 1, a.length);
-								_this.$message.error("上传失败");
-							} else {
-								_this.studyJuri[0].cover.push({
-									name: file.name,
-									url: data.Location,
-									uid: file.uid,
-								});
-								_this.imgChange(null, null, type);
-								console.log(data.Location);
-							}
-						});
-				}
-			},
-			beforeUpload2(event, type) {
-				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"; //设置区域
+      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) + '%');
+            _this.progress = parseInt((evt.loaded * 80) / evt.total);
+          })
+          .send(function (err, data) {
+            _this.progress = 100;
+            setTimeout(() => {
+              _this.proVisible = false;
+            }, 1000);
+            if (err) {
+              var a = _this.$refs.upload1.uploadFiles;
+              a.splice(a.length - 1, a.length);
+              _this.$message.error("上传失败");
+            } else {
+              _this.studyJuri[0].cover.push({
+                name: file.name,
+                url: data.Location,
+                uid: file.uid,
+              });
+              _this.imgChange(null, null, type);
+              console.log(data.Location);
+            }
+          });
+      }
+    },
+    beforeUpload2(event, type) {
+      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;
-				_this.progress = 0;
-				_this.proVisible = true;
+      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
+      var _this = this;
+      _this.progress = 0;
+      _this.proVisible = true;
 
-				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) + '%');
-							_this.progress = parseInt((evt.loaded * 80) / evt.total);
-						})
-						.send(function (err, data) {
-							_this.progress = 100;
-							setTimeout(() => {
-								_this.proVisible = false;
-							}, 1000);
-							if (err) {
-								var a = _this.$refs.upload1.uploadFiles;
-								a.splice(a.length - 1, a.length);
-								_this.$message.error("上传失败");
-							} else {
-								if (type == 2) {
-									_this.studyJuri[0].upVedio.push({
-										name: file.name,
-										url: data.Location,
-										uid: file.uid,
-									});
-									_this.imgChange(null, null, type);
-								} else if (type == 3) {
-									_this.studyJuri[0].upFile.push({
-										name: file.name,
-										url: data.Location,
-										uid: file.uid,
-									});
-									_this.imgChange(null, null, type);
-								}
-								console.log(data.Location);
-							}
-						});
-				}
-			},
-			get(i) {
-				this.courseType = i;
-				this.getCourseDetail();
-			},
-			getCourseDetail() {
-				const loading = this.$loading.service({
-					background: "rgba(255, 255, 255, 0.7)",
-					target: document.querySelector(".student_table"),
-				});
-				var t = this.courseType;
-				let params = {
-					courseId: this.id,
-				};
-				this.ajax
-					.get(this.$store.state.api + "selectCourseDetail", params)
-					.then((res) => {
-						loading.close();
-						// element.imgUrl = JSON.parse(element.chapters).poster;
-						var a = JSON.parse(res.data[0][0].chapters)[t].chapterInfo[0]
-							.chapterData;
-						var b = [
-							"AVI",
-							"NAVI",
-							"MPEG",
-							"ASF",
-							"MOV",
-							"WMV",
-							"3GP",
-							"RM",
-							"RMVB",
-							"FLV",
-							"F4V",
-							"H.264",
-							"H.265",
-							"REAL VIDEO",
-							"MKV",
-							"WebM",
-							"HDDVD",
-							"MP4",
-							"MPG",
-							"M4V",
-							"MGV",
-							"OGV",
-							"QTM",
-							"STR",
-							"AMC",
-							"DVX",
-							"EVO",
-							"DAT",
-							"OGG",
-							"OGM",
-						];
-						this.vedio = [];
-						this.file = [];
-						for (var i = 0; i < a.length; i++) {
-							if (
-								b.indexOf(
-									a[i].url
-										.split(".")
-										[a[i].url.split(".").length - 1].toLocaleUpperCase()
-								) != -1
-							) {
-								this.vedio.push(a[i]);
-							} else {
-								this.file.push(a[i]);
-							}
-						}
-						// element.mediaList = JSON.parse(element.chapters)[0].chapterInfo[t].chapterData;
-						console.log(this.vedio);
-						console.log(this.file);
-						// this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
-						this.courseDetail = res.data[0][0];
-						this.chapInfo = JSON.parse(this.courseDetail.chapters)[t];
-						console.log(this.chapInfo);
-						this.chapInfoList = JSON.parse(this.courseDetail.chapters);
-						// this.playerOptions.poster = this.course.imgUrl;
-						this.playerOptions.sources[0].src =
-							this.vedio.length > 0
-								? this.vedio[0].url
-								: require("../assets/icon/wheel.png");
-						console.log(this.playerOptions.sources[0].src);
-						this.playerO = this.playerOptions;
-					})
-					.catch((err) => {
-						loading.close();
-						console.error(err);
-					});
-			},
-			switchVideo(media, index) {
-				this.playerO = {};
-				this.playerOptions.poster = "";
-				this.playerOptions.sources[0].src = media;
-				this.playerO = this.playerOptions;
-			},
-			onPlayerPlay() {},
-			lookVedio(u) {
-				this.playerOptions.sources[0].src = u;
-				this.playerO = this.playerOptions;
-			},
-			downFile(i) {
-				window.open(this.file[i].url);
-			},
-			openAddWork() {
-				this.dialogVisible = true;
-				this.studyJuri = [
-					{
-						content: "",
-						cover: [],
-						upVedio: [],
-						upFile: [],
-					},
-				];
-			},
-			addWork() {
-				let params = [
-					{
-						uid: this.userid,
-						cid: this.id,
-						stage: this.courseType,
-						content: JSON.stringify(this.studyJuri),
-					},
-				];
-				this.ajax
-					.post(this.$store.state.api + "addWorks", params)
-					.then((res) => {
-						this.$message({
-							message: "提交成功",
-							type: "success",
-						});
-						this.dialogVisible = false;
-						// this.studyJuri.push([
-						// 	{
-						// 		content: "",
-						// 		cover: [],
-						// 		upVedio: [],
-						// 		upFile: [],
-						// 	},
-						// ]);
-					})
-					.catch((err) => {
-						this.$message.error("提交失败");
-						console.error(err);
-					});
-			},
-		},
-		created() {
-			this.getCourseDetail();
-			document.scrollingElement.scrollTop = 0;
-		},
-	};
+      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) + '%');
+            _this.progress = parseInt((evt.loaded * 80) / evt.total);
+          })
+          .send(function (err, data) {
+            _this.progress = 100;
+            setTimeout(() => {
+              _this.proVisible = false;
+            }, 1000);
+            if (err) {
+              var a = _this.$refs.upload1.uploadFiles;
+              a.splice(a.length - 1, a.length);
+              _this.$message.error("上传失败");
+            } else {
+              if (type == 2) {
+                _this.studyJuri[0].upVedio.push({
+                  name: file.name,
+                  url: data.Location,
+                  uid: file.uid,
+                });
+                _this.imgChange(null, null, type);
+              } else if (type == 3) {
+                _this.studyJuri[0].upFile.push({
+                  name: file.name,
+                  url: data.Location,
+                  uid: file.uid,
+                });
+                _this.imgChange(null, null, type);
+              }
+              console.log(data.Location);
+            }
+          });
+      }
+    },
+    get(i) {
+      this.courseType = i;
+      this.getCourseDetail();
+    },
+    getCourseDetail() {
+      const loading = this.$loading.service({
+        background: "rgba(255, 255, 255, 0.7)",
+        target: document.querySelector(".student_table"),
+      });
+      var t = this.courseType;
+      let params = {
+        courseId: this.id,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectCourseDetail", params)
+        .then((res) => {
+          loading.close();
+          // element.imgUrl = JSON.parse(element.chapters).poster;
+          var a = JSON.parse(res.data[0][0].chapters)[t].chapterInfo[0]
+            .chapterData;
+          var b = [
+            "AVI",
+            "NAVI",
+            "MPEG",
+            "ASF",
+            "MOV",
+            "WMV",
+            "3GP",
+            "RM",
+            "RMVB",
+            "FLV",
+            "F4V",
+            "H.264",
+            "H.265",
+            "REAL VIDEO",
+            "MKV",
+            "WebM",
+            "HDDVD",
+            "MP4",
+            "MPG",
+            "M4V",
+            "MGV",
+            "OGV",
+            "QTM",
+            "STR",
+            "AMC",
+            "DVX",
+            "EVO",
+            "DAT",
+            "OGG",
+            "OGM",
+          ];
+          this.vedio = [];
+          this.file = [];
+          for (var i = 0; i < a.length; i++) {
+            if (
+              b.indexOf(
+                a[i].url
+                  .split(".")
+                  [a[i].url.split(".").length - 1].toLocaleUpperCase()
+              ) != -1
+            ) {
+              this.vedio.push(a[i]);
+            } else {
+              this.file.push(a[i]);
+            }
+          }
+          // element.mediaList = JSON.parse(element.chapters)[0].chapterInfo[t].chapterData;
+          console.log(this.vedio);
+          console.log(this.file);
+          // this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
+          this.courseDetail = res.data[0][0];
+          this.chapInfo = JSON.parse(this.courseDetail.chapters)[t];
+          console.log(this.chapInfo);
+          this.chapInfoList = JSON.parse(this.courseDetail.chapters);
+          // this.playerOptions.poster = this.course.imgUrl;
+          this.playerOptions.sources[0].src =
+            this.vedio.length > 0
+              ? this.vedio[0].url
+              : require("../assets/icon/wheel.png");
+          console.log(this.playerOptions.sources[0].src);
+          this.playerO = this.playerOptions;
+        })
+        .catch((err) => {
+          loading.close();
+          console.error(err);
+        });
+    },
+    switchVideo(media, index) {
+      this.playerO = {};
+      this.playerOptions.poster = "";
+      this.playerOptions.sources[0].src = media;
+      this.playerO = this.playerOptions;
+    },
+    onPlayerPlay() {},
+    lookVedio(u) {
+      this.playerOptions.sources[0].src = u;
+      this.playerO = this.playerOptions;
+    },
+    downFile(i) {
+      window.open(this.file[i].url);
+    },
+    openAddWork() {
+      this.dialogVisible = true;
+      this.studyJuri = [
+        {
+          content: "",
+          cover: [],
+          upVedio: [],
+          upFile: [],
+        },
+      ];
+    },
+    addWork() {
+      let params = [
+        {
+          uid: this.userid,
+          cid: this.id,
+          stage: this.courseType,
+          content: JSON.stringify(this.studyJuri),
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + "addWorks", params)
+        .then((res) => {
+          this.$message({
+            message: "提交成功",
+            type: "success",
+          });
+          this.dialogVisible = false;
+          // this.studyJuri.push([
+          // 	{
+          // 		content: "",
+          // 		cover: [],
+          // 		upVedio: [],
+          // 		upFile: [],
+          // 	},
+          // ]);
+        })
+        .catch((err) => {
+          this.$message.error("提交失败");
+          console.error(err);
+        });
+    },
+  },
+  created() {
+    this.getCourseDetail();
+    document.scrollingElement.scrollTop = 0;
+  },
+};
 </script>
 
 <style scoped>
-	.body_student {
-		margin: 0px auto;
-		width: 80%;
-		height: 100%;
-		min-height: 800px;
-	}
-	.student_head {
-		width: 100%;
-		margin: 0 auto;
-		background: #fff;
-	}
-	.wheel > img,
-	.project > img,
-	.star > img,
-	.evaluate > img,
-	.up_photo > img,
-	.chapter_add > img,
-	.deleteWord > img {
-		width: 100%;
-		height: 100%;
-	}
-	.chapter_add {
-		width: 120px;
-		margin-top: 20px;
-		position: relative;
-		text-align: center;
-	}
-	.deleteWord {
-		width: 22px;
-		height: 22px;
-		position: absolute;
-		right: -10px;
-		top: -10px;
-		cursor: pointer;
-	}
-	.box_course {
-		display: flex;
-		flex-direction: column;
-	}
-	.wheel {
-		width: 100%;
-	}
-	.right_box {
-		display: flex;
-		flex-direction: column;
-		margin-left: 30px;
-		justify-content: space-around;
-	}
-	.right_box_title {
-		font-size: 23px;
-	}
-	.people {
-		display: flex;
-	}
-	.student_body {
-		width: 100%;
-		margin: 0 auto;
-		background: #fff;
-		margin-top: 20px;
-		padding: 0 0 20px;
-	}
-	.study_top {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		background: #fff;
-		margin: 10px 0;
-		height: 60px;
-		align-items: center;
-	}
-	.study_top .checkbox {
-		display: flex;
-		align-items: center;
-		margin-left: 25px;
-	}
-	.study_top .check {
-		margin: 0 10px 0 0;
-		/* border-bottom: 4px solid #ccc; */
-		padding-bottom: 5px;
-		text-align: center;
-		color: rgb(170, 170, 170);
-		cursor: pointer;
-		height: 30px;
-		box-sizing: border-box;
-		display: flex;
-		padding: 0 10px;
-	}
-	.study_top .checked {
-		border-bottom: 4px solid #3fc6a0;
-		padding-bottom: 5px;
-		color: #3fc6a0;
-		display: flex;
-	}
-	.study_top .checked > div,
-	.study_top .check > div {
-		margin-right: 5px;
-	}
-	.videoTop {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		background: #fff;
-		height: 60px;
-		align-items: center;
-		width: 95%;
-		margin: 10px auto;
-		border-bottom: 2px solid #ededed;
-	}
-	.upbtn {
-		margin: 25px;
-		background: #70afdb;
-		color: #fff;
-		width: 120px;
-		text-align: center;
-		height: 30px;
-		line-height: 30px;
-		font-size: 13px;
-		border-radius: 5px;
-		cursor: pointer;
-	}
-	.project_box {
-		padding: 0 30px 10px 21px;
-	}
+.body_student {
+  margin: 0px auto;
+  width: 80%;
+  height: 100%;
+  min-height: 800px;
+}
+.student_head {
+  width: 100%;
+  margin: 0 auto;
+  background: #fff;
+}
+.wheel > img,
+.project > img,
+.star > img,
+.evaluate > img,
+.up_photo > img,
+.chapter_add > img,
+.deleteWord > img {
+  width: 100%;
+  height: 100%;
+}
+.chapter_add {
+  width: 120px;
+  position: relative;
+  text-align: center;
+}
+.isAddThings {
+  margin-top: 20px;
+  position: relative;
+  text-align: center;
+  background: #f7f8fa;
+  height: 90px;
+  width: 90px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.deleteWord {
+  width: 22px;
+  height: 22px;
+  position: absolute;
+  right: -5px;
+  top: -5px;
+  cursor: pointer;
+}
+.box_course {
+  display: flex;
+  flex-direction: column;
+}
+.wheel {
+  width: 100%;
+}
+.right_box {
+  display: flex;
+  flex-direction: column;
+  margin-left: 30px;
+  justify-content: space-around;
+}
+.right_box_title {
+  font-size: 23px;
+}
+.people {
+  display: flex;
+}
+.student_body {
+  width: 100%;
+  margin: 0 auto;
+  background: #fff;
+  margin-top: 20px;
+  padding: 0 0 20px;
+}
+.study_top {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background: #fff;
+  margin: 10px 0;
+  height: 60px;
+  align-items: center;
+}
+.study_top .checkbox {
+  display: flex;
+  align-items: center;
+  margin-left: 25px;
+}
+.study_top .check {
+  margin: 0 10px 0 0;
+  /* border-bottom: 4px solid #ccc; */
+  padding-bottom: 5px;
+  text-align: center;
+  color: rgb(170, 170, 170);
+  cursor: pointer;
+  height: 30px;
+  box-sizing: border-box;
+  display: flex;
+  padding: 0 10px;
+}
+.study_top .checked {
+  border-bottom: 4px solid #3fc6a0;
+  padding-bottom: 5px;
+  color: #3fc6a0;
+  display: flex;
+}
+.study_top .checked > div,
+.study_top .check > div {
+  margin-right: 5px;
+}
+.videoTop {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background: #fff;
+  height: 60px;
+  align-items: center;
+  width: 95%;
+  margin: 10px auto;
+  border-bottom: 2px solid #ededed;
+}
+.upbtn {
+  margin: 25px;
+  background: #70afdb;
+  color: #fff;
+  width: 120px;
+  text-align: center;
+  height: 30px;
+  line-height: 30px;
+  font-size: 13px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.project_box {
+  padding: 0 30px 10px 21px;
+}
+
+.filebox {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.file {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 0 20px 20px 0;
+  cursor: pointer;
+}
+
+.file div {
+  margin-top: 10px;
+  width: 150px;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 
-	.filebox {
-		display: flex;
-		flex-wrap: wrap;
-	}
+.media {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 0 20px 20px 0;
+  cursor: pointer;
+  width: 250px;
+  overflow: hidden;
+  box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%),
+    0px 2px 1px -1px rgb(0 0 0 / 12%);
+  border-radius: 0 0 5px 5px;
+  /* border: 1px solid #cecece; */
+  box-sizing: border-box;
+}
+.media img {
+  width: 250px;
+  height: 150px;
+  object-fit: cover;
+}
+.media .title {
+  padding: 5px;
+  text-align: left;
+  width: 100%;
+  box-sizing: border-box;
+}
+.media .btn {
+  width: 100%;
+  height: 35px;
+  line-height: 35px;
+  color: #fff;
+  background: #606060;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 
-	.file {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		margin: 0 20px 20px 0;
-		cursor: pointer;
-	}
+.detail_content_top {
+  width: 100%;
+  padding: 25px 0 25px 0;
+}
+.detail_title {
+  text-align: center;
+  font-size: 24px;
+}
+.detail_time {
+  font-size: 13px;
+  padding: 15px 0 0 40px;
+}
+.detail_content {
+  line-height: 2pc;
+  width: 90%;
+  margin: 0 auto;
+  padding-top: 30px;
+  text-indent: 30px;
+}
+.score_box >>> .el-rate {
+  margin-left: 10px;
+}
+.dialog_change >>> .el-dialog {
+  border-radius: 5px;
+}
+.dialog_change >>> .el-dialog__header {
+  background: #f2f2f2;
+  text-align: center;
+}
+.dialog_change >>> .el-dialog__title {
+  line-height: 5px;
+}
+.dialog_change >>> .el-dialog__body {
+  background: #fff;
+  padding: 10px 20px;
+}
+.score_box {
+  display: flex;
+  align-items: center;
+  margin-bottom: 18px;
+  margin-top: 20px;
+}
+.up_photo {
+  width: 60px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+.upload_send {
+  margin: 20px auto;
+  width: 60%;
+  background: #169bd6;
+  text-align: center;
+  height: 35px;
+  line-height: 35px;
+  color: #fff;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.marginT {
+  margin-top: 20px;
+}
+.workd_media {
+  width: 100%;
+}
+.cd_content_steps {
+  display: flex;
+  width: 90%;
+  justify-content: space-around;
+  border-top: 1px solid #eeeeee;
+}
+.cd_steps_box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  cursor: pointer;
+}
+.first {
+  display: flex;
+  align-items: center;
+  margin: 15px 0 20px 0;
+  font-size: 20px;
+}
+.first > div:nth-child(2) {
+  font-size: 16px !important;
+  padding-left: 10px;
+  line-height: 26px;
+  box-sizing: border-box;
+}
+.blue_box_one {
+  text-align: center;
+  color: #fff;
+  background-image: linear-gradient(to right, #30c499, #75ceba);
+  border-radius: 7px;
+  margin: 10px;
+  cursor: pointer;
+  width: 95%;
+  height: 45px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+.blue_box_one > div:nth-child(1) {
+  line-height: 65px;
+  margin: 0 5px 0 10px;
+  width: 30%;
+  min-width: 70px;
+}
+.blue_box_one > div:nth-child(2) {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+  width: 70%;
+  text-align: left;
+  max-width: calc(100% - 85px);
+}
+.blue_box_one > div:nth-child(2):hover {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.upFile {
+  margin: 0 auto;
+  width: 120px;
+  background: #70afdb;
+  color: #fff;
+  height: 30px;
+  text-align: center;
+  line-height: 30px;
+  border-radius: 5px;
+  font-size: 14px;
+  cursor: pointer;
+}
+.courseTitle {
+  background: #329c74;
+  width: 95%;
+  margin: 10px auto;
+  height: 40px;
+  color: #fff;
+  line-height: 40px;
+  text-indent: 15px;
+}
+.ml {
+  margin-left: 15px;
+  color: #d1d1d1;
+}
+.return {
+  width: 2rem;
+  height: 2rem;
+  cursor: pointer;
+}
+.return > img {
+  width: 100%;
+  height: 100%;
+}
+.returnBtn {
+  background: rgb(238, 238, 238);
+  width: 58px;
+  height: 30px;
+  color: rgb(22, 22, 22);
+  text-align: center;
+  line-height: 32px;
+  margin-right: 20px;
+  cursor: pointer;
+}
+.tool {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  width: 13%;
+  margin: 10px 20px;
+  align-items: center;
+}
+.whiteBIcon {
+  width: 150px;
+  cursor: pointer;
+}
+.whiteBIcon > img {
+  width: 100%;
+  height: 100%;
+}
+.mask {
+  background-color: rgba(0, 0, 0, 0);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 20000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.progressBox {
+  width: 500px;
+  height: 180px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 0 6px 1px #bfbfbf;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.progressBox .lbox {
+  height: 100px;
+  font-size: 19px;
+  display: flex;
+  align-items: center;
+}
 
-	.file div {
-		margin-top: 10px;
-		width: 150px;
-		text-align: center;
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
+.progressBox .lbox img {
+  width: 40px;
+  margin-right: 20px;
+}
 
-	.media {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		margin: 0 20px 20px 0;
-		cursor: pointer;
-		width: 250px;
-		overflow: hidden;
-		box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%),
-			0px 2px 1px -1px rgb(0 0 0 / 12%);
-		border-radius: 0 0 5px 5px;
-		/* border: 1px solid #cecece; */
-		box-sizing: border-box;
-	}
-	.media img {
-		width: 250px;
-		height: 150px;
-		object-fit: cover;
-	}
-	.media .title {
-		padding: 5px;
-		text-align: left;
-		width: 100%;
-		box-sizing: border-box;
-	}
-	.media .btn {
-		width: 100%;
-		height: 35px;
-		line-height: 35px;
-		color: #fff;
-		background: #606060;
-		text-align: center;
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
+.progressBox >>> .el-progress-bar__outer {
+  background-color: #d1dfff !important;
+}
+.progressBox .lbox {
+  height: 100px;
+  font-size: 19px;
+  display: flex;
+  align-items: center;
+}
 
-	.detail_content_top {
-		width: 100%;
-		padding: 25px 0 25px 0;
-	}
-	.detail_title {
-		text-align: center;
-		font-size: 24px;
-	}
-	.detail_time {
-		font-size: 13px;
-		padding: 15px 0 0 40px;
-	}
-	.detail_content {
-		line-height: 2pc;
-		width: 90%;
-		margin: 0 auto;
-		padding-top: 30px;
-		text-indent: 30px;
-	}
-	.score_box >>> .el-rate {
-		margin-left: 10px;
-	}
-	.dialog_change >>> .el-dialog {
-		border-radius: 5px;
-	}
-	.dialog_change >>> .el-dialog__header {
-		background: #f2f2f2;
-		text-align: center;
-	}
-	.dialog_change >>> .el-dialog__title {
-		line-height: 5px;
-	}
-	.dialog_change >>> .el-dialog__body {
-		background: #fff;
-		padding: 10px 20px;
-	}
-	.score_box {
-		display: flex;
-		align-items: center;
-		margin-bottom: 18px;
-		margin-top: 20px;
-	}
-	.up_photo {
-		width: 60px;
-		cursor: pointer;
-		margin-top: 10px;
-	}
-	.upload_send {
-		margin: 20px auto;
-		width: 60%;
-		background: #169bd6;
-		text-align: center;
-		height: 35px;
-		line-height: 35px;
-		color: #fff;
-		border-radius: 5px;
-		cursor: pointer;
-	}
-	.marginT {
-		margin-top: 20px;
-	}
-	.workd_media {
-		width: 100%;
-	}
-	.cd_content_steps {
-		display: flex;
-		width: 90%;
-		justify-content: space-around;
-		border-top: 1px solid #eeeeee;
-	}
-	.cd_steps_box {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		flex-direction: column;
-		cursor: pointer;
-	}
-	.first {
-		display: flex;
-		align-items: center;
-		margin: 15px 0 20px 0;
-		font-size: 20px;
-	}
-	.first > div:nth-child(2) {
-		font-size: 16px !important;
-		padding-left: 10px;
-		line-height: 26px;
-		box-sizing: border-box;
-	}
-	.blue_box_one {
-		text-align: center;
-		color: #fff;
-		background-image: linear-gradient(to right, #30c499, #75ceba);
-		border-radius: 7px;
-		margin: 10px;
-		cursor: pointer;
-		width: 95%;
-		height: 45px;
-		display: flex;
-		flex-direction: row;
-		justify-content: flex-start;
-		align-items: center;
-	}
-	.blue_box_one > div:nth-child(1) {
-		line-height: 65px;
-		margin: 0 5px 0 10px;
-		width: 30%;
-		min-width: 70px;
-	}
-	.blue_box_one > div:nth-child(2) {
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		overflow: hidden;
-		word-break: break-all;
-		width: 70%;
-		text-align: left;
-		max-width: calc(100% - 85px);
-	}
-	.blue_box_one > div:nth-child(2):hover {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		cursor: pointer;
-	}
-	.upFile {
-		margin: 0 auto;
-		width: 120px;
-		background: #70afdb;
-		color: #fff;
-		height: 30px;
-		text-align: center;
-		line-height: 30px;
-		border-radius: 5px;
-		font-size: 14px;
-		cursor: pointer;
-	}
-	.courseTitle {
-		background: #329c74;
-		width: 95%;
-		margin: 10px auto;
-		height: 40px;
-		color: #fff;
-		line-height: 40px;
-		text-indent: 15px;
-	}
-	.ml {
-		margin-left: 15px;
-		color: #d1d1d1;
-	}
-	.return {
-		width: 2rem;
-		height: 2rem;
-		cursor: pointer;
-	}
-	.return > img {
-		width: 100%;
-		height: 100%;
-	}
-	.returnBtn {
-		background: rgb(238, 238, 238);
-		width: 58px;
-		height: 30px;
-		color: rgb(22, 22, 22);
-		text-align: center;
-		line-height: 32px;
-		margin-right: 20px;
-		cursor: pointer;
-	}
-	.tool {
-		display: flex;
-		flex-direction: column;
-		flex-wrap: nowrap;
-		width: 13%;
-		margin: 10px 20px;
-		align-items: center;
-	}
-	.whiteBIcon {
-		width: 150px;
-		cursor: pointer;
-	}
-	.whiteBIcon > img {
-		width: 100%;
-		height: 100%;
-	}
+.progressBox .lbox img {
+  width: 40px;
+  margin-right: 20px;
+}
+.uploadVedio {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  height: 55px;
+}
+.uploadVedio > img {
+  width: 30px;
+  height: 30px;
+}
+.uploadVedio > span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 75px;
+  margin-top: 7px;
+}
+.picName {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 75px;
+  margin-top: 7px;
+}
 </style>