修改样式及功能

src/components/pages/race/addRace.vue

@@ -59,7 +59,11 @@
         :raceProcess="raceProcess"
         v-if="steps == 4"
       ></ProjectActpro>
-      <ProjectExceva @upExc="updateProExc" :raceExceva="raceExceva" v-if="steps == 5"></ProjectExceva>
+      <ProjectExceva
+        @upExc="updateProExc"
+        :raceExceva="raceExceva"
+        v-if="steps == 5"
+      ></ProjectExceva>
       <ProjectEffect
         @upproEff="updateProEff"
         :raceEffect="raceEffect"
@@ -83,7 +87,7 @@
         <el-button
           type="primary"
           @click="dialogVisible1 = true"
-          v-if="steps != 1"
+          v-if="steps ==2"
           >跳过</el-button
         >
         <el-button type="primary" @click="lastSteps" v-if="steps != 1"
@@ -235,7 +239,18 @@ export default {
       this.steps = steps;
     },
     nextSteps() {
-      this.steps++;
+      if (this.steps == 1) {
+        if (this.raceInfo.title == "") {
+          this.$message.error("请将信息填写完整");
+          return;
+        } else {
+          this.steps++;
+        }
+      } else if(2 <= this.steps < 6) {
+        this.dialogVisible1 = true;
+        this.steps++;
+      }
+      this.isAddOrUpRace1(3);
     },
     lastSteps() {
       this.steps--;
@@ -258,12 +273,20 @@ export default {
     updateProEff(raceEff) {
       this.raceEffect = raceEff;
     },
-    updateProExc(raceExc){
+    updateProExc(raceExc) {
       this.raceExceva = raceExc;
     },
     isAddOrUpRace(t) {
       this.isJump = t;
-      if (this.aid == "") {
+      if (this.aid == "" || this.aid == undefined) {
+        this.addRace();
+      } else {
+        this.updateRace();
+      }
+    },
+    isAddOrUpRace1(t) {
+      this.isJump = t;
+      if (this.aid == "" || this.aid == undefined) {
         this.addRace();
       } else {
         this.updateRace();
@@ -276,8 +299,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"),
+          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"
@@ -288,17 +311,24 @@ export default {
       this.ajax
         .post(this.$store.state.api + "addRace", params)
         .then((res) => {
-          this.$message({
-            message: "新增成功",
-            type: "success",
-          });
+          this.aid = res.data.courseId;
           if (this.isJump == 0) {
+            this.$message({
+              message: "新增成功",
+              type: "success",
+            });
             this.dialogVisible = true;
-          } else {
+          } else if (this.isJump == 1) {
+            this.$message({
+              message: "新增成功",
+              type: "success",
+            });
             this.goTo(
               "/eventCenter?userid=" + this.userid + "&oid=" + this.oid
             );
             this.dialogVisible1 = false;
+          } else {
+            console.log("下一步");
           }
         })
         .catch((err) => {
@@ -313,8 +343,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"),
+          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,
@@ -326,17 +356,23 @@ export default {
       this.ajax
         .post(this.$store.state.api + "updateRace", params)
         .then((res) => {
-          this.$message({
-            message: "修改成功",
-            type: "success",
-          });
           if (this.isJump == 0) {
+            this.$message({
+              message: "新增成功",
+              type: "success",
+            });
             this.dialogVisible = true;
-          } else {
+          } else if (this.isJump == 1) {
+            this.$message({
+              message: "新增成功",
+              type: "success",
+            });
             this.goTo(
               "/eventCenter?userid=" + this.userid + "&oid=" + this.oid
             );
             this.dialogVisible1 = false;
+          } else {
+            console.log("下一步");
           }
         })
         .catch((err) => {
@@ -413,7 +449,7 @@ export default {
 }
 
 .race_nav .active {
-  background: #4a83d0;
+  background: #3d5ea1;
 }
 
 .race_body {

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

@@ -12,13 +12,13 @@
             <div>
               <img src="../../../../assets/icon/race/progress.png" alt="" />
             </div>
-            <div class="stepRightNav">
+            <div class="stepRightNav" @click="jump('jd' + staIndex + 1)">
               <div>阶段{{ staIndex + 1 }}</div>
             </div>
           </div>
         </div>
         <div class="right">
-          <div v-for="(sa, saIndex) in raceAct.stageBox" :key="saIndex">
+          <div v-for="(sa, saIndex) in raceAct.stageBox" :key="saIndex" :id="'jd' + saIndex + 1">
             <div class="right_title">阶段{{ saIndex + 1 }}</div>
             <div class="saBox">
               <div class="saLittleBox">
@@ -164,6 +164,11 @@ export default {
       var el = e.currentTarget;
       el.getElementsByTagName("input")[0].click();
     },
+    jump(t) {
+      var a = document.getElementById(t);
+      var b = document.getElementsByClassName("right")[0];
+      b.scrollTop = a.offsetTop;
+    },
     imgChange(file, fileList, type, sindex) {
       var _tmp = this.raceAct.stageBox[sindex].data;
       this.noneBtnImg = _tmp.length >= 1;
@@ -379,6 +384,7 @@ export default {
   align-items: flex-start;
   margin-left: 10px;
   height: 50px;
+  cursor: pointer;
 }
 .stepBg .steps::after {
   content: "";
@@ -426,7 +432,7 @@ export default {
   box-sizing: border-box;
   position: relative;
   padding: 0 10px 5px 10px;
-  height: 185px;
+  height: 140px;
   overflow-y: auto;
   overflow-x: hidden;
 }

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

@@ -375,6 +375,7 @@ export default {
   align-items: flex-start;
   margin-left: 10px;
   height: 50px;
+  cursor: pointer;
 }
 
 .right {
@@ -476,7 +477,7 @@ export default {
   box-sizing: border-box;
   position: relative;
   padding: 0 10px 5px 10px;
-  height: 185px;
+  height: 140px;
   overflow-y: auto;
   overflow-x: hidden;
 }

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

@@ -375,6 +375,7 @@ export default {
   align-items: flex-start;
   margin-left: 10px;
   height: 50px;
+  cursor: pointer;
 }
 
 .right {
@@ -476,7 +477,7 @@ export default {
   box-sizing: border-box;
   position: relative;
   padding: 0 10px 5px 10px;
-  height: 185px;
+  height: 140px;
   overflow-y: auto;
   overflow-x: hidden;
 }

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

@@ -12,16 +12,18 @@
             <div>
               <img src="../../../../assets/icon/race/progress.png" alt="" />
             </div>
-            <div class="stepRightNav">
+            <div class="stepRightNav" @click="jump('jd' + staIndex + 1)">
               <div>阶段{{ staIndex + 1 }}</div>
             </div>
           </div>
         </div>
         <div class="right">
-          <div v-for="(sa, saIndex) in racePro.stageBox" :key="saIndex">
+          <div v-for="(sa, saIndex) in racePro.stageBox" :key="saIndex" :id="'jd' + saIndex + 1">
             <div class="jdTop">
               <div class="jdTopFirst">
-                <div class="right_title">阶段{{ saIndex + 1 }}</div>
+                <div class="right_title">
+                  阶段{{ saIndex + 1 }}
+                </div>
                 <el-input
                   v-model="sa.staTitle"
                   @input="upRacePro"
@@ -91,7 +93,7 @@
                     @change="upRacePro"
                   ></editor-bar>
                 </div>
-                <div>
+                <!-- <div>
                   <div class="basic_box">
                     <div class="lineBox">
                       <div class="lineTitleTwo">资料补充</div>
@@ -198,7 +200,7 @@
                       </div>
                     </div>
                   </div>
-                </div>
+                </div> -->
               </div>
               <div class="raceTop allBox">
                 <div class="lineBox">
@@ -211,7 +213,7 @@
                     @change="upRacePro"
                   ></editor-bar>
                 </div>
-                <div>
+                <!-- <div>
                   <div class="basic_box">
                     <div class="lineBox">
                       <div class="lineTitleTwo">资料补充</div>
@@ -317,7 +319,7 @@
                       </div>
                     </div>
                   </div>
-                </div>
+                </div> -->
               </div>
               <div class="raceTop allBox">
                 <div class="lineBox">
@@ -330,7 +332,7 @@
                     @change="upRacePro"
                   ></editor-bar>
                 </div>
-                <div>
+                <!-- <div>
                   <div class="basic_box">
                     <div class="lineBox">
                       <div class="lineTitleTwo">资料补充</div>
@@ -437,7 +439,7 @@
                       </div>
                     </div>
                   </div>
-                </div>
+                </div> -->
               </div>
               <div class="raceTop allBox">
                 <div class="lineBox">
@@ -450,7 +452,7 @@
                     @change="upRacePro"
                   ></editor-bar>
                 </div>
-                <div>
+                <!-- <div>
                   <div class="basic_box">
                     <div class="lineBox">
                       <div class="lineTitleTwo">资料补充</div>
@@ -556,7 +558,7 @@
                       </div>
                     </div>
                   </div>
-                </div>
+                </div> -->
               </div>
               <div
                 class="addTaskBorder"
@@ -623,6 +625,11 @@ export default {
       var el = e.currentTarget;
       el.getElementsByTagName("input")[0].click();
     },
+    jump(t) {
+      var a = document.getElementById(t);
+      var b = document.getElementsByClassName("right")[0];
+      b.scrollTop = a.offsetTop;
+    },
     getChapterData(e, i, j, ic, type) {
       e.stopPropagation();
       if ((type == 2 || type == 3) && e.target.tagName !== "INPUT") {
@@ -1043,6 +1050,7 @@ export default {
   align-items: flex-start;
   margin-left: 10px;
   height: 50px;
+  cursor: pointer;
 }
 
 .right {
@@ -1123,7 +1131,7 @@ export default {
   box-sizing: border-box;
   position: relative;
   padding: 0 10px 5px 10px;
-  height: 185px;
+  height: 140px;
   overflow-y: auto;
   overflow-x: hidden;
 }

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

@@ -8,7 +8,7 @@
             <div>
               <img src="../../../../assets/icon/race/progress.png" alt="" />
             </div>
-            <div class="stepRightNav">
+            <div class="stepRightNav" @click="jump('first')">
               <div>案例赛事信息</div>
               <div>说明</div>
             </div>
@@ -17,7 +17,7 @@
             <div>
               <img src="../../../../assets/icon/race/progress.png" alt="" />
             </div>
-            <div class="stepRightNav">
+            <div class="stepRightNav" @click="jump('second')">
               <div>封面</div>
               <div>说明</div>
             </div>
@@ -26,7 +26,7 @@
             <div>
               <img src="../../../../assets/icon/race/progress.png" alt="" />
             </div>
-            <div class="stepRightNav">
+            <div class="stepRightNav" @click="jump('third')">
               <div>成员信息</div>
               <div>协同人员</div>
             </div>
@@ -35,15 +35,24 @@
             <div>
               <img src="../../../../assets/icon/race/progress.png" alt="" />
             </div>
-            <div class="stepRightNav">
+            <div class="stepRightNav" @click="jump('fouth')">
               <div>项目说明</div>
               <div>项目简介</div>
             </div>
           </div>
+          <div class="steps">
+            <div>
+              <img src="../../../../assets/icon/race/progress.png" alt="" />
+            </div>
+            <div class="stepRightNav" @click="jump('fouth')">
+              <div>文件上传</div>
+              <div>项目资料</div>
+            </div>
+          </div>
         </div>
         <div class="right">
           <div class="whiteBg">
-            <div class="right_title">项目基本信息</div>
+            <div class="right_title" id="first">项目基本信息</div>
             <div class="basic_box">
               <div class="big_box">
                 <div class="left_first">
@@ -96,7 +105,7 @@
           </div>
           <div class="whiteBg" style="border-radius: 0">
             <div class="right_first">
-              <div class="right_title">案例封面设置</div>
+              <div class="right_title" id="second">案例封面设置</div>
               <div class="fmBox">
                 <div>
                   <div class="bInfo_title" style="margin-top: 0 !important">
@@ -148,7 +157,7 @@
           </div>
           <div class="whiteBg" style="border-radius: 0">
             <div class="right_first">
-              <div class="right_title">作者</div>
+              <div class="right_title" id="third">作者</div>
               <div
                 class="addPeople"
                 @click="dialogVisibleMember = true"
@@ -239,7 +248,7 @@
           </div>
           <div class="whiteBg" style="border-radius: 0">
             <div class="right_first">
-              <div class="right_title">项目简介</div>
+              <div class="right_title" id="fouth">项目简介</div>
               <div class="secondTop">
                 <textarea
                   rows="8"
@@ -248,13 +257,14 @@
                   v-model="raceDetail.courseText"
                   @input="updateTitle"
                   maxlength="200"
+                  placeholder="请填写项目简介,最多200字..."
                 ></textarea>
               </div>
             </div>
           </div>
           <div class="whiteBg" style="border-radius: 0">
             <div class="right_first">
-              <div class="right_title">文件上传</div>
+              <div class="right_title" id="fouth">文件上传</div>
               <div class="secondTop">
                 <div>
                   <div class="basic_box1">
@@ -610,6 +620,11 @@ export default {
     handleClose(done) {
       done();
     },
+    jump(t) {
+      var a = document.getElementById(t);
+      var b = document.getElementsByClassName("right")[0];
+      b.scrollTop = a.offsetTop;
+    },
     handle_remove1(file, fileList, type) {
       var _tmp = this.raceDetail.cover;
       for (var i = 0, len = _tmp.length; i < len; i++) {
@@ -1074,6 +1089,7 @@ export default {
   align-items: flex-start;
   margin-left: 10px;
   height: 50px;
+  cursor: pointer;
 }
 .line,
 .isLine {
@@ -1137,11 +1153,11 @@ export default {
 }
 .all_choose > span {
   width: 120px;
-  display: block;
+  /* display: block;
   letter-spacing: 33px;
   white-space: nowrap;
   overflow: hidden;
-  text-overflow: ellipsis;
+  text-overflow: ellipsis; */
 }
 
 .all_choose >>> .el-checkbox-group {
@@ -1163,11 +1179,13 @@ export default {
 }
 
 .all_choose > .el-checkbox-group > .el-checkbox >>> .el-checkbox__label {
-  min-width: 80px;
-  overflow: hidden;
-  width: 80px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  width: 85px;
+  min-width: 85px;
+  /* min-width: 80px;
+  overflow: hidden; */
+  /* width: 80px; */
+  /* text-overflow: ellipsis;
+  white-space: nowrap; */
 }
 
 .all_choose > .el-checkbox-group > .el-checkbox >>> .el-checkbox__label:hover {
@@ -1382,7 +1400,8 @@ export default {
 }
 .stepBg .steps:nth-child(1) ::after,
 .stepBg .steps:nth-child(2) ::after,
-.stepBg .steps:nth-child(3) ::after {
+.stepBg .steps:nth-child(3) ::after,
+.stepBg .steps:nth-child(4) ::after {
   content: "";
   height: 100%;
   background: #eee;
@@ -1514,7 +1533,7 @@ export default {
   box-sizing: border-box;
   position: relative;
   padding: 0 10px 5px 10px;
-  height: 185px;
+  height: 140px;
   overflow-y: auto;
   overflow-x: hidden;
 }

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

@@ -4,7 +4,7 @@
     <div class="race_content_body">
       <div class="raceBox">
         <div class="stepBg">
-          <div class="steps">
+          <!-- <div class="steps">
             <div>
               <img src="../../../../assets/icon/race/progress.png" alt="" />
             </div>
@@ -12,17 +12,35 @@
               <div>项目简介</div>
               <div>说明</div>
             </div>
-          </div>
+          </div> -->
           <div class="steps">
             <div>
               <img src="../../../../assets/icon/race/progress.png" alt="" />
             </div>
-            <div class="stepRightNav">
+            <div class="stepRightNav" @click="jump('first')">
               <div>驱动说明</div>
               <div>说明</div>
             </div>
           </div>
           <div class="steps">
+            <div>
+              <img src="../../../../assets/icon/race/progress.png" alt="" />
+            </div>
+            <div class="stepRightNav" @click="jump('second')">
+              <div>学习说明</div>
+              <div>说明</div>
+            </div>
+          </div>
+          <div class="steps">
+            <div>
+              <img src="../../../../assets/icon/race/progress.png" alt="" />
+            </div>
+            <div class="stepRightNav" @click="jump('third')">
+              <div>评价说明</div>
+              <div>说明</div>
+            </div>
+          </div>
+          <!-- <div class="steps">
             <div>
               <img src="../../../../assets/icon/race/progress.png" alt="" />
             </div>
@@ -39,12 +57,12 @@
               <div>案例评审</div>
               <div>评审状态、反馈</div>
             </div>
-          </div>
+          </div> -->
         </div>
         <div class="right">
           <div class="whiteBg">
             <div class="firstTop">
-              <div class="right_title">驱动问题</div>
+              <div class="right_title" id="first">驱动问题</div>
               <div class="rightNav">
                 可包括阶段性问题和学科问题：阶段性问题是指在核心问题解决的不同阶段，通过提出驱动性问题，明确阶段子任务。学科问题是指从不同学科的角度以及分解和提出要研究解决的主要问题。
               </div>
@@ -159,7 +177,7 @@
 
           <div class="whiteBg">
             <div class="firstTop">
-              <div class="right_title">学习目标</div>
+              <div class="right_title" id="second">学习目标</div>
               <div class="rightNav">
                 学习目标提倡用核心素养来分类概括再描述，具体表述时应行为化、具体化、操作化，可以用“通过什么，达到什么，培养什么”的句式来进行表述
               </div>
@@ -273,7 +291,7 @@
           </div>
           <div class="whiteBg">
             <div class="firstTop">
-              <div class="right_title">评价设计</div>
+              <div class="right_title" id="third">评价设计</div>
               <div class="rightNav">
                 项目学习评价方式需要体现过程性评价与总结性评价相结合，积极使用表现性评价。本次征集案例中，需要将学生的作品和报告作为附件呈现作品评价。
               </div>
@@ -473,6 +491,11 @@ export default {
     change(val) {
       console.log(val);
     },
+    jump(t) {
+      var a = document.getElementById(t);
+      var b = document.getElementsByClassName("right")[0];
+      b.scrollTop = a.offsetTop;
+    },
     change1(val) {
       console.log(val);
       this.$forceUpdate();
@@ -931,6 +954,7 @@ export default {
   align-items: flex-start;
   margin-left: 10px;
   height: 50px;
+  cursor: pointer;
 }
 
 .line,
@@ -1018,7 +1042,7 @@ export default {
   box-sizing: border-box;
   position: relative;
   padding: 0 10px 5px 10px;
-  height: 185px;
+  height: 140px;
   overflow-y: auto;
   overflow-x: hidden;
 }
@@ -1218,8 +1242,7 @@ export default {
   margin-top: 20px;
 }
 .stepBg .steps:nth-child(1) ::after,
-.stepBg .steps:nth-child(2) ::after,
-.stepBg .steps:nth-child(3) ::after {
+.stepBg .steps:nth-child(2) ::after{
   content: "";
   height: 100%;
   background: #eee;
@@ -1296,5 +1319,6 @@ export default {
 .rightNav {
   width: 87%;
   margin-left: 15px;
+  color: #a19f9f;
 }
 </style>

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

@@ -1705,6 +1705,15 @@ export default {
   .leftImg {
     height: 230px !important;
   }
+  .navTop {
+    margin: 0 5px !important;
+  }
+  .navTop > div:nth-child(2) {
+    width: 60px !important;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 html,
 body {
@@ -1815,6 +1824,16 @@ body {
   height: 70px;
   border-radius: 10px;
 }
+.navBox > div:nth-child(5) > div:nth-child(2) {
+  width: 150px;
+}
+.navBox > div:nth-child(6) > div:nth-child(2) {
+  width: 120px;
+}
+.navBox > div:nth-child(2) > div:nth-child(2),
+.navBox > div:nth-child(3) > div:nth-child(2) {
+  width: 70px;
+}
 .navTop {
   display: flex;
   flex-direction: row;
@@ -1823,6 +1842,9 @@ body {
   margin: 0 20px;
   cursor: pointer;
 }
+.navTop > div:nth-child(2) {
+  width: 100px;
+}
 .navImg {
   width: 35px;
 }