新增导航跳转

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

@@ -42,13 +42,13 @@
         </div>
       </div>
       <div class="navBox">
-        <div class="navTop">
+        <div class="navTop" @click="jump('first')">
           <div class="navImg" style="width: 27px">
             <img src="../../../../assets/icon/anliDetail/proOver.png" alt="" />
           </div>
           <div>项目基础信息</div>
         </div>
-        <div class="navTop">
+        <div class="navTop" @click="jump('second')">
           <div class="navImg">
             <img
               src="../../../../assets/icon/anliDetail/proOverTwo.png"
@@ -57,25 +57,25 @@
           </div>
           <div>项目概况</div>
         </div>
-        <div class="navTop">
+        <div class="navTop" @click="jump('third')">
           <div class="navImg">
             <img src="../../../../assets/icon/anliDetail/learnObj.png" alt="" />
           </div>
           <div>项目安排</div>
         </div>
-        <div class="navTop">
+        <div class="navTop" @click="jump('fouth')">
           <div class="navImg">
             <img src="../../../../assets/icon/anliDetail/process.png" alt="" />
           </div>
           <div>项目活动过程</div>
         </div>
-        <div class="navTop">
+        <div class="navTop" @click="jump('fivth')">
           <div class="navImg">
             <img src="../../../../assets/icon/anliDetail/proEva.png" alt="" />
           </div>
           <div>项目成果交流与评价</div>
         </div>
-        <div class="navTop">
+        <div class="navTop" @click="jump('sixth')">
           <div class="navImg">
             <img src="../../../../assets/icon/anliDetail/proEff.png" alt="" />
           </div>
@@ -84,7 +84,7 @@
       </div>
 
       <div class="messageBox" v-if="anliBox[0]">
-        <div class="proOverCss">
+        <div class="proOverCss" id="first">
           <div class="whiteBg whiteLeft">
             <div class="navBgTop">
               <div class="navBg">项目概况</div>
@@ -188,7 +188,7 @@
           </div>
         </div>
         <div>
-          <div class="proOverCss">
+          <div class="proOverCss" id="second">
             <div class="whiteBg whiteLeft">
               <div class="navBgTop">
                 <div class="navBg">驱动问题</div>
@@ -523,9 +523,10 @@
             v-for="(jd, jdIndex) in anliBox[0].process.stageBox"
             :key="jdIndex"
             style="margin-top: 30px"
+            id="third"
           >
             <div class="jdTopBox">
-              <div class="jdTopNav">
+              <div class="jdTopNav" style="font-size: 18px">
                 <div class="jdLeftNav">
                   <div class="jdImg">
                     <img
@@ -538,8 +539,8 @@
                     <div>{{ jd.staTitle }}</div>
                   </div>
                 </div>
-                <div class="jdRightNav">
-                  {{ jd.allTime ? jd.allTime : "暂无" }}课时
+                <div class="jdRightNav" v-if="jd.allTime">
+                  {{ jd.allTime }}课时
                 </div>
               </div>
             </div>
@@ -562,8 +563,8 @@
                       <div>{{ hd.actName }}</div>
                     </div>
                   </div>
-                  <div class="jdRightNav">
-                    {{ hd.actTime ? hd.actTime : "暂无" }}课时
+                  <div class="jdRightNav" v-if="hd.actTime">
+                    {{ hd.actTime }}课时
                   </div>
                 </div>
               </div>
@@ -989,6 +990,125 @@
             </div>
           </div>
 
+          <div class="jdTopBox" id="fouth">
+            <div class="jdTopNav" style="font-size: 18px">
+              <div class="jdLeftNav">
+                <div class="jdImg">
+                  <img
+                    src="../../../../assets/icon/anliDetail/jdTitle.png"
+                    alt=""
+                  />
+                </div>
+                <div class="jdLeftTitle">
+                  <div>项目活动过程</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            v-for="(jd, jdIndex) in anliBox[0].process.stageBox"
+            :key="jdIndex"
+          >
+            <div class="proOverCss">
+              <div class="whiteBg whiteLeft">
+                <div class="navBgTop">
+                  <div class="navBg">阶段{{ jdIndex + 1 }}</div>
+                  <el-button v-if="jd.brief != ''" @click="selectNav(jd.brief)"
+                    >查看更多</el-button
+                  >
+                </div>
+                <div
+                  v-if="jd.brief != '' || jd.imgBox.length > 0"
+                  class="imgAndNav"
+                >
+                  <div
+                    class="leftBox"
+                    v-if="jd.imgBox.length > 0 && jd.imgBox[0].type == 3"
+                  >
+                    <div
+                      class="leftImg"
+                      @click="lookFile(jd.imgBox[0].url, jd.imgBox[0].type)"
+                      v-if="jd.imgBox[0].type == 3"
+                    >
+                      <img :src="jd.imgBox[0].url" alt="" />
+                    </div>
+                  </div>
+
+                  <div
+                    :class="jd.imgBox.length > 0 ? 'proOverNav' : 'noImg'"
+                    v-html="jd ? jd.brief : ''"
+                  ></div>
+                </div>
+                <div class="noFile" v-else>
+                  <img
+                    src="../../../../assets/icon/anliDetail/noFile.jpg"
+                    alt=""
+                  />
+                </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" v-if="jd.data.length">
+                    <div
+                      class="file"
+                      v-for="(f, fIndex) in jd.data"
+                      :key="fIndex"
+                    >
+                      <div class="fileCss">
+                        <div>
+                          1.{{
+                            f.type == 1 ? "文档" : f.type == 2 ? "视频" : "图片"
+                          }}
+                        </div>
+                        <div>
+                          <div @click="lookFile(f.url, f.type)">
+                            {{ f.name }}
+                          </div>
+                          <div class="downFile" @click="downloadFile(f.url)">
+                            <img
+                              src="../../../../assets/icon/anliDetail/down.png"
+                              alt=""
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="noFile" v-else>
+                    <img
+                      src="../../../../assets/icon/anliDetail/noFile.jpg"
+                      alt=""
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="jdTopBox" id="fivth">
+            <div class="jdTopNav" style="font-size: 18px">
+              <div class="jdLeftNav">
+                <div class="jdImg">
+                  <img
+                    src="../../../../assets/icon/anliDetail/jdTitle.png"
+                    alt=""
+                  />
+                </div>
+                <div class="jdLeftTitle">
+                  <div>项目成果交流与评价</div>
+                </div>
+              </div>
+            </div>
+          </div>
           <div class="proOverCss">
             <div class="whiteBg whiteLeft">
               <div class="navBgTop">
@@ -1088,6 +1208,21 @@
             </div>
           </div>
 
+          <div class="jdTopBox" id="sixth">
+            <div class="jdTopNav" style="font-size: 18px">
+              <div class="jdLeftNav">
+                <div class="jdImg">
+                  <img
+                    src="../../../../assets/icon/anliDetail/jdTitle.png"
+                    alt=""
+                  />
+                </div>
+                <div class="jdLeftTitle">
+                  <div>项目成效与反思</div>
+                </div>
+              </div>
+            </div>
+          </div>
           <div class="proOverCss">
             <div class="whiteBg whiteLeft">
               <div class="navBgTop">
@@ -1403,10 +1538,12 @@ export default {
           for (var i = 0; i < c.stageBox.length; i++) {
             c.stageBox[i].imgBox = [];
             for (var j = 0; j < c.stageBox[i].data.length; j++) {
-              c.stageBox[i].imgBox.push({
-                url: c.stageBox[i].data[j].url,
-                type: c.stageBox[i].data[j].type,
-              });
+              if (c.stageBox[i].data[j].type == 3) {
+                c.stageBox[i].imgBox.push({
+                  url: c.stageBox[i].data[j].url,
+                  type: c.stageBox[i].data[j].type,
+                });
+              }
             }
             for (var z = 0; z < c.stageBox[i].actBox.length; z++) {
               c.stageBox[i].actBox[z].driQuestion.imgBox = [];
@@ -1549,6 +1686,10 @@ export default {
       };
       x.send();
     },
+    jump(t) {
+      var a = document.getElementById(t);
+      document.documentElement.scrollTop = a.offsetTop;
+    },
   },
   created() {
     this.selectAnLi();
@@ -1680,6 +1821,7 @@ body {
   flex-wrap: nowrap;
   align-items: center;
   margin: 0 20px;
+  cursor: pointer;
 }
 .navImg {
   width: 35px;
@@ -2053,5 +2195,6 @@ body {
 }
 .jdRightNav {
   padding-right: 20px;
+  color: #7e7e7e;
 }
 </style>