修改赛事页面及功能

src/components/pages/race/addRace.vue

@@ -17,12 +17,24 @@
         <div class="navImg">
           <img src="../../../assets/icon/anliDetail/third.png" alt="" />
         </div>
-        <div>项目实施过程</div>
+        <div>项目安排</div>
       </div>
       <div class="first" @click="checkSteps(4)" :class="{ active: steps == 4 }">
         <div class="navImg">
           <img src="../../../assets/icon/anliDetail/fouth.png" alt="" />
         </div>
+        <div>项目活动过程</div>
+      </div>
+      <div class="first" @click="checkSteps(5)" :class="{ active: steps == 5 }">
+        <div class="navImg">
+          <img src="../../../assets/icon/anliDetail/five.png" alt="" />
+        </div>
+        <div>项目成果交流与评价</div>
+      </div>
+      <div class="first" @click="checkSteps(6)" :class="{ active: steps == 6 }">
+        <div class="navImg">
+          <img src="../../../assets/icon/anliDetail/six.png" alt="" />
+        </div>
         <div>项目成效与反思</div>
       </div>
     </div>
@@ -44,10 +56,16 @@
         :raceProcess="raceProcess"
         v-if="steps == 3"
       ></ProjectProcess>
+      <ProjectActpro
+        @upRaceAct="updateRaceAct"
+        :raceProcess="raceProcess"
+        v-if="steps == 4"
+      ></ProjectActpro>
+      <ProjectExceva @upExc="updateProExc" :raceExceva="raceExceva" v-if="steps == 5"></ProjectExceva>
       <ProjectEffect
         @upproEff="updateProEff"
         :raceEffect="raceEffect"
-        v-if="steps == 4"
+        v-if="steps == 6"
       ></ProjectEffect>
     </div>
     <div class="race_btn">
@@ -64,13 +82,19 @@
           align-items: center;
         "
       >
+        <el-button
+          type="primary"
+          @click="dialogVisible1 = true"
+          v-if="steps != 1"
+          >跳过</el-button
+        >
         <el-button type="primary" @click="lastSteps" v-if="steps != 1"
           >上一步</el-button
         >
-        <el-button type="primary" @click="nextSteps" v-if="steps != 4"
+        <el-button type="primary" @click="nextSteps" v-if="steps != 6"
           >下一步</el-button
         >
-        <el-button type="primary" @click="isAddOrUpRace" v-if="steps == 4"
+        <el-button type="primary" @click="isAddOrUpRace(0)" v-if="steps == 6"
           >确认上传</el-button
         >
       </div>
@@ -105,6 +129,32 @@
         >
       </span>
     </el-dialog>
+    <el-dialog
+      title="提示"
+      :visible.sync="dialogVisible1"
+      :append-to-body="true"
+      width="650px"
+      :before-close="handleClose"
+      class="dialog_diy"
+    >
+      <div class="createBox">
+        <div class="success">
+          <img src="../../../assets/icon/success.png" alt="" />
+        </div>
+        <div class="cresteMessage">
+          案例征集必填内容已提交，您确定要跳过网页端填写吗？
+          <span style="color: #9a9a9a"
+            >建议：网页端填写便于平台留存与展示，建议填写。</span
+          >
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="isAddOrUpRace(1)"
+          >跳过并提交</el-button
+        >
+        <el-button @click="dialogVisible1 = false">继续填写</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -112,12 +162,16 @@
 import RaceDetail from "./addRace/raceDetail.vue";
 import RaceOverview from "./addRace/raceOverview.vue";
 import ProjectProcess from "./addRace/projectProcess.vue";
+import ProjectActpro from "./addRace/projectActpro.vue";
+import ProjectExceva from "./addRace/projectExceva.vue";
 import ProjectEffect from "./addRace/projectEffect.vue";
 export default {
   components: {
     RaceDetail,
     RaceOverview,
     ProjectProcess,
+    ProjectActpro,
+    ProjectExceva,
     ProjectEffect,
   },
   data() {
@@ -127,37 +181,49 @@ export default {
       oid: this.$route.query.oid,
       aid: this.$route.query.aid ? this.$route.query.aid : "",
       dialogVisible: false,
+      dialogVisible1: false,
+      isJump: 0,
       raceInfo: {
         title: "",
         type: [],
         cover: [],
         tableData: [],
         courseText: "",
+        data: [],
       },
       raceOverView: {
         driQuestion: { brief: "", data: [] },
         tarDesign: { brief: "", data: [] },
         actiDesign: { brief: "", data: [] },
-        evaDesign: { brief: "", data: [] },
-        other: { brief: "", data: [] },
       },
       raceProcess: {
-        actBox: [
+        stageBox: [
           {
-            actName: "",
-            driQuestion: { title: "", brief: "", data: [] },
-            tarDesign: { title: "", brief: "", data: [] },
-            actiDesign: { title: "", brief: "", data: [] },
-            evaDesign: { title: "", brief: "", data: [] },
+            staTitle: "",
+            allTime: "",
+            brief: "",
+            data: [],
+            actBox: [
+              {
+                actName: "",
+                actTime: "",
+                driQuestion: { brief: "", data: [] },
+                tarDesign: { brief: "", data: [] },
+                actiDesign: { brief: "", data: [] },
+                evaDesign: { brief: "", data: [] },
+              },
+            ],
           },
         ],
       },
-      raceEffect: [
-        {
-          proEffText: "",
-          proRefText: "",
-        },
-      ],
+      raceExceva: {
+        brief: "",
+        data: [],
+      },
+      raceEffect: {
+        brief: "",
+        data: [],
+      },
     };
   },
   methods: {
@@ -188,10 +254,17 @@ export default {
     updateRacePro(racePro) {
       this.raceProcess = racePro;
     },
+    updateRaceAct(raceAct) {
+      this.raceProcess = raceAct;
+    },
     updateProEff(raceEff) {
       this.raceEffect = raceEff;
     },
-    isAddOrUpRace() {
+    updateProExc(raceExc){
+      this.raceExceva = raceExc;
+    },
+    isAddOrUpRace(t) {
+      this.isJump = t;
       if (this.aid == "") {
         this.addRace();
       } else {
@@ -205,6 +278,8 @@ export default {
           info: JSON.stringify(this.raceInfo).replaceAll(/%/g, "%25"),
           over: JSON.stringify(this.raceOverView).replaceAll(/%/g, "%25"),
           pro: JSON.stringify(this.raceProcess).replaceAll(/%/g, "%25"),
+          act:JSON.stringify(this.raceProcess).replaceAll(/%/g, "%25"),
+          exc:JSON.stringify(this.raceExceva).replaceAll(/%/g, "%25"),
           courseType: JSON.stringify(this.raceInfo.type).replaceAll(
             /%/g,
             "%25"
@@ -219,7 +294,14 @@ export default {
             message: "新增成功",
             type: "success",
           });
-          this.dialogVisible = true;
+          if (this.isJump == 0) {
+            this.dialogVisible = true;
+          } else {
+            this.goTo(
+              "/eventCenter?userid=" + this.userid + "&oid=" + this.oid
+            );
+            this.dialogVisible1 = false;
+          }
         })
         .catch((err) => {
           this.$message.error("网络不佳");
@@ -233,6 +315,8 @@ export default {
           info: JSON.stringify(this.raceInfo).replaceAll(/%/g, "%25"),
           over: JSON.stringify(this.raceOverView).replaceAll(/%/g, "%25"),
           pro: JSON.stringify(this.raceProcess).replaceAll(/%/g, "%25"),
+          act:JSON.stringify(this.raceProcess).replaceAll(/%/g, "%25"),
+          exc:JSON.stringify(this.raceExceva).replaceAll(/%/g, "%25"),
           res: JSON.stringify(this.raceEffect).replaceAll(/%/g, "%25"),
           courseType: JSON.stringify(this.raceInfo.type).replaceAll(
             /%/g,
@@ -248,7 +332,14 @@ export default {
             message: "修改成功",
             type: "success",
           });
-          this.dialogVisible = true;
+          if (this.isJump == 0) {
+            this.dialogVisible = true;
+          } else {
+            this.goTo(
+              "/eventCenter?userid=" + this.userid + "&oid=" + this.oid
+            );
+            this.dialogVisible1 = false;
+          }
         })
         .catch((err) => {
           this.$message.error("网络不佳");
@@ -267,6 +358,7 @@ export default {
               this.raceInfo = JSON.parse(res.data[0][0].info);
               this.raceOverView = JSON.parse(res.data[0][0].overview);
               this.raceProcess = JSON.parse(res.data[0][0].process);
+              this.raceExceva = JSON.parse(res.data[0][0].proexc);
               this.raceEffect = JSON.parse(res.data[0][0].results);
             }
           })
@@ -283,6 +375,14 @@ export default {
 </script>
 
 <style scoped>
+@media screen and (max-width: 1280px) {
+  .first > div:nth-child(2) {
+    width: 80px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
 .dialog_diy >>> .el-dialog__header {
   background: #3c3c3c !important;
   padding: 15px 20px;

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

@@ -0,0 +1,676 @@
+<template>
+  <!-- 项目活动过程 -->
+  <div class="pb_content">
+    <div class="race_content_body">
+      <div class="raceBox">
+        <div class="stepBg">
+          <div
+            class="steps"
+            v-for="(sta, staIndex) in raceAct.stageBox"
+            :key="staIndex"
+          >
+            <div>
+              <img src="../../../../assets/icon/race/progress.png" alt="" />
+            </div>
+            <div class="stepRightNav">
+              <div>阶段{{ staIndex + 1 }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="right">
+          <div v-for="(sa, saIndex) in raceAct.stageBox" :key="saIndex">
+            <div class="right_title">阶段{{ saIndex + 1 }}</div>
+            <div class="saBox">
+              <div class="saLittleBox">
+                <div>
+                  <editor-bar
+                    v-model="sa.brief"
+                    @change="upRaceAct"
+                  ></editor-bar>
+                </div>
+                <div>
+                  <div class="basic_box">
+                    <div>
+                      <div
+                        class="add_chapters_box"
+                        v-if="sa.data && sa.data.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="(item, index) in sa.data"
+                          :key="item.id"
+                        >
+                          <div class="chapter_upload_t"></div>
+                          <div class="chapter_upload_o">
+                            <div class="chapter_upload_l">
+                              <div
+                                v-if="item.type == 2"
+                                class="chapter_upload_l_i1"
+                              ></div>
+                              <div
+                                v-if="item.type == 1 || item.type == 3"
+                                class="chapter_upload_l_i5"
+                              ></div>
+                            </div>
+                            <div class="chapter_upload_ic">
+                              <div class="chapter_upload_ic_l"></div>
+                              <div
+                                class="chapter_upload_ic_r"
+                                @click.stop="
+                                  deleteChapterData($event, saIndex, index)
+                                "
+                              >
+                                <div></div>
+                              </div>
+                            </div>
+                            <div class="chapter_upload_n">
+                              <input
+                                class="first"
+                                v-if="item.type == 1 || item.type == 3"
+                                :placeholder="item.name"
+                              />
+                              <input
+                                class="first"
+                                v-if="item.type == 2"
+                                :placeholder="item.name"
+                              />
+                              <div class="chapter_upload_ud">
+                                <div class="chapter_upload_up"></div>
+                                <div class="chapter_upload_down"></div>
+                              </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,video/mp4, video/quicktime, video/x-msvideo,image/*"
+                          style="display: none"
+                          @change="beforeUpload($event, null, saIndex)"
+                        />
+                      </button>
+                    </div>
+                    <div v-if="sa.data.proVisible" class="mask">
+                      <div class="progressBox">
+                        <div class="lbox">
+                          <img
+                            src="../../../../assets/loading.gif"
+                          />上传中，请稍后
+                        </div>
+                        <el-progress
+                          :text-inside="true"
+                          :stroke-width="20"
+                          :percentage="sa.data.progress ? sa.data.progress : 0"
+                          style="width: 80%"
+                        ></el-progress>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import EditorBar from "../../../tools/wangEnduit";
+export default {
+  components: { EditorBar },
+  props: ["raceProcess"],
+  data() {
+    return {
+      raceAct: {
+        stageBox: [
+          {
+            staTitle: "",
+            allTime: "",
+            brief: "",
+            data: [],
+            actBox: [
+              {
+                actName: "",
+                actTime: "",
+                driQuestion: { brief: "", data: [] },
+                tarDesign: { brief: "", data: [] },
+                actiDesign: { brief: "", data: [] },
+                evaDesign: { brief: "", data: [] },
+              },
+            ],
+          },
+        ],
+      },
+      stage: 0,
+    };
+  },
+  methods: {
+    upRaceAct() {
+      this.$emit("upRaceAct", this.raceAct);
+    },
+    addImg(e) {
+      var el = e.currentTarget;
+      el.getElementsByTagName("input")[0].click();
+    },
+    imgChange(file, fileList, type, sindex) {
+      var _tmp = this.raceAct.stageBox[sindex].data;
+      this.noneBtnImg = _tmp.length >= 1;
+    },
+    deleteChapterData(e, si, i) {
+      e.stopPropagation();
+      this.raceAct.stageBox[si].data.splice(i, 1);
+      this.upRaceAct();
+    },
+    beforeUpload(event, type, sindex) {
+      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 type1 = type;
+      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
+      var _this = this;
+      var b = [
+        "DOC",
+        "DOCX",
+        "DOCM",
+        "DOTM",
+        "DOTX",
+        "PPTX",
+        "PPSX",
+        "PPT",
+        "PPS",
+        "PPTM",
+        "POTM",
+        "PPAM",
+        "POTX",
+        "PPSM",
+      ];
+      var c = ["PDF", "DOT", "DOC", "DOCX", "PPT", "PPTX", "XLSX", "XLS"];
+      var d = [
+        "BMP",
+        "PJP",
+        "APNG",
+        "PNG",
+        "JPG",
+        "GIF",
+        "SVG",
+        "JPEG",
+        "JPG",
+        "ICO",
+        "PGPEG",
+        "AVIF",
+      ];
+      if (
+        b.indexOf(
+          file.name
+            .split(".")
+            [file.name.split(".").length - 1].toLocaleUpperCase()
+        ) != -1
+      ) {
+        if (file.size / 1024 / 1024 > 10) {
+          this.$message.error("上传文件大于10兆,请重新选择文件！");
+          return;
+        }
+      } else if (
+        file.name
+          .split(".")
+          [file.name.split(".").length - 1].toLocaleUpperCase() != "PDF"
+      ) {
+        if (file.size / 1024 / 1024 > 5) {
+          this.$message.error("添加成上传文件大于5兆,请重新选择文件！");
+          return;
+        }
+      }
+
+      if (
+        c.indexOf(
+          file.name
+            .split(".")
+            [file.name.split(".").length - 1].toLocaleUpperCase()
+        ) != -1
+      ) {
+        type1 = 1;
+      } else if (
+        d.indexOf(
+          file.name
+            .split(".")
+            [file.name.split(".").length - 1].toLocaleUpperCase()
+        ) != -1
+      ) {
+        type1 = 3;
+      } else {
+        type1 = 2;
+      }
+
+      _this.raceAct.stageBox[sindex].data.progress = 0;
+      _this.raceAct.stageBox[sindex].data.proVisible = true;
+
+      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) + '%');
+            _this.raceAct.stageBox[sindex].data.progress = parseInt(
+              (evt.loaded * 80) / evt.total
+            );
+          })
+          .send(function (err, data) {
+            _this.raceAct.stageBox[sindex].data.progress = 100;
+            setTimeout(() => {
+              _this.raceAct.stageBox[sindex].data.proVisible = false;
+              _this.$forceUpdate();
+            }, 1000);
+            if (err) {
+              _this.$message.error("上传失败");
+            } else {
+              _this.raceAct.stageBox[sindex].data.push({
+                name: file.name,
+                url: data.Location,
+                type: type1,
+              });
+              _this.imgChange(null, null, type1, sindex);
+              _this.upRaceAct();
+              console.log(data.Location);
+            }
+          });
+      }
+    },
+  },
+  created() {
+    this.raceAct = this.raceProcess;
+  },
+};
+</script>
+
+<style scoped>
+@media screen and (max-width: 1280px) {
+  .right_title{
+    padding: 20px 0 20px 10px !important;
+  }
+  .saLittleBox {
+    padding: 20px 0 10px 10px !important;
+  }
+}
+.pb_content {
+  width: 100%;
+  height: 100%;
+}
+.race_content_body {
+  width: 100%;
+  position: relative;
+  margin: 0;
+  height: 100%;
+}
+
+.raceBox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+}
+
+.stepBg {
+  padding: 80px 0 0 0;
+  margin: 0 25px 0 0;
+  width: 20%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+  background: #fff;
+  /* min-height: 800px; */
+  height: calc(100% - 80px);
+  border-radius: 15px;
+  overflow: auto;
+  min-width: 260px;
+  flex-direction: column;
+}
+.steps {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  position: relative;
+  width: 145px;
+  height: 130px;
+}
+.steps > div:nth-child(1) > img {
+  z-index: 9;
+  position: relative;
+}
+.stepRightNav {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-left: 10px;
+  height: 50px;
+}
+.stepBg .steps::after {
+  content: "";
+  height: 100%;
+  background: #eee;
+  width: 4px;
+  position: absolute;
+  left: 15px;
+  top: calc(50% + (35px / 2));
+  transform: translateY(-50%);
+  z-index: 1;
+}
+
+.right {
+  width: calc(100% - 20%);
+  background: rgb(255, 255, 255);
+  border-radius: 10px;
+  overflow: auto;
+  height: 100%;
+  border-radius: 15px;
+  /* max-height: 800px; */
+}
+.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;
+}
+
+.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;
+}
+.mask {
+  background-color: rgb(0 0 0 / 30%);
+  /* position: fixed; */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 20000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.progressBox {
+  width: 300px;
+  height: 150px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 0 6px 1px #bfbfbf;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.progressBox .lbox {
+  height: 100px;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+}
+
+.progressBox .lbox img {
+  width: 40px;
+  margin-right: 20px;
+}
+
+.progressBox >>> .el-progress-bar__outer {
+  background-color: #d1dfff !important;
+}
+
+.progressBox .lbox {
+  height: 100px;
+  font-size: 19px;
+  display: flex;
+  align-items: center;
+}
+
+.progressBox .lbox img {
+  width: 40px;
+  margin-right: 20px;
+}
+.saBox {
+  width: 96%;
+  margin: 0 auto;
+  background: #fbfbfb;
+  border-radius: 10px;
+}
+.saLittleBox {
+  width: 100%;
+  padding: 25px 0 10px 25px;
+}
+.saLittleBox > div:nth-child(1) {
+  width: 85%;
+}
+.saLittleBox > div:nth-child(2) {
+  width: 90%;
+  margin-top: 25px;
+}
+.right_title {
+  height: 30px;
+  font-size: 1.5em;
+  font-weight: bold;
+  color: #0f7eff;
+  width: 80px;
+  padding: 20px 0 20px 30px;
+}
+</style>

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

@@ -9,38 +9,110 @@
               <img src="../../../../assets/icon/race/progress.png" alt="" />
             </div>
             <div class="stepRightNav">
-              <div>项目成效</div>
-            </div>
-          </div>
-          <div class="steps">
-            <div>
-              <img src="../../../../assets/icon/race/progress.png" alt="" />
-            </div>
-            <div class="stepRightNav">
-              <div>项目反思</div>
+              <div>项目成效与反思</div>
             </div>
           </div>
         </div>
         <div class="right">
           <div class="whiteBg">
-            <div class="right_title">项目成效</div>
-            <div class="basic_box1">
-              <div class="editorCss">
-                <editor-bar
-                  v-model="raceEff.proEffText"
-                  @change="upproEff"
-                ></editor-bar>
-              </div>
-            </div>
-          </div>
-          <div class="whiteBg">
-            <div class="right_title">项目反思</div>
-            <div class="basic_box1">
-              <div class="editorCss">
-                <editor-bar
-                  v-model="raceEff.proRefText"
-                  @change="upproEff"
-                ></editor-bar>
+            <div class="right_title">项目成效与反思</div>
+            <div class="saBox">
+              <div class="saLittleBox">
+                <div>
+                  <editor-bar
+                    v-model="raceEff.brief"
+                    @change="upproEff"
+                  ></editor-bar>
+                </div>
+                <div>
+                  <div class="basic_box">
+                    <div>
+                      <div
+                        class="add_chapters_box"
+                        v-if="raceEff.data && raceEff.data.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="(item, index) in raceEff.data"
+                          :key="item.id"
+                        >
+                          <div class="chapter_upload_t"></div>
+                          <div class="chapter_upload_o">
+                            <div class="chapter_upload_l">
+                              <div
+                                v-if="item.type == 2"
+                                class="chapter_upload_l_i1"
+                              ></div>
+                              <div
+                                v-if="item.type == 1 || item.type == 3"
+                                class="chapter_upload_l_i5"
+                              ></div>
+                            </div>
+                            <div class="chapter_upload_ic">
+                              <div class="chapter_upload_ic_l"></div>
+                              <div
+                                class="chapter_upload_ic_r"
+                                @click.stop="deleteChapterData($event, index)"
+                              >
+                                <div></div>
+                              </div>
+                            </div>
+                            <div class="chapter_upload_n">
+                              <input
+                                class="first"
+                                v-if="item.type == 1 || item.type == 3"
+                                :placeholder="item.name"
+                              />
+                              <input
+                                class="first"
+                                v-if="item.type == 2"
+                                :placeholder="item.name"
+                              />
+                              <div class="chapter_upload_ud">
+                                <div class="chapter_upload_up"></div>
+                                <div class="chapter_upload_down"></div>
+                              </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,video/mp4, video/quicktime, video/x-msvideo,image/*"
+                          style="display: none"
+                          @change="beforeUpload($event, null)"
+                        />
+                      </button>
+                    </div>
+                    <div v-if="raceEff.data.proVisible" class="mask">
+                      <div class="progressBox">
+                        <div class="lbox">
+                          <img
+                            src="../../../../assets/loading.gif"
+                          />上传中，请稍后
+                        </div>
+                        <el-progress
+                          :text-inside="true"
+                          :stroke-width="20"
+                          :percentage="
+                            raceEff.data.progress ? raceEff.data.progress : 0
+                          "
+                          style="width: 80%"
+                        ></el-progress>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -57,43 +129,178 @@ export default {
   props: ["raceEffect"],
   data() {
     return {
-      steps: 0,
       raceEff: {
-        proEffText: "",
-        proRefText: "",
+        brief: "",
+        data: [],
       },
     };
   },
   methods: {
-    handleClose(done) {
-      done();
-    },
     change(val) {
       console.log(val);
     },
+    upproEff() {
+      this.$emit("upproEff", this.raceEff);
+    },
     addImg(e) {
       var el = e.currentTarget;
       el.getElementsByTagName("input")[0].click();
     },
-    getChapterData(e, i, j, ic, type) {
+    imgChange(file, fileList, type) {
+      var _tmp = this.raceEff.data;
+      this.noneBtnImg = _tmp.length >= 1;
+    },
+    deleteChapterData(e, i) {
       e.stopPropagation();
-      if ((type == 2 || type == 3) && e.target.tagName !== "INPUT") {
-        console.log("还不能下载图片喔");
-      }
+      this.raceEff.data.splice(i, 1);
+      this.upproEff();
     },
-    upproEff() {
-      this.$emit("upproEff", this.raceEff);
+    beforeUpload(event, type) {
+      var file = event.target.files[0];
+      var credentials = {
+        accessKeyId: "AKIATLPEDU37QV5CHLMH",
+        secretAccessKey: "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",
+      }; //秘钥形式的登录上传
+      window.AWS.config.update(credentials);
+      window.AWS.config.region = "cn-northwest-1"; //设置区域
+      var type1 = type;
+      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
+      var _this = this;
+      var b = [
+        "DOC",
+        "DOCX",
+        "DOCM",
+        "DOTM",
+        "DOTX",
+        "PPTX",
+        "PPSX",
+        "PPT",
+        "PPS",
+        "PPTM",
+        "POTM",
+        "PPAM",
+        "POTX",
+        "PPSM",
+      ];
+      var c = ["PDF", "DOT", "DOC", "DOCX", "PPT", "PPTX", "XLSX", "XLS"];
+      var d = [
+        "BMP",
+        "PJP",
+        "APNG",
+        "PNG",
+        "JPG",
+        "GIF",
+        "SVG",
+        "JPEG",
+        "JPG",
+        "ICO",
+        "PGPEG",
+        "AVIF",
+      ];
+      if (
+        b.indexOf(
+          file.name
+            .split(".")
+            [file.name.split(".").length - 1].toLocaleUpperCase()
+        ) != -1
+      ) {
+        if (file.size / 1024 / 1024 > 10) {
+          this.$message.error("上传文件大于10兆,请重新选择文件！");
+          return;
+        }
+      } else if (
+        file.name
+          .split(".")
+          [file.name.split(".").length - 1].toLocaleUpperCase() != "PDF"
+      ) {
+        if (file.size / 1024 / 1024 > 5) {
+          this.$message.error("添加成上传文件大于5兆,请重新选择文件！");
+          return;
+        }
+      }
+
+      if (
+        c.indexOf(
+          file.name
+            .split(".")
+            [file.name.split(".").length - 1].toLocaleUpperCase()
+        ) != -1
+      ) {
+        type1 = 1;
+      } else if (
+        d.indexOf(
+          file.name
+            .split(".")
+            [file.name.split(".").length - 1].toLocaleUpperCase()
+        ) != -1
+      ) {
+        type1 = 3;
+      } else {
+        type1 = 2;
+      }
+
+      _this.raceEff.data.progress = 0;
+      _this.raceEff.data.proVisible = true;
+
+      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) + '%');
+            _this.raceEff.data.progress = parseInt(
+              (evt.loaded * 80) / evt.total
+            );
+          })
+          .send(function (err, data) {
+            _this.raceEff.data.progress = 100;
+            setTimeout(() => {
+              _this.raceEff.data.proVisible = false;
+              _this.$forceUpdate();
+            }, 1000);
+            if (err) {
+              _this.$message.error("上传失败");
+            } else {
+              _this.raceEff.data.push({
+                name: file.name,
+                url: data.Location,
+                type: type1,
+              });
+              _this.imgChange(null, null, type1);
+              _this.upproEff();
+              console.log(data.Location);
+            }
+          });
+      }
     },
   },
   created() {
-    this.raceEff.proEffText = this.raceEffect.proEffText;
-    this.raceEff.proRefText = this.raceEffect.proRefText;
+    this.raceEff = this.raceEffect;
   },
 };
 </script>
 
 <style scoped>
 @media screen and (max-width: 1280px) {
+  .saLittleBox {
+    padding: 20px 0 10px 10px !important;
+  }
 }
 .pb_content {
   width: 100%;
@@ -136,9 +343,8 @@ export default {
   flex-direction: row;
   flex-wrap: nowrap;
   position: relative;
-  width: 145px;
+  width: 210px;
   height: 130px;
-  min-height: 130px;
 }
 .steps > div:nth-child(1) > img {
   z-index: 9;
@@ -171,20 +377,6 @@ export default {
   height: 50px;
 }
 
-.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);
@@ -227,13 +419,44 @@ export default {
   width: 90% !important;
 }
 
+.right_title {
+  height: 30px;
+  padding: 15px 0 15px 0;
+  border-bottom: 1px solid #f2f2f2;
+  font-size: 1.5em;
+  font-weight: bold;
+  color: #0f7eff;
+  margin: 0 auto;
+  width: 95%;
+}
+.whiteBg {
+  background: #fff;
+  border-radius: 10px;
+}
+.basic_box1 {
+  margin: 10px auto;
+  position: relative;
+  padding: 0 20px 0 20px;
+}
+.stepBg .steps:nth-child(1) ::after,
+.stepBg .steps:nth-child(2) ::after,
+.stepBg .steps:nth-child(3) ::after {
+  content: "";
+  height: 100%;
+  background: #eee;
+  width: 4px;
+  position: absolute;
+  left: 15px;
+  top: calc(50% + (35px / 2));
+  transform: translateY(-50%);
+  z-index: 1;
+}
 .basic_box {
   position: relative;
   margin: 0;
   min-height: 0;
   width: 90%;
 }
-
 .add_info_box {
   margin: 20px 0;
 }
@@ -422,37 +645,74 @@ export default {
 .info_btn:hover {
   background-color: #4f7cd5 !important;
 }
-
-.right_title {
-  height: 30px;
-  padding: 15px 0 15px 0;
-  border-bottom: 1px solid #f2f2f2;
-  font-size: 1.5em;
-  font-weight: bold;
-  color: #0f7eff;
-  margin: 0 auto;
-  width: 95%;
+.mask {
+  background-color: rgb(0 0 0 / 30%);
+  /* position: fixed; */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 20000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-.whiteBg {
+
+.progressBox {
+  width: 300px;
+  height: 150px;
   background: #fff;
   border-radius: 10px;
+  box-shadow: 0 0 6px 1px #bfbfbf;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
 }
-.basic_box1 {
-  margin: 10px auto;
-  position: relative;
-  padding: 0 20px 0 20px;
+
+.progressBox .lbox {
+  height: 100px;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
 }
-.stepBg .steps:nth-child(1) ::after,
-.stepBg .steps:nth-child(2) ::after,
-.stepBg .steps:nth-child(3) ::after {
-  content: "";
-  height: 100%;
-  background: #eee;
-  width: 4px;
-  position: absolute;
-  left: 15px;
-  top: calc(50% + (35px / 2));
-  transform: translateY(-50%);
-  z-index: 1;
+
+.progressBox .lbox img {
+  width: 40px;
+  margin-right: 20px;
+}
+
+.progressBox >>> .el-progress-bar__outer {
+  background-color: #d1dfff !important;
+}
+
+.progressBox .lbox {
+  height: 100px;
+  font-size: 19px;
+  display: flex;
+  align-items: center;
+}
+
+.progressBox .lbox img {
+  width: 40px;
+  margin-right: 20px;
+}
+.saBox {
+  width: 96%;
+  margin: 0 auto;
+  background: #fbfbfb;
+  border-radius: 10px;
+}
+.saLittleBox {
+  width: 100%;
+  padding: 25px 0 10px 25px;
+}
+.saLittleBox > div:nth-child(1) {
+  width: 85%;
+}
+.saLittleBox > div:nth-child(2) {
+  width: 90%;
+  margin-top: 25px;
 }
 </style>

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

@@ -0,0 +1,718 @@
+<template>
+  <!-- 项目成果交流与评价 -->
+  <div class="pb_content">
+    <div class="race_content_body">
+      <div class="raceBox">
+        <div class="stepBg">
+          <div class="steps">
+            <div>
+              <img src="../../../../assets/icon/race/progress.png" alt="" />
+            </div>
+            <div class="stepRightNav">
+              <div>项目成果交流与评价</div>
+            </div>
+          </div>
+        </div>
+        <div class="right">
+          <div class="whiteBg">
+            <div class="right_title">项目成果交流与评价</div>
+            <div class="saBox">
+              <div class="saLittleBox">
+                <div>
+                  <editor-bar
+                    v-model="raceExc.brief"
+                    @change="upExc"
+                  ></editor-bar>
+                </div>
+                <div>
+                  <div class="basic_box">
+                    <div>
+                      <div
+                        class="add_chapters_box"
+                        v-if="raceExc.data && raceExc.data.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="(item, index) in raceExc.data"
+                          :key="item.id"
+                        >
+                          <div class="chapter_upload_t"></div>
+                          <div class="chapter_upload_o">
+                            <div class="chapter_upload_l">
+                              <div
+                                v-if="item.type == 2"
+                                class="chapter_upload_l_i1"
+                              ></div>
+                              <div
+                                v-if="item.type == 1 || item.type == 3"
+                                class="chapter_upload_l_i5"
+                              ></div>
+                            </div>
+                            <div class="chapter_upload_ic">
+                              <div class="chapter_upload_ic_l"></div>
+                              <div
+                                class="chapter_upload_ic_r"
+                                @click.stop="deleteChapterData($event, index)"
+                              >
+                                <div></div>
+                              </div>
+                            </div>
+                            <div class="chapter_upload_n">
+                              <input
+                                class="first"
+                                v-if="item.type == 1 || item.type == 3"
+                                :placeholder="item.name"
+                              />
+                              <input
+                                class="first"
+                                v-if="item.type == 2"
+                                :placeholder="item.name"
+                              />
+                              <div class="chapter_upload_ud">
+                                <div class="chapter_upload_up"></div>
+                                <div class="chapter_upload_down"></div>
+                              </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,video/mp4, video/quicktime, video/x-msvideo,image/*"
+                          style="display: none"
+                          @change="beforeUpload($event, null)"
+                        />
+                      </button>
+                    </div>
+                    <div v-if="raceExc.data.proVisible" class="mask">
+                      <div class="progressBox">
+                        <div class="lbox">
+                          <img
+                            src="../../../../assets/loading.gif"
+                          />上传中，请稍后
+                        </div>
+                        <el-progress
+                          :text-inside="true"
+                          :stroke-width="20"
+                          :percentage="
+                            raceExc.data.progress ? raceExc.data.progress : 0
+                          "
+                          style="width: 80%"
+                        ></el-progress>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import EditorBar from "../../../tools/wangEnduit";
+export default {
+  components: { EditorBar },
+  props: ["raceExceva"],
+  data() {
+    return {
+      raceExc: {
+        brief: "",
+        data: [],
+      },
+    };
+  },
+  methods: {
+    change(val) {
+      console.log(val);
+    },
+    upExc() {
+      this.$emit("upExc", this.raceExc);
+    },
+    addImg(e) {
+      var el = e.currentTarget;
+      el.getElementsByTagName("input")[0].click();
+    },
+    imgChange(file, fileList, type) {
+      var _tmp = this.raceExc.data;
+      this.noneBtnImg = _tmp.length >= 1;
+    },
+    deleteChapterData(e, i) {
+      e.stopPropagation();
+      this.raceExc.data.splice(i, 1);
+      this.upExc();
+    },
+    beforeUpload(event, type) {
+      var file = event.target.files[0];
+      var credentials = {
+        accessKeyId: "AKIATLPEDU37QV5CHLMH",
+        secretAccessKey: "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",
+      }; //秘钥形式的登录上传
+      window.AWS.config.update(credentials);
+      window.AWS.config.region = "cn-northwest-1"; //设置区域
+      var type1 = type;
+      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
+      var _this = this;
+      var b = [
+        "DOC",
+        "DOCX",
+        "DOCM",
+        "DOTM",
+        "DOTX",
+        "PPTX",
+        "PPSX",
+        "PPT",
+        "PPS",
+        "PPTM",
+        "POTM",
+        "PPAM",
+        "POTX",
+        "PPSM",
+      ];
+      var c = ["PDF", "DOT", "DOC", "DOCX", "PPT", "PPTX", "XLSX", "XLS"];
+      var d = [
+        "BMP",
+        "PJP",
+        "APNG",
+        "PNG",
+        "JPG",
+        "GIF",
+        "SVG",
+        "JPEG",
+        "JPG",
+        "ICO",
+        "PGPEG",
+        "AVIF",
+      ];
+      if (
+        b.indexOf(
+          file.name
+            .split(".")
+            [file.name.split(".").length - 1].toLocaleUpperCase()
+        ) != -1
+      ) {
+        if (file.size / 1024 / 1024 > 10) {
+          this.$message.error("上传文件大于10兆,请重新选择文件！");
+          return;
+        }
+      } else if (
+        file.name
+          .split(".")
+          [file.name.split(".").length - 1].toLocaleUpperCase() != "PDF"
+      ) {
+        if (file.size / 1024 / 1024 > 5) {
+          this.$message.error("添加成上传文件大于5兆,请重新选择文件！");
+          return;
+        }
+      }
+
+      if (
+        c.indexOf(
+          file.name
+            .split(".")
+            [file.name.split(".").length - 1].toLocaleUpperCase()
+        ) != -1
+      ) {
+        type1 = 1;
+      } else if (
+        d.indexOf(
+          file.name
+            .split(".")
+            [file.name.split(".").length - 1].toLocaleUpperCase()
+        ) != -1
+      ) {
+        type1 = 3;
+      } else {
+        type1 = 2;
+      }
+
+      _this.raceExc.data.progress = 0;
+      _this.raceExc.data.proVisible = true;
+
+      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) + '%');
+            _this.raceExc.data.progress = parseInt(
+              (evt.loaded * 80) / evt.total
+            );
+          })
+          .send(function (err, data) {
+            _this.raceExc.data.progress = 100;
+            setTimeout(() => {
+              _this.raceExc.data.proVisible = false;
+              _this.$forceUpdate();
+            }, 1000);
+            if (err) {
+              _this.$message.error("上传失败");
+            } else {
+              _this.raceExc.data.push({
+                name: file.name,
+                url: data.Location,
+                type: type1,
+              });
+              _this.imgChange(null, null, type1);
+              _this.upExc();
+              console.log(data.Location);
+            }
+          });
+      }
+    },
+  },
+  created() {
+    this.raceExc = this.raceExceva;
+  },
+};
+</script>
+
+<style scoped>
+@media screen and (max-width: 1280px) {
+  .saLittleBox {
+    padding: 20px 0 10px 10px !important;
+  }
+}
+.pb_content {
+  width: 100%;
+  height: 100%;
+}
+.race_content_body {
+  width: 100%;
+  position: relative;
+  margin: 0;
+  height: 100%;
+}
+
+.raceBox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+}
+
+.stepBg {
+  padding: 80px 0 0 0;
+  margin: 0 25px 0 0;
+  width: 20%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+  background: #fff;
+  /* min-height: 800px; */
+  height: calc(100% - 80px);
+  border-radius: 15px;
+  overflow: auto;
+  min-width: 260px;
+  flex-direction: column;
+}
+.steps {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  position: relative;
+  width: 210px;
+  height: 130px;
+}
+.steps > div:nth-child(1) > img {
+  z-index: 9;
+  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;
+  height: 50px;
+}
+
+.right {
+  width: calc(100% - 20%);
+  background: rgb(255, 255, 255);
+  border-radius: 10px;
+  overflow: auto;
+  height: 100%;
+  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;
+}
+
+.right_title {
+  height: 30px;
+  padding: 15px 0 15px 0;
+  border-bottom: 1px solid #f2f2f2;
+  font-size: 1.5em;
+  font-weight: bold;
+  color: #0f7eff;
+  margin: 0 auto;
+  width: 95%;
+}
+.whiteBg {
+  background: #fff;
+  border-radius: 10px;
+}
+.basic_box1 {
+  margin: 10px auto;
+  position: relative;
+  padding: 0 20px 0 20px;
+}
+.stepBg .steps:nth-child(1) ::after,
+.stepBg .steps:nth-child(2) ::after,
+.stepBg .steps:nth-child(3) ::after {
+  content: "";
+  height: 100%;
+  background: #eee;
+  width: 4px;
+  position: absolute;
+  left: 15px;
+  top: calc(50% + (35px / 2));
+  transform: translateY(-50%);
+  z-index: 1;
+}
+.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;
+}
+
+.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;
+}
+.mask {
+  background-color: rgb(0 0 0 / 30%);
+  /* position: fixed; */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 20000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.progressBox {
+  width: 300px;
+  height: 150px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 0 6px 1px #bfbfbf;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.progressBox .lbox {
+  height: 100px;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+}
+
+.progressBox .lbox img {
+  width: 40px;
+  margin-right: 20px;
+}
+
+.progressBox >>> .el-progress-bar__outer {
+  background-color: #d1dfff !important;
+}
+
+.progressBox .lbox {
+  height: 100px;
+  font-size: 19px;
+  display: flex;
+  align-items: center;
+}
+
+.progressBox .lbox img {
+  width: 40px;
+  margin-right: 20px;
+}
+.saBox {
+  width: 96%;
+  margin: 0 auto;
+  background: #fbfbfb;
+  border-radius: 10px;
+}
+.saLittleBox {
+  width: 100%;
+  padding: 25px 0 10px 25px;
+}
+.saLittleBox > div:nth-child(1) {
+  width: 85%;
+}
+.saLittleBox > div:nth-child(2) {
+  width: 90%;
+  margin-top: 25px;
+}
+</style>

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

@@ -148,11 +148,15 @@
           </div>
           <div class="whiteBg" style="border-radius: 0">
             <div class="right_first">
-              <div class="right_title">项目成员</div>
-              <div class="addPeople" @click="dialogVisibleMember = true">
-                添加成员
+              <div class="right_title">作者</div>
+              <div
+                class="addPeople"
+                @click="dialogVisibleMember = true"
+                v-if="raceDetail.tableData.length < 6"
+              >
+                添加作者
               </div>
-              <div style="width: 97%; margin: 0 auto">
+              <div class="raTable">
                 <el-table
                   ref="table"
                   :data="raceDetail.tableData"
@@ -228,18 +232,124 @@
                   </el-table-column>
                 </el-table>
               </div>
+              <div style="color: #cd0808; width: 97%; margin: 10px auto">
+                *作者不超过6人；默认第一位为主要负责人，联系电话必填，其余人员可以选填
+              </div>
+            </div>
+          </div>
+          <div class="whiteBg" style="border-radius: 0">
+            <div class="right_first">
+              <div class="right_title">项目简介</div>
+              <div class="secondTop">
+                <textarea
+                  rows="8"
+                  class="binfo_input tAreaCss"
+                  cols
+                  v-model="raceDetail.courseText"
+                  @input="updateTitle"
+                  maxlength="200"
+                ></textarea>
+              </div>
             </div>
           </div>
-          <div class="allBox">
-            <div>项目简介</div>
-            <div class="secondTop">
-              <textarea
-                rows="8"
-                class="binfo_input tAreaCss"
-                cols
-                v-model="raceDetail.courseText"
-                @input="updateTitle"
-              ></textarea>
+          <div class="whiteBg" style="border-radius: 0">
+            <div class="right_first">
+              <div class="right_title">文件上传</div>
+              <div class="secondTop">
+                <div>
+                  <div class="basic_box1">
+                    <div>
+                      <div
+                        class="add_chapters_box"
+                        v-if="raceDetail.data && raceDetail.data.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="(item, index) in raceDetail.data"
+                          :key="item.id"
+                        >
+                          <div class="chapter_upload_t"></div>
+                          <div class="chapter_upload_o">
+                            <div class="chapter_upload_l">
+                              <div
+                                v-if="item.type == 2"
+                                class="chapter_upload_l_i1"
+                              ></div>
+                              <div
+                                v-if="item.type == 1 || item.type == 3"
+                                class="chapter_upload_l_i5"
+                              ></div>
+                            </div>
+                            <div class="chapter_upload_ic">
+                              <div class="chapter_upload_ic_l"></div>
+                              <div
+                                class="chapter_upload_ic_r"
+                                @click.stop="
+                                  deleteChapterData($event, index, 0)
+                                "
+                              >
+                                <div></div>
+                              </div>
+                            </div>
+                            <div class="chapter_upload_n">
+                              <input
+                                class="first"
+                                v-if="item.type == 1 || item.type == 3"
+                                :placeholder="item.name"
+                              />
+                              <input
+                                class="first"
+                                v-if="item.type == 2"
+                                :placeholder="item.name"
+                              />
+                              <div class="chapter_upload_ud">
+                                <div class="chapter_upload_up"></div>
+                                <div class="chapter_upload_down"></div>
+                              </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,video/mp4, video/quicktime, video/x-msvideo,image/*"
+                          style="display: none"
+                          @change="beforeUpload($event, null, 0)"
+                        />
+                      </button>
+                    </div>
+                    <div v-if="raceDetail.data.proVisible" class="mask">
+                      <div class="progressBox">
+                        <div class="lbox">
+                          <img
+                            src="../../../../assets/loading.gif"
+                          />上传中，请稍后
+                        </div>
+                        <el-progress
+                          :text-inside="true"
+                          :stroke-width="20"
+                          :percentage="
+                            raceDetail.data.progress
+                              ? raceDetail.data.progress
+                              : 0
+                          "
+                          style="width: 80%"
+                        ></el-progress>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -349,7 +459,10 @@
               v-if="isSysPic == false && raceDetail.cover.length == 0"
               >选择系统文件</el-button
             >
-            <div class="isSysPic" v-if="isSysPic == true && raceDetail.cover.length > 0">
+            <div
+              class="isSysPic"
+              v-if="isSysPic == true && raceDetail.cover.length > 0"
+            >
               <img :src="raceDetail.cover[0].url" alt="" />
               <div class="deletePic" @click="deleteSysPic">
                 <img src="../../../../assets/icon/delete.png" alt="" />
@@ -427,7 +540,6 @@ export default {
     return {
       tableHeight: "500px",
       formLabelWidth: "100px",
-      steps: 0,
       chooseType: 1,
       CourseType: [],
       CourseTypeJson: [],
@@ -451,6 +563,7 @@ export default {
         cover: [],
         tableData: [],
         courseText: "",
+        data: [],
       },
       tx: require("../../../../assets/avatar.png"),
     };
@@ -525,6 +638,14 @@ export default {
       }
       this.noneBtnImg = _tmp.length >= 1;
     },
+    imgChange(file, fileList, type, jT) {
+      var _tmp = this.raceDetail.data;
+      this.noneBtnImg = _tmp.length >= 1;
+    },
+    deleteChapterData(e, i, t) {
+      e.stopPropagation();
+      this.raceDetail.data.splice(i, 1);
+    },
     chooseSysPic(p) {
       this.raceDetail.cover.push({
         name: "系统图片.png",
@@ -588,7 +709,6 @@ export default {
               _this.raceDetail.cover.push({
                 name: file.name,
                 url: data.Location,
-                uid: file.uid,
               });
               _this.imgChange1(null, null, 1, null);
               _this.choosePicVisible = false;
@@ -597,33 +717,178 @@ export default {
           });
       }
     },
+    beforeUpload(event, type, jsonType) {
+      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 type1 = type;
+      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
+      var _this = this;
+      var b = [
+        "DOC",
+        "DOCX",
+        "DOCM",
+        "DOTM",
+        "DOTX",
+        "PPTX",
+        "PPSX",
+        "PPT",
+        "PPS",
+        "PPTM",
+        "POTM",
+        "PPAM",
+        "POTX",
+        "PPSM",
+      ];
+      var c = ["PDF", "DOT", "DOC", "DOCX", "PPT", "PPTX", "XLSX", "XLS"];
+      var d = [
+        "BMP",
+        "PJP",
+        "APNG",
+        "PNG",
+        "JPG",
+        "GIF",
+        "SVG",
+        "JPEG",
+        "JPG",
+        "ICO",
+        "PGPEG",
+        "AVIF",
+      ];
+      if (
+        b.indexOf(
+          file.name
+            .split(".")
+            [file.name.split(".").length - 1].toLocaleUpperCase()
+        ) != -1
+      ) {
+        if (file.size / 1024 / 1024 > 10) {
+          this.$message.error("上传文件大于10兆,请重新选择文件！");
+          return;
+        }
+      } else if (
+        file.name
+          .split(".")
+          [file.name.split(".").length - 1].toLocaleUpperCase() != "PDF"
+      ) {
+        if (file.size / 1024 / 1024 > 5) {
+          this.$message.error("添加成上传文件大于5兆,请重新选择文件！");
+          return;
+        }
+      }
+
+      if (
+        c.indexOf(
+          file.name
+            .split(".")
+            [file.name.split(".").length - 1].toLocaleUpperCase()
+        ) != -1
+      ) {
+        type1 = 1;
+      } else if (
+        d.indexOf(
+          file.name
+            .split(".")
+            [file.name.split(".").length - 1].toLocaleUpperCase()
+        ) != -1
+      ) {
+        type1 = 3;
+      } else {
+        type1 = 2;
+      }
+
+      _this.raceDetail.data.progress = 0;
+      _this.raceDetail.data.proVisible = true;
+
+      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) + '%');
+            _this.raceDetail.data.progress = parseInt(
+              (evt.loaded * 80) / evt.total
+            );
+          })
+          .send(function (err, data) {
+            // loading.close();
+            _this.raceDetail.data.progress = 100;
+            setTimeout(() => {
+              _this.raceDetail.data.proVisible = false;
+              _this.$forceUpdate();
+            }, 1000);
+            if (err) {
+              _this.$message.error("上传失败");
+            } else {
+              _this.raceDetail.data.push({
+                name: file.name,
+                url: data.Location,
+                type: type1,
+              });
+              _this.imgChange(null, null, type1, jsonType);
+              console.log(data.Location);
+            }
+          });
+      }
+    },
     updateTitle() {
       this.$emit("updateTitle", this.raceDetail);
     },
     isAddPPTeacher() {
-      if (this.sName === "") {
-        this.$message.error("学生姓名不能为空");
-        return;
-      } else if (this.sSubject === "") {
-        this.$message.error("学生学科不能为空");
-        return;
-      } else if (this.sSchool === "") {
-        this.$message.error("学生学校不能为空");
-      } else if (this.sPhone != "") {
-        if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.sPhone)) {
+      if (this.raceDetail.tableData.length == 0) {
+        if (this.sPhone == "") {
+          this.$message.error("手机号不能为空");
+          return;
+        } else if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.sPhone)) {
           this.$message.error("手机号格式不正确");
           return;
         }
-      } else if (this.sEmail != "") {
-        if (
-          !/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(
-            this.sEmail
-          )
-        ) {
-          this.$message.error("邮箱格式不正确");
+      } else {
+        if (this.sName === "") {
+          this.$message.error("学生姓名不能为空");
           return;
+        } else if (this.sSubject === "") {
+          this.$message.error("学生学科不能为空");
+          return;
+        } else if (this.sSchool === "") {
+          this.$message.error("学生学校不能为空");
+        } else if (this.sPhone != "") {
+          if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.sPhone)) {
+            this.$message.error("手机号格式不正确");
+            return;
+          }
+        } else if (this.sEmail != "") {
+          if (
+            !/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(
+              this.sEmail
+            )
+          ) {
+            this.$message.error("邮箱格式不正确");
+            return;
+          }
         }
       }
+
       if (this.isAddOrUp == true) {
         this.raceDetail.tableData[this.upIndex].sn = this.sName;
         this.raceDetail.tableData[this.upIndex].su = this.sSubject;
@@ -664,18 +929,13 @@ export default {
     },
     selectType() {
       this.ajax
-        .get(this.$store.state.api + "selectType")
+        .get(this.$store.state.api + "selectMatType")
         .then((res) => {
           this.CourseType = res.data;
           for (var i = 0; i < res.data[0].length; i++) {
             if (!this.cid) {
               this.raceDetail.type[res.data[0][i].id] = "";
             }
-            if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
-              if (res.data[0][i].name == "栏目") {
-                this.CourseType[0][i].name = "主题";
-              }
-            }
             for (var j = 0; j < res.data[1].length; j++) {
               if (res.data[0][i].id == res.data[1][j].pid) {
                 if (!this.CourseTypeJson[res.data[0][i].id]) {
@@ -710,6 +970,7 @@ export default {
       this.raceDetail.cover = this.raceInfo.cover;
       this.raceDetail.tableData = this.raceInfo.tableData;
       this.raceDetail.courseText = this.raceInfo.courseText;
+      this.raceDetail.data = this.raceInfo.data;
       this.imgChange1(null, null, 1, null);
       this.$forceUpdate();
     },
@@ -791,7 +1052,6 @@ export default {
   position: relative;
   width: 145px;
   height: 130px;
-  min-height: 130px;
 }
 .steps > div:nth-child(1) > img {
   z-index: 9;
@@ -878,11 +1138,13 @@ export default {
   align-items: flex-start;
   width: 100%;
 }
-
+.choose > .all_choose:nth-child(2) > span {
+  letter-spacing: 0;
+}
 .all_choose > span {
-  width: 100px;
+  width: 120px;
   display: block;
-  letter-spacing: 14px;
+  letter-spacing: 33px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1002,7 +1264,8 @@ export default {
   border: 1px solid rgba(61, 103, 188);
 }
 .secondTop {
-  margin-top: 10px;
+  width: 97%;
+  margin: 10px auto;
 }
 .tAreaCss {
   resize: none;
@@ -1032,6 +1295,12 @@ export default {
   position: relative;
   padding: 0 20px 0 20px;
 }
+.basic_box1 {
+  position: relative;
+  margin: 0;
+  min-height: 0;
+  width: 90%;
+}
 .left_first {
   display: flex;
   flex-direction: column;
@@ -1232,4 +1501,234 @@ export default {
   border: none;
   cursor: pointer;
 }
+.raTable {
+  width: 97%;
+  margin: 0 auto;
+  height: auto;
+}
+.raTable >>> .el-table,
+.raTable >>> .el-table__body-wrapper {
+  height: auto !important;
+}
+.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;
+}
+.add_info_box {
+  margin: 20px 0;
+}
+
+.add_info_box button {
+  margin: 0 10px 10px 0;
+}
+.mask {
+  background-color: rgb(0 0 0 / 30%);
+  /* position: fixed; */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 20000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.progressBox {
+  width: 300px;
+  height: 150px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 0 6px 1px #bfbfbf;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.progressBox .lbox {
+  height: 100px;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+}
+
+.progressBox .lbox img {
+  width: 40px;
+  margin-right: 20px;
+}
+
+.progressBox >>> .el-progress-bar__outer {
+  background-color: #d1dfff !important;
+}
+
+.progressBox .lbox {
+  height: 100px;
+  font-size: 19px;
+  display: flex;
+  align-items: center;
+}
+
+.progressBox .lbox img {
+  width: 40px;
+  margin-right: 20px;
+}
 </style>

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

@@ -43,7 +43,12 @@
         </div>
         <div class="right">
           <div class="whiteBg">
-            <div class="right_title">驱动性问题</div>
+            <div class="firstTop">
+              <div class="right_title">驱动问题</div>
+              <div class="rightNav">
+                可包括阶段性问题和学科问题：阶段性问题是指在核心问题解决的不同阶段，通过提出驱动性问题，明确阶段子任务。学科问题是指从不同学科的角度以及分解和提出要研究解决的主要问题。
+              </div>
+            </div>
             <div class="basic_box1">
               <div class="editorCss">
                 <editor-bar
@@ -153,7 +158,12 @@
           </div>
 
           <div class="whiteBg">
-            <div class="right_title">目标设计</div>
+            <div class="firstTop">
+              <div class="right_title">学习目标</div>
+              <div class="rightNav">
+                学习目标提倡用核心素养来分类概括再描述，具体表述时应行为化、具体化、操作化，可以用“通过什么，达到什么，培养什么”的句式来进行表述
+              </div>
+            </div>
             <div class="basic_box1">
               <div class="editorCss">
                 <editor-bar
@@ -262,7 +272,12 @@
             </div>
           </div>
           <div class="whiteBg">
-            <div class="right_title">活动设计</div>
+            <div class="firstTop">
+              <div class="right_title">评价设计</div>
+              <div class="rightNav">
+                项目学习评价方式需要体现过程性评价与总结性评价相结合，积极使用表现性评价。本次征集案例中，需要将学生的作品和报告作为附件呈现作品评价。
+              </div>
+            </div>
             <div class="basic_box1">
               <div class="editorCss">
                 <editor-bar
@@ -370,224 +385,6 @@
               </div>
             </div>
           </div>
-
-          <div class="whiteBg">
-            <div class="right_title">评价设计</div>
-            <div class="basic_box1">
-              <div class="editorCss">
-                <editor-bar
-                  v-model="raceOver.evaDesign.brief"
-                  @change="upRaceOver"
-                ></editor-bar>
-              </div>
-              <div>
-                <div class="basic_box">
-                  <div class="lineBox">
-                    <div class="lineTitle">附件内容</div>
-                    <div class="strLine"></div>
-                  </div>
-                  <div>
-                    <div
-                      class="add_chapters_box"
-                      v-if="
-                        raceOver.evaDesign.data &&
-                        raceOver.evaDesign.data.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="(item3, index3) in raceOver.evaDesign.data"
-                        :key="item3.id"
-                      >
-                        <div class="chapter_upload_t"></div>
-                        <div class="chapter_upload_o">
-                          <div class="chapter_upload_l">
-                            <div
-                              v-if="item3.type == 2"
-                              class="chapter_upload_l_i1"
-                            ></div>
-                            <div
-                              v-if="item3.type == 1 || item3.type == 3"
-                              class="chapter_upload_l_i5"
-                            ></div>
-                          </div>
-                          <div class="chapter_upload_ic">
-                            <div class="chapter_upload_ic_l"></div>
-                            <div
-                              class="chapter_upload_ic_r"
-                              @click.stop="deleteChapterData($event, index3, 3)"
-                            >
-                              <div></div>
-                            </div>
-                          </div>
-                          <div class="chapter_upload_n">
-                            <input
-                              class="first"
-                              v-if="item3.type == 1 || item3.type == 3"
-                              :placeholder="item3.name"
-                            />
-                            <input
-                              class="first"
-                              v-if="item3.type == 2"
-                              :placeholder="item3.name"
-                            />
-                            <div class="chapter_upload_ud">
-                              <div class="chapter_upload_up"></div>
-                              <div class="chapter_upload_down"></div>
-                            </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,video/mp4, video/quicktime, video/x-msvideo,image/*"
-                        style="display: none"
-                        @change="beforeUpload($event, null, 3)"
-                      />
-                    </button>
-                  </div>
-                  <div v-if="raceOver.evaDesign.data.proVisible" class="mask">
-                    <div class="progressBox">
-                      <div class="lbox">
-                        <img
-                          src="../../../../assets/loading.gif"
-                        />上传中，请稍后
-                      </div>
-                      <el-progress
-                        :text-inside="true"
-                        :stroke-width="20"
-                        :percentage="
-                          raceOver.evaDesign.data.progress
-                            ? raceOver.evaDesign.data.progress
-                            : 0
-                        "
-                        style="width: 80%"
-                      ></el-progress>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="whiteBg">
-            <div class="right_title">其他补充</div>
-            <div class="basic_box1">
-              <div class="editorCss">
-                <editor-bar
-                  v-model="raceOver.other.brief"
-                  @input="upRaceOver"
-                ></editor-bar>
-              </div>
-              <div>
-                <div class="basic_box">
-                  <div class="lineBox">
-                    <div class="lineTitle">附件内容</div>
-                    <div class="strLine"></div>
-                  </div>
-                  <div>
-                    <div
-                      class="add_chapters_box"
-                      v-if="
-                        raceOver.other.data && raceOver.other.data.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="(item4, index4) in raceOver.other.data"
-                        :key="item4.id"
-                      >
-                        <div class="chapter_upload_t"></div>
-                        <div class="chapter_upload_o">
-                          <div class="chapter_upload_l">
-                            <div
-                              v-if="item4.type == 2"
-                              class="chapter_upload_l_i1"
-                            ></div>
-                            <div
-                              v-if="item4.type == 1 || item4.type == 3"
-                              class="chapter_upload_l_i5"
-                            ></div>
-                          </div>
-                          <div class="chapter_upload_ic">
-                            <div class="chapter_upload_ic_l"></div>
-                            <div
-                              class="chapter_upload_ic_r"
-                              @click.stop="deleteChapterData($event, index4, 4)"
-                            >
-                              <div></div>
-                            </div>
-                          </div>
-                          <div class="chapter_upload_n">
-                            <input
-                              class="first"
-                              v-if="item4.type == 1 || item4.type == 3"
-                              :placeholder="item4.name"
-                            />
-                            <input
-                              class="first"
-                              v-if="item4.type == 2"
-                              :placeholder="item4.name"
-                            />
-                            <div class="chapter_upload_ud">
-                              <div class="chapter_upload_up"></div>
-                              <div class="chapter_upload_down"></div>
-                            </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,video/mp4, video/quicktime, video/x-msvideo,image/*"
-                        style="display: none"
-                        @change="beforeUpload($event, null, 4)"
-                      />
-                    </button>
-                  </div>
-                  <div v-if="raceOver.other.data.proVisible" class="mask">
-                    <div class="progressBox">
-                      <div class="lbox">
-                        <img
-                          src="../../../../assets/loading.gif"
-                        />上传中，请稍后
-                      </div>
-                      <el-progress
-                        :text-inside="true"
-                        :stroke-width="20"
-                        :percentage="
-                          raceOver.other.data.progress
-                            ? raceOver.other.data.progress
-                            : 0
-                        "
-                        style="width: 80%"
-                      ></el-progress>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
     </div>
@@ -651,7 +448,6 @@ export default {
   props: ["raceOverView"],
   data() {
     return {
-      steps: 0,
       chapterData: [],
       formLabelWidth: "100px",
       noneBtnImg: false,
@@ -659,8 +455,6 @@ export default {
         driQuestion: { brief: "", data: [] },
         tarDesign: { brief: "", data: [] },
         actiDesign: { brief: "", data: [] },
-        evaDesign: { brief: "", data: [] },
-        other: { brief: "", data: [] },
       },
       AttText: {},
       task: 0,
@@ -692,12 +486,8 @@ export default {
         var _tmp = this.raceOver.driQuestion.data;
       } else if (jT == 1) {
         var _tmp = this.raceOver.tarDesign.data;
-      } else if (jT == 2) {
-        var _tmp = this.raceOver.actiDesign.data;
-      } else if (jT == 3) {
-        var _tmp = this.raceOver.evaDesign.data;
       } else {
-        var _tmp = this.raceOver.other.data;
+        var _tmp = this.raceOver.actiDesign.data;
       }
 
       this.noneBtnImg = _tmp.length >= 1;
@@ -708,12 +498,8 @@ export default {
         this.raceOver.driQuestion.data.splice(i, 1);
       } else if (t == 1) {
         this.raceOver.tarDesign.data.splice(i, 1);
-      } else if (t == 2) {
-        this.raceOver.actiDesign.data.splice(i, 1);
-      } else if (t == 3) {
-        this.raceOver.evaDesign.data.splice(i, 1);
       } else {
-        this.raceOver.other.data.splice(i, 1);
+        this.raceOver.actiDesign.data.splice(i, 1);
       }
     },
     beforeUpload(event, type, jsonType) {
@@ -806,15 +592,9 @@ export default {
       } else if (jsonType == 1) {
         _this.raceOver.tarDesign.data.progress = 0;
         _this.raceOver.tarDesign.data.proVisible = true;
-      } else if (jsonType == 2) {
+      } else {
         _this.raceOver.actiDesign.data.progress = 0;
         _this.raceOver.actiDesign.data.proVisible = true;
-      } else if (jsonType == 3) {
-        _this.raceOver.evaDesign.data.progress = 0;
-        _this.raceOver.evaDesign.data.proVisible = true;
-      } else {
-        _this.raceOver.other.data.progress = 0;
-        _this.raceOver.other.data.proVisible = true;
       }
 
       if (file) {
@@ -847,44 +627,27 @@ export default {
               _this.raceOver.tarDesign.data.progress = parseInt(
                 (evt.loaded * 80) / evt.total
               );
-            } else if (jsonType == 2) {
-              _this.raceOver.actiDesign.data.progress = parseInt(
-                (evt.loaded * 80) / evt.total
-              );
-            } else if (jsonType == 3) {
-              _this.raceOver.evaDesign.data.progress = parseInt(
-                (evt.loaded * 80) / evt.total
-              );
             } else {
-              _this.raceOver.other.data.progress = parseInt(
+              _this.raceOver.actiDesign.data.progress = parseInt(
                 (evt.loaded * 80) / evt.total
               );
             }
           })
           .send(function (err, data) {
-            // loading.close();
             if (jsonType == 0) {
               _this.raceOver.driQuestion.data.progress = 100;
             } else if (jsonType == 1) {
               _this.raceOver.tarDesign.data.progress = 100;
-            } else if (jsonType == 2) {
-              _this.raceOver.actiDesign.data.progress = 100;
-            } else if (jsonType == 3) {
-              _this.raceOver.evaDesign.data.progress = 100;
             } else {
-              _this.raceOver.other.data.progress = 100;
+              _this.raceOver.actiDesign.data.progress = 100;
             }
             setTimeout(() => {
               if (jsonType == 0) {
                 _this.raceOver.driQuestion.data.proVisible = false;
               } else if (jsonType == 1) {
                 _this.raceOver.tarDesign.data.proVisible = false;
-              } else if (jsonType == 2) {
-                _this.raceOver.actiDesign.data.proVisible = false;
-              } else if (jsonType == 3) {
-                _this.raceOver.evaDesign.data.proVisible = false;
               } else {
-                _this.raceOver.other.data.proVisible = false;
+                _this.raceOver.actiDesign.data.proVisible = false;
               }
               _this.$forceUpdate();
             }, 1000);
@@ -895,7 +658,6 @@ export default {
                 _this.raceOver.driQuestion.data.push({
                   name: file.name,
                   url: data.Location,
-                  uid: file.uid,
                   type: type1,
                 });
                 _this.imgChange(null, null, type1, jsonType);
@@ -903,31 +665,13 @@ export default {
                 _this.raceOver.tarDesign.data.push({
                   name: file.name,
                   url: data.Location,
-                  uid: file.uid,
-                  type: type1,
-                });
-                _this.imgChange(null, null, type1, jsonType);
-              } else if (jsonType == 2) {
-                _this.raceOver.actiDesign.data.push({
-                  name: file.name,
-                  url: data.Location,
-                  uid: file.uid,
-                  type: type1,
-                });
-                _this.imgChange(null, null, type1, jsonType);
-              } else if (jsonType == 3) {
-                _this.raceOver.evaDesign.data.push({
-                  name: file.name,
-                  url: data.Location,
-                  uid: file.uid,
                   type: type1,
                 });
                 _this.imgChange(null, null, type1, jsonType);
               } else {
-                _this.raceOver.other.data.push({
+                _this.raceOver.actiDesign.data.push({
                   name: file.name,
                   url: data.Location,
-                  uid: file.uid,
                   type: type1,
                 });
                 _this.imgChange(null, null, type1, jsonType);
@@ -979,22 +723,8 @@ export default {
           type: 3,
         });
         this.imgChange(null, null, 3, this.task);
-      } else if (this.task == 2) {
-        this.raceOver.actiDesign.data.push({
-          name: this.AttText.title,
-          url: this.AttText.text,
-          type: 3,
-        });
-        this.imgChange(null, null, 3, this.task);
-      } else if (this.task == 3) {
-        this.raceOver.evaDesign.data.push({
-          name: this.AttText.title,
-          url: this.AttText.text,
-          type: 3,
-        });
-        this.imgChange(null, null, 3, this.task);
       } else {
-        this.raceOver.other.data.push({
+        this.raceOver.actiDesign.data.push({
           name: this.AttText.title,
           url: this.AttText.text,
           type: 3,
@@ -1014,18 +744,11 @@ export default {
         this.raceOver.tarDesign.data[this.AttTextIndex].name =
           this.AttText.title;
         this.raceOver.tarDesign.data[this.AttTextIndex].url = this.AttText.text;
-      } else if (this.task == 2) {
+      } else {
         this.raceOver.actiDesign.data[this.AttTextIndex].name =
           this.AttText.title;
         this.raceOver.actiDesign.data[this.AttTextIndex].url =
           this.AttText.text;
-      } else if (this.task == 3) {
-        this.raceOver.evaDesign.data[this.AttTextIndex].name =
-          this.AttText.title;
-        this.raceOver.evaDesign.data[this.AttTextIndex].url = this.AttText.text;
-      } else {
-        this.raceOver.other.data[this.AttTextIndex].name = this.AttText.title;
-        this.raceOver.other.data[this.AttTextIndex].url = this.AttText.text;
       }
       this.dialogVisible = false;
       this.upRaceOver();
@@ -1037,15 +760,9 @@ export default {
       } else if (t == 1) {
         this.AttText.title = this.raceOver.tarDesign.data[i].name;
         this.AttText.text = this.raceOver.tarDesign.data[i].url;
-      } else if (t == 2) {
+      } else {
         this.AttText.title = this.raceOver.actiDesign.data[i].name;
         this.AttText.text = this.raceOver.actiDesign.data[i].url;
-      } else if (t == 3) {
-        this.AttText.title = this.raceOver.evaDesign.data[i].name;
-        this.AttText.text = this.raceOver.evaDesign.data[i].url;
-      } else {
-        this.AttText.title = this.raceOver.other.data[i].name;
-        this.AttText.text = this.raceOver.other.data[i].url;
       }
       this.task = t;
       this.AttTextIndex = i;
@@ -1086,22 +803,8 @@ export default {
           type: 4,
         });
         this.imgChange(null, null, 4, this.task);
-      } else if (this.task == 2) {
-        this.raceOver.actiDesign.data.push({
-          name: "链接",
-          url: this.line,
-          type: 4,
-        });
-        this.imgChange(null, null, 4, this.task);
-      } else if (this.task == 3) {
-        this.raceOver.evaDesign.data.push({
-          name: "链接",
-          url: this.line,
-          type: 4,
-        });
-        this.imgChange(null, null, 4, this.task);
       } else {
-        this.raceOver.other.data.push({
+        this.raceOver.actiDesign.data.push({
           name: "链接",
           url: this.line,
           type: 4,
@@ -1117,12 +820,8 @@ export default {
         this.raceOver.driQuestion.data[this.lineCount].url = this.line;
       } else if (this.task == 1) {
         this.raceOver.tarDesign.data[this.lineCount].url = this.line;
-      } else if (this.task == 2) {
-        this.raceOver.actiDesign.data[this.lineCount].url = this.line;
-      } else if (this.task == 3) {
-        this.raceOver.evaDesign.data[this.lineCount].url = this.line;
       } else {
-        this.raceOver.other.data[this.lineCount].url = this.line;
+        this.raceOver.actiDesign.data[this.lineCount].url = this.line;
       }
       this.dialogVisible1 = false;
       this.upRaceOver();
@@ -1132,12 +831,8 @@ export default {
         this.line = this.raceOver.driQuestion.data[i].url;
       } else if (t == 1) {
         this.line = this.raceOver.tarDesign.data[i].url;
-      } else if (t == 2) {
-        this.line = this.raceOver.actiDesign.data[i].url;
-      } else if (t == 3) {
-        this.line = this.raceOver.evaDesign.data[i].url;
       } else {
-        this.line = this.raceOver.other.data[i].url;
+        this.line = this.raceOver.actiDesign.data[i].url;
       }
       this.task = t;
       this.lineCount = i;
@@ -1149,8 +844,6 @@ export default {
     this.raceOver.driQuestion = this.raceOverView.driQuestion;
     this.raceOver.tarDesign = this.raceOverView.tarDesign;
     this.raceOver.actiDesign = this.raceOverView.actiDesign;
-    this.raceOver.evaDesign = this.raceOverView.evaDesign;
-    this.raceOver.other = this.raceOverView.other;
   },
 };
 </script>
@@ -1208,7 +901,6 @@ export default {
   position: relative;
   width: 210px;
   height: 130px;
-  min-height: 130px;
 }
 .steps > div:nth-child(1) > img {
   z-index: 9;
@@ -1498,13 +1190,11 @@ export default {
 }
 .right_title {
   height: 30px;
-  padding: 15px 0 15px 0;
-  border-bottom: 1px solid #f2f2f2;
   font-size: 1.5em;
   font-weight: bold;
   color: #0f7eff;
-  margin: 0 auto;
-  width: 95%;
+  width: 10%;
+  min-width: 100px;
 }
 .whiteBg {
   background: #fff;
@@ -1593,4 +1283,18 @@ export default {
   width: 40px;
   margin-right: 20px;
 }
+
+.firstTop {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  width: 90%;
+  padding: 20px 0 20px 20px;
+}
+
+.rightNav {
+  width: 87%;
+  margin-left: 15px;
+}
 </style>

src/components/pages/race/eventCenter/myAnli.vue

@@ -254,6 +254,7 @@ export default {
 .myAnliBox {
   /* height: 500px; */
   overflow: auto;
+  overflow-x: hidden;
   height: 100%;
   /* box-shadow: inset 0px 14px 7px -14px #b9b9b9; */
 }