1

src/components/pages/race/addRace.vue

@@ -1,18 +1,30 @@
 <template>
   <div style="height: 100%; width: 100%">
     <div class="race_nav">
-      <span @click="checkSteps(1)" :class="{ active: steps == 1 }"
-        >项目基础信息</span
-      >
-      <span @click="checkSteps(2)" :class="{ active: steps == 2 }"
-        >项目概况</span
-      >
-      <span @click="checkSteps(3)" :class="{ active: steps == 3 }"
-        >项目实施过程</span
-      >
-      <span @click="checkSteps(4)" :class="{ active: steps == 4 }"
-        >项目成效与反思</span
-      >
+      <div class="first" @click="checkSteps(1)" :class="{ active: steps == 1 }">
+        <div class="navImg">
+          <img src="../../../assets/icon/anliDetail/first.png" alt="" />
+        </div>
+        <div>项目基础信息</div>
+      </div>
+      <div class="first" @click="checkSteps(2)" :class="{ active: steps == 2 }">
+        <div class="navImg">
+          <img src="../../../assets/icon/anliDetail/second.png" alt="" />
+        </div>
+        <div>项目概况</div>
+      </div>
+      <div class="first" @click="checkSteps(3)" :class="{ active: steps == 3 }">
+        <div class="navImg">
+          <img src="../../../assets/icon/anliDetail/third.png" alt="" />
+        </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>
     <div class="race_body">
       <RaceDetail
@@ -229,22 +241,24 @@ export default {
         });
     },
     selectAnLi() {
-      let params = {
-        id: this.aid,
-      };
-      this.ajax
-        .get(this.$store.state.api + "selectRaceDetail", params)
-        .then((res) => {
-          if (res.data.length > 0) {
-            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.raceEffect = JSON.parse(res.data[0][0].results);
-          }
-        })
-        .catch((err) => {
-          console.error(err);
-        });
+      if (this.aid != "") {
+        let params = {
+          id: this.aid,
+        };
+        this.ajax
+          .get(this.$store.state.api + "selectRaceDetail", params)
+          .then((res) => {
+            if (res.data.length > 0) {
+              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.raceEffect = JSON.parse(res.data[0][0].results);
+            }
+          })
+          .catch((err) => {
+            console.error(err);
+          });
+      }
     },
   },
   created() {
@@ -266,8 +280,11 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-  margin: 10px 0;
+  width: 90%;
+  margin: 10px auto;
+  background: #fff;
+  border-radius: 10px;
+  padding: 15px 0;
 }
 
 .race_nav span {
@@ -283,7 +300,7 @@ export default {
 }
 
 .race_nav .active {
-  color: #001fff;
+  background: #4A83D0;
 }
 
 .race_body {
@@ -355,4 +372,26 @@ export default {
   right: 74px;
   bottom: 19px;
 }
+.first {
+  background: #6e9cd8;
+  width: 200px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  color: #fff;
+  height: 65px;
+  justify-content: center;
+  border-radius: 10px;
+  margin: 0 15px;
+  cursor: pointer;
+}
+.navImg {
+  width: 30px;
+  height: 30px;
+}
+.navImg > img {
+  width: 100%;
+  height: 100%;
+}
 </style>

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

@@ -5,18 +5,20 @@
       <div class="raceBox">
         <div class="stepBg">
           <div class="steps">
-            <div class="stepLeft" :class="steps == 0 ? 'isSteps' : ''">1</div>
+            <div>
+              <img src="../../../../assets/icon/race/progress.png" alt="" />
+            </div>
             <div class="stepRightNav">
               <div>项目成效</div>
             </div>
-            <div class="line" :class="steps == 0 ? 'isLine' : ''"></div>
           </div>
           <div class="steps">
-            <div class="stepLeft" :class="steps == 1 ? 'isSteps' : ''">2</div>
+            <div>
+              <img src="../../../../assets/icon/race/progress.png" alt="" />
+            </div>
             <div class="stepRightNav">
               <div>项目反思</div>
             </div>
-            <!-- <div class="line" :class="steps == 1 ? 'isLine' : ''"></div> -->
           </div>
         </div>
         <div class="right">
@@ -91,6 +93,14 @@ export default {
 </script>
 
 <style scoped>
+@media screen and (max-width: 1280px) {
+  .stepBg .steps:nth-child(1) ::after,
+  .stepBg .steps:nth-child(2) ::after,
+  .stepBg .steps:nth-child(3) ::after {
+    content: "";
+    top: 105px !important;
+  }
+}
 .pb_content {
   width: 100%;
   height: 100%;
@@ -112,29 +122,28 @@ export default {
 }
 
 .stepBg {
+  padding: 80px 0 0 0;
   margin: 0 25px 0 0;
   width: 20%;
   display: flex;
-  flex-direction: column;
   justify-content: flex-start;
-  align-items: flex-start;
+  align-items: center;
   flex-wrap: nowrap;
   background: #fff;
   /* min-height: 800px; */
-  height: 100%;
-  border: 1px solid #c2c2c2;
+  height: calc(100% - 80px);
   border-radius: 15px;
   overflow: auto;
   min-width: 260px;
+  flex-direction: column;
 }
-
 .steps {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  margin: 35px 20px 20px 20px;
   position: relative;
-  align-items: center;
+  width: 145px;
+  height: 180px;
 }
 
 .stepLeft,
@@ -161,6 +170,7 @@ export default {
   justify-content: space-between;
   align-items: flex-start;
   margin-left: 10px;
+  height: 50px;
 }
 
 .line,
@@ -183,10 +193,8 @@ export default {
   border-radius: 10px;
   overflow: auto;
   height: 100%;
-  border: 1px solid #c2c2c2;
   border-radius: 15px;
   /* max-height: 800px; */
-  min-width: calc(100% - 260px);
 }
 
 .allBox {
@@ -436,4 +444,16 @@ export default {
   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: 120px;
+  transform: translateY(-50%);
+}
 </style>

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

@@ -4,33 +4,17 @@
     <div class="race_content_body">
       <div class="raceBox">
         <div class="stepBg">
-          <div class="steps">
-            <div class="stepLeft" :class="steps == 0 ? 'isSteps' : ''">1</div>
-            <div class="stepRightNav">
-              <div>活动1</div>
-            </div>
-            <div class="line" :class="steps == 0 ? 'isLine' : ''"></div>
-          </div>
-          <div class="steps">
-            <div class="stepLeft" :class="steps == 1 ? 'isSteps' : ''">2</div>
-            <div class="stepRightNav">
-              <div>活动2</div>
-            </div>
-            <div class="line" :class="steps == 1 ? 'isLine' : ''"></div>
-          </div>
-          <div class="steps">
-            <div class="stepLeft" :class="steps == 2 ? 'isSteps' : ''">3</div>
-            <div class="stepRightNav">
-              <div>活动3</div>
+          <div
+            class="steps"
+            v-for="(na, naIndex) in racePro.actBox"
+            :key="naIndex"
+          >
+            <div>
+              <img src="../../../../assets/icon/race/progress.png" alt="" />
             </div>
-            <div class="line" :class="steps == 2 ? 'isLine' : ''"></div>
-          </div>
-          <div class="steps">
-            <div class="stepLeft" :class="steps == 3 ? 'isSteps' : ''">4</div>
             <div class="stepRightNav">
-              <div>活动4</div>
+              <div>活动{{ naIndex + 1 }}</div>
             </div>
-            <!-- <div class="line" :class="steps == 3 ? 'isLine' : ''"></div> -->
           </div>
         </div>
         <div class="right">
@@ -559,7 +543,7 @@
 import EditorBar from "../../../tools/wangEnduit";
 export default {
   components: { EditorBar },
-  props:["raceProcess"],
+  props: ["raceProcess"],
   data() {
     return {
       steps: 0,
@@ -779,7 +763,7 @@ export default {
       });
       this.upRacePro();
     },
-    deleteTask(i){
+    deleteTask(i) {
       var _this = this;
       if (_this.time()) {
         _this
@@ -789,7 +773,7 @@ export default {
             type: "warning",
           })
           .then(() => {
-            _this.racePro.actBox.splice(i,1);
+            _this.racePro.actBox.splice(i, 1);
             _this.$message.success("删除成功");
             this.upRacePro();
           })
@@ -806,6 +790,14 @@ export default {
 </script>
 
 <style scoped>
+@media screen and (max-width: 1280px) {
+  .stepBg .steps:nth-child(1) ::after,
+  .stepBg .steps:nth-child(2) ::after,
+  .stepBg .steps:nth-child(3) ::after {
+    content: "";
+    top: 105px !important;
+  }
+}
 .pb_content {
   width: 100%;
   height: 100%;
@@ -827,29 +819,32 @@ export default {
 }
 
 .stepBg {
+  padding: 80px 0 0 0;
   margin: 0 25px 0 0;
   width: 20%;
   display: flex;
-  flex-direction: column;
   justify-content: flex-start;
-  align-items: flex-start;
+  align-items: center;
   flex-wrap: nowrap;
   background: #fff;
   /* min-height: 800px; */
-  height: 100%;
-  border: 1px solid #c2c2c2;
+  height: calc(100% - 80px);
   border-radius: 15px;
   overflow: auto;
   min-width: 260px;
+  flex-direction: column;
 }
-
 .steps {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  margin: 35px 20px 20px 20px;
   position: relative;
-  align-items: center;
+  width: 145px;
+  height: 180px;
+}
+.steps > div:nth-child(1) > img {
+  z-index: 9;
+  position: relative;
 }
 
 .stepLeft,
@@ -876,6 +871,7 @@ export default {
   justify-content: space-between;
   align-items: flex-start;
   margin-left: 10px;
+  height: 50px;
 }
 
 .line,
@@ -898,10 +894,8 @@ export default {
   border-radius: 10px;
   overflow: auto;
   height: 100%;
-  border: 1px solid #c2c2c2;
   border-radius: 15px;
   /* max-height: 800px; */
-  min-width: calc(100% - 260px);
 }
 
 .raceProBox {
@@ -1196,4 +1190,15 @@ export default {
   background-repeat: no-repeat;
   background-position: 5px 10px;
 }
+.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;
+}
 </style>

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

@@ -5,36 +5,40 @@
       <div class="raceBox">
         <div class="stepBg">
           <div class="steps">
-            <div class="stepLeft" :class="steps == 0 ? 'isSteps' : ''">1</div>
+            <div>
+              <img src="../../../../assets/icon/race/progress.png" alt="" />
+            </div>
             <div class="stepRightNav">
               <div>案例赛事信息</div>
               <div>说明</div>
             </div>
-            <div class="line" :class="steps == 0 ? 'isLine' : ''"></div>
           </div>
           <div class="steps">
-            <div class="stepLeft" :class="steps == 1 ? 'isSteps' : ''">2</div>
+            <div>
+              <img src="../../../../assets/icon/race/progress.png" alt="" />
+            </div>
             <div class="stepRightNav">
               <div>封面</div>
               <div>说明</div>
             </div>
-            <div class="line" :class="steps == 1 ? 'isLine' : ''"></div>
           </div>
           <div class="steps">
-            <div class="stepLeft" :class="steps == 2 ? 'isSteps' : ''">3</div>
+            <div>
+              <img src="../../../../assets/icon/race/progress.png" alt="" />
+            </div>
             <div class="stepRightNav">
               <div>成员信息</div>
               <div>协同人员</div>
             </div>
-            <div class="line" :class="steps == 2 ? 'isLine' : ''"></div>
           </div>
           <div class="steps">
-            <div class="stepLeft" :class="steps == 3 ? 'isSteps' : ''">4</div>
+            <div>
+              <img src="../../../../assets/icon/race/progress.png" alt="" />
+            </div>
             <div class="stepRightNav">
               <div>项目说明</div>
               <div>项目简介</div>
             </div>
-            <!-- <div class="line" :class="steps == 3 ? 'isLine' : ''"></div> -->
           </div>
         </div>
         <div class="right">
@@ -547,6 +551,14 @@ export default {
 </script>
 
 <style scoped>
+@media screen and (max-width: 1280px) {
+  .stepBg .steps:nth-child(1) ::after,
+  .stepBg .steps:nth-child(2) ::after,
+  .stepBg .steps:nth-child(3) ::after {
+    content: "";
+    top: 105px !important;
+  }
+}
 .pb_content {
   width: 100%;
   height: 100%;
@@ -567,28 +579,30 @@ export default {
   align-items: flex-start;
 }
 .stepBg {
+  padding: 80px 0 0 0;
   margin: 0 25px 0 0;
   width: 20%;
   display: flex;
-  flex-direction: column;
   justify-content: flex-start;
-  align-items: flex-start;
+  align-items: center;
   flex-wrap: nowrap;
   background: #fff;
   /* min-height: 800px; */
-  height: 100%;
-  border: 1px solid #c2c2c2;
+  height: calc(100% - 80px);
   border-radius: 15px;
   overflow: auto;
   min-width: 260px;
+  flex-direction: column;
 }
 .steps {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  margin: 35px 20px 20px 20px;
   position: relative;
+  width: 145px;
+  height: 180px;
 }
+
 .stepLeft,
 .isSteps {
   width: 30px;
@@ -611,6 +625,7 @@ export default {
   justify-content: space-between;
   align-items: flex-start;
   margin-left: 10px;
+  height: 50px;
 }
 .line,
 .isLine {
@@ -630,10 +645,8 @@ export default {
   border-radius: 10px;
   overflow: auto;
   height: 100%;
-  border: 1px solid #c2c2c2;
   border-radius: 15px;
   /* max-height: 800px; */
-  min-width: calc(100% - 260px);
 }
 .allBox {
   padding: 25px;
@@ -904,4 +917,16 @@ export default {
 .header-title {
   display: flex;
 }
+.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: 120px;
+  transform: translateY(-50%);
+}
 </style>

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

@@ -5,36 +5,40 @@
       <div class="raceBox">
         <div class="stepBg">
           <div class="steps">
-            <div class="stepLeft" :class="steps == 0 ? 'isSteps' : ''">1</div>
+            <div>
+              <img src="../../../../assets/icon/race/progress.png" alt="" />
+            </div>
             <div class="stepRightNav">
               <div>项目简介</div>
               <div>说明</div>
             </div>
-            <div class="line" :class="steps == 0 ? 'isLine' : ''"></div>
           </div>
           <div class="steps">
-            <div class="stepLeft" :class="steps == 1 ? 'isSteps' : ''">2</div>
+            <div>
+              <img src="../../../../assets/icon/race/progress.png" alt="" />
+            </div>
             <div class="stepRightNav">
-              <div>驱动问题</div>
+              <div>驱动说明</div>
               <div>说明</div>
             </div>
-            <div class="line" :class="steps == 1 ? 'isLine' : ''"></div>
           </div>
           <div class="steps">
-            <div class="stepLeft" :class="steps == 2 ? 'isSteps' : ''">3</div>
+            <div>
+              <img src="../../../../assets/icon/race/progress.png" alt="" />
+            </div>
             <div class="stepRightNav">
               <div>平台案例实施（选填）</div>
-              <div>平台</div>
+              <div>协同人员</div>
             </div>
-            <div class="line" :class="steps == 2 ? 'isLine' : ''"></div>
           </div>
           <div class="steps">
-            <div class="stepLeft" :class="steps == 3 ? 'isSteps' : ''">4</div>
+            <div>
+              <img src="../../../../assets/icon/race/progress.png" alt="" />
+            </div>
             <div class="stepRightNav">
               <div>案例评审</div>
               <div>评审状态、反馈</div>
             </div>
-            <!-- <div class="line" :class="steps == 3 ? 'isLine' : ''"></div> -->
           </div>
         </div>
         <div class="right">
@@ -1147,6 +1151,14 @@ export default {
 </script>
 
 <style scoped>
+@media screen and (max-width: 1280px) {
+  .stepBg .steps:nth-child(1) ::after,
+  .stepBg .steps:nth-child(2) ::after,
+  .stepBg .steps:nth-child(3) ::after {
+    content: "";
+    top: 105px !important;
+  }
+}
 .dialog_diy >>> .el-dialog__header {
   background: #3c3c3c !important;
   padding: 15px 20px;
@@ -1175,28 +1187,28 @@ export default {
 }
 
 .stepBg {
+  padding: 80px 0 0 0;
   margin: 0 25px 0 0;
   width: 20%;
   display: flex;
-  flex-direction: column;
   justify-content: flex-start;
-  align-items: flex-start;
+  align-items: center;
   flex-wrap: nowrap;
   background: #fff;
   /* min-height: 800px; */
-  height: 100%;
-  border: 1px solid #c2c2c2;
+  height: calc(100% - 80px);
   border-radius: 15px;
   overflow: auto;
   min-width: 260px;
+  flex-direction: column;
 }
-
 .steps {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  margin: 35px 20px 20px 20px;
   position: relative;
+  width: 210px;
+  height: 180px;
 }
 
 .stepLeft,
@@ -1223,6 +1235,7 @@ export default {
   justify-content: space-between;
   align-items: flex-start;
   margin-left: 10px;
+  height: 50px;
 }
 
 .line,
@@ -1245,10 +1258,8 @@ export default {
   border-radius: 10px;
   overflow: auto;
   height: 100%;
-  border: 1px solid #c2c2c2;
   border-radius: 15px;
   /* max-height: 800px; */
-  min-width: calc(100% - 260px);
 }
 
 .allBox {
@@ -1513,4 +1524,16 @@ export default {
   border-top: 1px solid #e5e5e5;
   margin-top: 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: 120px;
+  transform: translateY(-50%);
+}
 </style>