RACE

src/components/pages/race/addRace/projectEffect.vue

@@ -1,15 +1,677 @@
 <template>
-  <div>
-    项目成效与反思
+  <!-- 项目成效与反思 -->
+  <div class="pb_content">
+    <div class="pb_content_body" style="position: relative; margin: 0">
+      <div class="raceBox">
+        <div class="stepBg">
+          <div class="steps">
+            <div class="stepLeft" :class="steps == 0 ? 'isSteps' : ''">1</div>
+            <div class="stepRightNav">
+              <div>项目成效</div>
+            </div>
+            <div class="line" :class="steps == 0 ? 'isLine' : ''"></div>
+          </div>
+          <div class="steps">
+            <div class="stepLeft" :class="steps == 1 ? 'isSteps' : ''">2</div>
+            <div class="stepRightNav">
+              <div>项目反思</div>
+            </div>
+            <!-- <div class="line" :class="steps == 1 ? 'isLine' : ''"></div> -->
+          </div>
+        </div>
+        <div class="right">
+          <div class="raceTop allBox">
+            <div class="titleTop">
+              <div>项目成效</div>
+              <div><el-input></el-input></div>
+            </div>
+            <div class="editorCss">
+              <editor-bar v-model="driQuestion" @change="change"></editor-bar>
+            </div>
+            <div>
+              <div class="basic_box">
+                <div>
+                  <div
+                    class="add_chapters_box"
+                    v-if="chapterData && 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 chapterData"
+                      :key="item1.id"
+                      @click="
+                        getChapterData(
+                          $event,
+                          unitIndex,
+                          index,
+                          index1,
+                          item1.type
+                        )
+                      "
+                    >
+                      <div class="chapter_upload_t"></div>
+                      <div class="chapter_upload_o">
+                        <div class="chapter_upload_l">
+                          <div
+                            v-if="item1.type == 2"
+                            class="chapter_upload_l_i1"
+                          ></div>
+                          <div
+                            v-if="
+                              item1.type == 3 ||
+                              item1.type == 6 ||
+                              item1.type == 7
+                            "
+                            class="chapter_upload_l_i5"
+                          ></div>
+                          <div
+                            v-if="item1.type == 8"
+                            class="chapter_upload_l_i8"
+                          ></div>
+                        </div>
+                        <div class="chapter_upload_ic">
+                          <div class="chapter_upload_ic_l"></div>
+                          <div class="chapter_upload_ic_r">
+                            <!-- @click.stop="
+                              deleteChapterData(
+                                $event,
+                                unitIndex,
+                                index,
+                                index1,
+                                itemTaskIndex
+                              )
+                            " -->
+                            <div></div>
+                          </div>
+                        </div>
+                        <div class="chapter_upload_n">
+                          <input
+                            class="first"
+                            v-if="
+                              item1.type == 2 ||
+                              item1.type == 3 ||
+                              item1.type == 7
+                            "
+                            :placeholder="item1.name"
+                          />
+                          <!-- @change="
+                              updataVideoT(
+                                $event,
+                                unitIndex,
+                                chapterIndex,
+                                index1
+                              )
+                            " -->
+                          <input
+                            class="first"
+                            :placeholder="item1.name"
+                            v-if="item1.type == 6"
+                            readonly="true"
+                          />
+                          <!-- @click="selectAttText(itemTaskIndex, index1)" -->
+                          <input
+                            class="first"
+                            :placeholder="item1.name"
+                            v-if="item1.type == 8"
+                            readonly="true"
+                          />
+                          <!-- @click="selectLine(itemTaskIndex, index1)" -->
+                          <div class="chapter_upload_ud">
+                            <div class="chapter_upload_up"></div>
+                            <!-- @click="upCd($event, unitIndex, index, index1)" -->
+                            <div class="chapter_upload_down"></div>
+                            <!-- @click="downCd($event, unitIndex, index, index1)" -->
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="add_info_box">
+                  <button class="info_btn" @click="addImg($event)">
+                    添加教学附件
+                    <input
+                      type="file"
+                      accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+                      style="display: none"
+                    />
+                    <!-- @change="
+                            beforeUpload2($event, unitIndex, 3, itemTaskIndex)
+                          " -->
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="raceTop allBox">
+            <div class="titleTop">
+              <div>项目反思</div>
+              <div><el-input></el-input></div>
+            </div>
+            <div class="editorCss">
+              <editor-bar v-model="driQuestion" @change="change"></editor-bar>
+            </div>
+            <div>
+              <div class="basic_box">
+                <div>
+                  <div
+                    class="add_chapters_box"
+                    v-if="chapterData && 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 chapterData"
+                      :key="item1.id"
+                      @click="
+                        getChapterData(
+                          $event,
+                          unitIndex,
+                          index,
+                          index1,
+                          item1.type
+                        )
+                      "
+                    >
+                      <div class="chapter_upload_t"></div>
+                      <div class="chapter_upload_o">
+                        <div class="chapter_upload_l">
+                          <div
+                            v-if="item1.type == 2"
+                            class="chapter_upload_l_i1"
+                          ></div>
+                          <div
+                            v-if="
+                              item1.type == 3 ||
+                              item1.type == 6 ||
+                              item1.type == 7
+                            "
+                            class="chapter_upload_l_i5"
+                          ></div>
+                          <div
+                            v-if="item1.type == 8"
+                            class="chapter_upload_l_i8"
+                          ></div>
+                        </div>
+                        <div class="chapter_upload_ic">
+                          <div class="chapter_upload_ic_l"></div>
+                          <div class="chapter_upload_ic_r">
+                            <!-- @click.stop="
+                              deleteChapterData(
+                                $event,
+                                unitIndex,
+                                index,
+                                index1,
+                                itemTaskIndex
+                              )
+                            " -->
+                            <div></div>
+                          </div>
+                        </div>
+                        <div class="chapter_upload_n">
+                          <input
+                            class="first"
+                            v-if="
+                              item1.type == 2 ||
+                              item1.type == 3 ||
+                              item1.type == 7
+                            "
+                            :placeholder="item1.name"
+                          />
+                          <!-- @change="
+                              updataVideoT(
+                                $event,
+                                unitIndex,
+                                chapterIndex,
+                                index1
+                              )
+                            " -->
+                          <input
+                            class="first"
+                            :placeholder="item1.name"
+                            v-if="item1.type == 6"
+                            readonly="true"
+                          />
+                          <!-- @click="selectAttText(itemTaskIndex, index1)" -->
+                          <input
+                            class="first"
+                            :placeholder="item1.name"
+                            v-if="item1.type == 8"
+                            readonly="true"
+                          />
+                          <!-- @click="selectLine(itemTaskIndex, index1)" -->
+                          <div class="chapter_upload_ud">
+                            <div class="chapter_upload_up"></div>
+                            <!-- @click="upCd($event, unitIndex, index, index1)" -->
+                            <div class="chapter_upload_down"></div>
+                            <!-- @click="downCd($event, unitIndex, index, index1)" -->
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="add_info_box">
+                  <button class="info_btn" @click="addImg($event)">
+                    添加教学附件
+                    <input
+                      type="file"
+                      accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+                      style="display: none"
+                    />
+                    <!-- @change="
+                            beforeUpload2($event, unitIndex, 3, itemTaskIndex)
+                          " -->
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="dialogVisible == true" class="createSuccessCss">
+      <div class="createBox">
+        <div class="success">
+          <img src="../../../../assets/icon/success.png" alt="" />
+        </div>
+        <div class="cresteMessage">
+          案例征集必填内容已完成，请在
+          <span>"赛事管理 > 我的案例"中查看。</span> 你可以点击
+          <span>"平台实施填报入口"</span> ，提交选填内容。<span
+            style="color: #9a9a9a"
+            >（填报后可以运用平台进行教学，调用平台工具，收集过程性数据并生成数据报告。）</span
+          >
+        </div>
+      </div>
+      <div class="createButton">平台实施填报入口</div>
+    </div>
   </div>
 </template>
 
 <script>
+import EditorBar from "../../../tools/wangEnduit";
 export default {
+  components: { EditorBar },
+  data() {
+    return {
+      steps: 0,
+      driQuestion: "",
+      chapterData: [],
+      dialogVisible: false,
+    };
+  },
+  methods: {
+    handleClose(done) {
+      done();
+    },
+    change(val) {
+      console.log(val);
+    },
+    addImg(e) {
+      var el = e.currentTarget;
+      el.getElementsByTagName("input")[0].click();
+    },
+    getChapterData(e, i, j, ic, type) {
+      e.stopPropagation();
+      if ((type == 2 || type == 3) && e.target.tagName !== "INPUT") {
+        console.log("还不能下载图片喔");
+      }
+    },
+  },
+  created() {},
+};
+</script>
 
+<style scoped>
+.raceBox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+}
+.stepBg {
+  margin: 0 25px 0 0;
+  width: 20%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+  background: #fff;
+  min-height: 800px;
+  height: 100%;
+  border: 1px solid #c2c2c2;
+  border-radius: 15px;
+}
+.steps {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  margin: 35px 20px 20px 20px;
+  position: relative;
+  align-items: center;
+}
+.stepLeft,
+.isSteps {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 30px;
+  border: 2px solid #eee;
+  color: #c0c0c0;
+}
+.isSteps {
+  background: #1990ff;
+  color: #fff;
+  border: none;
+}
+.stepRightNav {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-left: 10px;
+}
+.line,
+.isLine {
+  position: absolute;
+  width: 5px;
+  height: 50px;
+  border-left: 1px solid #dadada;
+  top: 38px;
+  left: 15px;
+}
+.isLine {
+  border-left: 1px solid #1d92ff !important;
+}
+.right {
+  width: calc(100% - 20%);
+  background: rgb(255, 255, 255);
+  border-radius: 10px;
+  overflow: auto;
+  height: 100%;
+  border: 1px solid #c2c2c2;
+  border-radius: 15px;
+  max-height: 800px;
+}
+.allBox {
+  padding: 25px;
+}
+.allBox > div:nth-child(1) {
+  color: #0f40f5;
+  font-size: 18px;
+  font-weight: bold;
+}
+.raceTop > div:nth-child(2) {
+  width: 80%;
+  margin-top: 10px;
+}
+.titleTop {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  width: 100%;
+}
+.titleTop > div:nth-child(2) {
+  width: 82%;
+  margin-left: 20px;
+}
+.editorCss {
+  width: 90% !important;
+}
+.basic_box {
+  position: relative;
+  margin: 0;
+  min-height: 0;
+  width: 90%;
+}
+.add_info_box {
+  margin: 20px 0;
+}
+
+.add_info_box button {
+  margin: 0 10px 10px 0;
+}
+
+.add_chapters_box {
+  text-align: left;
+  background-color: rgb(232 234 237);
+  width: 100%;
+  padding: 0px 15px;
+  border-radius: 15px;
+  font-size: 16px;
+  box-sizing: border-box;
+  position: relative;
+  padding: 0 10px 5px 10px;
+  height: 185px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.chapter_upload {
+  height: 50px;
+  margin-top: 12px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 50px;
+}
+
+.chapter_upload_t {
+  background-color: #fff;
+  position: absolute;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+  border-radius: 40px;
+  box-sizing: border-box;
+  box-shadow: 0 0 3px 3px #dfdfdf;
+  width: 100%;
+}
+
+.chapter_upload_o {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+}
+
+.chapter_upload_ic {
+  height: 30px;
+  float: right;
+  cursor: pointer;
+  position: absolute;
+  width: 45px;
+  right: 0;
+  top: 0;
+}
+
+.chapter_upload_ic_l {
+  width: 50px;
+  height: 50px;
+  float: left;
+}
+
+.chapter_upload_ic_l div {
+  width: 30px;
+  height: 35px;
+  background: url("../../../../assets/icon/icon.png");
+}
+
+.chapter_upload_ic_r {
+  width: 50px;
+  height: 50px;
+  float: left;
+  margin-left: 0px;
+  display: flex;
+  align-items: center;
+  position: absolute;
+}
+
+.chapter_upload_ic_r div {
+  width: 25px;
+  height: 25px;
+  background-image: url("../../../../assets/delete.png");
+  background-size: 100% 100%;
+}
+
+.chapter_upload_n {
+  display: flex;
+  text-indent: 10px;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 55%;
+  margin-left: 10px;
+  cursor: pointer;
+  margin-top: 2px;
+}
+
+.chapter_upload_l_i1 {
+  background-image: url("../../../../assets/icon/video.png");
+  width: 28px;
+  height: 28px;
+  background-size: 100% 100%;
+}
+
+.chapter_upload_l_i5 {
+  background-image: url("../../../../assets/icon/word.png");
+  width: 24px;
+  height: 24px;
+  background-size: 100% 100%;
+  margin-left: 1px;
+}
+
+.chapter_upload_l_i8 {
+  background-image: url("../../../../assets/icon/line.png");
+  width: 24px;
+  height: 24px;
+  background-size: 100% 100%;
+  margin-left: 1px;
 }
-</script>
 
-<style>
+.chapter_upload_ud {
+  display: flex;
+  flex-direction: column;
+  margin-left: 5px;
+  justify-content: center;
+  z-index: 99;
+}
+
+.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;
+}
+.chapter_upload_l {
+  padding: 1px 0 0 10px;
+}
+.first {
+  border: none;
+  outline: none;
+  width: 80%;
+  min-width: 215px;
+  z-index: 99;
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.info_btn {
+  color: #fff;
+  background-color: #0f7eff;
+  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;
+}
+.info_btn:hover {
+  background-color: #4f7cd5 !important;
+}
+.createSuccessCss {
+  position: fixed;
+  right: 30%;
+  top: 50%;
+  width: 717px;
+  height: 346px;
+  z-index: 999;
+  background: #fff;
+  border-radius: 30px;
+  overflow: hidden;
+  transform: translateY(-50%);
+  box-shadow: 0px 0 8px 0px #c5c5c5;
+}
+.createBox {
+  padding: 53px 53px 0 50px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+}
+.success {
+  width: 68px;
+  height: 68px;
+}
+.success > img {
+  width: 100%;
+  height: 100%;
+}
+.cresteMessage {
+  width: 500px;
+  margin-left: 22px;
+  line-height: 50px;
+}
+.cresteMessage > span {
+  color: #0f40f5;
+}
+.createButton {
+  width: 163px;
+  height: 35px;
+  text-align: center;
+  line-height: 35px;
+  background: #0f40f5 100%;
+  color: #fff;
+  font-size: 14px;
+  border-radius: 4px;
+  position: absolute;
+  right: 74px;
+  bottom: 19px;
+}
 </style>

src/components/pages/race/addRace/projectProcess.vue

@@ -1,15 +1,886 @@
 <template>
-  <div>
-    项目实施过程 
+  <!-- 项目实施过程 -->
+  <div class="pb_content">
+    <div class="pb_content_body" style="position: relative; margin: 0">
+      <div class="raceBox">
+        <div class="stepBg">
+          <div class="steps">
+            <div class="stepLeft" :class="steps == 0 ? 'isSteps' : ''">1</div>
+            <div class="stepRightNav">
+              <div>活动1</div>
+            </div>
+            <div class="line" :class="steps == 0 ? 'isLine' : ''"></div>
+          </div>
+          <div class="steps">
+            <div class="stepLeft" :class="steps == 1 ? 'isSteps' : ''">2</div>
+            <div class="stepRightNav">
+              <div>活动2</div>
+            </div>
+            <div class="line" :class="steps == 1 ? 'isLine' : ''"></div>
+          </div>
+          <div class="steps">
+            <div class="stepLeft" :class="steps == 2 ? 'isSteps' : ''">3</div>
+            <div class="stepRightNav">
+              <div>活动3</div>
+            </div>
+            <div class="line" :class="steps == 2 ? 'isLine' : ''"></div>
+          </div>
+          <div class="steps">
+            <div class="stepLeft" :class="steps == 3 ? 'isSteps' : ''">4</div>
+            <div class="stepRightNav">
+              <div>活动4</div>
+            </div>
+            <!-- <div class="line" :class="steps == 3 ? 'isLine' : ''"></div> -->
+          </div>
+        </div>
+        <div class="right">
+          <div class="raceTop allBox">
+            <div class="titleTop">
+              <div>活动一</div>
+              <div style="width: 20%"><el-input></el-input></div>
+            </div>
+          </div>
+          <div class="raceTop allBox">
+            <div class="titleTop">
+              <div>活动实施</div>
+              <div><el-input></el-input></div>
+            </div>
+            <div class="editorCss">
+              <editor-bar v-model="driQuestion" @change="change"></editor-bar>
+            </div>
+            <div>
+              <div class="basic_box">
+                <div>
+                  <div
+                    class="add_chapters_box"
+                    v-if="chapterData && 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 chapterData"
+                      :key="item1.id"
+                      @click="
+                        getChapterData(
+                          $event,
+                          unitIndex,
+                          index,
+                          index1,
+                          item1.type
+                        )
+                      "
+                    >
+                      <div class="chapter_upload_t"></div>
+                      <div class="chapter_upload_o">
+                        <div class="chapter_upload_l">
+                          <div
+                            v-if="item1.type == 2"
+                            class="chapter_upload_l_i1"
+                          ></div>
+                          <div
+                            v-if="
+                              item1.type == 3 ||
+                              item1.type == 6 ||
+                              item1.type == 7
+                            "
+                            class="chapter_upload_l_i5"
+                          ></div>
+                          <div
+                            v-if="item1.type == 8"
+                            class="chapter_upload_l_i8"
+                          ></div>
+                        </div>
+                        <div class="chapter_upload_ic">
+                          <div class="chapter_upload_ic_l"></div>
+                          <div class="chapter_upload_ic_r">
+                            <!-- @click.stop="
+                              deleteChapterData(
+                                $event,
+                                unitIndex,
+                                index,
+                                index1,
+                                itemTaskIndex
+                              )
+                            " -->
+                            <div></div>
+                          </div>
+                        </div>
+                        <div class="chapter_upload_n">
+                          <input
+                            class="first"
+                            v-if="
+                              item1.type == 2 ||
+                              item1.type == 3 ||
+                              item1.type == 7
+                            "
+                            :placeholder="item1.name"
+                          />
+                          <!-- @change="
+                              updataVideoT(
+                                $event,
+                                unitIndex,
+                                chapterIndex,
+                                index1
+                              )
+                            " -->
+                          <input
+                            class="first"
+                            :placeholder="item1.name"
+                            v-if="item1.type == 6"
+                            readonly="true"
+                          />
+                          <!-- @click="selectAttText(itemTaskIndex, index1)" -->
+                          <input
+                            class="first"
+                            :placeholder="item1.name"
+                            v-if="item1.type == 8"
+                            readonly="true"
+                          />
+                          <!-- @click="selectLine(itemTaskIndex, index1)" -->
+                          <div class="chapter_upload_ud">
+                            <div class="chapter_upload_up"></div>
+                            <!-- @click="upCd($event, unitIndex, index, index1)" -->
+                            <div class="chapter_upload_down"></div>
+                            <!-- @click="downCd($event, unitIndex, index, index1)" -->
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="add_info_box">
+                  <button class="info_btn" @click="addImg($event)">
+                    添加教学附件
+                    <input
+                      type="file"
+                      accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+                      style="display: none"
+                    />
+                    <!-- @change="
+                            beforeUpload2($event, unitIndex, 3, itemTaskIndex)
+                          " -->
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="raceTop allBox">
+            <div class="titleTop">
+              <div>活动工具</div>
+              <div><el-input></el-input></div>
+            </div>
+            <div class="editorCss">
+              <editor-bar v-model="driQuestion" @change="change"></editor-bar>
+            </div>
+            <div>
+              <div class="basic_box">
+                <div>
+                  <div
+                    class="add_chapters_box"
+                    v-if="chapterData && 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 chapterData"
+                      :key="item1.id"
+                      @click="
+                        getChapterData(
+                          $event,
+                          unitIndex,
+                          index,
+                          index1,
+                          item1.type
+                        )
+                      "
+                    >
+                      <div class="chapter_upload_t"></div>
+                      <div class="chapter_upload_o">
+                        <div class="chapter_upload_l">
+                          <div
+                            v-if="item1.type == 2"
+                            class="chapter_upload_l_i1"
+                          ></div>
+                          <div
+                            v-if="
+                              item1.type == 3 ||
+                              item1.type == 6 ||
+                              item1.type == 7
+                            "
+                            class="chapter_upload_l_i5"
+                          ></div>
+                          <div
+                            v-if="item1.type == 8"
+                            class="chapter_upload_l_i8"
+                          ></div>
+                        </div>
+                        <div class="chapter_upload_ic">
+                          <div class="chapter_upload_ic_l"></div>
+                          <div class="chapter_upload_ic_r">
+                            <!-- @click.stop="
+                              deleteChapterData(
+                                $event,
+                                unitIndex,
+                                index,
+                                index1,
+                                itemTaskIndex
+                              )
+                            " -->
+                            <div></div>
+                          </div>
+                        </div>
+                        <div class="chapter_upload_n">
+                          <input
+                            class="first"
+                            v-if="
+                              item1.type == 2 ||
+                              item1.type == 3 ||
+                              item1.type == 7
+                            "
+                            :placeholder="item1.name"
+                          />
+                          <!-- @change="
+                              updataVideoT(
+                                $event,
+                                unitIndex,
+                                chapterIndex,
+                                index1
+                              )
+                            " -->
+                          <input
+                            class="first"
+                            :placeholder="item1.name"
+                            v-if="item1.type == 6"
+                            readonly="true"
+                          />
+                          <!-- @click="selectAttText(itemTaskIndex, index1)" -->
+                          <input
+                            class="first"
+                            :placeholder="item1.name"
+                            v-if="item1.type == 8"
+                            readonly="true"
+                          />
+                          <!-- @click="selectLine(itemTaskIndex, index1)" -->
+                          <div class="chapter_upload_ud">
+                            <div class="chapter_upload_up"></div>
+                            <!-- @click="upCd($event, unitIndex, index, index1)" -->
+                            <div class="chapter_upload_down"></div>
+                            <!-- @click="downCd($event, unitIndex, index, index1)" -->
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="add_info_box">
+                  <button class="info_btn" @click="addImg($event)">
+                    添加教学附件
+                    <input
+                      type="file"
+                      accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+                      style="display: none"
+                    />
+                    <!-- @change="
+                            beforeUpload2($event, unitIndex, 3, itemTaskIndex)
+                          " -->
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="raceTop allBox">
+            <div class="titleTop">
+              <div>活动成果</div>
+              <div><el-input></el-input></div>
+            </div>
+            <div class="editorCss">
+              <editor-bar v-model="driQuestion" @change="change"></editor-bar>
+            </div>
+            <div>
+              <div class="basic_box">
+                <div>
+                  <div
+                    class="add_chapters_box"
+                    v-if="chapterData && 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 chapterData"
+                      :key="item1.id"
+                      @click="
+                        getChapterData(
+                          $event,
+                          unitIndex,
+                          index,
+                          index1,
+                          item1.type
+                        )
+                      "
+                    >
+                      <div class="chapter_upload_t"></div>
+                      <div class="chapter_upload_o">
+                        <div class="chapter_upload_l">
+                          <div
+                            v-if="item1.type == 2"
+                            class="chapter_upload_l_i1"
+                          ></div>
+                          <div
+                            v-if="
+                              item1.type == 3 ||
+                              item1.type == 6 ||
+                              item1.type == 7
+                            "
+                            class="chapter_upload_l_i5"
+                          ></div>
+                          <div
+                            v-if="item1.type == 8"
+                            class="chapter_upload_l_i8"
+                          ></div>
+                        </div>
+                        <div class="chapter_upload_ic">
+                          <div class="chapter_upload_ic_l"></div>
+                          <div class="chapter_upload_ic_r">
+                            <!-- @click.stop="
+                              deleteChapterData(
+                                $event,
+                                unitIndex,
+                                index,
+                                index1,
+                                itemTaskIndex
+                              )
+                            " -->
+                            <div></div>
+                          </div>
+                        </div>
+                        <div class="chapter_upload_n">
+                          <input
+                            class="first"
+                            v-if="
+                              item1.type == 2 ||
+                              item1.type == 3 ||
+                              item1.type == 7
+                            "
+                            :placeholder="item1.name"
+                          />
+                          <!-- @change="
+                              updataVideoT(
+                                $event,
+                                unitIndex,
+                                chapterIndex,
+                                index1
+                              )
+                            " -->
+                          <input
+                            class="first"
+                            :placeholder="item1.name"
+                            v-if="item1.type == 6"
+                            readonly="true"
+                          />
+                          <!-- @click="selectAttText(itemTaskIndex, index1)" -->
+                          <input
+                            class="first"
+                            :placeholder="item1.name"
+                            v-if="item1.type == 8"
+                            readonly="true"
+                          />
+                          <!-- @click="selectLine(itemTaskIndex, index1)" -->
+                          <div class="chapter_upload_ud">
+                            <div class="chapter_upload_up"></div>
+                            <!-- @click="upCd($event, unitIndex, index, index1)" -->
+                            <div class="chapter_upload_down"></div>
+                            <!-- @click="downCd($event, unitIndex, index, index1)" -->
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="add_info_box">
+                  <button class="info_btn" @click="addImg($event)">
+                    添加教学附件
+                    <input
+                      type="file"
+                      accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+                      style="display: none"
+                    />
+                    <!-- @change="
+                            beforeUpload2($event, unitIndex, 3, itemTaskIndex)
+                          " -->
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="raceTop allBox">
+            <div class="titleTop">
+              <div>活动评价</div>
+              <div><el-input></el-input></div>
+            </div>
+            <div class="editorCss">
+              <editor-bar v-model="driQuestion" @change="change"></editor-bar>
+            </div>
+            <div>
+              <div class="basic_box">
+                <div>
+                  <div
+                    class="add_chapters_box"
+                    v-if="chapterData && 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 chapterData"
+                      :key="item1.id"
+                      @click="
+                        getChapterData(
+                          $event,
+                          unitIndex,
+                          index,
+                          index1,
+                          item1.type
+                        )
+                      "
+                    >
+                      <div class="chapter_upload_t"></div>
+                      <div class="chapter_upload_o">
+                        <div class="chapter_upload_l">
+                          <div
+                            v-if="item1.type == 2"
+                            class="chapter_upload_l_i1"
+                          ></div>
+                          <div
+                            v-if="
+                              item1.type == 3 ||
+                              item1.type == 6 ||
+                              item1.type == 7
+                            "
+                            class="chapter_upload_l_i5"
+                          ></div>
+                          <div
+                            v-if="item1.type == 8"
+                            class="chapter_upload_l_i8"
+                          ></div>
+                        </div>
+                        <div class="chapter_upload_ic">
+                          <div class="chapter_upload_ic_l"></div>
+                          <div class="chapter_upload_ic_r">
+                            <!-- @click.stop="
+                              deleteChapterData(
+                                $event,
+                                unitIndex,
+                                index,
+                                index1,
+                                itemTaskIndex
+                              )
+                            " -->
+                            <div></div>
+                          </div>
+                        </div>
+                        <div class="chapter_upload_n">
+                          <input
+                            class="first"
+                            v-if="
+                              item1.type == 2 ||
+                              item1.type == 3 ||
+                              item1.type == 7
+                            "
+                            :placeholder="item1.name"
+                          />
+                          <!-- @change="
+                              updataVideoT(
+                                $event,
+                                unitIndex,
+                                chapterIndex,
+                                index1
+                              )
+                            " -->
+                          <input
+                            class="first"
+                            :placeholder="item1.name"
+                            v-if="item1.type == 6"
+                            readonly="true"
+                          />
+                          <!-- @click="selectAttText(itemTaskIndex, index1)" -->
+                          <input
+                            class="first"
+                            :placeholder="item1.name"
+                            v-if="item1.type == 8"
+                            readonly="true"
+                          />
+                          <!-- @click="selectLine(itemTaskIndex, index1)" -->
+                          <div class="chapter_upload_ud">
+                            <div class="chapter_upload_up"></div>
+                            <!-- @click="upCd($event, unitIndex, index, index1)" -->
+                            <div class="chapter_upload_down"></div>
+                            <!-- @click="downCd($event, unitIndex, index, index1)" -->
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="add_info_box">
+                  <button class="info_btn" @click="addImg($event)">
+                    添加教学附件
+                    <input
+                      type="file"
+                      accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+                      style="display: none"
+                    />
+                    <!-- @change="
+                            beforeUpload2($event, unitIndex, 3, itemTaskIndex)
+                          " -->
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import EditorBar from "../../../tools/wangEnduit";
 export default {
+  components: { EditorBar },
+  data() {
+    return {
+      steps: 0,
+      driQuestion: "",
+      chapterData: [],
+    };
+  },
+  methods: {
+    change(val) {
+      console.log(val);
+    },
+    addImg(e) {
+      var el = e.currentTarget;
+      el.getElementsByTagName("input")[0].click();
+    },
+    getChapterData(e, i, j, ic, type) {
+      e.stopPropagation();
+      if ((type == 2 || type == 3) && e.target.tagName !== "INPUT") {
+        console.log("还不能下载图片喔");
+      }
+    },
+  },
+  created() {},
+};
+</script>
 
+<style scoped>
+.raceBox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+}
+.stepBg {
+  margin: 0 25px 0 0;
+  width: 20%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+  background: #fff;
+  min-height: 800px;
+  height: 100%;
+  border: 1px solid #c2c2c2;
+  border-radius: 15px;
+}
+.steps {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  margin: 35px 20px 20px 20px;
+  position: relative;
+  align-items: center;
+}
+.stepLeft,
+.isSteps {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 30px;
+  border: 2px solid #eee;
+  color: #c0c0c0;
+}
+.isSteps {
+  background: #1990ff;
+  color: #fff;
+  border: none;
+}
+.stepRightNav {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-left: 10px;
+}
+.line,
+.isLine {
+  position: absolute;
+  width: 5px;
+  height: 50px;
+  border-left: 1px solid #dadada;
+  top: 38px;
+  left: 15px;
+}
+.isLine {
+  border-left: 1px solid #1d92ff !important;
+}
+.right {
+  width: calc(100% - 20%);
+  background: rgb(255, 255, 255);
+  border-radius: 10px;
+  overflow: auto;
+  height: 100%;
+  border: 1px solid #c2c2c2;
+  border-radius: 15px;
+  max-height: 800px;
+}
+.allBox {
+  padding: 25px;
+}
+.allBox > div:nth-child(1) {
+  color: #0f40f5;
+  font-size: 18px;
+  font-weight: bold;
+}
+.raceTop > div:nth-child(2) {
+  width: 80%;
+  margin-top: 10px;
+}
+.titleTop {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  width: 100%;
+}
+.titleTop > div:nth-child(2) {
+  width: 82%;
+  margin-left: 20px;
+}
+.editorCss {
+  width: 90% !important;
+}
+.basic_box {
+  position: relative;
+  margin: 0;
+  min-height: 0;
+  width: 90%;
+}
+.add_info_box {
+  margin: 20px 0;
 }
-</script>
 
-<style>
+.add_info_box button {
+  margin: 0 10px 10px 0;
+}
 
+.add_chapters_box {
+  text-align: left;
+  background-color: rgb(232 234 237);
+  width: 100%;
+  padding: 0px 15px;
+  border-radius: 15px;
+  font-size: 16px;
+  box-sizing: border-box;
+  position: relative;
+  padding: 0 10px 5px 10px;
+  height: 185px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.chapter_upload {
+  height: 50px;
+  margin-top: 12px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 50px;
+}
+
+.chapter_upload_t {
+  background-color: #fff;
+  position: absolute;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+  border-radius: 40px;
+  box-sizing: border-box;
+  box-shadow: 0 0 3px 3px #dfdfdf;
+  width: 100%;
+}
+
+.chapter_upload_o {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+}
+
+.chapter_upload_ic {
+  height: 30px;
+  float: right;
+  cursor: pointer;
+  position: absolute;
+  width: 45px;
+  right: 0;
+  top: 0;
+}
+
+.chapter_upload_ic_l {
+  width: 50px;
+  height: 50px;
+  float: left;
+}
+
+.chapter_upload_ic_l div {
+  width: 30px;
+  height: 35px;
+  background: url("../../../../assets/icon/icon.png");
+}
+
+.chapter_upload_ic_r {
+  width: 50px;
+  height: 50px;
+  float: left;
+  margin-left: 0px;
+  display: flex;
+  align-items: center;
+  position: absolute;
+}
+
+.chapter_upload_ic_r div {
+  width: 25px;
+  height: 25px;
+  background-image: url("../../../../assets/delete.png");
+  background-size: 100% 100%;
+}
+
+.chapter_upload_n {
+  display: flex;
+  text-indent: 10px;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 55%;
+  margin-left: 10px;
+  cursor: pointer;
+  margin-top: 2px;
+}
+
+.chapter_upload_l_i1 {
+  background-image: url("../../../../assets/icon/video.png");
+  width: 28px;
+  height: 28px;
+  background-size: 100% 100%;
+}
+
+.chapter_upload_l_i5 {
+  background-image: url("../../../../assets/icon/word.png");
+  width: 24px;
+  height: 24px;
+  background-size: 100% 100%;
+  margin-left: 1px;
+}
+
+.chapter_upload_l_i8 {
+  background-image: url("../../../../assets/icon/line.png");
+  width: 24px;
+  height: 24px;
+  background-size: 100% 100%;
+  margin-left: 1px;
+}
+
+.chapter_upload_ud {
+  display: flex;
+  flex-direction: column;
+  margin-left: 5px;
+  justify-content: center;
+  z-index: 99;
+}
+
+.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;
+}
+.chapter_upload_l {
+  padding: 1px 0 0 10px;
+}
+.first {
+  border: none;
+  outline: none;
+  width: 80%;
+  min-width: 215px;
+  z-index: 99;
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.info_btn {
+  color: #fff;
+  background-color: #0f7eff;
+  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;
+}
+.info_btn:hover {
+  background-color: #4f7cd5 !important;
+}
 </style>

src/components/pages/race/addRace/raceDetail.vue

@@ -1,15 +1,540 @@
 <template>
-  <div>
-    项目基本信息
+<!-- 项目基础信息 -->
+  <div class="pb_content">
+    <div class="pb_content_body" style="position: relative; margin: 0">
+      <div class="raceBox">
+        <div class="stepBg">
+          <div class="steps">
+            <div class="stepLeft" :class="steps == 0 ? 'isSteps' : ''">1</div>
+            <div class="stepRightNav">
+              <div>案例赛事信息</div>
+              <div>说明</div>
+            </div>
+            <div class="line" :class="steps == 0 ? 'isLine' : ''"></div>
+          </div>
+          <div class="steps">
+            <div class="stepLeft" :class="steps == 1 ? 'isSteps' : ''">2</div>
+            <div class="stepRightNav">
+              <div>封面</div>
+              <div>说明</div>
+            </div>
+            <div class="line" :class="steps == 1 ? 'isLine' : ''"></div>
+          </div>
+          <div class="steps">
+            <div class="stepLeft" :class="steps == 2 ? 'isSteps' : ''">3</div>
+            <div class="stepRightNav">
+              <div>成员信息</div>
+              <div>协同人员</div>
+            </div>
+            <div class="line" :class="steps == 2 ? 'isLine' : ''"></div>
+          </div>
+          <div class="steps">
+            <div class="stepLeft" :class="steps == 3 ? 'isSteps' : ''">4</div>
+            <div class="stepRightNav">
+              <div>项目说明</div>
+              <div>项目简介</div>
+            </div>
+            <!-- <div class="line" :class="steps == 3 ? 'isLine' : ''"></div> -->
+          </div>
+        </div>
+        <div class="right">
+          <div class="raceTop allBox">
+            <div>案例名称</div>
+            <div><el-input></el-input></div>
+          </div>
+          <div class="both">
+            <div class="choose">
+              <div class="all_choose">
+                <!-- v-for="(item, index) in CourseType[0]"
+                :key="index" -->
+                <!-- <span>{{ item.name }}</span> -->
+                <span>组别</span>
+                <el-checkbox-group v-model="courseTypeId">
+                  <el-checkbox>人工智能</el-checkbox>
+                </el-checkbox-group>
+              </div>
+              <div class="all_choose">
+                <!-- v-for="(item, index) in CourseType[0]"
+                :key="index" -->
+                <!-- <span>{{ item.name }}</span> -->
+                <span>年级</span>
+                <el-checkbox-group v-model="courseTypeId">
+                  <el-checkbox>一年级</el-checkbox>
+                  <!-- <el-checkbox
+                    v-for="item1 in CourseTypeJson[item.id]"
+                    :key="item1.id"
+                    :label="item1.id"
+                    >{{ item1.name }}</el-checkbox
+                  > -->
+                </el-checkbox-group>
+              </div>
+              <div class="all_choose">
+                <!-- v-for="(item, index) in CourseType[0]"
+                :key="index" -->
+                <!-- <span>{{ item.name }}</span> -->
+                <span>学科</span>
+                <el-checkbox-group v-model="courseTypeId">
+                  <!-- <el-checkbox
+                    v-for="item1 in CourseTypeJson[item.id]"
+                    :key="item1.id"
+                    :label="item1.id"
+                    >{{ item1.name }}</el-checkbox
+                  > -->
+                  <el-checkbox>语文</el-checkbox>
+                </el-checkbox-group>
+              </div>
+            </div>
+          </div>
+          <div class="picSys allBox">
+            <div>案例封面设置</div>
+            <div class="picBox">
+              <div>
+                <div class="uploadFm" v-if="cover.length == 0">
+                  <img src="../../../../assets/icon/addPoster.png" alt="" />
+                </div>
+                <el-upload
+                  :class="{ disUoloadSty: noneBtnImg }"
+                  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"
+                  v-else
+                >
+                  <i class="el-icon-plus"></i>
+                </el-upload>
+              </div>
+              <div class="picNav">
+                <div>图片要求说明:</div>
+                <div>jpg*,png*,jpeg,且大小不能大于10M</div>
+              </div>
+            </div>
+          </div>
+          <div class="allBox">
+            <div>项目成员</div>
+            <div class="addPeople">添加项目成员</div>
+          </div>
+          <div class="allBox">
+            <div>项目简介</div>
+            <div class="secondTop">
+              <textarea
+                rows="8"
+                class="binfo_input tAreaCss"
+                cols
+                v-model="courseText"
+              ></textarea>
+            </div>
+          </div>
+        </div>
+        <!-- <div class="buttonCss">
+          <div class="info_btn noBg">预览</div>
+          <div class="info_btn noBg">保存</div>
+          <div class="info_btn" style="margin-right: 25px">下一步</div>
+        </div> -->
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
+  data() {
+    return {
+      steps: 0,
+      courseTypeId: [],
+      CourseType: [],
+      CourseTypeJson: [],
+      cover: [],
+      courseText: "",
+      noneBtnImg: false,
+      uploadLoading1: false,
+    };
+  },
+  methods: {
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+    },
+    onExceed() {
+      this.$message.error("项目封面仅支持上传一张，请删除后再进行上传");
+    },
+    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;
+    },
+    imgChange1(file, fileList, type, itemTaskIndex) {
+      if (type == 1) {
+        var _tmp = this.cover;
+      }
+      //    else if (
+      //     type == 2 ||
+      //     type == 3 ||
+      //     type == 6 ||
+      //     type == 7 ||
+      //     type == 8
+      //   ) {
+      //     var _tmp =
+      //       this.unitJson[this.unitIndex].chapterInfo[0].taskJson[itemTaskIndex]
+      //         .chapterData;
+      //   } else if (type == 4) {
+      //     var _tmp = this.unitJson[this.unitIndex].chapterInfo[0].fileList1;
+      //   } else {
+      //     var _tmp =
+      //       this.unitJson[this.unitIndex].chapterInfo[0].taskJson[itemTaskIndex]
+      //         .homeworkList;
+      //   }
+      this.noneBtnImg = _tmp.length >= 1;
+    },
+    beforeUpload1(event, 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(".")[file.name.split(".").length - 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, null);
+              console.log(data.Location);
+            }
+          });
+      }
+    },
+  },
+  created() {},
+};
 </script>
 
-<style>
+<style scoped>
+.raceBox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+}
+.stepBg {
+  margin: 0 25px 0 0;
+  width: 20%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+  background: #fff;
+  min-height: 800px;
+  height: 100%;
+  border: 1px solid #c2c2c2;
+  border-radius: 15px;
+}
+.steps {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  margin: 35px 20px 20px 20px;
+  position: relative;
+}
+.stepLeft,
+.isSteps {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 30px;
+  border: 2px solid #eee;
+  color: #c0c0c0;
+}
+.isSteps {
+  background: #1990ff;
+  color: #fff;
+  border: none;
+}
+.stepRightNav {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-left: 10px;
+}
+.line,
+.isLine {
+  position: absolute;
+  width: 5px;
+  height: 50px;
+  border-left: 1px solid #dadada;
+  top: 38px;
+  left: 15px;
+}
+.isLine {
+  border-left: 1px solid #1d92ff !important;
+}
+.right {
+  width: calc(100% - 20%);
+  background: rgb(255, 255, 255);
+  border-radius: 10px;
+  overflow: auto;
+  height: 100%;
+  border: 1px solid #c2c2c2;
+  border-radius: 15px;
+  max-height: 800px;
+}
+.allBox {
+  padding: 25px;
+}
+.allBox > div:nth-child(1) {
+  color: #0f40f5;
+  font-size: 18px;
+  font-weight: bold;
+}
+.raceTop > div:nth-child(2) {
+  width: 80%;
+  margin-top: 10px;
+}
+.choose {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  height: 100%;
+  justify-content: space-evenly;
+  align-items: flex-start;
+}
+
+.both {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 90%;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 0 0 25px;
+}
+.all_choose {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: 100%;
+  padding-bottom: 10px;
+}
+
+.all_choose > span {
+  width: 100px;
+  display: block;
+  letter-spacing: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.all_choose >>> .el-checkbox-group {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  flex-wrap: wrap;
+  align-content: center;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: 3px;
+}
+
+.all_choose > .el-checkbox-group >>> .el-checkbox {
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
 
+.all_choose > .el-checkbox-group > .el-checkbox >>> .el-checkbox__label {
+  min-width: 80px;
+  overflow: hidden;
+  width: 80px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.all_choose > .el-checkbox-group > .el-checkbox >>> .el-checkbox__label:hover {
+  width: auto;
+}
+.disUoloadSty >>> .el-icon-plus {
+  display: none !important;
+  /* 上传按钮隐藏 */
+}
+.upCss {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+
+.upCss >>> .el-icon-plus {
+  position: none !important;
+  width: 200px;
+  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;
+}
+
+.upCss >>> .el-upload-list__item-name {
+  width: 100px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.uploadFm {
+  border: 1px dashed #ccc;
+  width: 202px;
+  height: 102px;
+  position: relative;
+  cursor: pointer;
+}
+
+.uploadFm > img {
+  position: absolute;
+  top: 25px;
+  left: 35%;
+  width: 50px;
+}
+.picBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  margin-top: 10px;
+}
+.picNav {
+  margin-left: 10px;
+  color: #aaabaa;
+}
+.addPeople {
+  background: #6b92c9;
+  width: 150px;
+  height: 40px;
+  color: #fff;
+  border-radius: 5px;
+  text-align: center;
+  line-height: 40px;
+  font-size: 14px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+.binfo_input {
+  font: inherit;
+  color: currentColor;
+  width: 100%;
+  margin: 0;
+  /* padding: 15px 14px; */
+  padding: 8px 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;
+  font-size: 18px;
+}
+
+.binfo_input:focus-visible {
+  border: 1px solid rgba(61, 103, 188);
+}
+.secondTop {
+  margin-top: 10px;
+}
+.tAreaCss {
+  resize: none;
+}
+/* .buttonCss {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-end;
+  position: absolute;
+    right: 0;
+    bottom: -70px;
+}
+.info_btn {
+  color: #fff;
+  background-color: #0f40f5;
+  padding: 8px 24px;
+  font-size: 0.9375rem;
+  min-width: 64px;
+  font-weight: 500;
+  border-radius: 4px;
+  box-sizing: border-box;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  margin: 0 15px 15px 0;
+}
+.info_btn:hover {
+  background-color: #4f7cd5 !important;
+}
+.noBg {
+  background: #fff !important;
+  border: 1px solid #c7c7c7 !important;
+  color: #000 !important;
+} */
 </style>

src/components/pages/race/addRace/raceOverview.vue

@@ -1,15 +1,1012 @@
 <template>
-  <div>
-    项目概况
+  <!-- 项目概况 -->
+  <div class="pb_content">
+    <div class="pb_content_body" style="position: relative; margin: 0">
+      <div class="raceBox">
+        <div class="stepBg">
+          <div class="steps">
+            <div class="stepLeft" :class="steps == 0 ? 'isSteps' : ''">1</div>
+            <div class="stepRightNav">
+              <div>项目简介</div>
+              <div>说明</div>
+            </div>
+            <div class="line" :class="steps == 0 ? 'isLine' : ''"></div>
+          </div>
+          <div class="steps">
+            <div class="stepLeft" :class="steps == 1 ? 'isSteps' : ''">2</div>
+            <div class="stepRightNav">
+              <div>驱动问题</div>
+              <div>说明</div>
+            </div>
+            <div class="line" :class="steps == 1 ? 'isLine' : ''"></div>
+          </div>
+          <div class="steps">
+            <div class="stepLeft" :class="steps == 2 ? 'isSteps' : ''">3</div>
+            <div class="stepRightNav">
+              <div>平台案例实施（选填）</div>
+              <div>平台</div>
+            </div>
+            <div class="line" :class="steps == 2 ? 'isLine' : ''"></div>
+          </div>
+          <div class="steps">
+            <div class="stepLeft" :class="steps == 3 ? 'isSteps' : ''">4</div>
+            <div class="stepRightNav">
+              <div>案例评审</div>
+              <div>评审状态、反馈</div>
+            </div>
+            <!-- <div class="line" :class="steps == 3 ? 'isLine' : ''"></div> -->
+          </div>
+        </div>
+        <div class="right">
+          <div class="raceTop allBox">
+            <div class="titleTop">
+              <div>驱动性问题</div>
+              <div><el-input></el-input></div>
+            </div>
+            <div class="editorCss">
+              <editor-bar v-model="driQuestion" @change="change"></editor-bar>
+            </div>
+            <div>
+              <div class="basic_box">
+                <div>
+                  <div
+                    class="add_chapters_box"
+                    v-if="chapterData && 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 chapterData"
+                      :key="item1.id"
+                      @click="
+                        getChapterData(
+                          $event,
+                          unitIndex,
+                          index,
+                          index1,
+                          item1.type
+                        )
+                      "
+                    >
+                      <div class="chapter_upload_t"></div>
+                      <div class="chapter_upload_o">
+                        <div class="chapter_upload_l">
+                          <div
+                            v-if="item1.type == 2"
+                            class="chapter_upload_l_i1"
+                          ></div>
+                          <div
+                            v-if="
+                              item1.type == 3 ||
+                              item1.type == 6 ||
+                              item1.type == 7
+                            "
+                            class="chapter_upload_l_i5"
+                          ></div>
+                          <div
+                            v-if="item1.type == 8"
+                            class="chapter_upload_l_i8"
+                          ></div>
+                        </div>
+                        <div class="chapter_upload_ic">
+                          <div class="chapter_upload_ic_l"></div>
+                          <div class="chapter_upload_ic_r">
+                            <!-- @click.stop="
+                              deleteChapterData(
+                                $event,
+                                unitIndex,
+                                index,
+                                index1,
+                                itemTaskIndex
+                              )
+                            " -->
+                            <div></div>
+                          </div>
+                        </div>
+                        <div class="chapter_upload_n">
+                          <input
+                            class="first"
+                            v-if="
+                              item1.type == 2 ||
+                              item1.type == 3 ||
+                              item1.type == 7
+                            "
+                            :placeholder="item1.name"
+                          />
+                          <!-- @change="
+                              updataVideoT(
+                                $event,
+                                unitIndex,
+                                chapterIndex,
+                                index1
+                              )
+                            " -->
+                          <input
+                            class="first"
+                            :placeholder="item1.name"
+                            v-if="item1.type == 6"
+                            readonly="true"
+                          />
+                          <!-- @click="selectAttText(itemTaskIndex, index1)" -->
+                          <input
+                            class="first"
+                            :placeholder="item1.name"
+                            v-if="item1.type == 8"
+                            readonly="true"
+                          />
+                          <!-- @click="selectLine(itemTaskIndex, index1)" -->
+                          <div class="chapter_upload_ud">
+                            <div class="chapter_upload_up"></div>
+                            <!-- @click="upCd($event, unitIndex, index, index1)" -->
+                            <div class="chapter_upload_down"></div>
+                            <!-- @click="downCd($event, unitIndex, index, index1)" -->
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="add_info_box">
+                  <button class="info_btn" @click="addImg($event)">
+                    添加教学附件
+                    <input
+                      type="file"
+                      accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+                      style="display: none"
+                    />
+                    <!-- @change="
+                            beforeUpload2($event, unitIndex, 3, itemTaskIndex)
+                          " -->
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="raceTop allBox">
+            <div class="titleTop">
+              <div>目标设计</div>
+              <div><el-input></el-input></div>
+            </div>
+            <div class="editorCss">
+              <editor-bar v-model="driQuestion" @change="change"></editor-bar>
+            </div>
+            <div>
+              <div class="basic_box">
+                <div>
+                  <div
+                    class="add_chapters_box"
+                    v-if="chapterData && 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 chapterData"
+                      :key="item1.id"
+                      @click="
+                        getChapterData(
+                          $event,
+                          unitIndex,
+                          index,
+                          index1,
+                          item1.type
+                        )
+                      "
+                    >
+                      <div class="chapter_upload_t"></div>
+                      <div class="chapter_upload_o">
+                        <div class="chapter_upload_l">
+                          <div
+                            v-if="item1.type == 2"
+                            class="chapter_upload_l_i1"
+                          ></div>
+                          <div
+                            v-if="
+                              item1.type == 3 ||
+                              item1.type == 6 ||
+                              item1.type == 7
+                            "
+                            class="chapter_upload_l_i5"
+                          ></div>
+                          <div
+                            v-if="item1.type == 8"
+                            class="chapter_upload_l_i8"
+                          ></div>
+                        </div>
+                        <div class="chapter_upload_ic">
+                          <div class="chapter_upload_ic_l"></div>
+                          <div class="chapter_upload_ic_r">
+                            <!-- @click.stop="
+                              deleteChapterData(
+                                $event,
+                                unitIndex,
+                                index,
+                                index1,
+                                itemTaskIndex
+                              )
+                            " -->
+                            <div></div>
+                          </div>
+                        </div>
+                        <div class="chapter_upload_n">
+                          <input
+                            class="first"
+                            v-if="
+                              item1.type == 2 ||
+                              item1.type == 3 ||
+                              item1.type == 7
+                            "
+                            :placeholder="item1.name"
+                          />
+                          <!-- @change="
+                              updataVideoT(
+                                $event,
+                                unitIndex,
+                                chapterIndex,
+                                index1
+                              )
+                            " -->
+                          <input
+                            class="first"
+                            :placeholder="item1.name"
+                            v-if="item1.type == 6"
+                            readonly="true"
+                          />
+                          <!-- @click="selectAttText(itemTaskIndex, index1)" -->
+                          <input
+                            class="first"
+                            :placeholder="item1.name"
+                            v-if="item1.type == 8"
+                            readonly="true"
+                          />
+                          <!-- @click="selectLine(itemTaskIndex, index1)" -->
+                          <div class="chapter_upload_ud">
+                            <div class="chapter_upload_up"></div>
+                            <!-- @click="upCd($event, unitIndex, index, index1)" -->
+                            <div class="chapter_upload_down"></div>
+                            <!-- @click="downCd($event, unitIndex, index, index1)" -->
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="add_info_box">
+                  <button class="info_btn" @click="addImg($event)">
+                    添加教学附件
+                    <input
+                      type="file"
+                      accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+                      style="display: none"
+                    />
+                    <!-- @change="
+                            beforeUpload2($event, unitIndex, 3, itemTaskIndex)
+                          " -->
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="raceTop allBox">
+            <div class="titleTop">
+              <div>活动设计</div>
+              <div><el-input></el-input></div>
+            </div>
+            <div class="editorCss">
+              <editor-bar v-model="driQuestion" @change="change"></editor-bar>
+            </div>
+            <div>
+              <div class="basic_box">
+                <div>
+                  <div
+                    class="add_chapters_box"
+                    v-if="chapterData && 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 chapterData"
+                      :key="item1.id"
+                      @click="
+                        getChapterData(
+                          $event,
+                          unitIndex,
+                          index,
+                          index1,
+                          item1.type
+                        )
+                      "
+                    >
+                      <div class="chapter_upload_t"></div>
+                      <div class="chapter_upload_o">
+                        <div class="chapter_upload_l">
+                          <div
+                            v-if="item1.type == 2"
+                            class="chapter_upload_l_i1"
+                          ></div>
+                          <div
+                            v-if="
+                              item1.type == 3 ||
+                              item1.type == 6 ||
+                              item1.type == 7
+                            "
+                            class="chapter_upload_l_i5"
+                          ></div>
+                          <div
+                            v-if="item1.type == 8"
+                            class="chapter_upload_l_i8"
+                          ></div>
+                        </div>
+                        <div class="chapter_upload_ic">
+                          <div class="chapter_upload_ic_l"></div>
+                          <div class="chapter_upload_ic_r">
+                            <!-- @click.stop="
+                              deleteChapterData(
+                                $event,
+                                unitIndex,
+                                index,
+                                index1,
+                                itemTaskIndex
+                              )
+                            " -->
+                            <div></div>
+                          </div>
+                        </div>
+                        <div class="chapter_upload_n">
+                          <input
+                            class="first"
+                            v-if="
+                              item1.type == 2 ||
+                              item1.type == 3 ||
+                              item1.type == 7
+                            "
+                            :placeholder="item1.name"
+                          />
+                          <!-- @change="
+                              updataVideoT(
+                                $event,
+                                unitIndex,
+                                chapterIndex,
+                                index1
+                              )
+                            " -->
+                          <input
+                            class="first"
+                            :placeholder="item1.name"
+                            v-if="item1.type == 6"
+                            readonly="true"
+                          />
+                          <!-- @click="selectAttText(itemTaskIndex, index1)" -->
+                          <input
+                            class="first"
+                            :placeholder="item1.name"
+                            v-if="item1.type == 8"
+                            readonly="true"
+                          />
+                          <!-- @click="selectLine(itemTaskIndex, index1)" -->
+                          <div class="chapter_upload_ud">
+                            <div class="chapter_upload_up"></div>
+                            <!-- @click="upCd($event, unitIndex, index, index1)" -->
+                            <div class="chapter_upload_down"></div>
+                            <!-- @click="downCd($event, unitIndex, index, index1)" -->
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="add_info_box">
+                  <button class="info_btn" @click="addImg($event)">
+                    添加教学附件
+                    <input
+                      type="file"
+                      accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+                      style="display: none"
+                    />
+                    <!-- @change="
+                            beforeUpload2($event, unitIndex, 3, itemTaskIndex)
+                          " -->
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="raceTop allBox">
+            <div class="titleTop">
+              <div>评价设计</div>
+              <div><el-input></el-input></div>
+            </div>
+            <div class="editorCss">
+              <editor-bar v-model="driQuestion" @change="change"></editor-bar>
+            </div>
+            <div>
+              <div class="basic_box">
+                <div>
+                  <div
+                    class="add_chapters_box"
+                    v-if="chapterData && 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 chapterData"
+                      :key="item1.id"
+                      @click="
+                        getChapterData(
+                          $event,
+                          unitIndex,
+                          index,
+                          index1,
+                          item1.type
+                        )
+                      "
+                    >
+                      <div class="chapter_upload_t"></div>
+                      <div class="chapter_upload_o">
+                        <div class="chapter_upload_l">
+                          <div
+                            v-if="item1.type == 2"
+                            class="chapter_upload_l_i1"
+                          ></div>
+                          <div
+                            v-if="
+                              item1.type == 3 ||
+                              item1.type == 6 ||
+                              item1.type == 7
+                            "
+                            class="chapter_upload_l_i5"
+                          ></div>
+                          <div
+                            v-if="item1.type == 8"
+                            class="chapter_upload_l_i8"
+                          ></div>
+                        </div>
+                        <div class="chapter_upload_ic">
+                          <div class="chapter_upload_ic_l"></div>
+                          <div class="chapter_upload_ic_r">
+                            <!-- @click.stop="
+                              deleteChapterData(
+                                $event,
+                                unitIndex,
+                                index,
+                                index1,
+                                itemTaskIndex
+                              )
+                            " -->
+                            <div></div>
+                          </div>
+                        </div>
+                        <div class="chapter_upload_n">
+                          <input
+                            class="first"
+                            v-if="
+                              item1.type == 2 ||
+                              item1.type == 3 ||
+                              item1.type == 7
+                            "
+                            :placeholder="item1.name"
+                          />
+                          <!-- @change="
+                              updataVideoT(
+                                $event,
+                                unitIndex,
+                                chapterIndex,
+                                index1
+                              )
+                            " -->
+                          <input
+                            class="first"
+                            :placeholder="item1.name"
+                            v-if="item1.type == 6"
+                            readonly="true"
+                          />
+                          <!-- @click="selectAttText(itemTaskIndex, index1)" -->
+                          <input
+                            class="first"
+                            :placeholder="item1.name"
+                            v-if="item1.type == 8"
+                            readonly="true"
+                          />
+                          <!-- @click="selectLine(itemTaskIndex, index1)" -->
+                          <div class="chapter_upload_ud">
+                            <div class="chapter_upload_up"></div>
+                            <!-- @click="upCd($event, unitIndex, index, index1)" -->
+                            <div class="chapter_upload_down"></div>
+                            <!-- @click="downCd($event, unitIndex, index, index1)" -->
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="add_info_box">
+                  <button class="info_btn" @click="addImg($event)">
+                    添加教学附件
+                    <input
+                      type="file"
+                      accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+                      style="display: none"
+                    />
+                    <!-- @change="
+                            beforeUpload2($event, unitIndex, 3, itemTaskIndex)
+                          " -->
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="raceTop allBox">
+            <div class="titleTop">
+              <div>其他补充</div>
+              <div><el-input></el-input></div>
+            </div>
+            <div class="editorCss">
+              <editor-bar v-model="driQuestion" @change="change"></editor-bar>
+            </div>
+            <div>
+              <div class="basic_box">
+                <div>
+                  <div
+                    class="add_chapters_box"
+                    v-if="chapterData && 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 chapterData"
+                      :key="item1.id"
+                      @click="
+                        getChapterData(
+                          $event,
+                          unitIndex,
+                          index,
+                          index1,
+                          item1.type
+                        )
+                      "
+                    >
+                      <div class="chapter_upload_t"></div>
+                      <div class="chapter_upload_o">
+                        <div class="chapter_upload_l">
+                          <div
+                            v-if="item1.type == 2"
+                            class="chapter_upload_l_i1"
+                          ></div>
+                          <div
+                            v-if="
+                              item1.type == 3 ||
+                              item1.type == 6 ||
+                              item1.type == 7
+                            "
+                            class="chapter_upload_l_i5"
+                          ></div>
+                          <div
+                            v-if="item1.type == 8"
+                            class="chapter_upload_l_i8"
+                          ></div>
+                        </div>
+                        <div class="chapter_upload_ic">
+                          <div class="chapter_upload_ic_l"></div>
+                          <div class="chapter_upload_ic_r">
+                            <!-- @click.stop="
+                              deleteChapterData(
+                                $event,
+                                unitIndex,
+                                index,
+                                index1,
+                                itemTaskIndex
+                              )
+                            " -->
+                            <div></div>
+                          </div>
+                        </div>
+                        <div class="chapter_upload_n">
+                          <input
+                            class="first"
+                            v-if="
+                              item1.type == 2 ||
+                              item1.type == 3 ||
+                              item1.type == 7
+                            "
+                            :placeholder="item1.name"
+                          />
+                          <!-- @change="
+                              updataVideoT(
+                                $event,
+                                unitIndex,
+                                chapterIndex,
+                                index1
+                              )
+                            " -->
+                          <input
+                            class="first"
+                            :placeholder="item1.name"
+                            v-if="item1.type == 6"
+                            readonly="true"
+                          />
+                          <!-- @click="selectAttText(itemTaskIndex, index1)" -->
+                          <input
+                            class="first"
+                            :placeholder="item1.name"
+                            v-if="item1.type == 8"
+                            readonly="true"
+                          />
+                          <!-- @click="selectLine(itemTaskIndex, index1)" -->
+                          <div class="chapter_upload_ud">
+                            <div class="chapter_upload_up"></div>
+                            <!-- @click="upCd($event, unitIndex, index, index1)" -->
+                            <div class="chapter_upload_down"></div>
+                            <!-- @click="downCd($event, unitIndex, index, index1)" -->
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="add_info_box">
+                  <button class="info_btn" @click="addImg($event)">
+                    添加教学附件
+                    <input
+                      type="file"
+                      accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+                      style="display: none"
+                    />
+                    <!-- @change="
+                            beforeUpload2($event, unitIndex, 3, itemTaskIndex)
+                          " -->
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import EditorBar from "../../../tools/wangEnduit";
 export default {
+  components: { EditorBar },
+  data() {
+    return {
+      steps: 0,
+      driQuestion: "",
+      chapterData: [],
+    };
+  },
+  methods: {
+    change(val) {
+      console.log(val);
+    },
+    addImg(e) {
+      var el = e.currentTarget;
+      el.getElementsByTagName("input")[0].click();
+    },
+    getChapterData(e, i, j, ic, type) {
+      e.stopPropagation();
+      if ((type == 2 || type == 3) && e.target.tagName !== "INPUT") {
+        console.log("还不能下载图片喔");
+      }
+    },
+  },
+  created() {},
+};
+</script>
 
+<style scoped>
+.raceBox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+}
+.stepBg {
+  margin: 0 25px 0 0;
+  width: 20%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+  background: #fff;
+  min-height: 800px;
+  height: 100%;
+  border: 1px solid #c2c2c2;
+  border-radius: 15px;
+}
+.steps {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  margin: 35px 20px 20px 20px;
+  position: relative;
+}
+.stepLeft,
+.isSteps {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 30px;
+  border: 2px solid #eee;
+  color: #c0c0c0;
+}
+.isSteps {
+  background: #1990ff;
+  color: #fff;
+  border: none;
+}
+.stepRightNav {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-left: 10px;
+}
+.line,
+.isLine {
+  position: absolute;
+  width: 5px;
+  height: 50px;
+  border-left: 1px solid #dadada;
+  top: 38px;
+  left: 15px;
+}
+.isLine {
+  border-left: 1px solid #1d92ff !important;
+}
+.right {
+  width: calc(100% - 20%);
+  background: rgb(255, 255, 255);
+  border-radius: 10px;
+  overflow: auto;
+  height: 100%;
+  border: 1px solid #c2c2c2;
+  border-radius: 15px;
+  max-height: 800px;
+}
+.allBox {
+  padding: 25px;
+}
+.allBox > div:nth-child(1) {
+  color: #0f40f5;
+  font-size: 18px;
+  font-weight: bold;
+}
+.raceTop > div:nth-child(2) {
+  width: 80%;
+  margin-top: 10px;
+}
+.titleTop {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  width: 100%;
+}
+.titleTop > div:nth-child(2) {
+  width: 82%;
+  margin-left: 20px;
+}
+.editorCss {
+  width: 90% !important;
+}
+.basic_box {
+  position: relative;
+  margin: 0;
+  min-height: 0;
+  width: 90%;
+}
+.add_info_box {
+  margin: 20px 0;
 }
-</script>
 
-<style>
+.add_info_box button {
+  margin: 0 10px 10px 0;
+}
 
+.add_chapters_box {
+  text-align: left;
+  background-color: rgb(232 234 237);
+  width: 100%;
+  padding: 0px 15px;
+  border-radius: 15px;
+  font-size: 16px;
+  box-sizing: border-box;
+  position: relative;
+  padding: 0 10px 5px 10px;
+  height: 185px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.chapter_upload {
+  height: 50px;
+  margin-top: 12px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 50px;
+}
+
+.chapter_upload_t {
+  background-color: #fff;
+  position: absolute;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+  border-radius: 40px;
+  box-sizing: border-box;
+  box-shadow: 0 0 3px 3px #dfdfdf;
+  width: 100%;
+}
+
+.chapter_upload_o {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+}
+
+.chapter_upload_ic {
+  height: 30px;
+  float: right;
+  cursor: pointer;
+  position: absolute;
+  width: 45px;
+  right: 0;
+  top: 0;
+}
+
+.chapter_upload_ic_l {
+  width: 50px;
+  height: 50px;
+  float: left;
+}
+
+.chapter_upload_ic_l div {
+  width: 30px;
+  height: 35px;
+  background: url("../../../../assets/icon/icon.png");
+}
+
+.chapter_upload_ic_r {
+  width: 50px;
+  height: 50px;
+  float: left;
+  margin-left: 0px;
+  display: flex;
+  align-items: center;
+  position: absolute;
+}
+
+.chapter_upload_ic_r div {
+  width: 25px;
+  height: 25px;
+  background-image: url("../../../../assets/delete.png");
+  background-size: 100% 100%;
+}
+
+.chapter_upload_n {
+  display: flex;
+  text-indent: 10px;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 55%;
+  margin-left: 10px;
+  cursor: pointer;
+  margin-top: 2px;
+}
+
+.chapter_upload_l_i1 {
+  background-image: url("../../../../assets/icon/video.png");
+  width: 28px;
+  height: 28px;
+  background-size: 100% 100%;
+}
+
+.chapter_upload_l_i5 {
+  background-image: url("../../../../assets/icon/word.png");
+  width: 24px;
+  height: 24px;
+  background-size: 100% 100%;
+  margin-left: 1px;
+}
+
+.chapter_upload_l_i8 {
+  background-image: url("../../../../assets/icon/line.png");
+  width: 24px;
+  height: 24px;
+  background-size: 100% 100%;
+  margin-left: 1px;
+}
+
+.chapter_upload_ud {
+  display: flex;
+  flex-direction: column;
+  margin-left: 5px;
+  justify-content: center;
+  z-index: 99;
+}
+
+.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;
+}
+.chapter_upload_l {
+  padding: 1px 0 0 10px;
+}
+.first {
+  border: none;
+  outline: none;
+  width: 80%;
+  min-width: 215px;
+  z-index: 99;
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.info_btn {
+  color: #fff;
+  background-color: #0f7eff;
+  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;
+}
+.info_btn:hover {
+  background-color: #4f7cd5 !important;
+}
 </style>