pbl-teacher-table/src/components/pages/addCourse.vue

<template>
  <div class="pb_content">
    <div class="pb_content_body" style="position: relative">
      <div class="right">
        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
          "
        >
          <div
            style="
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
              align-items: center;
              width: 25%;
              border-radius: 80px;
              box-shadow: 0px 1px 2px 3px #f2f2f2;
              margin: 30px 20px 20px 45px;
              min-width: 420px;
            "
          >
            <h3 class="info_title" v-if="steps == 1">项目内容填写</h3>
            <h3 class="info_title" v-if="steps == 2">请选择文档模板</h3>
            <h3 class="info_title" v-if="steps == 3">项目内容填写</h3>
            <el-breadcrumb
              separator-class="el-icon-arrow-right"
              style="margin-top: 15px"
            >
              <el-breadcrumb-item
                :to="{ path: '/course?userid=' + userid + '&oid=' + oid }"
                >项目管理</el-breadcrumb-item
              >
              <el-breadcrumb-item>添加项目</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div
            v-if="steps == 1"
            style="font-size: 25px; color: #dedede; font-weight: bold;margin-top: 12px;"
          >
            第一步
          </div>
          <div
            v-if="steps == 2"
            style="font-size: 25px; color: #dedede; font-weight: bold;margin-top: 12px;"
          >
            第二步
          </div>
          <div
            v-if="steps == 3"
            style="font-size: 25px; color: #dedede; font-weight: bold;margin-top: 12px;"
          >
            第三步
          </div>
        </div>
        <div style="display: flex">
          <div class="stepBg" :class="steps == 3 ? 'isHeight' : ''">
            <div v-if="steps == 1" class="first" @click="navSteps(1)">
              <div><img src="../../assets/icon/first.png" alt="" /></div>
              <div>填写基本信息</div>
            </div>
            <div v-else class="firstNo" @click="navSteps(1)">
              <div><img src="../../assets/icon/firstNo.png" alt="" /></div>
              <div>填写基本信息</div>
            </div>
            <div v-if="steps == 2" class="second" @click="navSteps(2)">
              <div><img src="../../assets/icon/second.png" alt="" /></div>
              <div>选择文档模板</div>
            </div>
            <div v-else class="secondNo" @click="navSteps(2)">
              <div><img src="../../assets/icon/secondNo.png" alt="" /></div>
              <div>选择文档模板</div>
            </div>
            <div v-if="steps == 3" class="third" @click="navSteps(3)">
              <div><img src="../../assets/icon/third.png" alt="" /></div>
              <div>上传项目内容</div>
            </div>
            <div v-else class="thirdNo" @click="navSteps(3)">
              <div><img src="../../assets/icon/thirdNo.png" alt="" /></div>
              <div>上传项目内容</div>
            </div>
            <div v-if="steps == 4" class="four">
              <div><img src="../../assets/icon/four.png" alt="" /></div>
              <div>上传完成</div>
            </div>
            <div v-else class="fourNo">
              <div><img src="../../assets/icon/fourNo.png" alt="" /></div>
              <div>上传完成</div>
            </div>
          </div>

          <div
            style="
              width: 65%;
              margin: 10px;
              background: #f1f1f1;
              border-radius: 10px;
              min-height: 550px;
            "
            v-if="this.steps == 1"
          >
            <div class="basic_box">
              <div class="big_box">
                <div class="left_first">
                  <div>
                    <div class="bInfo_title">
                      <span style="color: red">*</span>项目名称
                    </div>
                    <div style="display: flex">
                      <img src="../../assets/icon/projectName.png" alt="" style="margin-right: 5px;" />
                      <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="8"
                        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>

                      <el-upload
                        class="upCss"
                        action="#"
                        list-type="picture"
                        v-loading="uploadLoading1"
                        :http-request="beforeUpload1"
                        ref="upload1"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handle_remove1"
                        :show-file-list="true"
                        :file-list="cover"
                        accept="image/*"
                        :limit="1"
                        :on-exceed="onExceed"
                      >
                        <i class="el-icon-plus"></i>
                      </el-upload>
                    </div>
                    <div style="flex: 0.5 1 0%; margin-top: 30px">
                      <div class="bInfo_title">
                        <span style="color: red">*</span>选择项目成员
                      </div>
                      <div
                        class="addPeople"
                        @click="addPP"
                        v-if="this.checkboxList.length == 0"
                      >
                        添加成员
                      </div>
                      <div class="addPeople" @click="addPP" v-else>
                        已添加，点击查看
                      </div>
                    </div>
                    <div style="flex: 0.5 1 0%; margin-top: 30px">
                      <div class="bInfo_title">协同编辑</div>
                      <div class="addPeople" style="background: #6b92c9">
                        添加协同成员
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            style="
              width: 65%;
              margin: 10px;
              background: #f1f1f1;
              border-radius: 10px;
              min-height: 550px;
            "
            v-if="this.steps == 2"
          >
            <div class="basic_box" style="margin: 20px 30px 0 !important">
              <div
                style="
                  color: #b8b8b8;
                  background: #fff;
                  width: 26%;
                  height: 40px;
                  border-radius: 15px;
                  padding-left: 20px;
                  line-height: 40px;
                  font-size: 17px;
                  box-shadow: 0px 1px 2px 2px #e0e0e0;
                "
              >
                请选择合适的项目模板
              </div>
              <div class="wordbox">
                <div
                  class="wordTeacher"
                  v-for="(aa, indexF) in templateArray"
                  :key="indexF"
                  @click="checkTemplate(aa)"
                >
                  <div class="wordPic">
                    <img src="../../assets/icon/wordMub.png" alt="" />
                  </div>

                  <div
                    style="
                      margin-top: 10px;
                      line-height: 19px;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      padding: 0 20px;
                    "
                  >
                    {{ aa.title }}
                  </div>
                  <div class="checkword">
                    <img
                      src="../../assets/icon/checked.png"
                      alt=""
                      v-if="templateC.id == aa.id"
                    />
                    <img src="../../assets/icon/check.png" alt="" v-else />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            style="
              width: 65%;
              margin: 10px;
              background: #f1f1f1;
              border-radius: 10px;
              min-height: 550px;
            "
            v-if="this.steps == 3"
          >
            <div class="basic_box">
              <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>

                      <el-upload
                        class="upCss"
                        action="#"
                        list-type="picture"
                        v-loading="uploadLoading1"
                        :http-request="beforeUpload1"
                        ref="upload1"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handle_remove1"
                        :show-file-list="true"
                        :file-list="cover"
                        accept="image/*"
                        :limit="1"
                        :on-exceed="onExceed"
                      >
                        <i class="el-icon-plus"></i>
                      </el-upload>
                    </div>
                    <div style="flex: 0.5 1 0%; margin-top: 30px">
                      <div class="bInfo_title">
                        <span style="color: red">*</span>选择项目成员
                      </div>
                      <div
                        class="addPeople"
                        @click="addPP"
                        v-if="this.checkboxList.length == 0"
                      >
                        点击添加成员
                      </div>
                      <div class="addPeople" @click="addPP" v-else>
                        已添加，点击查看
                      </div>
                    </div>
                    <div style="flex: 0.5 1 0%; margin-top: 30px">
                      <div class="bInfo_title">协同编辑</div>
                      <div class="addPeople" style="background: #6b92c9">
                        添加协同编辑
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="line"></div>
              <div
                style="display: flex; flex-direction: row; align-items: center"
              >
                <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="addStageImg" @click="addunit">
                  <img src="../../assets/icon/add.png" alt="" />
                </div>
              </div>

              <div
                class="chapter_box"
                v-for="(item, index) in unitJson[unitIndex].chapterInfo"
                :key="item.id"
              >
                <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: 25px 0px 0px 0"
                  >
                  </el-switch>
                </div>
                <div class="line"></div>
                <div
                  class="basic_box"
                  style="margin: 45px 0 0 15px; min-height: 0"
                >
                  <h3 class="info_title" style="margin: 0">附件添加</h3>
                  <div class="add_info_box">
                    <button class="info_btn" @click="addImg($event)">
                      添加视频
                      <input
                        type="file"
                        accept="video/mp4,video/quicktime,video/x-msvideo"
                        style="display: none"
                        @change="beforeUpload2($event, unitIndex, 2)"
                      />
                    </button>
                    <button class="info_btn" @click="addImg($event)">
                      添加附件
                      <input
                        type="file"
                        accept="application/pdf,.ppt,.pptx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                        style="display: none"
                        @change="beforeUpload2($event, unitIndex, 3)"
                      />
                    </button>
                  </div>
                  <div>
                    <div
                      class="add_chapters_box"
                      v-if="item.chapterData.length == 0"
                      style="height: 185px"
                    ></div>
                    <div
                      v-else
                      class="add_chapters_box"
                      style="display: flex; flex-direction: column"
                    >
                      <div
                        class="chapter_upload"
                        v-for="(item1, index1) in item.chapterData"
                        :key="item1.id"
                        @click="
                          getChapterData(
                            $event,
                            unitIndex,
                            index,
                            index1,
                            item1.type
                          )
                        "
                      >
                        <div class="chapter_upload_t" style="width: 100%"></div>
                        <div
                          className="chapter_upload_o"
                          style="position: relative"
                        >
                          <div
                            className="chapter_upload_l"
                            style="padding: 1px 0 0 10px"
                          >
                            <div
                              v-if="item1.type == 2"
                              class="chapter_upload_l_i1"
                              style="margin: 10px auto 0 0"
                            ></div>
                            <div
                              v-if="item1.type == 3"
                              class="chapter_upload_l_i5"
                              style="margin: 10px auto 0 0"
                            ></div>
                          </div>
                          <div
                            class="chapter_upload_ic"
                            style="
                              cursor: pointer;
                              position: absolute;
                              width: 45px;
                              right: 0;
                              top: 0;
                            "
                          >
                            <div class="chapter_upload_ic_l"></div>
                            <div
                              class="chapter_upload_ic_r"
                              style="position: absolute"
                              @click.stop="
                                deleteChapterData(
                                  $event,
                                  unitIndex,
                                  index,
                                  index1
                                )
                              "
                            >
                              <div></div>
                            </div>
                          </div>
                          <div
                            class="chapter_upload_n"
                            style="
                              display: flex;
                              alignitems: center;
                              paddingleft: 10px;
                            "
                          >
                            <input
                              v-if="item1.type == 2 || item1.type == 3"
                              :placeholder="item1.name"
                              @change="
                                updataVideoT(
                                  $event,
                                  unitIndex,
                                  chapterIndex,
                                  index1
                                )
                              "
                              style="
                                border: none;
                                outline: none;
                                width: 55%;
                                minwidth: 215px;
                                z-index: 99;
                              "
                            />
                            <input
                              :placeholder="item1.name"
                              v-else
                              style="
                                border: none;
                                outline: none;
                                width: 55%;
                                minwidth: 215px;
                              "
                              readonly="true"
                            />

                            <div class="chapter_upload_ud" style="z-index: 99">
                              <div
                                class="chapter_upload_up"
                                @click="upCd($event, unitIndex, index, index1)"
                              ></div>
                              <div
                                class="chapter_upload_down"
                                @click="
                                  downCd($event, unitIndex, index, index1)
                                "
                              ></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="line"></div>
                <div
                  class="basic_box"
                  style="margin: 45px 0 0 15px; min-height: 0"
                >
                  <h3 class="info_title" style="margin: 0">作业设置</h3>
                  <div class="homework_box">
                    <div style="display: flex; justify-content: flex-start">
                      <div class="addHW" @click="addHw($event)">
                        <img src="../../assets/icon/addHW.png" alt="" />
                        <input
                          type="file"
                          style="display: none"
                          @change="beforeUpload2($event, unitIndex, 5)"
                        />
                      </div>
                      <div
                        class="zyBox"
                        v-for="(item2, index2) in item.homeworkList"
                        :key="index2"
                      >
                        <div
                          class="deleteZy"
                          @click="deleteHomeworkBox(unitIndex, index, index2)"
                        >
                          <img src="../../assets/icon/delete.png" alt="" />
                        </div>
                        <div class="zyImg">
                          <img src="../../assets/zy.png" alt="" />
                        </div>
                        <div
                          style="
                            width: 110px;
                            font-size: 15px;
                            overflow: hidden;
                            white-space: nowrap;
                          "
                        >
                          {{ item2.name }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            style="
              width: 65%;
              margin: 10px;
              background: #f1f1f1;
              border-radius: 10px;
              min-height: 550px;
            "
            v-if="this.steps == 4"
          >
            <div class="basic_box_success">
              <div class="right_img">
                <img src="../../assets/icon/right.png" alt="" />
              </div>
              <div style="font-weight: bold">成功</div>
              <div>您的课程编号</div>
              <div class="number">{{ number }}</div>
              <div class="success_button">
                <div class="look_course">邀请老师协同编辑</div>
                <div class="attend_others" @click="dialogVisible = true">
                  预览课程
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="line"></div>

        <div class="info_btnBox">
          <button
            class="info_btn"
            v-if="steps == 1"
            @click="goTo('/course?userid=' + userid + '&oid=' + oid)"
          >
            返回课程
          </button>
          <button
            class="info_btn"
            v-if="steps > 1 && steps != 5"
            @click="lastSteps"
          >
            {{ steps == 4 ? "返回首页" : "上一步" }}
          </button>
          <button class="info_btn" v-if="steps < 5" @click="nextSteps">
            {{ steps == 3 ? "确认上传" : "下一步" }}
          </button>
        </div>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="25%"
      :before-close="handleClose"
      class="dialog_diy2"
    >
      <div>请复制该链接邀请协同编辑</div>
      <div>http://www.boomyon.com/index-zhang.com</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary">复制链接分享</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="updateBoolean2 ? '查看文档' : '添加文档'"
      :visible.sync="dialogVisible1"
      :append-to-body="true"
      width="25%"
      :before-close="handleClose"
    >
      <el-form>
        <el-form-item label="文档标题">
          <el-input
            v-model="tTitle"
            auto-complete="off"
            placeholder="请输入文档标题名..."
          ></el-input>
        </el-form-item>
        <div>文档简介</div>
        <editor-bar v-model="tdetail" @change="change"></editor-bar>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="addWord" v-if="!updateBoolean2"
          >添加</el-button
        >
        <el-button type="primary" @click="upWord" v-else>修 改</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="添加文档"
      :visible.sync="dialogVisible2"
      :append-to-body="true"
      width="500px"
      :before-close="handleClose"
      class="dialog_diy"
    >
      <el-form>
        <el-form-item label="文档标题">
          <el-input
            v-model="templateC.title"
            auto-complete="off"
            placeholder="请输入文档标题名..."
          ></el-input>
        </el-form-item>
        <div>文档内容</div>
        <editor-bar v-model="cTemplate" @change="change"></editor-bar>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="wordNext()">保存，下一步</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="添加项目成员"
      :visible.sync="dialogVisible3"
      :append-to-body="true"
      width="25%"
      height="80%"
      :before-close="handleClose"
      class="addNewPP customWidth"
    >
      <div class="people">
        <div class="people_top">
          <div class="people_nav">选择成员</div>
          <div class="people_top_right">
            <div class="people_search">
              <el-input
                placeholder="搜索成员"
                v-model="searchPeople"
              ></el-input>
              <div class="search_img" @click="searchStudent">
                <img src="../../assets/icon/search.png" alt="" />
              </div>
            </div>
          </div>
        </div>
        <el-checkbox-group v-model="checkboxList" class="people_name">
          <el-checkbox
            v-for="item in studentJuri"
            :key="item.userid"
            :label="item.userid"
            >{{ item.name ? item.name : "暂无学生可选" }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="isAddPP">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import "../../common/aws-sdk-2.235.1.min.js";
import $ from "jquery";
import EditorBar from "../../components/tools/wangEnduit";
export default {
  components: { EditorBar },
  data() {
    return {
      checkAll: false,
      checkedCities: [],
      isIndeterminate: true,
      steps: 1,
      courseName: "",
      isTeacherSee: false,
      courseText: "",
      formLabelWidth: "100px",
      uploadLoading1: false,
      noneBtnImg: false,
      noneBtnImg1: false,
      updateBoolean2: false,
      unitIndex: 0,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      searchPeople: "",
      userid: this.$route.query.userid,
      oid: this.$route.query.oid,
      cover: [], //课程封面
      unitJson: [
        {
          dyName: "", //单元标题
          startTime: "", //开始时间
          endTime: "", //结束时间
          isTalk: false, //是否开启评价
          chapterInfo: [
            {
              isread: false,
              chapterid: this.guid(),
              title: "",
              courseName: "",
              chapterData: [],
              itemCount: 1,
              fileList1: [],
              homeworkList: [],
              video: [],
              testData: [],
              pData: [],
              templateArray: [],
            },
          ],
        },
      ],
      studentJuri: [],
      checkboxList: [],
      number: "",
      tTitle: "",
      tdetail: "",
      templateC: {},
      cTemplate: "",
    };
  },
  computed: {
    offsetLetfPx: function () {
      //addnum可以直接在模板语法里面用，相当于data内的值
      return (
        $(".cru_select")[this.unitIndex] &&
        $(".cru_select")[this.unitIndex].offsetLeft
      );
    },
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    addHw(e) {
      var el = e.currentTarget;
      el.getElementsByTagName("input")[0].click();
    },
    change(val) {
      console.log(val);
    },
    handleClose(done) {
      done();
    },
    imgChange1(file, fileList, type) {
      if (type == 1) {
        var _tmp = this.cover;
      } else if (type == 2 || type == 3) {
        var _tmp = this.unitJson[this.unitIndex].chapterInfo[0].chapterData;
      } else if (type == 4) {
        var _tmp = this.unitJson[this.unitIndex].chapterInfo[0].fileList1;
      } else {
        var _tmp = this.unitJson[this.unitIndex].chapterInfo[0].homeworkList;
      }
      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() {
      if (this.steps == 4) {
        window.location.href =
          "./course.vue?userid=" + this.userid + "&oid=" + this.oid;
      } else {
        this.steps--;
      }
    },
    navSteps(s) {
      if (s == 1) {
        this.steps = 1;
      }
      if (s == 2) {
        if (
          this.courseName != "" &&
          this.courseText != "" &&
          this.checkboxList.length != 0
        ) {
          this.steps = 2;
        } else {
          this.$message.error("请将信息填写完整");
        }
      }
      if (s == 3) {
        if (
          this.courseName != "" &&
          this.courseText != "" &&
          this.checkboxList.length != 0 &&
          this.templateC.id != undefined
        ) {
          this.steps = 3;
        } else {
          this.$message.error("请将信息填写完整");
          return;
        }
      }
    },
    nextSteps() {
      if (this.steps == 1) {
        if (
          this.courseName != "" &&
          this.courseText != "" &&
          this.checkboxList.length != 0
        ) {
          this.steps++;
        } else {
          this.$message.error("请将信息填写完整");
        }
      } else if (this.steps == 2) {
        if (this.templateC.id == "" || this.templateC.id == undefined) {
          this.$message.error("请选择文档");
          return;
        }
        this.dialogVisible2 = true;
      } else if (this.steps == 3) {
        this.addWork();
        this.steps++;
      }
    },
    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;
    },
    clean(i, c) {
      this.unitJson[this.unitIndex].chapterInfo[i].fileList1.splice(c, 1);
    },
    handle_remove1(file, fileList, type) {
      var _tmp = this.cover;
      for (var i = 0, len = _tmp.length; i < len; i++) {
        if (_tmp[i].uid == file.uid) {
          _tmp.splice(i, 1);
          break;
        }
        this.cover = _tmp;
      }
      this.noneBtnImg = _tmp.length >= 1;
    },
    addImg(e) {
      var el = e.currentTarget;
      el.getElementsByTagName("input")[0].click();
    },
    beforeUpload1(event, type) {
      const loading = this.openLoading();
      var file = event.file;
      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) {
            loading.close();
            if (err) {
              var a = _this.$refs.upload1.uploadFiles;
              a.splice(a.length - 1, a.length);
              _this.$message.error("上传失败");
            } else {
              _this.cover.push({
                name: file.name,
                url: data.Location,
                uid: file.uid,
              });
              _this.imgChange1(null, null, 1);
              console.log(data.Location);
            }
          });
      }
    },
    beforeUpload(data) {
      this.$refs.upload1.uploadFiles;
      this.uploadLoading1 = true;
      var file = data.file;
      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.unitJson[_this.unitIndex].chapterInfo[0].fileList1.push({
                name: file.name,
                url: data.Location,
                uid: file.uid,
              });
              _this.imgChange();
              console.log(data.Location);
            }
          });
      }
    },
    onExceed() {
      this.$message.error("课程封面仅支持上传一张，请删除后再进行上传");
    },
    beforeUpload2(event, unitIndex, type) {
      const loading = this.openLoading();
      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) {
            loading.close();
            if (err) {
              var a = _this.$refs.upload1.uploadFiles;
              a.splice(a.length - 1, a.length);
              _this.$message.error("上传失败");
            } else {
              if (type == 2 || type == 3) {
                _this.unitJson[unitIndex].chapterInfo[0].chapterData.push({
                  name: file.name,
                  url: data.Location,
                  uid: file.uid,
                  type: type,
                });
                _this.imgChange1(null, null, type);
              } else if (type == 4) {
                _this.unitJson[_this.unitIndex].chapterInfo[0].fileList1.push({
                  name: file.name,
                  url: data.Location,
                  uid: file.uid,
                });
                _this.imgChange1(null, null, type);
              } else if (type == 5) {
                _this.unitJson[
                  _this.unitIndex
                ].chapterInfo[0].homeworkList.push({
                  name: file.name,
                  url: data.Location,
                  uid: file.uid,
                });
                _this.imgChange1(null, null, type);
              }
              console.log(data.Location);
            }
          });
      }
    },
    addunit() {
      this.unitJson.push({
        dyName: "", //单元标题
        startTime: "", //开始时间
        endTime: "", //结束时间
        isTalk: false, //是否开启评价
        chapterInfo: [
          {
            isread: false,
            chapterid: this.guid(),
            title: "",
            courseName: "",
            chapterData: [],
            itemCount: 1,
            fileList1: [],
            homeworkList: [],
            video: [],
            testData: [],
            pData: [],
            templateArray: [],
          },
        ],
      });
    },
    add(e, i) {
      var el = e.currentTarget;
      el.getElementsByTagName("input")[0].click();
    },

    deleteHomeworkBox(unitIndex, index, i) {
      this.unitJson[unitIndex].chapterInfo[index].homeworkList.splice(i, 1);
    },
    getStudent() {
      let params = {
        cn: this.searchPeople,
        oid: this.oid,
        uid: this.userid,
      };
      this.ajax
        .get(this.$store.state.api + "selectProjectStudent", params)
        .then((res) => {
          this.studentJuri = res.data[0];
        })
        .catch((err) => {});
    },
    searchStudent() {
      this.getStudent();
    },

    getChapterData(e, i, j, ic, type) {
      e.stopPropagation();
      this.updataC = true;
      this.icc = ic;
      if ((type == 2 || type == 3) && e.target.tagName !== "INPUT") {
        console.log("还不能下载图片喔");
      }
    },
    deleteChapterData(e, i, j, ic) {
      // window.U.UF.EV.stopBubble();
      e.stopPropagation();
      this.unitJson[i].chapterInfo[j].chapterData.splice(ic, 1);
    },
    updataVideoT(e, i, j, ic) {
      e.stopPropagation();
      this.unitJson[i].chapterInfo[j].chapterData[ic].name = e.target.value;
    },
    upCd(e, i, j, ic) {
      e.stopPropagation();
      if (ic == 0) {
        return;
      }
      var a = this.unitJson[i].chapterInfo[j].chapterData[ic - 1];
      this.unitJson[i].chapterInfo[j].chapterData[ic - 1] =
        this.unitJson[i].chapterInfo[j].chapterData[ic];
      this.unitJson[i].chapterInfo[j].chapterData[ic] = a;
    },
    downCd(e, i, j, ic) {
      e.stopPropagation();
      if (ic == this.unitJson[i].chapterInfo[j].chapterData.length - 1) {
        return;
      }
      var a = this.unitJson[i].chapterInfo[j].chapterData[ic + 1];
      this.unitJson[i].chapterInfo[j].chapterData[ic + 1] =
        this.unitJson[i].chapterInfo[j].chapterData[ic];
      this.unitJson[i].chapterInfo[j].chapterData[ic] = a;
    },
    addWork() {
      let params = [
        {
          uid: this.userid,
          title: this.courseName,
          brief: this.courseText.replace(/%/g, "%25"),
          cover: this.cover.length > 0 ? JSON.stringify(this.cover) : "",
          astudent:
            this.checkboxList.length > 0
              ? JSON.stringify(this.checkboxList)
              : "",
          see: this.isTeacherSee == true ? 0 : 1,
          chapters: JSON.stringify(this.unitJson),
          template: this.cTemplate,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "addWork", params)
        .then((res) => {
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.number = res.data[0][0].ordernumber;
          this.islogin = true;
        })
        .catch((err) => {
          this.$message.error("新增失败");
          console.error(err);
        });
    },
    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;
    },
    insertWord() {
      this.dialogVisible1 = true;
      this.updateBoolean2 = false;
      this.tTitle = "";
      this.tdetail = "";
    },
    addWord() {
      this.unitJson[this.unitIndex].chapterInfo[0].fileList1.push({
        name: this.tTitle,
        content: this.tdetail,
        uid: this.guid(),
      });
      this.dialogVisible1 = false;
    },
    upWord() {},
    selectWord(uid, i, c) {
      this.dialogVisible1 = true;
      this.updateBoolean2 = true;
      if (
        uid == this.unitJson[this.unitIndex].chapterInfo[i].fileList1[c].uid
      ) {
        this.tTitle =
          this.unitJson[this.unitIndex].chapterInfo[i].fileList1[c].name;
        this.tdetail =
          this.unitJson[this.unitIndex].chapterInfo[i].fileList1[c].content;
      }
    },
    isAddPP() {
      if (this.checkboxList.length > 0) {
        this.$message({
          message: "添加成功",
          type: "success",
        });
        this.dialogVisible3 = false;
      } else {
        this.$message({
          message: "请添加项目成员",
          type: "error",
        });
      }
    },
    getTemplate() {
      this.ajax
        .get(this.$store.state.api + "getTemplateT", "")
        .then((res) => {
          this.templateArray = res.data[0];
        })
        .catch((err) => {});
    },
    checkTemplate(res) {
      this.templateC = res;
      this.cTemplate = res.content;
    },
    wordNext() {
      this.cTemplate = this.templateC.content;
      this.steps++;
      this.dialogVisible2 = false;
    },
    addPP() {
      this.dialogVisible3 = true;
    },
  },
  created() {
    this.getStudent();
    this.getTemplate();
  },
};
</script>

<style scoped>
.dialog_diy >>> .el-dialog__header {
  background: #3d67bc !important;
  padding: 15px 20px;
}
.dialog_diy >>> .el-dialog__title {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn {
  top: 19px;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
.dialog_diy >>> .el-dialog__headerbtn .el-dialog__close:hover {
  color: #fff;
}
.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%;
  margin: 20px 20px 20px 20px;
}

.pb_content_body {
  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: 100%;
  overflow: auto;
}

.basic_box {
  width: 80%;
  margin: 30px 0 0 60px;
  position: relative;
}
.basic_box_success {
  width: 80%;
  min-height: 455px;
  margin: 50px auto;
  position: relative;
  text-align: center;
  border-bottom: 1px solid #bfbfbf;
}
.info_title {
  font-size: 1.5em;
  margin: 20px 30px 20px 30px;
}

.bInfo_title {
  font-size: 16px;
  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;
  resize: none;
}

.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: 85%;
  margin: 0 auto;
  border-top: 1px solid #cecece;
  margin-top: 20px;
}

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

.info_btn,
.teacherWord {
  color: #fff;
  background-color: #6a8ed5;
  padding: 8px 24px;
  font-size: 0.9375rem;
  box-shadow: 0px 1px 3px 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;
}
.teacherWord {
  width: 105px !important;
  text-align: center !important;
  line-height: 36px !important;
  padding: 0 !important;
  font-size: 14px !important;
  margin: 10px 0 !important;
}
.wordTeacher {
  display: flex;
  flex-direction: column;
  width: 20%;
  text-align: center;
  font-size: 14px;
  margin: 30px 30px 0 10px;
  background: #fff;
  position: relative;
  border-radius: 5px;
  padding: 25px 0px;
}
.wordPic {
  margin: 0 auto;
  width: 60px;
  height: 60px;
  cursor: pointer;
}
.deleteWord {
  width: 22px;
  height: 22px;
  position: absolute;
  right: 20px;
  top: -10px;
  cursor: pointer;
}
.wordPic > img,
.deleteWord > img {
  width: 100%;
  height: 100%;
}
.info_btn:hover {
  background-color: #4f7cd5 !important;
}

.cru_selectBox {
  display: flex;
  margin: 30px 0 10px;
  flex-wrap: nowrap;
  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_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;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 4px;
  box-sizing: border-box;
  background: #fff;
}

.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%;
  padding: 0px 15px;
  border-radius: 8px;
  font-size: 16px;
  box-sizing: border-box;
  position: relative;
  padding: 0 10px 5px 10px;
  height: 185px;
  overflow-y: auto;
  overflow-x: hidden;
}

.homework_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 15px 0 0 0;
}

.course_homework {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  margin: 0 10px 0 0;
}
.course_homework >>> .el-input__inner {
  width: 140px;
  margin-left: 15px;
}

.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_l_i {
  background-image: url("../../assets/icon.png");
  background-position: 3px -165px;
  width: 30px;
  height: 30px;
  margin: 10px auto 0 auto;
}

.big_box {
  display: flex;
}

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

.right_first {
  margin-left: 60px;
}
.people {
  border: 1px solid rgb(229 229 229);
  height: 495px;
  border-radius: 5px;
  width: 100%;
  overflow: auto;
}
.people_top {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.people_nav,
.people_top_right {
  padding: 20px 0 0 20px;
}
.people_search {
  display: flex;
  position: relative;
}
.people_search >>> .el-input__inner {
  height: 25px;
  width: 95%;
}
.search_img {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 15px;
  top: 3px;
}
.search_img > img {
  width: 100%;
  height: 100%;
}
.people_name {
  display: flex;
  justify-content: flex-start;
  padding: 20px 0 0 25px;
  flex-direction: column;
  flex-wrap: wrap;
}
.people_name >>> .el-checkbox {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.people_name >>> .el-checkbox__label {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
}
.right_img {
  width: 150px;
  height: 150px;
  margin: 0 auto;
}
.right_img > img {
  width: 100%;
  height: 100%;
}
.number {
  margin-top: 20px;
  color: #4aa6ff;
  text-decoration: underline;
}
.success_button {
  display: flex;
  text-align: center;
  margin: 5% 0 auto;
  flex-direction: row;
  justify-content: center;
}
.look_course {
  margin-right: 40px;
  background: #3d67bc;
  width: 200px;
  height: 35px;
  line-height: 35px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
}
.attend_others {
  width: 250px;
  background: #4fb13c;
  height: 35px;
  line-height: 35px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
}
.dialog_diy2 >>> .el-dialog__body {
  text-align: center;
}
.write_togother {
  position: absolute;
  right: 45px;
  display: flex;
  top: 5%;
}
.write_people {
  font-size: 14px;
  line-height: 50px;
  padding-right: 10px;
}
.end_write {
  background: #3d67bc;
  color: #fff;
  width: 100px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
}
.chapter_upload {
  height: 50px;
  margin-top: 8px;
  position: relative;
}
.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_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/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/icon.png");
  background-position: -39px -163px;
  margin: 10px auto 0 auto;
}
.chapter_upload_n {
  height: 20px;
  line-height: 20px;
  text-indent: 10px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  width: 100%;
  top: 40%;
  left: 5%;
}
.chapter_upload_l_i1 {
  background-image: url("../../assets/icon/video.png");
  width: 28px;
  height: 28px;
  margin: 10px auto 0 auto;
  background-size: 100% 100%;
}
.chapter_upload_l_i5 {
  background-image: url("../../assets/icon/word.png");
  width: 24px;
  height: 24px;
  margin: 10px auto 0 auto;
  background-size: 100% 100%;
}
.chapter_upload_ud {
  display: flex;
  flex-direction: column;
  margin-left: 5px;
}
.chapter_upload_up {
  background-image: url("../../assets/icon/up.png");
  width: 17px;
  height: 15px;
  background-size: 100% 100%;
  cursor: pointer;
}

.chapter_upload_down {
  background-image: url("../../assets/icon/down.png");
  width: 17px;
  height: 15px;
  margin: 2px auto 0 auto;
  background-size: 100% 100%;
  cursor: pointer;
}
.addWordStyle {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  overflow-x: auto;
  white-space: nowrap;
  flex-wrap: wrap;
}
/* table 样式 */
.cont >>> table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.cont >>> table td,
.cont >>> table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
}
.cont >>> table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}
/* blockquote 样式 */
.cont >>> blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}
/* code 样式 */
.cont >>> code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}
.cont >>> pre code {
  display: block;
}
/* ul ol 样式 */
.cont >>> ul,
ol {
  margin: 10px 0 10px 20px;
}

.wordbox {
  display: flex;
  flex-wrap: wrap;
  cursor: pointer;
  width: 100%;
}

.checkword {
  width: 22px;
  height: 22px;
  margin: 10px auto 0;
  cursor: pointer;
}

.checkword img {
  width: 100%;
}

.stepBg {
  margin: 0 25px 0 25px;
  width: 17%;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
}

.stepBg > div {
  height: 12%;
  width: 85%;
  cursor: pointer;
  margin: 10px 0;
  border-radius: 10px;
}

.first,
.second,
.third,
.four {
  background: #4a83d0;
  height: 90px;
  color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.first > div:nth-child(1),
.second > div:nth-child(1),
.third > div:nth-child(1),
.four > div:nth-child(1) {
  margin: 5px 10px 0 0;
  width: 2rem;
}

.firstNo,
.secondNo,
.thirdNo,
.fourNo {
  background: #e7e7e7;
  height: 90px;
  color: #adadad;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.firstNo > div:nth-child(1),
.secondNo > div:nth-child(1),
.thirdNo > div:nth-child(1),
.fourNo > div:nth-child(1) {
  margin: 5px 10px 0 0;
  width: 2rem;
}

.uploadWidth >>> .el-upload {
  width: 60px;
  height: 60px;
  position: relative;
}

.addPeople {
  background: #fa6060;
  width: 135px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  line-height: 40px;
  font-size: 15px;
  cursor: pointer;
}

.kcImg {
  width: 60px;
  margin-left: 10px;
}

.zyImg {
  width: 55px;
  margin: 0 10px;
}

.deleteZy {
  width: 20px;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.kcImg > img,
.zyImg > img,
.deleteZy > img {
  width: 100%;
  height: 100%;
}

.zyBox {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #67d37d;
  color: #fff;
  width: 210px;
  margin-left: 20px;
  border-radius: 10px;
  height: 70px;
  position: relative;
}

.upCss {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.upCss >>> .el-upload {
  margin-right: 30px;
}

.upCss >>> .el-icon-plus {
  position: none !important;
  width: 100px;
  height: 100px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed #ccc;
  min-width: 78px;
  min-height: 100px;
  z-index: 999;
}

.addStageImg {
  width: 30px;
  height: 30px;
  cursor: pointer;
  margin-top: 20px;
}

.addHW {
  width: 70px;
  height: 70px;
  cursor: pointer;
}

.addStageImg > img,
.addHW > img {
  width: 100%;
  height: 100%;
}

.addNewPP >>> .el-dialog__body {
  padding: 5px 20px;
}

.isHeight {
  height: 680px;
}

.customWidth >>> .el-dialog{
  min-width:500px !important;
}
</style>