新增赛事项目

src/App.vue

@@ -88,6 +88,7 @@ export default {
         "/banner",
         "eventCenter",
         "addRace",
+        "anliDetail",
         // "/course/addCourse",
         // "/ask",
         // "/ask/askList",

src/components/pages/race/addRace.vue

@@ -50,7 +50,7 @@
       <el-button type="primary" @click="nextSteps" v-if="steps != 4"
         >下一步</el-button
       >
-      <el-button type="primary" @click="addRace" v-if="steps == 4"
+      <el-button type="primary" @click="isAddOrUpRace" v-if="steps == 4"
         >确认上传</el-button
       >
     </div>
@@ -104,6 +104,7 @@ export default {
       steps: 1,
       userid: this.$route.query.userid,
       oid: this.$route.query.oid,
+      aid: this.$route.query.aid ? this.$route.query.aid : "",
       dialogVisible: false,
       raceInfo: {
         title: "",
@@ -169,6 +170,13 @@ export default {
     updateProEff(raceEff) {
       this.raceEffect = raceEff;
     },
+    isAddOrUpRace() {
+      if (this.aid == "") {
+        this.addRace();
+      } else {
+        this.updateRace();
+      }
+    },
     addRace() {
       let params = [
         {
@@ -194,6 +202,53 @@ export default {
           console.error(err);
         });
     },
+    updateRace() {
+      let params = [
+        {
+          id: this.aid,
+          info: JSON.stringify(this.raceInfo),
+          over: JSON.stringify(this.raceOverView),
+          pro: JSON.stringify(this.raceProcess),
+          res: JSON.stringify(this.raceEffect),
+          courseType: JSON.stringify(this.raceInfo.type),
+          uid: this.userid,
+        },
+      ];
+      this.ajax
+        .post(this.$store.state.api + "updateRace", params)
+        .then((res) => {
+          this.$message({
+            message: "修改成功",
+            type: "success",
+          });
+          this.dialogVisible = true;
+        })
+        .catch((err) => {
+          this.$message.error("网络不佳");
+          console.error(err);
+        });
+    },
+    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);
+        });
+    },
+  },
+  created() {
+    this.selectAnLi();
   },
 };
 </script>

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

@@ -71,7 +71,10 @@
                           :key="index"
                         >
                           <span>{{ item.name }}</span>
-                          <el-checkbox-group v-model="raceDetail.type" @change="updateTitle">
+                          <el-checkbox-group
+                            v-model="raceDetail.type"
+                            @change="updateTitle"
+                          >
                             <el-checkbox
                               v-for="item1 in CourseTypeJson[item.id]"
                               :key="item1.id"
@@ -307,7 +310,7 @@
 
 <script>
 export default {
-  props: ["userid", "oid" , "raceInfo"],
+  props: ["userid", "oid", "raceInfo"],
   data() {
     return {
       tableHeight: "500px",
@@ -351,6 +354,15 @@ export default {
       };
     });
   },
+  watch: {
+    raceInfo: {
+      immediate: true,
+      deep: true,
+      handler(newValue, oldValue) {
+        this.getValue();
+      },
+    },
+  },
   methods: {
     tableRowClassName({ row, rowIndex }) {
       if ((rowIndex + 1) % 2 === 0) {
@@ -517,15 +529,18 @@ export default {
           console.error(err);
         });
     },
+    getValue() {
+      this.raceDetail.title = this.raceInfo.title;
+      this.raceDetail.type = this.raceInfo.type;
+      this.raceDetail.cover = this.raceInfo.cover;
+      this.raceDetail.tableData = this.raceInfo.tableData;
+      this.raceDetail.courseText = this.raceInfo.courseText;
+      this.imgChange1(null, null, 1, null);
+      this.$forceUpdate();
+    },
   },
   created() {
-    this.raceDetail.title = this.raceInfo.title;
-    this.raceDetail.type = this.raceInfo.type;
-    this.raceDetail.cover = this.raceInfo.cover;
-    this.raceDetail.tableData = this.raceInfo.tableData;
-    this.raceDetail.courseText = this.raceInfo.courseText;
-    this.imgChange1(null, null, 1, null);
-    this.$forceUpdate();
+    this.getValue();
     this.selectType();
   },
 };

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

@@ -0,0 +1,829 @@
+<template>
+  <div class="center_content">
+    <div class="detaBox">
+      <div class="anliMiddle">
+        <div class="anliBox">
+          <div class="anliImg">
+            <img
+              :src="
+                anliBox[0] &&
+                JSON.parse(anliBox[0].info) &&
+                JSON.parse(anliBox[0].info).cover
+                  ? JSON.parse(anliBox[0].info).cover[0].url
+                  : noBanner
+              "
+              alt=""
+            />
+          </div>
+          <div class="anliNav">
+            <div>
+              项目名称：{{
+                anliBox[0] && JSON.parse(anliBox[0].info)
+                  ? JSON.parse(anliBox[0].info).title
+                  : ""
+              }}
+            </div>
+            <div>创建人：{{ anliBox[0] ? anliBox[0].username : "" }}</div>
+            <div>
+              <div>单位：{{ anliBox[0] ? anliBox[0].schoolName : "" }}</div>
+              <div>
+                学科：{{
+                  anliBox[0] && anliBox[0].typename
+                    ? anliBox[0].typename
+                    : "暂无分类"
+                }}
+              </div>
+            </div>
+            <div class="people">
+              <div class="man">
+                <img src="../../../../assets/people.png" alt />
+              </div>
+              <div class="person">0人</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="navBox">
+        <div class="navTop">
+          <div class="navImg">
+            <img src="../../../../assets/icon/anliDetail/proOver.png" alt="" />
+          </div>
+          <div>项目概况</div>
+        </div>
+        <div class="navTop">
+          <div class="navImg">
+            <img src="../../../../assets/icon/anliDetail/learnObj.png" alt="" />
+          </div>
+          <div>学习目标</div>
+        </div>
+        <div class="navTop">
+          <div class="navImg">
+            <img src="../../../../assets/icon/anliDetail/process.png" alt="" />
+          </div>
+          <div>项目实施过程</div>
+        </div>
+        <div class="navTop">
+          <div class="navImg">
+            <img src="../../../../assets/icon/anliDetail/proEva.png" alt="" />
+          </div>
+          <div>项目学习成果及评价</div>
+        </div>
+        <div class="navTop">
+          <div class="navImg">
+            <img src="../../../../assets/icon/anliDetail/proEff.png" alt="" />
+          </div>
+          <div>项目成效与反思</div>
+        </div>
+      </div>
+
+      <div class="messageBox" v-if="anliBox[0]">
+        <div class="whiteBg">
+          <div class="navBg">项目概况</div>
+          <div class="detaBrief">
+            {{
+              anliBox[0] && JSON.parse(anliBox[0].info)
+                ? JSON.parse(anliBox[0].info).courseText
+                : ""
+            }}
+          </div>
+        </div>
+        <div>
+          <div class="proOverCss">
+            <div class="whiteBg whiteLeft">
+              <div class="navBg">驱动问题</div>
+              <div
+                class="proOverNav"
+                v-html="
+                  anliBox[0] && JSON.parse(anliBox[0].overview)
+                    ? JSON.parse(anliBox[0].overview).driQuestion.brief
+                    : ''
+                "
+              ></div>
+            </div>
+            <div class="whiteRight">
+              <div class="fileTop">
+                <div class="fileListImg">
+                  <img
+                    src="../../../../assets/icon/anliDetail/fileList.png"
+                    alt=""
+                  />
+                </div>
+                <div>佐证材料</div>
+              </div>
+              <div class="fileBox">
+                <div class="fileList">
+                  <div
+                    class="file"
+                    v-for="(f, fIndex) in JSON.parse(anliBox[0].overview)
+                      .driQuestion.data"
+                    :key="fIndex"
+                  >
+                    <div>1、{{ f.type == 1 ? "文档" : "视频" }}</div>
+                    <div>{{ f.name }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="proOverCss">
+            <div class="whiteBg whiteLeft">
+              <div class="navBg">目标问题</div>
+              <div
+                class="proOverNav"
+                v-html="
+                  JSON.parse(anliBox[0].overview)
+                    ? JSON.parse(anliBox[0].overview).tarDesign.brief
+                    : ''
+                "
+              ></div>
+            </div>
+            <div class="whiteRight">
+              <div class="fileTop">
+                <div class="fileListImg">
+                  <img
+                    src="../../../../assets/icon/anliDetail/fileList.png"
+                    alt=""
+                  />
+                </div>
+                <div>佐证材料</div>
+              </div>
+              <div class="fileBox">
+                <div class="fileList">
+                  <div
+                    class="file"
+                    v-for="(f, fIndex) in JSON.parse(anliBox[0].overview)
+                      .tarDesign.data"
+                    :key="fIndex"
+                  >
+                    <div>1、{{ f.type == 1 ? "文档" : "视频" }}</div>
+                    <div>{{ f.name }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="proOverCss">
+            <div class="whiteBg whiteLeft">
+              <div class="navBg">活动问题</div>
+              <div
+                class="proOverNav"
+                v-html="
+                  JSON.parse(anliBox[0].overview)
+                    ? JSON.parse(anliBox[0].overview).actiDesign.brief
+                    : ''
+                "
+              ></div>
+            </div>
+            <div class="whiteRight">
+              <div class="fileTop">
+                <div class="fileListImg">
+                  <img
+                    src="../../../../assets/icon/anliDetail/fileList.png"
+                    alt=""
+                  />
+                </div>
+                <div>佐证材料</div>
+              </div>
+              <div class="fileBox">
+                <div class="fileList">
+                  <div
+                    class="file"
+                    v-for="(f, fIndex) in JSON.parse(anliBox[0].overview)
+                      .actiDesign.data"
+                    :key="fIndex"
+                  >
+                    <div>1、{{ f.type == 1 ? "文档" : "视频" }}</div>
+                    <div>{{ f.name }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="proOverCss">
+            <div class="whiteBg whiteLeft">
+              <div class="navBg">评价问题</div>
+              <div
+                class="proOverNav"
+                v-html="
+                  JSON.parse(anliBox[0].overview)
+                    ? JSON.parse(anliBox[0].overview).evaDesign.brief
+                    : ''
+                "
+              ></div>
+            </div>
+            <div class="whiteRight">
+              <div class="fileTop">
+                <div class="fileListImg">
+                  <img
+                    src="../../../../assets/icon/anliDetail/fileList.png"
+                    alt=""
+                  />
+                </div>
+                <div>佐证材料</div>
+              </div>
+              <div class="fileBox">
+                <div class="fileList">
+                  <div
+                    class="file"
+                    v-for="(f, fIndex) in JSON.parse(anliBox[0].overview)
+                      .evaDesign.data"
+                    :key="fIndex"
+                  >
+                    <div>1、{{ f.type == 1 ? "文档" : "视频" }}</div>
+                    <div>{{ f.name }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="proOverCss">
+            <div class="whiteBg whiteLeft">
+              <div class="navBg">其他问题</div>
+              <div
+                class="proOverNav"
+                v-html="
+                  JSON.parse(anliBox[0].overview)
+                    ? JSON.parse(anliBox[0].overview).other.brief
+                    : ''
+                "
+              ></div>
+            </div>
+            <div class="whiteRight">
+              <div class="fileTop">
+                <div class="fileListImg">
+                  <img
+                    src="../../../../assets/icon/anliDetail/fileList.png"
+                    alt=""
+                  />
+                </div>
+                <div>佐证材料</div>
+              </div>
+              <div class="fileBox">
+                <div class="fileList">
+                  <div
+                    class="file"
+                    v-for="(f, fIndex) in JSON.parse(anliBox[0].overview).other
+                      .data"
+                    :key="fIndex"
+                  >
+                    <div>1、{{ f.type == 1 ? "文档" : "视频" }}</div>
+                    <div>{{ f.name }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div
+            v-for="(hd, hdIndex) in JSON.parse(anliBox[0].process).actBox"
+            :key="hdIndex"
+          >
+            <div class="proOverCss">
+              <div class="whiteBg whiteLeft" style="padding: 0">
+                <div class="hdTop">
+                  <div class="longNavBg">
+                    <div></div>
+                    <div>
+                      活动{{ hdIndex + 1 }}:{{ hd.actName }}-活动实施:{{
+                        hd.driQuestion.title
+                      }}
+                    </div>
+                  </div>
+                  <div class="bottomBg"></div>
+                </div>
+                <!-- <div class="navBg">活动{{ hdIndex + 1 }}:{{ hd.actName }} </div> -->
+                <div
+                  class="proOverNav"
+                  v-html="hd.driQuestion ? hd.driQuestion.brief : ''"
+                  style="padding: 20px 0 20px 40px"
+                ></div>
+              </div>
+              <div class="whiteRight">
+                <div class="fileTop">
+                  <div class="fileListImg">
+                    <img
+                      src="../../../../assets/icon/anliDetail/fileList.png"
+                      alt=""
+                    />
+                  </div>
+                  <div>佐证材料</div>
+                </div>
+                <div class="fileBox">
+                  <div class="fileList">
+                    <div
+                      class="file"
+                      v-for="(f, fIndex) in hd.driQuestion.data"
+                      :key="fIndex"
+                    >
+                      <div>1、{{ f.type == 1 ? "文档" : "视频" }}</div>
+                      <div>{{ f.name }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="proOverCss">
+              <div class="whiteBg whiteLeft" style="padding: 0">
+                <div class="hdTop">
+                  <div class="longNavBg">
+                    <div></div>
+                    <div>
+                      活动{{ hdIndex + 1 }}:{{ hd.actName }}-活动工具:{{
+                        hd.tarDesign.title
+                      }}
+                    </div>
+                  </div>
+                  <div class="bottomBg"></div>
+                </div>
+                <!-- <div class="navBg">活动{{ hdIndex + 1 }}:{{ hd.actName }} </div> -->
+                <div
+                  class="proOverNav"
+                  v-html="hd.tarDesign ? hd.tarDesign.brief : ''"
+                  style="padding: 20px 0 20px 40px"
+                ></div>
+              </div>
+              <div class="whiteRight">
+                <div class="fileTop">
+                  <div class="fileListImg">
+                    <img
+                      src="../../../../assets/icon/anliDetail/fileList.png"
+                      alt=""
+                    />
+                  </div>
+                  <div>佐证材料</div>
+                </div>
+                <div class="fileBox">
+                  <div class="fileList">
+                    <div
+                      class="file"
+                      v-for="(f, fIndex) in hd.tarDesign.data"
+                      :key="fIndex"
+                    >
+                      <div>1、{{ f.type == 1 ? "文档" : "视频" }}</div>
+                      <div>{{ f.name }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="proOverCss">
+              <div class="whiteBg whiteLeft" style="padding: 0">
+                <div class="hdTop">
+                  <div class="longNavBg">
+                    <div></div>
+                    <div>
+                      活动{{ hdIndex + 1 }}:{{ hd.actName }}-活动成果:{{
+                        hd.actiDesign.title
+                      }}
+                    </div>
+                  </div>
+                  <div class="bottomBg"></div>
+                </div>
+                <!-- <div class="navBg">活动{{ hdIndex + 1 }}:{{ hd.actName }} </div> -->
+                <div
+                  class="proOverNav"
+                  v-html="hd.actiDesign ? hd.actiDesign.brief : ''"
+                  style="padding: 20px 0 20px 40px"
+                ></div>
+              </div>
+              <div class="whiteRight">
+                <div class="fileTop">
+                  <div class="fileListImg">
+                    <img
+                      src="../../../../assets/icon/anliDetail/fileList.png"
+                      alt=""
+                    />
+                  </div>
+                  <div>佐证材料</div>
+                </div>
+                <div class="fileBox">
+                  <div class="fileList">
+                    <div
+                      class="file"
+                      v-for="(f, fIndex) in hd.actiDesign.data"
+                      :key="fIndex"
+                    >
+                      <div>1、{{ f.type == 1 ? "文档" : "视频" }}</div>
+                      <div>{{ f.name }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="proOverCss">
+              <div class="whiteBg whiteLeft" style="padding: 0">
+                <div class="hdTop">
+                  <div class="longNavBg">
+                    <div></div>
+                    <div>
+                      活动{{ hdIndex + 1 }}:{{ hd.actName }}-活动评价:{{
+                        hd.evaDesign.title
+                      }}
+                    </div>
+                  </div>
+                  <div class="bottomBg"></div>
+                </div>
+                <!-- <div class="navBg">活动{{ hdIndex + 1 }}:{{ hd.actName }} </div> -->
+                <div
+                  class="proOverNav"
+                  v-html="hd.evaDesign ? hd.evaDesign.brief : ''"
+                  style="padding: 20px 0 20px 40px"
+                ></div>
+              </div>
+              <div class="whiteRight">
+                <div class="fileTop">
+                  <div class="fileListImg">
+                    <img
+                      src="../../../../assets/icon/anliDetail/fileList.png"
+                      alt=""
+                    />
+                  </div>
+                  <div>佐证材料</div>
+                </div>
+                <div class="fileBox">
+                  <div class="fileList">
+                    <div
+                      class="file"
+                      v-for="(f, fIndex) in hd.evaDesign.data"
+                      :key="fIndex"
+                    >
+                      <div>1、{{ f.type == 1 ? "文档" : "视频" }}</div>
+                      <div>{{ f.name }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="proOverCss" style="margin: 0">
+            <div class="whiteBg" style="margin: 0 0 10px 0">
+              <div class="navBg">活动成效</div>
+              <div
+                class="proOverNav"
+                v-html="
+                  JSON.parse(anliBox[0].results)
+                    ? JSON.parse(anliBox[0].results).proEffText
+                    : ''
+                "
+                style="min-height: 100px; max-height: 100px"
+              ></div>
+            </div>
+          </div>
+          <div class="proOverCss">
+            <div class="whiteBg" style="margin: 0 0 20px 0">
+              <div class="navBg">活动反思</div>
+              <div
+                class="proOverNav"
+                v-html="
+                  JSON.parse(anliBox[0].results)
+                    ? JSON.parse(anliBox[0].results).proRefText
+                    : ''
+                "
+                style="min-height: 100px; max-height: 100px"
+              ></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fixBottom">
+        <div class="returnAnLi" style="width: 100px">前往评分</div>
+        <div
+          class="returnAnLi"
+          @click="goTo('/eventCenter?userid=' + userid + '&oid=' + oid)"
+        >
+          返回
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      userid: this.$route.query.userid,
+      oid: this.$route.query.oid,
+      aid: this.$route.query.aid,
+      anliBox: [],
+      noBanner: require("../../../../assets/noBanner.jpg"),
+    };
+  },
+  methods: {
+    goTo(path) {
+      this.$router.push(path);
+    },
+    selectAnLi() {
+      let params = {
+        id: this.aid,
+      };
+      this.ajax
+        .get(this.$store.state.api + "selectRaceDetail", params)
+        .then((res) => {
+          this.anliBox = res.data[0];
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
+  },
+  created() {
+    this.selectAnLi();
+  },
+};
+</script>
+
+<style scoped>
+html,
+body {
+  background: #e1f1ff !important;
+}
+.center_content {
+  width: 100%;
+  height: 100%;
+  background: #e1f1ff;
+}
+.detaBox {
+  padding: 10px 0 0 0;
+  background: #e1f1ff;
+  position: relative;
+  padding-bottom: 50px;
+}
+.anliMiddle {
+  margin: 0 0 15px 0;
+  width: 100%;
+  background: #fff;
+}
+.anliImg {
+  width: 200px;
+}
+.anliImg > img {
+  width: 100%;
+  height: 100%;
+}
+.people {
+  display: flex;
+}
+
+.person {
+  margin-left: 10px;
+  line-height: 18px;
+}
+.man {
+  width: 16px;
+  height: 16px;
+}
+
+.man > img {
+  width: 100%;
+  height: 100%;
+}
+.anliBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  padding: 25px 0 25px 60px;
+  position: relative;
+}
+.anliNav {
+  padding-left: 30px;
+}
+.anliNav > div:nth-child(1) {
+  font-size: 20px;
+  font-weight: bold;
+}
+.anliNav > div:nth-child(2) {
+  margin: 10px 0 10px 0;
+}
+.anliNav > div:nth-child(3) {
+  display: flex;
+  margin-bottom: 10px;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.anliNav > div:nth-child(3) > div:nth-child(2) {
+  color: #aba8a8;
+  margin-left: 30px;
+}
+.navBox {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  width: 70%;
+  margin: 0 auto;
+  height: 70px;
+  border-radius: 10px;
+}
+.navTop {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin: 0 20px;
+}
+.navImg {
+  width: 35px;
+}
+.navImg > img {
+  width: 100%;
+  height: 100%;
+}
+.messageBox {
+  width: 70%;
+  margin: 0 auto;
+}
+.whiteBg {
+  width: 100%;
+  background: #fff;
+  margin: 20px 0;
+  padding-top: 15px;
+  border-radius: 10px;
+}
+.whiteLeft {
+  width: 60%;
+  margin: 0;
+  min-height: 400px;
+  max-height: 400px;
+}
+.navBg {
+  width: 130px;
+  height: 50px;
+  background-image: url("../../../../assets/icon/anliDetail/navBg.png");
+  background-size: 100% 100%;
+  color: #fff;
+  text-align: center;
+  line-height: 47px;
+  margin: 0 0 5px 20px;
+  text-indent: 20px;
+}
+.detaBrief {
+  padding: 0 0 20px 40px;
+  text-indent: 25px;
+  width: 90%;
+  height: 100px;
+  overflow: auto;
+  word-break: break-word;
+}
+.proOverCss {
+  width: 100%;
+  display: flex;
+  margin: 20px 0;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+}
+.whiteRight {
+  width: 35%;
+  margin-left: 5%;
+}
+.proOverNav {
+  padding: 0 0 20px 40px;
+  max-height: 320px;
+  min-height: 320px;
+  overflow: auto;
+  word-break: break-word;
+}
+.fileTop {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  background: #398fc0;
+  color: #fff;
+  height: 50px;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  padding: 0 0 0 19px;
+  font-size: 15px;
+}
+.fileListImg {
+  width: 25px;
+}
+.fileListImg > img {
+  width: 100%;
+  height: 100%;
+}
+.fileBox {
+  height: calc(415px - 50px);
+  background: #fff;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+.fileList {
+  width: 98%;
+  background: #f6f9fe;
+  margin: 0 auto;
+  border-radius: 10px;
+  height: 340px;
+  overflow: auto;
+}
+.file {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  padding: 10px;
+}
+.file > div:nth-child(1) {
+  background: #286a8d;
+  color: #fff;
+  width: 95px;
+  height: 45px;
+  text-align: center;
+  line-height: 45px;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+}
+.file > div:nth-child(2) {
+  background: #fff;
+  height: 45px;
+  width: 335px;
+  line-height: 45px;
+  padding-left: 10px;
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.hdTop {
+  position: relative;
+  width: 100%;
+  height: 60px;
+}
+.longNavBg {
+  width: calc(100% - 30px);
+  background-image: linear-gradient(90deg, #52c6ff, #18adff);
+  color: #fff;
+  height: 60px;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  font-size: 18px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  padding-left: 30px;
+  position: absolute;
+  z-index: 999;
+}
+.longNavBg > div:nth-child(1) {
+  width: 8px;
+  height: 8px;
+  background: #ffeb24;
+  border-radius: 50%;
+  margin-right: 15px;
+}
+.longNavBg > div:nth-child(2) {
+  width: 95%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+}
+.bottomBg {
+  width: 98%;
+  height: 40px;
+  background: #d6f0ff;
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  z-index: 9;
+  transform: translate(-50%);
+  border-radius: 10px;
+}
+.returnAnLi {
+  background: #205cc6;
+  width: 70px;
+  height: 30px;
+  color: #fff;
+  text-align: center;
+  line-height: 32px;
+  margin-right: 20px;
+  cursor: pointer;
+  border-radius: 5px;
+  font-size: 14px;
+}
+.fixBottom {
+  position: fixed;
+  width: 100%;
+  height: 50px;
+  background: #fff;
+  bottom: 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-end;
+}
+</style>

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

@@ -32,7 +32,7 @@
                 <div class="man">
                   <img src="../../../../assets/people.png" alt />
                 </div>
-                <div class="person">12人</div>
+                <div class="person">0人</div>
               </div>
             </div>
           </div>
@@ -46,8 +46,32 @@
             <div class="rightButton" @click="updateState(an.id)">提交</div>
             <div class="rightButton">导出</div>
             <div class="rightButton">开始教学</div>
-            <div class="rightButton">编辑</div>
-            <div class="rightButton" style="background: #225ac7">查看详情</div>
+            <div
+              class="rightButton"
+              @click="
+                goTo(
+                  '/addRace?userid=' + userid + '&oid=' + oid + '&aid=' + an.id
+                )
+              "
+            >
+              编辑
+            </div>
+            <div
+              class="rightButton"
+              style="background: #225ac7"
+              @click="
+                goTo(
+                  '/anliDetail?userid=' +
+                    userid +
+                    '&oid=' +
+                    oid +
+                    '&aid=' +
+                    an.id
+                )
+              "
+            >
+              查看详情
+            </div>
           </div>
         </div>
       </div>
@@ -65,6 +89,9 @@ export default {
     };
   },
   methods: {
+    goTo(path) {
+      this.$router.push(path);
+    },
     selectAnLi() {
       let params = {
         uid: this.userid,
@@ -103,6 +130,15 @@ export default {
 </script>
 
 <style scoped>
+@media screen and (max-width: 1280px) {
+  .myAnliBox {
+    height: 430px !important;
+  }
+}
+.myAnliBox {
+  height: 500px;
+  overflow: auto;
+}
 .center_content {
   width: 100%;
   height: 100%;

src/router/index.js

@@ -33,6 +33,7 @@ import banner from '@/components/pages/banner'
 import CaseDesign from '@/components/pages/CaseDesign'
 import eventCenter from '@/components/pages/race/eventCenter'
 import addRace from '@/components/pages/race/addRace'
+import anliDetail from '@/components/pages/race/eventCenter/anliDetail'
 
 Vue.use(Router).use(ElementUI)
 
@@ -282,6 +283,13 @@ export default new Router({
             meta: {
                 requireAuth: '' // 不需要鉴权
             }
+        }, {
+            path: '/anliDetail',
+            name: 'anliDetail',
+            component: anliDetail,
+            meta: {
+                requireAuth: '' // 不需要鉴权
+            }
         },
     ]
 })