update

src/components/pages/race/addRace.vue

@@ -1,45 +1,110 @@
 <template>
-    <div>
-        <div>
-            <span @click="steps = 1">项目基础信息</span>
-            <span @click="steps = 2">项目概况</span>
-            <span @click="steps = 3">项目实施过程</span>
-            <span @click="steps = 4">项目成效与反思</span>
-        </div>
-        <div>
-            <RaceDetail v-if="steps == 1"></RaceDetail>
-            <RaceOverview v-if="steps == 2"></RaceOverview>
-            <ProjectProcess v-if="steps == 3"></ProjectProcess>
-            <ProjectEffect v-if="steps == 4"></ProjectEffect>
-        </div>
+  <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>
+    <div class="race_body">
+      <RaceDetail v-if="steps == 1"></RaceDetail>
+      <RaceOverview v-if="steps == 2"></RaceOverview>
+      <ProjectProcess v-if="steps == 3"></ProjectProcess>
+      <ProjectEffect v-if="steps == 4"></ProjectEffect>
+    </div>
+    <div class="race_btn">
+      <el-button type="primary" @click="goTo('/eventCenter?userid=' + userid + '&oid=' + oid)">赛事信息</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
+      >
+    </div>
+  </div>
 </template>
 
 <script>
-import RaceDetail from './addRace/raceDetail.vue';
-import RaceOverview from './addRace/raceOverview.vue';
-import ProjectProcess from './addRace/projectProcess.vue';
-import ProjectEffect from './addRace/projectEffect.vue';
+import RaceDetail from "./addRace/raceDetail.vue";
+import RaceOverview from "./addRace/raceOverview.vue";
+import ProjectProcess from "./addRace/projectProcess.vue";
+import ProjectEffect from "./addRace/projectEffect.vue";
 export default {
-    components: {
-        RaceDetail,
-        RaceOverview,
-        ProjectProcess,
-        ProjectEffect,
+  components: {
+    RaceDetail,
+    RaceOverview,
+    ProjectProcess,
+    ProjectEffect,
+  },
+  data() {
+    return {
+      steps: 1,
+      userid: this.$route.query.userid,
+      oid: this.$route.query.oid,
+    };
+  },
+  methods: {
+    checkSteps(steps) {
+      this.steps = steps;
     },
-    data() {
-        return {
-            steps: 1
-        }
+    nextSteps() {
+      this.steps++;
     },
-    methods: {
-        checkType() {
-
-        }
+    lastSteps() {
+      this.steps--;
     },
-}
+    goTo(path) {
+      this.$router.push(path);
+    },
+  },
+};
 </script>
 
-<style>
+<style scoped>
+.race_nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin: 10px 0;
+}
+
+.race_nav span {
+  border: 1px solid #929292;
+  border-radius: 5px;
+  padding: 10px 15px;
+  cursor: pointer;
+  color: #4988bf;
+}
 
+.race_nav span + span {
+  margin-left: 10px;
+}
+
+.race_nav .active {
+  color: #001fff;
+}
+
+.race_body {
+  display: flex;
+  width: 90%;
+  justify-content: center;
+  margin: 0 auto;
+  height: calc(100% - 120px);
+}
+
+.race_btn {
+  width: 90%;
+  margin: 10px auto 0;
+  display: flex;
+  justify-content: flex-end;
+}
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <!-- 项目成效与反思 -->
   <div class="pb_content">
-    <div class="pb_content_body" style="position: relative; margin: 0">
+    <div class="race_content_body">
       <div class="raceBox">
         <div class="stepBg">
           <div class="steps">
@@ -23,7 +23,9 @@
           <div class="raceTop allBox">
             <div class="titleTop">
               <div>项目成效</div>
-              <div><el-input></el-input></div>
+              <div>
+                <el-input></el-input>
+              </div>
             </div>
             <div class="editorCss">
               <editor-bar v-model="driQuestion" @change="change"></editor-bar>
@@ -31,49 +33,28 @@
             <div>
               <div class="basic_box">
                 <div>
-                  <div
-                    class="add_chapters_box"
-                    v-if="chapterData && chapterData.length == 0"
-                    style="height: 185px"
-                  ></div>
-                  <div
-                    v-else
-                    class="add_chapters_box"
-                    style="display: flex; flex-direction: column"
-                  >
-                    <div
-                      class="chapter_upload"
-                      v-for="(item1, index1) in chapterData"
-                      :key="item1.id"
-                      @click="
-                        getChapterData(
-                          $event,
-                          unitIndex,
-                          index,
-                          index1,
-                          item1.type
-                        )
-                      "
-                    >
+                  <div class="add_chapters_box" v-if="chapterData && chapterData.length == 0" style="height: 185px">
+                  </div>
+                  <div v-else class="add_chapters_box" style="display: flex; flex-direction: column">
+                    <div class="chapter_upload" v-for="(item1, index1) in chapterData" :key="item1.id" @click="
+                      getChapterData(
+                        $event,
+                        unitIndex,
+                        index,
+                        index1,
+                        item1.type
+                      )
+                    ">
                       <div class="chapter_upload_t"></div>
                       <div class="chapter_upload_o">
                         <div class="chapter_upload_l">
-                          <div
-                            v-if="item1.type == 2"
-                            class="chapter_upload_l_i1"
-                          ></div>
-                          <div
-                            v-if="
-                              item1.type == 3 ||
-                              item1.type == 6 ||
-                              item1.type == 7
-                            "
-                            class="chapter_upload_l_i5"
-                          ></div>
-                          <div
-                            v-if="item1.type == 8"
-                            class="chapter_upload_l_i8"
-                          ></div>
+                          <div v-if="item1.type == 2" class="chapter_upload_l_i1"></div>
+                          <div v-if="
+                            item1.type == 3 ||
+                            item1.type == 6 ||
+                            item1.type == 7
+                          " class="chapter_upload_l_i5"></div>
+                          <div v-if="item1.type == 8" class="chapter_upload_l_i8"></div>
                         </div>
                         <div class="chapter_upload_ic">
                           <div class="chapter_upload_ic_l"></div>
@@ -91,15 +72,11 @@
                           </div>
                         </div>
                         <div class="chapter_upload_n">
-                          <input
-                            class="first"
-                            v-if="
-                              item1.type == 2 ||
-                              item1.type == 3 ||
-                              item1.type == 7
-                            "
-                            :placeholder="item1.name"
-                          />
+                          <input class="first" v-if="
+                            item1.type == 2 ||
+                            item1.type == 3 ||
+                            item1.type == 7
+                          " :placeholder="item1.name" />
                           <!-- @change="
                               updataVideoT(
                                 $event,
@@ -108,19 +85,9 @@
                                 index1
                               )
                             " -->
-                          <input
-                            class="first"
-                            :placeholder="item1.name"
-                            v-if="item1.type == 6"
-                            readonly="true"
-                          />
+                          <input class="first" :placeholder="item1.name" v-if="item1.type == 6" readonly="true" />
                           <!-- @click="selectAttText(itemTaskIndex, index1)" -->
-                          <input
-                            class="first"
-                            :placeholder="item1.name"
-                            v-if="item1.type == 8"
-                            readonly="true"
-                          />
+                          <input class="first" :placeholder="item1.name" v-if="item1.type == 8" readonly="true" />
                           <!-- @click="selectLine(itemTaskIndex, index1)" -->
                           <div class="chapter_upload_ud">
                             <div class="chapter_upload_up"></div>
@@ -136,11 +103,9 @@
                 <div class="add_info_box">
                   <button class="info_btn" @click="addImg($event)">
                     添加教学附件
-                    <input
-                      type="file"
+                    <input type="file"
                       accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-                      style="display: none"
-                    />
+                      style="display: none" />
                     <!-- @change="
                             beforeUpload2($event, unitIndex, 3, itemTaskIndex)
                           " -->
@@ -152,7 +117,9 @@
           <div class="raceTop allBox">
             <div class="titleTop">
               <div>项目反思</div>
-              <div><el-input></el-input></div>
+              <div>
+                <el-input></el-input>
+              </div>
             </div>
             <div class="editorCss">
               <editor-bar v-model="driQuestion" @change="change"></editor-bar>
@@ -160,49 +127,28 @@
             <div>
               <div class="basic_box">
                 <div>
-                  <div
-                    class="add_chapters_box"
-                    v-if="chapterData && chapterData.length == 0"
-                    style="height: 185px"
-                  ></div>
-                  <div
-                    v-else
-                    class="add_chapters_box"
-                    style="display: flex; flex-direction: column"
-                  >
-                    <div
-                      class="chapter_upload"
-                      v-for="(item1, index1) in chapterData"
-                      :key="item1.id"
-                      @click="
-                        getChapterData(
-                          $event,
-                          unitIndex,
-                          index,
-                          index1,
-                          item1.type
-                        )
-                      "
-                    >
+                  <div class="add_chapters_box" v-if="chapterData && chapterData.length == 0" style="height: 185px">
+                  </div>
+                  <div v-else class="add_chapters_box" style="display: flex; flex-direction: column">
+                    <div class="chapter_upload" v-for="(item1, index1) in chapterData" :key="item1.id" @click="
+                      getChapterData(
+                        $event,
+                        unitIndex,
+                        index,
+                        index1,
+                        item1.type
+                      )
+                    ">
                       <div class="chapter_upload_t"></div>
                       <div class="chapter_upload_o">
                         <div class="chapter_upload_l">
-                          <div
-                            v-if="item1.type == 2"
-                            class="chapter_upload_l_i1"
-                          ></div>
-                          <div
-                            v-if="
-                              item1.type == 3 ||
-                              item1.type == 6 ||
-                              item1.type == 7
-                            "
-                            class="chapter_upload_l_i5"
-                          ></div>
-                          <div
-                            v-if="item1.type == 8"
-                            class="chapter_upload_l_i8"
-                          ></div>
+                          <div v-if="item1.type == 2" class="chapter_upload_l_i1"></div>
+                          <div v-if="
+                            item1.type == 3 ||
+                            item1.type == 6 ||
+                            item1.type == 7
+                          " class="chapter_upload_l_i5"></div>
+                          <div v-if="item1.type == 8" class="chapter_upload_l_i8"></div>
                         </div>
                         <div class="chapter_upload_ic">
                           <div class="chapter_upload_ic_l"></div>
@@ -220,15 +166,11 @@
                           </div>
                         </div>
                         <div class="chapter_upload_n">
-                          <input
-                            class="first"
-                            v-if="
-                              item1.type == 2 ||
-                              item1.type == 3 ||
-                              item1.type == 7
-                            "
-                            :placeholder="item1.name"
-                          />
+                          <input class="first" v-if="
+                            item1.type == 2 ||
+                            item1.type == 3 ||
+                            item1.type == 7
+                          " :placeholder="item1.name" />
                           <!-- @change="
                               updataVideoT(
                                 $event,
@@ -237,19 +179,9 @@
                                 index1
                               )
                             " -->
-                          <input
-                            class="first"
-                            :placeholder="item1.name"
-                            v-if="item1.type == 6"
-                            readonly="true"
-                          />
+                          <input class="first" :placeholder="item1.name" v-if="item1.type == 6" readonly="true" />
                           <!-- @click="selectAttText(itemTaskIndex, index1)" -->
-                          <input
-                            class="first"
-                            :placeholder="item1.name"
-                            v-if="item1.type == 8"
-                            readonly="true"
-                          />
+                          <input class="first" :placeholder="item1.name" v-if="item1.type == 8" readonly="true" />
                           <!-- @click="selectLine(itemTaskIndex, index1)" -->
                           <div class="chapter_upload_ud">
                             <div class="chapter_upload_up"></div>
@@ -265,11 +197,9 @@
                 <div class="add_info_box">
                   <button class="info_btn" @click="addImg($event)">
                     添加教学附件
-                    <input
-                      type="file"
+                    <input type="file"
                       accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-                      style="display: none"
-                    />
+                      style="display: none" />
                     <!-- @change="
                             beforeUpload2($event, unitIndex, 3, itemTaskIndex)
                           " -->
@@ -289,10 +219,7 @@
         <div class="cresteMessage">
           案例征集必填内容已完成，请在
           <span>"赛事管理 > 我的案例"中查看。</span> 你可以点击
-          <span>"平台实施填报入口"</span> ，提交选填内容。<span
-            style="color: #9a9a9a"
-            >（填报后可以运用平台进行教学，调用平台工具，收集过程性数据并生成数据报告。）</span
-          >
+          <span>"平台实施填报入口"</span> ，提交选填内容。<span style="color: #9a9a9a">（填报后可以运用平台进行教学，调用平台工具，收集过程性数据并生成数据报告。）</span>
         </div>
       </div>
       <div class="createButton">平台实施填报入口</div>
@@ -330,11 +257,22 @@ export default {
       }
     },
   },
-  created() {},
+  created() { },
 };
 </script>
 
 <style scoped>
+.pb_content{
+  width: 100%;
+  height: 100%;
+}
+.race_content_body {
+  width: 100%;
+  position: relative;
+  margin: 0;
+  height: 100%;
+}
+
 .raceBox {
   width: 100%;
   height: 100%;
@@ -343,6 +281,7 @@ export default {
   flex-wrap: nowrap;
   align-items: flex-start;
 }
+
 .stepBg {
   margin: 0 25px 0 0;
   width: 20%;
@@ -352,11 +291,14 @@ export default {
   align-items: flex-start;
   flex-wrap: nowrap;
   background: #fff;
-  min-height: 800px;
+  /* min-height: 800px; */
   height: 100%;
   border: 1px solid #c2c2c2;
   border-radius: 15px;
+  overflow: auto;
+  min-width: 260px;
 }
+
 .steps {
   display: flex;
   flex-direction: row;
@@ -365,6 +307,7 @@ export default {
   position: relative;
   align-items: center;
 }
+
 .stepLeft,
 .isSteps {
   width: 30px;
@@ -375,11 +318,13 @@ export default {
   border: 2px solid #eee;
   color: #c0c0c0;
 }
+
 .isSteps {
   background: #1990ff;
   color: #fff;
   border: none;
 }
+
 .stepRightNav {
   display: flex;
   flex-direction: column;
@@ -388,6 +333,7 @@ export default {
   align-items: flex-start;
   margin-left: 10px;
 }
+
 .line,
 .isLine {
   position: absolute;
@@ -397,9 +343,11 @@ export default {
   top: 38px;
   left: 15px;
 }
+
 .isLine {
   border-left: 1px solid #1d92ff !important;
 }
+
 .right {
   width: calc(100% - 20%);
   background: rgb(255, 255, 255);
@@ -408,20 +356,25 @@ export default {
   height: 100%;
   border: 1px solid #c2c2c2;
   border-radius: 15px;
-  max-height: 800px;
+  /* max-height: 800px; */
+  min-width: calc(100% - 260px);
 }
+
 .allBox {
   padding: 25px;
 }
-.allBox > div:nth-child(1) {
+
+.allBox>div:nth-child(1) {
   color: #0f40f5;
   font-size: 18px;
   font-weight: bold;
 }
-.raceTop > div:nth-child(2) {
+
+.raceTop>div:nth-child(2) {
   width: 80%;
   margin-top: 10px;
 }
+
 .titleTop {
   display: flex;
   flex-direction: row;
@@ -429,19 +382,23 @@ export default {
   align-items: center;
   width: 100%;
 }
-.titleTop > div:nth-child(2) {
+
+.titleTop>div:nth-child(2) {
   width: 82%;
   margin-left: 20px;
 }
+
 .editorCss {
   width: 90% !important;
 }
+
 .basic_box {
   position: relative;
   margin: 0;
   min-height: 0;
   width: 90%;
 }
+
 .add_info_box {
   margin: 20px 0;
 }
@@ -464,6 +421,7 @@ export default {
   overflow-y: auto;
   overflow-x: hidden;
 }
+
 .chapter_upload {
   height: 50px;
   margin-top: 12px;
@@ -594,9 +552,11 @@ export default {
   background-size: 100% 100%;
   cursor: pointer;
 }
+
 .chapter_upload_l {
   padding: 1px 0 0 10px;
 }
+
 .first {
   border: none;
   outline: none;
@@ -608,6 +568,7 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
 .info_btn {
   color: #fff;
   background-color: #0f7eff;
@@ -622,9 +583,11 @@ export default {
   border: none;
   cursor: pointer;
 }
+
 .info_btn:hover {
   background-color: #4f7cd5 !important;
 }
+
 .createSuccessCss {
   position: fixed;
   right: 30%;
@@ -638,6 +601,7 @@ export default {
   transform: translateY(-50%);
   box-shadow: 0px 0 8px 0px #c5c5c5;
 }
+
 .createBox {
   padding: 53px 53px 0 50px;
   display: flex;
@@ -645,22 +609,27 @@ export default {
   flex-wrap: nowrap;
   align-items: flex-start;
 }
+
 .success {
   width: 68px;
   height: 68px;
 }
-.success > img {
+
+.success>img {
   width: 100%;
   height: 100%;
 }
+
 .cresteMessage {
   width: 500px;
   margin-left: 22px;
   line-height: 50px;
 }
-.cresteMessage > span {
+
+.cresteMessage>span {
   color: #0f40f5;
 }
+
 .createButton {
   width: 163px;
   height: 35px;

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

@@ -1,7 +1,7 @@
 <template>
   <!-- 项目实施过程 -->
   <div class="pb_content">
-    <div class="pb_content_body" style="position: relative; margin: 0">
+    <div class="race_content_body">
       <div class="raceBox">
         <div class="stepBg">
           <div class="steps">
@@ -37,13 +37,17 @@
           <div class="raceTop allBox">
             <div class="titleTop">
               <div>活动一</div>
-              <div style="width: 20%"><el-input></el-input></div>
+              <div style="width: 20%">
+                <el-input></el-input>
+              </div>
             </div>
           </div>
           <div class="raceTop allBox">
             <div class="titleTop">
               <div>活动实施</div>
-              <div><el-input></el-input></div>
+              <div>
+                <el-input></el-input>
+              </div>
             </div>
             <div class="editorCss">
               <editor-bar v-model="driQuestion" @change="change"></editor-bar>
@@ -51,49 +55,28 @@
             <div>
               <div class="basic_box">
                 <div>
-                  <div
-                    class="add_chapters_box"
-                    v-if="chapterData && chapterData.length == 0"
-                    style="height: 185px"
-                  ></div>
-                  <div
-                    v-else
-                    class="add_chapters_box"
-                    style="display: flex; flex-direction: column"
-                  >
-                    <div
-                      class="chapter_upload"
-                      v-for="(item1, index1) in chapterData"
-                      :key="item1.id"
-                      @click="
-                        getChapterData(
-                          $event,
-                          unitIndex,
-                          index,
-                          index1,
-                          item1.type
-                        )
-                      "
-                    >
+                  <div class="add_chapters_box" v-if="chapterData && chapterData.length == 0" style="height: 185px">
+                  </div>
+                  <div v-else class="add_chapters_box" style="display: flex; flex-direction: column">
+                    <div class="chapter_upload" v-for="(item1, index1) in chapterData" :key="item1.id" @click="
+                      getChapterData(
+                        $event,
+                        unitIndex,
+                        index,
+                        index1,
+                        item1.type
+                      )
+                    ">
                       <div class="chapter_upload_t"></div>
                       <div class="chapter_upload_o">
                         <div class="chapter_upload_l">
-                          <div
-                            v-if="item1.type == 2"
-                            class="chapter_upload_l_i1"
-                          ></div>
-                          <div
-                            v-if="
-                              item1.type == 3 ||
-                              item1.type == 6 ||
-                              item1.type == 7
-                            "
-                            class="chapter_upload_l_i5"
-                          ></div>
-                          <div
-                            v-if="item1.type == 8"
-                            class="chapter_upload_l_i8"
-                          ></div>
+                          <div v-if="item1.type == 2" class="chapter_upload_l_i1"></div>
+                          <div v-if="
+                            item1.type == 3 ||
+                            item1.type == 6 ||
+                            item1.type == 7
+                          " class="chapter_upload_l_i5"></div>
+                          <div v-if="item1.type == 8" class="chapter_upload_l_i8"></div>
                         </div>
                         <div class="chapter_upload_ic">
                           <div class="chapter_upload_ic_l"></div>
@@ -111,15 +94,11 @@
                           </div>
                         </div>
                         <div class="chapter_upload_n">
-                          <input
-                            class="first"
-                            v-if="
-                              item1.type == 2 ||
-                              item1.type == 3 ||
-                              item1.type == 7
-                            "
-                            :placeholder="item1.name"
-                          />
+                          <input class="first" v-if="
+                            item1.type == 2 ||
+                            item1.type == 3 ||
+                            item1.type == 7
+                          " :placeholder="item1.name" />
                           <!-- @change="
                               updataVideoT(
                                 $event,
@@ -128,19 +107,9 @@
                                 index1
                               )
                             " -->
-                          <input
-                            class="first"
-                            :placeholder="item1.name"
-                            v-if="item1.type == 6"
-                            readonly="true"
-                          />
+                          <input class="first" :placeholder="item1.name" v-if="item1.type == 6" readonly="true" />
                           <!-- @click="selectAttText(itemTaskIndex, index1)" -->
-                          <input
-                            class="first"
-                            :placeholder="item1.name"
-                            v-if="item1.type == 8"
-                            readonly="true"
-                          />
+                          <input class="first" :placeholder="item1.name" v-if="item1.type == 8" readonly="true" />
                           <!-- @click="selectLine(itemTaskIndex, index1)" -->
                           <div class="chapter_upload_ud">
                             <div class="chapter_upload_up"></div>
@@ -156,11 +125,9 @@
                 <div class="add_info_box">
                   <button class="info_btn" @click="addImg($event)">
                     添加教学附件
-                    <input
-                      type="file"
+                    <input type="file"
                       accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-                      style="display: none"
-                    />
+                      style="display: none" />
                     <!-- @change="
                             beforeUpload2($event, unitIndex, 3, itemTaskIndex)
                           " -->
@@ -172,7 +139,9 @@
           <div class="raceTop allBox">
             <div class="titleTop">
               <div>活动工具</div>
-              <div><el-input></el-input></div>
+              <div>
+                <el-input></el-input>
+              </div>
             </div>
             <div class="editorCss">
               <editor-bar v-model="driQuestion" @change="change"></editor-bar>
@@ -180,49 +149,28 @@
             <div>
               <div class="basic_box">
                 <div>
-                  <div
-                    class="add_chapters_box"
-                    v-if="chapterData && chapterData.length == 0"
-                    style="height: 185px"
-                  ></div>
-                  <div
-                    v-else
-                    class="add_chapters_box"
-                    style="display: flex; flex-direction: column"
-                  >
-                    <div
-                      class="chapter_upload"
-                      v-for="(item1, index1) in chapterData"
-                      :key="item1.id"
-                      @click="
-                        getChapterData(
-                          $event,
-                          unitIndex,
-                          index,
-                          index1,
-                          item1.type
-                        )
-                      "
-                    >
+                  <div class="add_chapters_box" v-if="chapterData && chapterData.length == 0" style="height: 185px">
+                  </div>
+                  <div v-else class="add_chapters_box" style="display: flex; flex-direction: column">
+                    <div class="chapter_upload" v-for="(item1, index1) in chapterData" :key="item1.id" @click="
+                      getChapterData(
+                        $event,
+                        unitIndex,
+                        index,
+                        index1,
+                        item1.type
+                      )
+                    ">
                       <div class="chapter_upload_t"></div>
                       <div class="chapter_upload_o">
                         <div class="chapter_upload_l">
-                          <div
-                            v-if="item1.type == 2"
-                            class="chapter_upload_l_i1"
-                          ></div>
-                          <div
-                            v-if="
-                              item1.type == 3 ||
-                              item1.type == 6 ||
-                              item1.type == 7
-                            "
-                            class="chapter_upload_l_i5"
-                          ></div>
-                          <div
-                            v-if="item1.type == 8"
-                            class="chapter_upload_l_i8"
-                          ></div>
+                          <div v-if="item1.type == 2" class="chapter_upload_l_i1"></div>
+                          <div v-if="
+                            item1.type == 3 ||
+                            item1.type == 6 ||
+                            item1.type == 7
+                          " class="chapter_upload_l_i5"></div>
+                          <div v-if="item1.type == 8" class="chapter_upload_l_i8"></div>
                         </div>
                         <div class="chapter_upload_ic">
                           <div class="chapter_upload_ic_l"></div>
@@ -240,15 +188,11 @@
                           </div>
                         </div>
                         <div class="chapter_upload_n">
-                          <input
-                            class="first"
-                            v-if="
-                              item1.type == 2 ||
-                              item1.type == 3 ||
-                              item1.type == 7
-                            "
-                            :placeholder="item1.name"
-                          />
+                          <input class="first" v-if="
+                            item1.type == 2 ||
+                            item1.type == 3 ||
+                            item1.type == 7
+                          " :placeholder="item1.name" />
                           <!-- @change="
                               updataVideoT(
                                 $event,
@@ -257,19 +201,9 @@
                                 index1
                               )
                             " -->
-                          <input
-                            class="first"
-                            :placeholder="item1.name"
-                            v-if="item1.type == 6"
-                            readonly="true"
-                          />
+                          <input class="first" :placeholder="item1.name" v-if="item1.type == 6" readonly="true" />
                           <!-- @click="selectAttText(itemTaskIndex, index1)" -->
-                          <input
-                            class="first"
-                            :placeholder="item1.name"
-                            v-if="item1.type == 8"
-                            readonly="true"
-                          />
+                          <input class="first" :placeholder="item1.name" v-if="item1.type == 8" readonly="true" />
                           <!-- @click="selectLine(itemTaskIndex, index1)" -->
                           <div class="chapter_upload_ud">
                             <div class="chapter_upload_up"></div>
@@ -285,11 +219,9 @@
                 <div class="add_info_box">
                   <button class="info_btn" @click="addImg($event)">
                     添加教学附件
-                    <input
-                      type="file"
+                    <input type="file"
                       accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-                      style="display: none"
-                    />
+                      style="display: none" />
                     <!-- @change="
                             beforeUpload2($event, unitIndex, 3, itemTaskIndex)
                           " -->
@@ -301,7 +233,9 @@
           <div class="raceTop allBox">
             <div class="titleTop">
               <div>活动成果</div>
-              <div><el-input></el-input></div>
+              <div>
+                <el-input></el-input>
+              </div>
             </div>
             <div class="editorCss">
               <editor-bar v-model="driQuestion" @change="change"></editor-bar>
@@ -309,49 +243,28 @@
             <div>
               <div class="basic_box">
                 <div>
-                  <div
-                    class="add_chapters_box"
-                    v-if="chapterData && chapterData.length == 0"
-                    style="height: 185px"
-                  ></div>
-                  <div
-                    v-else
-                    class="add_chapters_box"
-                    style="display: flex; flex-direction: column"
-                  >
-                    <div
-                      class="chapter_upload"
-                      v-for="(item1, index1) in chapterData"
-                      :key="item1.id"
-                      @click="
-                        getChapterData(
-                          $event,
-                          unitIndex,
-                          index,
-                          index1,
-                          item1.type
-                        )
-                      "
-                    >
+                  <div class="add_chapters_box" v-if="chapterData && chapterData.length == 0" style="height: 185px">
+                  </div>
+                  <div v-else class="add_chapters_box" style="display: flex; flex-direction: column">
+                    <div class="chapter_upload" v-for="(item1, index1) in chapterData" :key="item1.id" @click="
+                      getChapterData(
+                        $event,
+                        unitIndex,
+                        index,
+                        index1,
+                        item1.type
+                      )
+                    ">
                       <div class="chapter_upload_t"></div>
                       <div class="chapter_upload_o">
                         <div class="chapter_upload_l">
-                          <div
-                            v-if="item1.type == 2"
-                            class="chapter_upload_l_i1"
-                          ></div>
-                          <div
-                            v-if="
-                              item1.type == 3 ||
-                              item1.type == 6 ||
-                              item1.type == 7
-                            "
-                            class="chapter_upload_l_i5"
-                          ></div>
-                          <div
-                            v-if="item1.type == 8"
-                            class="chapter_upload_l_i8"
-                          ></div>
+                          <div v-if="item1.type == 2" class="chapter_upload_l_i1"></div>
+                          <div v-if="
+                            item1.type == 3 ||
+                            item1.type == 6 ||
+                            item1.type == 7
+                          " class="chapter_upload_l_i5"></div>
+                          <div v-if="item1.type == 8" class="chapter_upload_l_i8"></div>
                         </div>
                         <div class="chapter_upload_ic">
                           <div class="chapter_upload_ic_l"></div>
@@ -369,15 +282,11 @@
                           </div>
                         </div>
                         <div class="chapter_upload_n">
-                          <input
-                            class="first"
-                            v-if="
-                              item1.type == 2 ||
-                              item1.type == 3 ||
-                              item1.type == 7
-                            "
-                            :placeholder="item1.name"
-                          />
+                          <input class="first" v-if="
+                            item1.type == 2 ||
+                            item1.type == 3 ||
+                            item1.type == 7
+                          " :placeholder="item1.name" />
                           <!-- @change="
                               updataVideoT(
                                 $event,
@@ -386,19 +295,9 @@
                                 index1
                               )
                             " -->
-                          <input
-                            class="first"
-                            :placeholder="item1.name"
-                            v-if="item1.type == 6"
-                            readonly="true"
-                          />
+                          <input class="first" :placeholder="item1.name" v-if="item1.type == 6" readonly="true" />
                           <!-- @click="selectAttText(itemTaskIndex, index1)" -->
-                          <input
-                            class="first"
-                            :placeholder="item1.name"
-                            v-if="item1.type == 8"
-                            readonly="true"
-                          />
+                          <input class="first" :placeholder="item1.name" v-if="item1.type == 8" readonly="true" />
                           <!-- @click="selectLine(itemTaskIndex, index1)" -->
                           <div class="chapter_upload_ud">
                             <div class="chapter_upload_up"></div>
@@ -414,11 +313,9 @@
                 <div class="add_info_box">
                   <button class="info_btn" @click="addImg($event)">
                     添加教学附件
-                    <input
-                      type="file"
+                    <input type="file"
                       accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-                      style="display: none"
-                    />
+                      style="display: none" />
                     <!-- @change="
                             beforeUpload2($event, unitIndex, 3, itemTaskIndex)
                           " -->
@@ -430,7 +327,9 @@
           <div class="raceTop allBox">
             <div class="titleTop">
               <div>活动评价</div>
-              <div><el-input></el-input></div>
+              <div>
+                <el-input></el-input>
+              </div>
             </div>
             <div class="editorCss">
               <editor-bar v-model="driQuestion" @change="change"></editor-bar>
@@ -438,49 +337,28 @@
             <div>
               <div class="basic_box">
                 <div>
-                  <div
-                    class="add_chapters_box"
-                    v-if="chapterData && chapterData.length == 0"
-                    style="height: 185px"
-                  ></div>
-                  <div
-                    v-else
-                    class="add_chapters_box"
-                    style="display: flex; flex-direction: column"
-                  >
-                    <div
-                      class="chapter_upload"
-                      v-for="(item1, index1) in chapterData"
-                      :key="item1.id"
-                      @click="
-                        getChapterData(
-                          $event,
-                          unitIndex,
-                          index,
-                          index1,
-                          item1.type
-                        )
-                      "
-                    >
+                  <div class="add_chapters_box" v-if="chapterData && chapterData.length == 0" style="height: 185px">
+                  </div>
+                  <div v-else class="add_chapters_box" style="display: flex; flex-direction: column">
+                    <div class="chapter_upload" v-for="(item1, index1) in chapterData" :key="item1.id" @click="
+                      getChapterData(
+                        $event,
+                        unitIndex,
+                        index,
+                        index1,
+                        item1.type
+                      )
+                    ">
                       <div class="chapter_upload_t"></div>
                       <div class="chapter_upload_o">
                         <div class="chapter_upload_l">
-                          <div
-                            v-if="item1.type == 2"
-                            class="chapter_upload_l_i1"
-                          ></div>
-                          <div
-                            v-if="
-                              item1.type == 3 ||
-                              item1.type == 6 ||
-                              item1.type == 7
-                            "
-                            class="chapter_upload_l_i5"
-                          ></div>
-                          <div
-                            v-if="item1.type == 8"
-                            class="chapter_upload_l_i8"
-                          ></div>
+                          <div v-if="item1.type == 2" class="chapter_upload_l_i1"></div>
+                          <div v-if="
+                            item1.type == 3 ||
+                            item1.type == 6 ||
+                            item1.type == 7
+                          " class="chapter_upload_l_i5"></div>
+                          <div v-if="item1.type == 8" class="chapter_upload_l_i8"></div>
                         </div>
                         <div class="chapter_upload_ic">
                           <div class="chapter_upload_ic_l"></div>
@@ -498,15 +376,11 @@
                           </div>
                         </div>
                         <div class="chapter_upload_n">
-                          <input
-                            class="first"
-                            v-if="
-                              item1.type == 2 ||
-                              item1.type == 3 ||
-                              item1.type == 7
-                            "
-                            :placeholder="item1.name"
-                          />
+                          <input class="first" v-if="
+                            item1.type == 2 ||
+                            item1.type == 3 ||
+                            item1.type == 7
+                          " :placeholder="item1.name" />
                           <!-- @change="
                               updataVideoT(
                                 $event,
@@ -515,19 +389,9 @@
                                 index1
                               )
                             " -->
-                          <input
-                            class="first"
-                            :placeholder="item1.name"
-                            v-if="item1.type == 6"
-                            readonly="true"
-                          />
+                          <input class="first" :placeholder="item1.name" v-if="item1.type == 6" readonly="true" />
                           <!-- @click="selectAttText(itemTaskIndex, index1)" -->
-                          <input
-                            class="first"
-                            :placeholder="item1.name"
-                            v-if="item1.type == 8"
-                            readonly="true"
-                          />
+                          <input class="first" :placeholder="item1.name" v-if="item1.type == 8" readonly="true" />
                           <!-- @click="selectLine(itemTaskIndex, index1)" -->
                           <div class="chapter_upload_ud">
                             <div class="chapter_upload_up"></div>
@@ -543,11 +407,9 @@
                 <div class="add_info_box">
                   <button class="info_btn" @click="addImg($event)">
                     添加教学附件
-                    <input
-                      type="file"
+                    <input type="file"
                       accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-                      style="display: none"
-                    />
+                      style="display: none" />
                     <!-- @change="
                             beforeUpload2($event, unitIndex, 3, itemTaskIndex)
                           " -->
@@ -588,11 +450,22 @@ export default {
       }
     },
   },
-  created() {},
+  created() { },
 };
 </script>
 
 <style scoped>
+.pb_content{
+  width: 100%;
+  height: 100%;
+}
+.race_content_body {
+  width: 100%;
+  position: relative;
+  margin: 0;
+  height: 100%;
+}
+
 .raceBox {
   width: 100%;
   height: 100%;
@@ -601,6 +474,7 @@ export default {
   flex-wrap: nowrap;
   align-items: flex-start;
 }
+
 .stepBg {
   margin: 0 25px 0 0;
   width: 20%;
@@ -610,11 +484,14 @@ export default {
   align-items: flex-start;
   flex-wrap: nowrap;
   background: #fff;
-  min-height: 800px;
+  /* min-height: 800px; */
   height: 100%;
   border: 1px solid #c2c2c2;
   border-radius: 15px;
+  overflow: auto;
+  min-width: 260px;
 }
+
 .steps {
   display: flex;
   flex-direction: row;
@@ -623,6 +500,7 @@ export default {
   position: relative;
   align-items: center;
 }
+
 .stepLeft,
 .isSteps {
   width: 30px;
@@ -633,11 +511,13 @@ export default {
   border: 2px solid #eee;
   color: #c0c0c0;
 }
+
 .isSteps {
   background: #1990ff;
   color: #fff;
   border: none;
 }
+
 .stepRightNav {
   display: flex;
   flex-direction: column;
@@ -646,6 +526,7 @@ export default {
   align-items: flex-start;
   margin-left: 10px;
 }
+
 .line,
 .isLine {
   position: absolute;
@@ -655,9 +536,11 @@ export default {
   top: 38px;
   left: 15px;
 }
+
 .isLine {
   border-left: 1px solid #1d92ff !important;
 }
+
 .right {
   width: calc(100% - 20%);
   background: rgb(255, 255, 255);
@@ -666,20 +549,25 @@ export default {
   height: 100%;
   border: 1px solid #c2c2c2;
   border-radius: 15px;
-  max-height: 800px;
+  /* max-height: 800px; */
+  min-width: calc(100% - 260px);
 }
+
 .allBox {
   padding: 25px;
 }
-.allBox > div:nth-child(1) {
+
+.allBox>div:nth-child(1) {
   color: #0f40f5;
   font-size: 18px;
   font-weight: bold;
 }
-.raceTop > div:nth-child(2) {
+
+.raceTop>div:nth-child(2) {
   width: 80%;
   margin-top: 10px;
 }
+
 .titleTop {
   display: flex;
   flex-direction: row;
@@ -687,19 +575,23 @@ export default {
   align-items: center;
   width: 100%;
 }
-.titleTop > div:nth-child(2) {
+
+.titleTop>div:nth-child(2) {
   width: 82%;
   margin-left: 20px;
 }
+
 .editorCss {
   width: 90% !important;
 }
+
 .basic_box {
   position: relative;
   margin: 0;
   min-height: 0;
   width: 90%;
 }
+
 .add_info_box {
   margin: 20px 0;
 }
@@ -722,6 +614,7 @@ export default {
   overflow-y: auto;
   overflow-x: hidden;
 }
+
 .chapter_upload {
   height: 50px;
   margin-top: 12px;
@@ -852,9 +745,11 @@ export default {
   background-size: 100% 100%;
   cursor: pointer;
 }
+
 .chapter_upload_l {
   padding: 1px 0 0 10px;
 }
+
 .first {
   border: none;
   outline: none;
@@ -866,6 +761,7 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
 .info_btn {
   color: #fff;
   background-color: #0f7eff;
@@ -880,6 +776,7 @@ export default {
   border: none;
   cursor: pointer;
 }
+
 .info_btn:hover {
   background-color: #4f7cd5 !important;
 }

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

@@ -1,7 +1,7 @@
 <template>
 <!-- 项目基础信息 -->
   <div class="pb_content">
-    <div class="pb_content_body" style="position: relative; margin: 0">
+    <div class="race_content_body">
       <div class="raceBox">
         <div class="stepBg">
           <div class="steps">
@@ -259,6 +259,17 @@ export default {
 </script>
 
 <style scoped>
+.pb_content{
+  width: 100%;
+  height: 100%;
+}
+.race_content_body {
+  width: 100%;
+  position: relative;
+  margin: 0;
+  height: 100%;
+}
+
 .raceBox {
   width: 100%;
   height: 100%;
@@ -276,10 +287,12 @@ export default {
   align-items: flex-start;
   flex-wrap: nowrap;
   background: #fff;
-  min-height: 800px;
+  /* min-height: 800px; */
   height: 100%;
   border: 1px solid #c2c2c2;
   border-radius: 15px;
+  overflow: auto;
+  min-width: 260px;
 }
 .steps {
   display: flex;
@@ -331,7 +344,8 @@ export default {
   height: 100%;
   border: 1px solid #c2c2c2;
   border-radius: 15px;
-  max-height: 800px;
+  /* max-height: 800px; */
+  min-width: calc(100% - 260px);
 }
 .allBox {
   padding: 25px;

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

@@ -1,7 +1,7 @@
 <template>
   <!-- 项目概况 -->
   <div class="pb_content">
-    <div class="pb_content_body" style="position: relative; margin: 0">
+    <div class="race_content_body">
       <div class="raceBox">
         <div class="stepBg">
           <div class="steps">
@@ -41,7 +41,9 @@
           <div class="raceTop allBox">
             <div class="titleTop">
               <div>驱动性问题</div>
-              <div><el-input></el-input></div>
+              <div>
+                <el-input></el-input>
+              </div>
             </div>
             <div class="editorCss">
               <editor-bar v-model="driQuestion" @change="change"></editor-bar>
@@ -49,49 +51,28 @@
             <div>
               <div class="basic_box">
                 <div>
-                  <div
-                    class="add_chapters_box"
-                    v-if="chapterData && chapterData.length == 0"
-                    style="height: 185px"
-                  ></div>
-                  <div
-                    v-else
-                    class="add_chapters_box"
-                    style="display: flex; flex-direction: column"
-                  >
-                    <div
-                      class="chapter_upload"
-                      v-for="(item1, index1) in chapterData"
-                      :key="item1.id"
-                      @click="
-                        getChapterData(
-                          $event,
-                          unitIndex,
-                          index,
-                          index1,
-                          item1.type
-                        )
-                      "
-                    >
+                  <div class="add_chapters_box" v-if="chapterData && chapterData.length == 0" style="height: 185px">
+                  </div>
+                  <div v-else class="add_chapters_box" style="display: flex; flex-direction: column">
+                    <div class="chapter_upload" v-for="(item1, index1) in chapterData" :key="item1.id" @click="
+                      getChapterData(
+                        $event,
+                        unitIndex,
+                        index,
+                        index1,
+                        item1.type
+                      )
+                    ">
                       <div class="chapter_upload_t"></div>
                       <div class="chapter_upload_o">
                         <div class="chapter_upload_l">
-                          <div
-                            v-if="item1.type == 2"
-                            class="chapter_upload_l_i1"
-                          ></div>
-                          <div
-                            v-if="
-                              item1.type == 3 ||
-                              item1.type == 6 ||
-                              item1.type == 7
-                            "
-                            class="chapter_upload_l_i5"
-                          ></div>
-                          <div
-                            v-if="item1.type == 8"
-                            class="chapter_upload_l_i8"
-                          ></div>
+                          <div v-if="item1.type == 2" class="chapter_upload_l_i1"></div>
+                          <div v-if="
+                            item1.type == 3 ||
+                            item1.type == 6 ||
+                            item1.type == 7
+                          " class="chapter_upload_l_i5"></div>
+                          <div v-if="item1.type == 8" class="chapter_upload_l_i8"></div>
                         </div>
                         <div class="chapter_upload_ic">
                           <div class="chapter_upload_ic_l"></div>
@@ -109,15 +90,11 @@
                           </div>
                         </div>
                         <div class="chapter_upload_n">
-                          <input
-                            class="first"
-                            v-if="
-                              item1.type == 2 ||
-                              item1.type == 3 ||
-                              item1.type == 7
-                            "
-                            :placeholder="item1.name"
-                          />
+                          <input class="first" v-if="
+                            item1.type == 2 ||
+                            item1.type == 3 ||
+                            item1.type == 7
+                          " :placeholder="item1.name" />
                           <!-- @change="
                               updataVideoT(
                                 $event,
@@ -126,19 +103,9 @@
                                 index1
                               )
                             " -->
-                          <input
-                            class="first"
-                            :placeholder="item1.name"
-                            v-if="item1.type == 6"
-                            readonly="true"
-                          />
+                          <input class="first" :placeholder="item1.name" v-if="item1.type == 6" readonly="true" />
                           <!-- @click="selectAttText(itemTaskIndex, index1)" -->
-                          <input
-                            class="first"
-                            :placeholder="item1.name"
-                            v-if="item1.type == 8"
-                            readonly="true"
-                          />
+                          <input class="first" :placeholder="item1.name" v-if="item1.type == 8" readonly="true" />
                           <!-- @click="selectLine(itemTaskIndex, index1)" -->
                           <div class="chapter_upload_ud">
                             <div class="chapter_upload_up"></div>
@@ -154,11 +121,9 @@
                 <div class="add_info_box">
                   <button class="info_btn" @click="addImg($event)">
                     添加教学附件
-                    <input
-                      type="file"
+                    <input type="file"
                       accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-                      style="display: none"
-                    />
+                      style="display: none" />
                     <!-- @change="
                             beforeUpload2($event, unitIndex, 3, itemTaskIndex)
                           " -->
@@ -170,7 +135,9 @@
           <div class="raceTop allBox">
             <div class="titleTop">
               <div>目标设计</div>
-              <div><el-input></el-input></div>
+              <div>
+                <el-input></el-input>
+              </div>
             </div>
             <div class="editorCss">
               <editor-bar v-model="driQuestion" @change="change"></editor-bar>
@@ -178,49 +145,28 @@
             <div>
               <div class="basic_box">
                 <div>
-                  <div
-                    class="add_chapters_box"
-                    v-if="chapterData && chapterData.length == 0"
-                    style="height: 185px"
-                  ></div>
-                  <div
-                    v-else
-                    class="add_chapters_box"
-                    style="display: flex; flex-direction: column"
-                  >
-                    <div
-                      class="chapter_upload"
-                      v-for="(item1, index1) in chapterData"
-                      :key="item1.id"
-                      @click="
-                        getChapterData(
-                          $event,
-                          unitIndex,
-                          index,
-                          index1,
-                          item1.type
-                        )
-                      "
-                    >
+                  <div class="add_chapters_box" v-if="chapterData && chapterData.length == 0" style="height: 185px">
+                  </div>
+                  <div v-else class="add_chapters_box" style="display: flex; flex-direction: column">
+                    <div class="chapter_upload" v-for="(item1, index1) in chapterData" :key="item1.id" @click="
+                      getChapterData(
+                        $event,
+                        unitIndex,
+                        index,
+                        index1,
+                        item1.type
+                      )
+                    ">
                       <div class="chapter_upload_t"></div>
                       <div class="chapter_upload_o">
                         <div class="chapter_upload_l">
-                          <div
-                            v-if="item1.type == 2"
-                            class="chapter_upload_l_i1"
-                          ></div>
-                          <div
-                            v-if="
-                              item1.type == 3 ||
-                              item1.type == 6 ||
-                              item1.type == 7
-                            "
-                            class="chapter_upload_l_i5"
-                          ></div>
-                          <div
-                            v-if="item1.type == 8"
-                            class="chapter_upload_l_i8"
-                          ></div>
+                          <div v-if="item1.type == 2" class="chapter_upload_l_i1"></div>
+                          <div v-if="
+                            item1.type == 3 ||
+                            item1.type == 6 ||
+                            item1.type == 7
+                          " class="chapter_upload_l_i5"></div>
+                          <div v-if="item1.type == 8" class="chapter_upload_l_i8"></div>
                         </div>
                         <div class="chapter_upload_ic">
                           <div class="chapter_upload_ic_l"></div>
@@ -238,15 +184,11 @@
                           </div>
                         </div>
                         <div class="chapter_upload_n">
-                          <input
-                            class="first"
-                            v-if="
-                              item1.type == 2 ||
-                              item1.type == 3 ||
-                              item1.type == 7
-                            "
-                            :placeholder="item1.name"
-                          />
+                          <input class="first" v-if="
+                            item1.type == 2 ||
+                            item1.type == 3 ||
+                            item1.type == 7
+                          " :placeholder="item1.name" />
                           <!-- @change="
                               updataVideoT(
                                 $event,
@@ -255,19 +197,9 @@
                                 index1
                               )
                             " -->
-                          <input
-                            class="first"
-                            :placeholder="item1.name"
-                            v-if="item1.type == 6"
-                            readonly="true"
-                          />
+                          <input class="first" :placeholder="item1.name" v-if="item1.type == 6" readonly="true" />
                           <!-- @click="selectAttText(itemTaskIndex, index1)" -->
-                          <input
-                            class="first"
-                            :placeholder="item1.name"
-                            v-if="item1.type == 8"
-                            readonly="true"
-                          />
+                          <input class="first" :placeholder="item1.name" v-if="item1.type == 8" readonly="true" />
                           <!-- @click="selectLine(itemTaskIndex, index1)" -->
                           <div class="chapter_upload_ud">
                             <div class="chapter_upload_up"></div>
@@ -283,11 +215,9 @@
                 <div class="add_info_box">
                   <button class="info_btn" @click="addImg($event)">
                     添加教学附件
-                    <input
-                      type="file"
+                    <input type="file"
                       accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-                      style="display: none"
-                    />
+                      style="display: none" />
                     <!-- @change="
                             beforeUpload2($event, unitIndex, 3, itemTaskIndex)
                           " -->
@@ -299,7 +229,9 @@
           <div class="raceTop allBox">
             <div class="titleTop">
               <div>活动设计</div>
-              <div><el-input></el-input></div>
+              <div>
+                <el-input></el-input>
+              </div>
             </div>
             <div class="editorCss">
               <editor-bar v-model="driQuestion" @change="change"></editor-bar>
@@ -307,49 +239,28 @@
             <div>
               <div class="basic_box">
                 <div>
-                  <div
-                    class="add_chapters_box"
-                    v-if="chapterData && chapterData.length == 0"
-                    style="height: 185px"
-                  ></div>
-                  <div
-                    v-else
-                    class="add_chapters_box"
-                    style="display: flex; flex-direction: column"
-                  >
-                    <div
-                      class="chapter_upload"
-                      v-for="(item1, index1) in chapterData"
-                      :key="item1.id"
-                      @click="
-                        getChapterData(
-                          $event,
-                          unitIndex,
-                          index,
-                          index1,
-                          item1.type
-                        )
-                      "
-                    >
+                  <div class="add_chapters_box" v-if="chapterData && chapterData.length == 0" style="height: 185px">
+                  </div>
+                  <div v-else class="add_chapters_box" style="display: flex; flex-direction: column">
+                    <div class="chapter_upload" v-for="(item1, index1) in chapterData" :key="item1.id" @click="
+                      getChapterData(
+                        $event,
+                        unitIndex,
+                        index,
+                        index1,
+                        item1.type
+                      )
+                    ">
                       <div class="chapter_upload_t"></div>
                       <div class="chapter_upload_o">
                         <div class="chapter_upload_l">
-                          <div
-                            v-if="item1.type == 2"
-                            class="chapter_upload_l_i1"
-                          ></div>
-                          <div
-                            v-if="
-                              item1.type == 3 ||
-                              item1.type == 6 ||
-                              item1.type == 7
-                            "
-                            class="chapter_upload_l_i5"
-                          ></div>
-                          <div
-                            v-if="item1.type == 8"
-                            class="chapter_upload_l_i8"
-                          ></div>
+                          <div v-if="item1.type == 2" class="chapter_upload_l_i1"></div>
+                          <div v-if="
+                            item1.type == 3 ||
+                            item1.type == 6 ||
+                            item1.type == 7
+                          " class="chapter_upload_l_i5"></div>
+                          <div v-if="item1.type == 8" class="chapter_upload_l_i8"></div>
                         </div>
                         <div class="chapter_upload_ic">
                           <div class="chapter_upload_ic_l"></div>
@@ -367,15 +278,11 @@
                           </div>
                         </div>
                         <div class="chapter_upload_n">
-                          <input
-                            class="first"
-                            v-if="
-                              item1.type == 2 ||
-                              item1.type == 3 ||
-                              item1.type == 7
-                            "
-                            :placeholder="item1.name"
-                          />
+                          <input class="first" v-if="
+                            item1.type == 2 ||
+                            item1.type == 3 ||
+                            item1.type == 7
+                          " :placeholder="item1.name" />
                           <!-- @change="
                               updataVideoT(
                                 $event,
@@ -384,19 +291,9 @@
                                 index1
                               )
                             " -->
-                          <input
-                            class="first"
-                            :placeholder="item1.name"
-                            v-if="item1.type == 6"
-                            readonly="true"
-                          />
+                          <input class="first" :placeholder="item1.name" v-if="item1.type == 6" readonly="true" />
                           <!-- @click="selectAttText(itemTaskIndex, index1)" -->
-                          <input
-                            class="first"
-                            :placeholder="item1.name"
-                            v-if="item1.type == 8"
-                            readonly="true"
-                          />
+                          <input class="first" :placeholder="item1.name" v-if="item1.type == 8" readonly="true" />
                           <!-- @click="selectLine(itemTaskIndex, index1)" -->
                           <div class="chapter_upload_ud">
                             <div class="chapter_upload_up"></div>
@@ -412,11 +309,9 @@
                 <div class="add_info_box">
                   <button class="info_btn" @click="addImg($event)">
                     添加教学附件
-                    <input
-                      type="file"
+                    <input type="file"
                       accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-                      style="display: none"
-                    />
+                      style="display: none" />
                     <!-- @change="
                             beforeUpload2($event, unitIndex, 3, itemTaskIndex)
                           " -->
@@ -428,7 +323,9 @@
           <div class="raceTop allBox">
             <div class="titleTop">
               <div>评价设计</div>
-              <div><el-input></el-input></div>
+              <div>
+                <el-input></el-input>
+              </div>
             </div>
             <div class="editorCss">
               <editor-bar v-model="driQuestion" @change="change"></editor-bar>
@@ -436,49 +333,28 @@
             <div>
               <div class="basic_box">
                 <div>
-                  <div
-                    class="add_chapters_box"
-                    v-if="chapterData && chapterData.length == 0"
-                    style="height: 185px"
-                  ></div>
-                  <div
-                    v-else
-                    class="add_chapters_box"
-                    style="display: flex; flex-direction: column"
-                  >
-                    <div
-                      class="chapter_upload"
-                      v-for="(item1, index1) in chapterData"
-                      :key="item1.id"
-                      @click="
-                        getChapterData(
-                          $event,
-                          unitIndex,
-                          index,
-                          index1,
-                          item1.type
-                        )
-                      "
-                    >
+                  <div class="add_chapters_box" v-if="chapterData && chapterData.length == 0" style="height: 185px">
+                  </div>
+                  <div v-else class="add_chapters_box" style="display: flex; flex-direction: column">
+                    <div class="chapter_upload" v-for="(item1, index1) in chapterData" :key="item1.id" @click="
+                      getChapterData(
+                        $event,
+                        unitIndex,
+                        index,
+                        index1,
+                        item1.type
+                      )
+                    ">
                       <div class="chapter_upload_t"></div>
                       <div class="chapter_upload_o">
                         <div class="chapter_upload_l">
-                          <div
-                            v-if="item1.type == 2"
-                            class="chapter_upload_l_i1"
-                          ></div>
-                          <div
-                            v-if="
-                              item1.type == 3 ||
-                              item1.type == 6 ||
-                              item1.type == 7
-                            "
-                            class="chapter_upload_l_i5"
-                          ></div>
-                          <div
-                            v-if="item1.type == 8"
-                            class="chapter_upload_l_i8"
-                          ></div>
+                          <div v-if="item1.type == 2" class="chapter_upload_l_i1"></div>
+                          <div v-if="
+                            item1.type == 3 ||
+                            item1.type == 6 ||
+                            item1.type == 7
+                          " class="chapter_upload_l_i5"></div>
+                          <div v-if="item1.type == 8" class="chapter_upload_l_i8"></div>
                         </div>
                         <div class="chapter_upload_ic">
                           <div class="chapter_upload_ic_l"></div>
@@ -496,15 +372,11 @@
                           </div>
                         </div>
                         <div class="chapter_upload_n">
-                          <input
-                            class="first"
-                            v-if="
-                              item1.type == 2 ||
-                              item1.type == 3 ||
-                              item1.type == 7
-                            "
-                            :placeholder="item1.name"
-                          />
+                          <input class="first" v-if="
+                            item1.type == 2 ||
+                            item1.type == 3 ||
+                            item1.type == 7
+                          " :placeholder="item1.name" />
                           <!-- @change="
                               updataVideoT(
                                 $event,
@@ -513,19 +385,9 @@
                                 index1
                               )
                             " -->
-                          <input
-                            class="first"
-                            :placeholder="item1.name"
-                            v-if="item1.type == 6"
-                            readonly="true"
-                          />
+                          <input class="first" :placeholder="item1.name" v-if="item1.type == 6" readonly="true" />
                           <!-- @click="selectAttText(itemTaskIndex, index1)" -->
-                          <input
-                            class="first"
-                            :placeholder="item1.name"
-                            v-if="item1.type == 8"
-                            readonly="true"
-                          />
+                          <input class="first" :placeholder="item1.name" v-if="item1.type == 8" readonly="true" />
                           <!-- @click="selectLine(itemTaskIndex, index1)" -->
                           <div class="chapter_upload_ud">
                             <div class="chapter_upload_up"></div>
@@ -541,11 +403,9 @@
                 <div class="add_info_box">
                   <button class="info_btn" @click="addImg($event)">
                     添加教学附件
-                    <input
-                      type="file"
+                    <input type="file"
                       accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-                      style="display: none"
-                    />
+                      style="display: none" />
                     <!-- @change="
                             beforeUpload2($event, unitIndex, 3, itemTaskIndex)
                           " -->
@@ -557,7 +417,9 @@
           <div class="raceTop allBox">
             <div class="titleTop">
               <div>其他补充</div>
-              <div><el-input></el-input></div>
+              <div>
+                <el-input></el-input>
+              </div>
             </div>
             <div class="editorCss">
               <editor-bar v-model="driQuestion" @change="change"></editor-bar>
@@ -565,49 +427,28 @@
             <div>
               <div class="basic_box">
                 <div>
-                  <div
-                    class="add_chapters_box"
-                    v-if="chapterData && chapterData.length == 0"
-                    style="height: 185px"
-                  ></div>
-                  <div
-                    v-else
-                    class="add_chapters_box"
-                    style="display: flex; flex-direction: column"
-                  >
-                    <div
-                      class="chapter_upload"
-                      v-for="(item1, index1) in chapterData"
-                      :key="item1.id"
-                      @click="
-                        getChapterData(
-                          $event,
-                          unitIndex,
-                          index,
-                          index1,
-                          item1.type
-                        )
-                      "
-                    >
+                  <div class="add_chapters_box" v-if="chapterData && chapterData.length == 0" style="height: 185px">
+                  </div>
+                  <div v-else class="add_chapters_box" style="display: flex; flex-direction: column">
+                    <div class="chapter_upload" v-for="(item1, index1) in chapterData" :key="item1.id" @click="
+                      getChapterData(
+                        $event,
+                        unitIndex,
+                        index,
+                        index1,
+                        item1.type
+                      )
+                    ">
                       <div class="chapter_upload_t"></div>
                       <div class="chapter_upload_o">
                         <div class="chapter_upload_l">
-                          <div
-                            v-if="item1.type == 2"
-                            class="chapter_upload_l_i1"
-                          ></div>
-                          <div
-                            v-if="
-                              item1.type == 3 ||
-                              item1.type == 6 ||
-                              item1.type == 7
-                            "
-                            class="chapter_upload_l_i5"
-                          ></div>
-                          <div
-                            v-if="item1.type == 8"
-                            class="chapter_upload_l_i8"
-                          ></div>
+                          <div v-if="item1.type == 2" class="chapter_upload_l_i1"></div>
+                          <div v-if="
+                            item1.type == 3 ||
+                            item1.type == 6 ||
+                            item1.type == 7
+                          " class="chapter_upload_l_i5"></div>
+                          <div v-if="item1.type == 8" class="chapter_upload_l_i8"></div>
                         </div>
                         <div class="chapter_upload_ic">
                           <div class="chapter_upload_ic_l"></div>
@@ -625,15 +466,11 @@
                           </div>
                         </div>
                         <div class="chapter_upload_n">
-                          <input
-                            class="first"
-                            v-if="
-                              item1.type == 2 ||
-                              item1.type == 3 ||
-                              item1.type == 7
-                            "
-                            :placeholder="item1.name"
-                          />
+                          <input class="first" v-if="
+                            item1.type == 2 ||
+                            item1.type == 3 ||
+                            item1.type == 7
+                          " :placeholder="item1.name" />
                           <!-- @change="
                               updataVideoT(
                                 $event,
@@ -642,19 +479,9 @@
                                 index1
                               )
                             " -->
-                          <input
-                            class="first"
-                            :placeholder="item1.name"
-                            v-if="item1.type == 6"
-                            readonly="true"
-                          />
+                          <input class="first" :placeholder="item1.name" v-if="item1.type == 6" readonly="true" />
                           <!-- @click="selectAttText(itemTaskIndex, index1)" -->
-                          <input
-                            class="first"
-                            :placeholder="item1.name"
-                            v-if="item1.type == 8"
-                            readonly="true"
-                          />
+                          <input class="first" :placeholder="item1.name" v-if="item1.type == 8" readonly="true" />
                           <!-- @click="selectLine(itemTaskIndex, index1)" -->
                           <div class="chapter_upload_ud">
                             <div class="chapter_upload_up"></div>
@@ -670,11 +497,9 @@
                 <div class="add_info_box">
                   <button class="info_btn" @click="addImg($event)">
                     添加教学附件
-                    <input
-                      type="file"
+                    <input type="file"
                       accept="application/pdf, application/.ppt, .ppt, .pptx, .xlsx, .xls, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document"
-                      style="display: none"
-                    />
+                      style="display: none" />
                     <!-- @change="
                             beforeUpload2($event, unitIndex, 3, itemTaskIndex)
                           " -->
@@ -715,11 +540,22 @@ export default {
       }
     },
   },
-  created() {},
+  created() { },
 };
 </script>
 
 <style scoped>
+.pb_content{
+  width: 100%;
+  height: 100%;
+}
+.race_content_body {
+  width: 100%;
+  position: relative;
+  margin: 0;
+  height: 100%;
+}
+
 .raceBox {
   width: 100%;
   height: 100%;
@@ -728,6 +564,7 @@ export default {
   flex-wrap: nowrap;
   align-items: flex-start;
 }
+
 .stepBg {
   margin: 0 25px 0 0;
   width: 20%;
@@ -737,11 +574,14 @@ export default {
   align-items: flex-start;
   flex-wrap: nowrap;
   background: #fff;
-  min-height: 800px;
+  /* min-height: 800px; */
   height: 100%;
   border: 1px solid #c2c2c2;
   border-radius: 15px;
+  overflow: auto;
+  min-width: 260px;
 }
+
 .steps {
   display: flex;
   flex-direction: row;
@@ -749,6 +589,7 @@ export default {
   margin: 35px 20px 20px 20px;
   position: relative;
 }
+
 .stepLeft,
 .isSteps {
   width: 30px;
@@ -759,11 +600,13 @@ export default {
   border: 2px solid #eee;
   color: #c0c0c0;
 }
+
 .isSteps {
   background: #1990ff;
   color: #fff;
   border: none;
 }
+
 .stepRightNav {
   display: flex;
   flex-direction: column;
@@ -772,6 +615,7 @@ export default {
   align-items: flex-start;
   margin-left: 10px;
 }
+
 .line,
 .isLine {
   position: absolute;
@@ -781,9 +625,11 @@ export default {
   top: 38px;
   left: 15px;
 }
+
 .isLine {
   border-left: 1px solid #1d92ff !important;
 }
+
 .right {
   width: calc(100% - 20%);
   background: rgb(255, 255, 255);
@@ -792,20 +638,25 @@ export default {
   height: 100%;
   border: 1px solid #c2c2c2;
   border-radius: 15px;
-  max-height: 800px;
+  /* max-height: 800px; */
+  min-width: calc(100% - 260px);
 }
+
 .allBox {
   padding: 25px;
 }
-.allBox > div:nth-child(1) {
+
+.allBox>div:nth-child(1) {
   color: #0f40f5;
   font-size: 18px;
   font-weight: bold;
 }
-.raceTop > div:nth-child(2) {
+
+.raceTop>div:nth-child(2) {
   width: 80%;
   margin-top: 10px;
 }
+
 .titleTop {
   display: flex;
   flex-direction: row;
@@ -813,19 +664,23 @@ export default {
   align-items: center;
   width: 100%;
 }
-.titleTop > div:nth-child(2) {
+
+.titleTop>div:nth-child(2) {
   width: 82%;
   margin-left: 20px;
 }
+
 .editorCss {
   width: 90% !important;
 }
+
 .basic_box {
   position: relative;
   margin: 0;
   min-height: 0;
   width: 90%;
 }
+
 .add_info_box {
   margin: 20px 0;
 }
@@ -848,6 +703,7 @@ export default {
   overflow-y: auto;
   overflow-x: hidden;
 }
+
 .chapter_upload {
   height: 50px;
   margin-top: 12px;
@@ -978,9 +834,11 @@ export default {
   background-size: 100% 100%;
   cursor: pointer;
 }
+
 .chapter_upload_l {
   padding: 1px 0 0 10px;
 }
+
 .first {
   border: none;
   outline: none;
@@ -992,6 +850,7 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
 .info_btn {
   color: #fff;
   background-color: #0f7eff;
@@ -1006,6 +865,7 @@ export default {
   border: none;
   cursor: pointer;
 }
+
 .info_btn:hover {
   background-color: #4f7cd5 !important;
 }

src/components/pages/race/eventCenter.vue

@@ -1,13 +1,120 @@
 <template>
-  
+  <div style="height: 100%; width: 100%">
+    <div class="center_head">
+      <el-carousel
+        trigger="click"
+        style="width: 100%; height: 100%"
+        arrow="never"
+      >
+        <el-carousel-item v-for="item in bannerList" :key="item.id">
+          <img class="imgS" :src="item" alt="" />
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+    <div class="center_nav">
+      <span @click="steps = 1" :class="{ active: steps == 1 }">赛事信息</span>
+      <span @click="steps = 2" :class="{ active: steps == 2 }">我的案例</span>
+      <span @click="steps = 3" :class="{ active: steps == 3 }">项目进度</span>
+    </div>
+    <div class="center_body">
+      <EventMessage v-if="steps == 1"></EventMessage>
+      <MyAnli v-if="steps == 2"></MyAnli>
+      <ProjectJd v-if="steps == 3"></ProjectJd>
+    </div>
+    <div class="center_btn">
+      <el-button
+        type="primary"
+        @click="goTo('/addRace?userid=' + userid + '&oid=' + oid)"
+        >案例设计</el-button
+      >
+    </div>
+  </div>
 </template>
 
 <script>
+import EventMessage from "./eventCenter/eventMessage.vue";
+import MyAnli from "./eventCenter/myAnli.vue";
+import ProjectJd from "./eventCenter/projectJd.vue";
 export default {
+  components: {
+    EventMessage,
+    MyAnli,
+    ProjectJd,
+  },
+  data() {
+    return {
+      steps: 1,
+      userid: this.$route.query.userid,
+      oid: this.$route.query.oid,
+      bannerList: [
+        "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_202209141615451663143406745.png",
+      ],
+    };
+  },
+  methods: {
+    goTo(path) {
+      this.$router.push(path);
+    },
+  },
+};
+</script>
 
+<style scoped>
+.center_head {
+  height: 240px;
+  width: 100%;
 }
-</script>
 
-<style>
+.center_head >>> .el-carousel__container {
+  height: 100%;
+}
+.center_head >>> .el-carousel__indicator--horizontal {
+  display: none;
+}
 
+.center_head .imgS {
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  object-fit: cover;
+}
+
+.center_nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin: 10px 0;
+}
+
+.center_nav span {
+  box-sizing: border-box;
+  padding: 8px 5px;
+  cursor: pointer;
+  color: #444444;
+}
+
+.center_nav span + span {
+  margin-left: 10px;
+}
+
+.center_nav .active {
+  color: #001fff;
+  border-bottom: 2px solid #001fff;
+}
+
+.center_body {
+  display: flex;
+  width: 90%;
+  justify-content: center;
+  margin: 0 auto;
+  height: calc(100% - 360px);
+}
+
+.center_btn {
+  width: 90%;
+  margin: 10px auto 0;
+  display: flex;
+  justify-content: center;
+}
 </style>

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

@@ -1,13 +1,14 @@
 <template>
-  
+  <div class="center_content">赛事信息</div>
 </template>
 
 <script>
-export default {
-
-}
+export default {};
 </script>
 
-<style>
-
+<style scoped>
+.center_content {
+  width: 100%;
+  height: 100%;
+}
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  
+    <div class="center_content">我的案例</div>
 </template>
 
 <script>
@@ -8,6 +8,9 @@ export default {
 }
 </script>
 
-<style>
-
+<style scoped>
+.center_content {
+  width: 100%;
+  height: 100%;
+}
 </style>

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

@@ -1,13 +1,14 @@
 <template>
-  
+  <div class="center_content">项目进度</div>
 </template>
 
 <script>
-export default {
-
-}
+export default {};
 </script>
 
-<style>
-
+<style scoped>
+.center_content {
+  width: 100%;
+  height: 100%;
+}
 </style>