新增左侧导航栏

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

@@ -87,9 +87,9 @@
               alt=""
             />
           </div>
-          <div>项目概况</div>
+          <div>平台案例填写</div>
         </div>
-        <div class="navTop" @click="jump('third')">
+        <!-- <div class="navTop" @click="jump('third')">
           <div class="navImg">
             <img src="../../../../assets/icon/anliDetail/learnObj.png" alt="" />
           </div>
@@ -112,7 +112,7 @@
             <img src="../../../../assets/icon/anliDetail/proEff.png" alt="" />
           </div>
           <div>项目成效与反思</div>
-        </div>
+        </div> -->
       </div>
 
       <div
@@ -140,6 +140,39 @@
         <img src="../../../../assets/icon/race/isNoMessage.png" alt />
       </div>
       <div class="messageBox" v-else :class="{ isMessageBox: isNavTop >= 300 }">
+        <div class="leftNav" :class="{ isleftNav: isNavTop >= 300 }">
+          <div class="topNav">导航栏</div>
+          <div class="navLeftBox">
+            <div class="navBTitle">项目概况</div>
+            <div class="navLTitle" @click="jump('second')">
+              <div>1</div>
+              <div>驱动问题</div>
+            </div>
+            <div class="navLTitle" @click="jump('xx')">
+              <div>2</div>
+              <div>学习目标</div>
+            </div>
+            <div class="navLTitle" @click="jump('pj')">
+              <div>3</div>
+              <div>评价设计</div>
+            </div>
+            <div class="navBTitle">项目安排</div>
+            <div
+              class="navLTitle"
+              v-for="(s, si) in anliBox[0].process.stageBox"
+              :key="si"
+              @click="jumpS(si)"
+            >
+              <div>{{ si + 1 }}</div>
+              <div>{{ s.staTitle }}</div>
+            </div>
+            <div class="navBTitle" @click="jump('fouth')">项目活动过程</div>
+            <div class="navBTitle" @click="jump('fivth')">
+              项目成果交流与评价
+            </div>
+            <div class="navBTitle" @click="jump('sixth')">项目成效与反思</div>
+          </div>
+        </div>
         <div
           class="jdTopBox"
           id="first"
@@ -536,6 +569,7 @@
           </div>
           <div
             class="proOverCss"
+            id="xx"
             v-if="
               anliBox[0].overview.tarDesign.brief != '' ||
               anliBox[0].overview.tarDesign.imgBox.length > 0 ||
@@ -707,6 +741,7 @@
           </div>
           <div
             class="proOverCss"
+            id="pj"
             v-if="
               anliBox[0].overview.actiDesign.brief != '' ||
               anliBox[0].overview.actiDesign.imgBox.length > 0 ||
@@ -894,7 +929,7 @@
             :key="jdIndex"
             style="margin: 20px 0 20px 0"
           >
-            <div class="jdTopBox" v-if="jd.staTitle != ''">
+            <div class="jdTopBox" v-if="jd.staTitle != ''" :id="'jd' + jdIndex">
               <div class="jdTopNav">
                 <div class="jdLeftNav">
                   <div
@@ -2778,6 +2813,11 @@ export default {
         b.scrollTop = a.offsetTop + 50;
       }
     },
+    jumpS(i) {
+      var a = document.getElementById("jd" + i);
+      var b = this.$refs["cenBox"];
+      b.scrollTop = a.offsetTop - 70;
+    },
     reTop() {
       var a = this.$refs["cenBox"];
       a.scrollTop = 0;
@@ -2901,10 +2941,10 @@ export default {
     text-overflow: ellipsis;
   } */
   .navBox {
-    width: 95% !important;
+    margin: 0 0 0 28% !important;
   }
   .messageBox {
-    width: 95% !important;
+    margin: 1% 0 0 28% !important;
   }
   /* .proOverNav {
     width: 52% !important;
@@ -2915,6 +2955,21 @@ export default {
   .look_file {
     width: 55% !important;
   }
+  .leftNav {
+    left: 10px !important;
+    top: 60% !important;
+    transform: translateY(-25%) !important;
+  }
+  /* .navLeftBox {
+    height: 400px !important;
+    overflow: auto !important;
+  } */
+  .isNavBox {
+    left: 22% !important;
+  }
+  .isleftNav {
+    top: 35% !important;
+  }
 }
 html,
 body {
@@ -3023,7 +3078,7 @@ body {
   align-items: center;
   justify-content: center;
   background: #fff;
-  width: 75%;
+  width: 60%;
   margin: 0 auto;
   height: 70px;
   border-radius: 10px;
@@ -3042,30 +3097,30 @@ body {
 .isNavBox > div > div:nth-child(2):hover {
   color: #5e5e5e;
 }
-.isMessageBox {
+/* .isMessageBox {
   margin: 11% auto !important;
-}
+} */
 .navBox > div:nth-child(5) > div:nth-child(2) {
   width: 150px;
 }
 .navBox > div:nth-child(6) > div:nth-child(2) {
   width: 120px;
 }
-.navBox > div:nth-child(2) > div:nth-child(2),
+/* .navBox > div:nth-child(2) > div:nth-child(2),
 .navBox > div:nth-child(3) > div:nth-child(2) {
   width: 70px;
-}
+} */
 .navTop {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
-  margin: 0 20px;
+  margin: 0 30px;
   cursor: pointer;
 }
-.navTop > div:nth-child(2) {
+/* .navTop > div:nth-child(2) {
   width: 100px;
-}
+} */
 .navImg {
   width: 35px;
 }
@@ -3074,7 +3129,7 @@ body {
   height: 100%;
 }
 .messageBox {
-  width: 75%;
+  width: 60%;
   margin: 1% auto;
 }
 .whiteBg {
@@ -3627,4 +3682,67 @@ ol {
   flex-wrap: nowrap;
   align-items: center;
 }
+.leftNav {
+  position: fixed;
+  left: 5%;
+  top: 70%;
+  transform: translateY(-60%);
+  z-index: 999;
+}
+.topNav {
+  background: #316b8c;
+  color: #fff;
+  width: 250px;
+  height: 40px;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  line-height: 40px;
+  padding-left: 10px;
+}
+.navLeftBox {
+  width: 100%;
+  font-size: 1em;
+  margin: 0px;
+  color: rgb(39, 48, 59);
+  background-color: rgb(118, 184, 222);
+  display: grid;
+  gap: 10px;
+  padding: 10px;
+  border-radius: 5px;
+  box-sizing: border-box;
+}
+.navBTitle {
+  background: #fff;
+  font-size: 18px;
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  border-radius: 5px;
+  font-weight: bold;
+  text-indent: 15px;
+  cursor: pointer;
+}
+.navLTitle {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  background: #fff;
+  width: 100%;
+  height: 40px;
+  line-height: 40px;
+  border-radius: 5px;
+  font-weight: bold;
+  cursor: pointer;
+}
+.navLTitle > div:nth-child(1) {
+  width: 50px;
+  text-align: center;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+  background-color: rgb(225, 237, 247);
+}
+.navLTitle > div:nth-child(2) {
+  margin-left: 15px;
+}
 </style>