pbl-student-table/src/components/study.vue

<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="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>
          <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: 65%; height: 100%; margin: 20px auto"
                ></video-player>
              </div>
              <!-- <div class="cd_content_steps">
								<div
									class="cd_steps_box"
									v-for="(media, index) in vedio"
									:key="media"
									@click="switchVideo(media, index)"
								>
									 <i :class="{ active: index < 1 }"></i> -->
              <!-- <i
										:class="{
											active: playerOptions.sources[0].src == media,
										}"
									></i>
									<span>视频{{ index + 1 }}</span> -->
              <!-- </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-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"
                @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>
        <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>
              <img :src="mr" alt="" />
              <span>{{ studyJuri[0].upVedio[0].name }}</span>
              <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"
							v-if="studyJuri[0].upFile.length == 0"
							@click="addImg($event)"
						>
							<div class="up_photo">
								<el-button
									type="small"
									style="background: rgb(60, 102, 189); color: #fff"
									>点击上传</el-button
								>
							</div>
							<input
								type="file"
								accept="application/pdf,.ppt,.pptx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
								style="display: none"
								@change="beforeUpload2($event, 3)"
							/>
						</div>
						<div class="chapter_add" v-else>
							<img :src="require('../assets/file.png')" alt="" />
							<span>{{ studyJuri[0].upFile[0].name }}</span>
							<div class="deleteWord" @click="clean(3)">
								<img src="../assets/icon/delete.png" alt="" />
							</div>
						</div>
					</div> -->
          <div class="upload_send" @click="addWork">提交</div>
        </el-dialog>
      </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,
    };
  },
  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;

      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"; //设置区域

      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) {
            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];
          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 15px 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;
}
.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: 10px;
}
.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;
}

.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;
}

.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 10px;
  width: 40%;
}
.blue_box_one > div:nth-child(2) {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  width: 60%;
}
.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: #3ec6a0;
  width: 58px;
  height: 30px;
  color: #fff;
  text-align: center;
  line-height: 32px;
  margin-right: 20px;
  cursor: pointer;
}
</style>