src/components/pages/addCourse.vue

@@ -39,19 +39,34 @@
           </div>
           <div
             v-if="steps == 1"
-            style="font-size: 25px; color: #dedede; font-weight: bold;margin-top: 12px;"
+            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;"
+            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;"
+            style="
+              font-size: 25px;
+              color: #dedede;
+              font-weight: bold;
+              margin-top: 12px;
+            "
           >
             第三步
           </div>
@@ -110,7 +125,11 @@
                       <span style="color: red">*</span>项目名称
                     </div>
                     <div style="display: flex">
-                      <img src="../../assets/icon/projectName.png" alt="" style="margin-right: 5px;" />
+                      <img
+                        src="../../assets/icon/projectName.png"
+                        alt=""
+                        style="margin-right: 5px"
+                      />
                       <input
                         type="text"
                         placeholder="请输入项目名称"
@@ -251,99 +270,15 @@
           </div>
           <div
             style="
+              border: 3px solid #9ec6fb;
               width: 65%;
               margin: 10px;
-              background: #f1f1f1;
-              border-radius: 10px;
+              border-radius: 5px;
               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 class="basic_box" style="margin: 0px 0 0 30px">
               <div
                 style="display: flex; flex-direction: row; align-items: center"
               >
@@ -391,28 +326,6 @@
                       @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="是否开启评价"
@@ -420,32 +333,156 @@
                   >
                   </el-switch>
                 </div>
-                <div class="line"></div>
                 <div
-                  class="basic_box"
-                  style="margin: 45px 0 0 15px; min-height: 0"
+                  style="
+                    display: flex;
+                    margin: 15px 0;
+                    flex-direction: row;
+                    justify-content: flex-start;
+                    align-items: center;
+                  "
                 >
-                  <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)"
+                  <div
+                    style="
+                      font-size: 1.5em;
+                      font-weight: bold;
+                      margin-top: 15px;
+                    "
+                  >
+                    添加工具
+                  </div>
+                  <div class="line"></div>
+                </div>
+                <div class="toolChoose">
+                  <div class="tool">
+                    <div class="whiteBIcon" @click="toolChoose = 1">
+                      <img src="../../assets/icon/whiteBordIcon.png" alt="" />
+                    </div>
+                    <div class="check" @click="toolChoose = 1">
+                      <img
+                        src="../../assets/icon/checkNo.png"
+                        alt=""
+                        v-if="toolChoose != 1"
                       />
-                    </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)"
+                      <img
+                        src="../../assets/icon/checkedIs.png"
+                        alt=""
+                        v-else
                       />
-                    </button>
+                    </div>
+                  </div>
+                  <div class="tool">
+                    <div class="whiteBIcon" @click="toolChoose = 2">
+                      <img src="../../assets/icon/noteIcon.png" alt="" />
+                    </div>
+                    <div class="check" @click="toolChoose = 2">
+                      <img
+                        src="../../assets/icon/checkNo.png"
+                        alt=""
+                        v-if="toolChoose != 2"
+                      />
+                      <img
+                        src="../../assets/icon/checkedIs.png"
+                        alt=""
+                        v-else
+                      />
+                    </div>
+                  </div>
+                  <div class="tool">
+                    <div class="whiteBIcon" @click="toolChoose = 3">
+                      <img src="../../assets/icon/mindIcon.png" alt="" />
+                    </div>
+                    <div class="check" @click="toolChoose = 3">
+                      <img
+                        src="../../assets/icon/checkNo.png"
+                        alt=""
+                        v-if="toolChoose != 3"
+                      />
+                      <img
+                        src="../../assets/icon/checkedIs.png"
+                        alt=""
+                        v-else
+                      />
+                    </div>
+                  </div>
+                  <div class="tool">
+                    <div class="whiteBIcon" @click="toolChoose = 4">
+                      <img src="../../assets/icon/askIcon.png" alt="" />
+                    </div>
+                    <div class="check" @click="toolChoose = 4">
+                      <img
+                        src="../../assets/icon/checkNo.png"
+                        alt=""
+                        v-if="toolChoose != 4"
+                      />
+                      <img
+                        src="../../assets/icon/checkedIs.png"
+                        alt=""
+                        v-else
+                      />
+                    </div>
+                  </div>
+                  <div class="tool">
+                    <div class="whiteBIcon" @click="toolChoose = 5">
+                      <img src="../../assets/icon/scoreIcon.png" alt="" />
+                    </div>
+                    <div class="check" @click="toolChoose = 5">
+                      <img
+                        src="../../assets/icon/checkNo.png"
+                        alt=""
+                        v-if="toolChoose != 5"
+                      />
+                      <img
+                        src="../../assets/icon/checkedIs.png"
+                        alt=""
+                        v-else
+                      />
+                    </div>
+                  </div>
+                  <div class="tool">
+                    <div class="whiteBIcon" @click="toolChoose = 6">
+                      <img src="../../assets/icon/wordIcon.png" alt="" />
+                    </div>
+                    <div class="check" @click="toolChoose = 6">
+                      <img
+                        src="../../assets/icon/checkNo.png"
+                        alt=""
+                        v-if="toolChoose != 6"
+                      />
+                      <img
+                        src="../../assets/icon/checkedIs.png"
+                        alt=""
+                        v-else
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="basic_box"
+                  style="margin: 45px 0 0 15px; min-height: 0"
+                >
+                  <div
+                    style="
+                      display: flex;
+                      margin: 15px 0;
+                      flex-direction: row;
+                      justify-content: flex-start;
+                      align-items: center;
+                    "
+                  >
+                    <div
+                      style="
+                        font-size: 1.5em;
+                        font-weight: bold;
+                        margin-top: 15px;
+                      "
+                    >
+                      附件添加
+                    </div>
+                    <div class="line"></div>
                   </div>
+                  <!-- <h3 class="info_title" style="margin: 0"></h3> -->
+
                   <div>
                     <div
                       class="add_chapters_box"
@@ -573,13 +610,51 @@
                       </div>
                     </div>
                   </div>
+                  <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="line"></div>
                 <div
                   class="basic_box"
                   style="margin: 45px 0 0 15px; min-height: 0"
                 >
-                  <h3 class="info_title" style="margin: 0">作业设置</h3>
+                  <div
+                    style="
+                      display: flex;
+                      margin: 15px 0;
+                      flex-direction: row;
+                      justify-content: flex-start;
+                      align-items: center;
+                    "
+                  >
+                    <div
+                      style="
+                        font-size: 1.5em;
+                        font-weight: bold;
+                        margin-top: 15px;
+                      "
+                    >
+                      作业设置
+                    </div>
+                    <div class="line"></div>
+                  </div>
                   <div class="homework_box">
                     <div style="display: flex; justify-content: flex-start">
                       <div class="addHW" @click="addHw($event)">
@@ -617,6 +692,28 @@
                       </div>
                     </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>
                 </div>
               </div>
             </div>
@@ -732,7 +829,7 @@
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible2 = false">取 消</el-button>
-        <el-button type="primary" @click="wordNext()">保存，下一步</el-button>
+        <el-button type="primary" @click="wordNext()">确定</el-button>
       </span>
     </el-dialog>
     <el-dialog
@@ -788,6 +885,7 @@ export default {
       checkedCities: [],
       isIndeterminate: true,
       steps: 1,
+      toolChoose: 0,
       courseName: "",
       isTeacherSee: false,
       courseText: "",
@@ -927,6 +1025,8 @@ export default {
           this.checkboxList.length != 0 &&
           this.templateC.id != undefined
         ) {
+          this.cTemplate = this.templateC.content;
+          this.dialogVisible2 = false;
           this.steps = 3;
         } else {
           this.$message.error("请将信息填写完整");
@@ -950,7 +1050,9 @@ export default {
           this.$message.error("请选择文档");
           return;
         }
-        this.dialogVisible2 = true;
+        this.cTemplate = this.templateC.content;
+        this.dialogVisible2 = false;
+        this.steps++;
       } else if (this.steps == 3) {
         this.addWork();
         this.steps++;
@@ -1387,10 +1489,11 @@ export default {
     checkTemplate(res) {
       this.templateC = res;
       this.cTemplate = res.content;
+      this.dialogVisible2 = true;
     },
     wordNext() {
-      this.cTemplate = this.templateC.content;
-      this.steps++;
+      //   this.cTemplate = this.templateC.content;
+      //   this.steps++;
       this.dialogVisible2 = false;
     },
     addPP() {
@@ -1489,8 +1592,8 @@ export default {
 }
 
 .basic_box {
-  width: 80%;
-  margin: 30px 0 0 60px;
+  width: 90%;
+  margin: 0 auto;
   position: relative;
 }
 .basic_box_success {
@@ -1671,7 +1774,7 @@ export default {
 
 .cru_selectBox {
   display: flex;
-  margin: 30px 0 10px;
+  margin: 15px 0 10px;
   flex-wrap: nowrap;
   white-space: nowrap;
   overflow: auto;
@@ -1775,7 +1878,7 @@ export default {
 
 .time {
   display: flex;
-  margin-top: 35px;
+  margin: 35px 0 80px 0;
 }
 
 .chapter_btnbox {
@@ -1850,7 +1953,7 @@ export default {
   background-color: rgb(242, 242, 242);
   width: 100%;
   padding: 0px 15px;
-  border-radius: 8px;
+  border-radius: 15px;
   font-size: 16px;
   box-sizing: border-box;
   position: relative;
@@ -2045,12 +2148,12 @@ export default {
   position: relative;
 }
 .chapter_upload_t {
-  background-color: #e3f3ff;
+  background-color: #fff;
   position: absolute;
-  width: 0%;
   height: 100%;
   top: 0px;
   left: 0px;
+  border-radius: 40px;
 }
 .chapter_upload_o {
   width: 100%;
@@ -2102,9 +2205,10 @@ export default {
   white-space: nowrap;
   overflow: hidden;
   position: absolute;
-  width: 100%;
+  width: 55%;
   top: 40%;
   left: 5%;
+  margin-left: 20px;
 }
 .chapter_upload_l_i1 {
   background-image: url("../../assets/icon/video.png");
@@ -2114,7 +2218,7 @@ export default {
   background-size: 100% 100%;
 }
 .chapter_upload_l_i5 {
-  background-image: url("../../assets/icon/word.png");
+  background-image: url(/static/img/word.76356c6.png);
   width: 24px;
   height: 24px;
   margin: 10px auto 0 auto;
@@ -2379,8 +2483,32 @@ ol {
 .isHeight {
   height: 680px;
 }
-
-.customWidth >>> .el-dialog{
-  min-width:500px !important;
+.toolChoose {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.tool {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  width: 20%;
+  margin: 0 20px;
+  align-items: center;
+}
+.whiteBIcon {
+  width: 150px;
+  cursor: pointer;
+}
+.whiteBIcon > img,
+.check > img {
+  width: 100%;
+  height: 100%;
+}
+.check {
+  width: 25px;
+  cursor: pointer;
+  margin: 10px 0;
 }
 </style>