侧边栏跳转

src/App.vue

@@ -72,7 +72,7 @@
     border: none;
     height: 1px;
     width: 100%;
-    margin: 5px 0px 10px 0px;
+    margin: 0px 0px 10px 0px;
     background: #ccc;
   }
 
@@ -82,7 +82,6 @@
     height: 35px;
     justify-content: space-between;
     margin-bottom: 15px;
-    position: relative;
     .pAHeader1{
       font-weight: 600;
       font-size: 22px;
@@ -91,9 +90,6 @@
     [type='button']{
         background: #0e72e6 !important;
         color: #fff !important;
-        position: absolute;
-        top:-10px;
-        right: 0;
         display: flex;
         font-size: 16px;
         display: flex;
@@ -165,6 +161,7 @@
           display: flex;
           position: absolute;
           right: 0;
+          top: -3px;
           justify-content: center;
           font-size: 16px;
           width: 100px;

src/views/ProjectManagement1.vue

@@ -71,7 +71,7 @@
 
     <!-- 项目成员区域开始 -->
       <div class="tabTit">
-          项目成员
+          <div><p>项目成员</p></div>
       </div>
       <hr>
       <el-table
@@ -127,7 +127,7 @@
 
     <!-- 项目简介区域开始 -->
     <div class="tabTit">
-          项目简介
+          <div><p>项目简介</p></div>
     </div>
     <hr>
     <div class="pmProgressTextArea">

src/views/ProjectManagement3_1.vue

@@ -1,11 +1,9 @@
 <template>
     <div class="ProjectManagement3_1">
-      <div class="pA1Header">
+      <div class="vfpHeader">
       <!-- 详情页 -->
-        <div style="display: flex;width: 400px;">
-          <div class="pAHeader1">项目管理</div>
-          <span class="pAHeader1STit">项目进展详情</span>
-        </div>
+          <div class="titleOne">项目管理</div>
+          <span class="smallTitle" style="left: 100px;">项目进展详情</span>
     </div>
       <hr>
          <!-- 跳转导航开始 -->
@@ -15,7 +13,7 @@
             <div @click="remark2" class="AppBarActive">活动开展</div>
             <div @click="remark4">项目附件</div>
             <div @click="remark5">项目结题附件</div>
-            <el-button type="primary" style="position: absolute;right: 15%;top: -5px; width: 90px;font-size: 16px;" 
+            <el-button type="primary" style="position: absolute;right: 0;top: -5px; width: 100px;font-size: 16px;" 
             @click="$router.back()"
              size="mini">返回</el-button>
           </div>
@@ -79,10 +77,8 @@
 
       <!-- 指导老师开始 -->
       <div class="tabTit">
-        <div class="MA1HeadTit">
-          活动指导老师
-        </div>
-        <el-button type="primary" @click="addMember" size="mini">添加教师</el-button>
+          <div><p>活动指导老师</p></div>
+          <el-button type="primary" @click="addMember" size="mini">添加教师</el-button>
       </div>
       <hr>
       <el-table
@@ -129,7 +125,7 @@
 
     <!-- 多行文本框区域开始 -->
       <div class="tabTit">
-            活动介绍
+            <div><p>活动介绍</p></div>
       </div>
       <div class="textArea">
         <el-input
@@ -142,7 +138,7 @@
         </el-input>
       </div>
       <div class="tabTit">
-            活动计划
+            <div><p>活动介绍</p></div>
       </div>
       <div class="textArea">
         <el-input
@@ -155,7 +151,7 @@
         </el-input>
       </div>
       <div class="tabTit">
-            预期目标
+            <div><p>预期目标</p></div>
       </div>
       <div class="textArea">
         <el-input
@@ -168,7 +164,7 @@
         </el-input>
       </div>
       <div class="tabTit">
-            活动受面
+            <div><p>活动受面</p></div>
       </div>
       <div class="textArea">
         <el-input
@@ -181,7 +177,7 @@
         </el-input>
       </div>
       <div class="tabTit">
-            经费支出计划
+            <div><p>经费支出计划</p></div>
       </div>
       <div class="textArea">
         <el-input

src/views/makerActvityApply.vue

@@ -7,17 +7,17 @@
               <div class="qiu"></div>
             </div>
             <div class="leftTits">
-              <span>活动信息填写</span>
-              <span>活动内容</span>
-              <span>预算经费</span>
-              <span>完成</span>
+              <span @click="toPage(1)">活动信息填写</span>
+              <span @click="toPage(2)">活动指导老师</span>
+              <span @click="toPage(3)">活动介绍</span>
+              <span @click="toPage(4)">下一步</span>
             </div>
         </div>
       <!-- 左边导航区结束 -->
 
         <!-- 右边填写信息区域开始 -->
         <div class="right">
-              <div class="vfpHeader">
+              <div id="a" class="vfpHeader">
                   <div class="titleOne">创客创新-活动申请</div>
                   <el-button type="primary" @click="$router.back()">返回</el-button>
               </div>
@@ -79,7 +79,7 @@
               <!-- 活动申请填写信息区域结束 -->
 
               <!-- 活动指导老师开始 -->
-              <div class="tabTit">
+              <div id="s" class="tabTit">
                   <div><p>活动指导老师</p></div>
                   <el-button type="primary" @click="addTeacher"  size="mini">添加教师</el-button>
               </div>
@@ -128,7 +128,7 @@
               <!-- 活动指导老师结束 -->
 
             <!-- 活动介绍区域开始 -->
-            <div class="tabTit">
+            <div id="d" class="tabTit">
                   <div><p>活动介绍</p></div>
             </div>
             <hr>
@@ -145,7 +145,7 @@
             <!-- 活动介绍区域结束 -->
 
 
-            <div class="baseBtn">
+            <div id="f" class="baseBtn">
               <div class="blockWidth">
                 <el-button type="primary"  @click="backBtn1" size:small>上一步</el-button>
                 <el-button type="primary"  @click="next()" size:small>下一步</el-button>
@@ -243,6 +243,17 @@
           },
           deleteRow(){
             console.log(111);
+          },
+          toPage(val){
+            if (val==1) {
+              document.getElementById("a").scrollIntoView({ behavior: "smooth" });
+            }else if(val==2){
+              document.getElementById("s").scrollIntoView({ behavior: "smooth" });
+            }else if(val==3){
+              document.getElementById("d").scrollIntoView({ behavior: "smooth" });
+            }else if(val==4){
+              document.getElementById("f").scrollIntoView({ behavior: "smooth" });
+            }
           }
         },
         created(){

src/views/makerActvityApply2.vue

@@ -8,10 +8,11 @@
             <div class="qiu"></div>
           </div>
           <div class="leftTits">
-            <span>活动信息填写</span>
-            <span>活动内容</span>
-            <span>预算经费</span>
-            <span>完成</span>
+            <span @click="toPage(1)">活动计划</span>
+            <span @click="toPage(2)">预期目标</span>
+            <span @click="toPage(3)">活动受面</span>
+            <span @click="toPage(4)">经费支出计划</span>
+            <span @click="toPage(5)">完成</span>
           </div>
         </div>
         <!-- 左边导航区结束 -->
@@ -25,34 +26,34 @@
           </div>
             <hr>
 
-            <div>
+            <div id="z">
               <p class="pTit">活动计划</p>
               <div class="editor">
                 <vue-editor :editorToolbar="customToolbar" v-model="content"></vue-editor>
               </div>
             </div>
 
-            <div>
+            <div id="x">
                 <p class="pTit">预期目标</p>
                 <div class="editor">
                   <vue-editor :editorToolbar="customToolbar" v-model="content"></vue-editor>
                 </div>
               </div>
 
-              <div>
+              <div id="c">
                 <p class="pTit">活动受面</p>
                 <div class="editor">
                   <vue-editor :editorToolbar="customToolbar" v-model="content"></vue-editor>
                 </div>
               </div>
-              <div>
+              <div id="v">
                 <p class="pTit">经费支出计划</p>
                 <div class="editor">
                   <vue-editor :editorToolbar="customToolbar" v-model="content"></vue-editor>
                 </div>
               </div>
               
-            <div class="baseBtn">
+            <div id="b" class="baseBtn">
               <div class="blockWidth">
                 <el-button type="primary" class="backBtn" @click="back()" size:small>上一步</el-button>
                 <el-button type="primary" class="backBtn" @click="putIn" size:small>提交</el-button>
@@ -118,6 +119,19 @@
           },
           homeExit(){
 
+          },
+          toPage(val){
+            if (val==1) {
+              document.getElementById("z").scrollIntoView({ behavior: "smooth" });
+            }else if(val==2){
+              document.getElementById("x").scrollIntoView({ behavior: "smooth" });
+            }else if(val==3){
+              document.getElementById("c").scrollIntoView({ behavior: "smooth" });
+            }else if(val==4){
+              document.getElementById("v").scrollIntoView({ behavior: "smooth" });
+            }else if(val==5){
+              document.getElementById("b").scrollIntoView({ behavior: "smooth" });
+            }
           }
         }
       }

src/views/makerActvityApplyMain.vue

@@ -81,8 +81,9 @@ import makerActvityApply2 from './makerActvityApply2.vue';
                 flex-direction: column;
                 margin: 50px 0 0 15px;
                 span{
-                color: #fff;
-                margin-bottom: 30px;
+                    cursor: pointer;
+                    color: #fff;
+                    margin-bottom: 30px;
                 }
             }
             .sx{

src/views/projectApplicationApply.vue

@@ -6,10 +6,10 @@
             <div class="qiu"></div>
           </div>
           <div class="leftTits">
-            <span>基本信息填写</span>
-            <span>项目成员</span>
-            <span>简介</span>
-            <span>下一步</span>
+            <div  @click="toPage(1)">基本信息填写</div>
+            <div @click="toPage(2)">项目成员</div>
+            <div @click="toPage(3)">简介</div>
+            <div @click="toPage(4)">下一步</div>
           </div>
         </div>
   <!-- 左边导航区结束 -->
@@ -17,7 +17,7 @@
 
   <!-- 右边填写信息区域开始 -->
         <div class="right">
-            <div class="vfpHeader">
+            <div id="one" class="vfpHeader">
               <div class="titleOne">项目立项申请</div>
               <div class="smallTitle">申请开放时间为2023年××月××日9:00 &nbsp;  截止时间为2023年××月××日18:00</div>
               <el-button @click="backBtn1" type="primary" size="mini">返回</el-button>
@@ -82,8 +82,8 @@
 
             <!-- <div> -->
   <!-- 项目成员表格开始 -->
-              <div class="tabTit">
-                <div><p>项目成员</p></div>
+              <div id="two" class="tabTit">
+                <div id="face"><p>项目成员</p></div>
                 <el-button type="primary" @click="addMember"  size="mini">添加成员</el-button>
               </div>
               <hr>
@@ -136,7 +136,7 @@
 
 
   <!-- 项目简介开始 -->
-            <div class="tabTit">
+            <div id="three" class="tabTit">
                 <div><p>项目简介</p></div>
             </div>
             <hr>
@@ -151,7 +151,7 @@
   <!-- 项目简介结束 -->
 
   <!-- 结束按钮开始 -->
-            <div class="baseBtn">
+            <div id="four" class="baseBtn">
               <div class="blockWidth">
                 <el-button type="primary"  @click="backBtn1" size:small>上一步</el-button>
                 <el-button type="primary"  @click="backBtn" size:small>下一步</el-button>
@@ -237,6 +237,18 @@
         },
         Del(){
           
+        },
+        toPage(val){
+          console.log('111');
+            if (val==1) {
+              document.getElementById("one").scrollIntoView({ behavior: "smooth" });
+            }else if(val==2){
+              document.getElementById("two").scrollIntoView({ behavior: "smooth" });
+            }else if(val==3){
+              document.getElementById("three").scrollIntoView({ behavior: "smooth" });
+            }else if(val==4){
+              document.getElementById("four").scrollIntoView({ behavior: "smooth" });
+            }
         }
       },
       

src/views/projectApplicationApply2.vue

@@ -5,19 +5,23 @@
             <div class="qiu"></div>
           </div>
           <div class="leftTits">
-            <span>项目创新点</span>
-            <span>预期取得的效果</span>
-            <span>实施计划</span>
-            <span>下一步</span>
+            <div @click="toPage(1)">项目创新点</div>
+            <div @click="toPage(2)" style="position: relative;right: 5px;">
+              <el-tooltip class="item" effect="light" content="预期取得的成果" placement="bottom-start">
+                <p>预期取得的成果</p>
+              </el-tooltip>
+            </div>
+            <div @click="toPage(3)">实施计划</div>
+            <div @click="toPage(4)">下一步</div>
           </div>
         </div>
         <div class="right">
-            <div class="vfpHeader">
+            <div id="q" class="vfpHeader">
               <div class="titleOne">项目立项申请</div>
               <el-button @click="backBtn1" type="primary" size="mini">返回</el-button>
             </div>
             <hr>
-            <div>
+            <div id="w">
               <p class="pTit">项目创新点</p>
               <div class="editor">
                 <vue-editor  :editorToolbar="customToolbar" v-model="data.contentOne"></vue-editor>
@@ -44,13 +48,13 @@
                 </div>
               </div>
             </div>
-            <div>
+            <div id="e">
               <p class="pTit">项目实施计划</p>
               <div class="editor">
                 <vue-editor v-model="data.contentFive" :editorToolbar="customToolbar"></vue-editor>
               </div>
             </div>
-            <div class="baseBtn">
+            <div id="r" class="baseBtn">
               <div class="blockWidth">
                 <el-button type="primary" class="backBtn" @click="backBtn1" size:small>上一步</el-button>
                 <el-button type="primary" class="backBtn" @click="backBtn" size:small>下一步</el-button>
@@ -84,6 +88,17 @@
           backBtn1(){
             this.back();
           },
+          toPage(val){
+            if (val==1) {
+              document.getElementById("q").scrollIntoView({ behavior: "smooth" });
+            }else if(val==2){
+              document.getElementById("w").scrollIntoView({ behavior: "smooth" });
+            }else if(val==3){
+              document.getElementById("e").scrollIntoView({ behavior: "smooth" });
+            }else if(val==4){
+              document.getElementById("r").scrollIntoView({ behavior: "smooth" });
+            }
+          }
         }
       }
   </script>
@@ -93,9 +108,12 @@
     margin-top: 30px;
     width: 100%;
     display: flex;
-    // background: red;
     justify-content: center;
     
+
+    .item {
+      margin: 4px;
+    }
     .right{
       width: 83%;
       background: #fff;
@@ -106,16 +124,6 @@
   }
 
 
-    .textArea{
-      display: flex;
-      justify-content: flex-start;
-      textarea{
-        resize: none;outline: none;
-        background: #f2f2f2;
-        box-sizing: border-box;
-        padding: 10px;
-      }
-    }
     .pTit{
       color: #3994ff;
       font-weight: 550;
@@ -132,8 +140,5 @@
       min-width: 700px;
       box-sizing: border-box;
       padding: 15px 30px 10px 0px;
-      // .VueEditor{
-      //   width: 100%;
-      // }
     }
   </style>

src/views/projectApplicationApply3.vue

@@ -7,9 +7,9 @@
         </div>
       <!-- 左边栏内容开始 -->
         <div class="leftTits">
-          <span>月支出计划</span>
-          <span>支出明细</span>
-          <span>完成</span>
+          <div>月支出计划</div>
+          <div>支出明细</div>
+          <div>完成</div>
         </div>
       <!-- 左边栏内容结束 -->
       </div>
@@ -208,7 +208,7 @@
 
 
       <div class="tabTit">
-        <div>添加经费明细</div>
+        <div><p>添加经费明细</p></div>
       </div>
       <div class="dagInpS">
         <div class="dagInpS1">

src/views/projectApplicationApplyMain.vue

@@ -234,7 +234,8 @@
     }
     .Main_area{  //宽度
       width: 95%;
-      margin-bottom: 50px;
+      min-height: 80%;
+      margin-bottom: 20px;
     }
     // 顶部导航区
 
@@ -347,7 +348,7 @@
   // 左边栏开始
   .left{
       width: 10%;
-      height: 700px;
+      height: 740px;
       background: #32455b;
       display: flex;
       justify-content: center;
@@ -358,10 +359,16 @@
         display: flex;
         flex-direction: column;
         margin: 30px 0 0 10px;
-        span{
-          width: 100px;
+        div{
+          width: 97px;
           color: #fff;
+          cursor: pointer;
           margin-bottom: 30px;
+          p{
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow:ellipsis;
+          }
         }
       }
       .sx{
@@ -383,23 +390,4 @@
 }
 
 
-// 项目内容、预算经费一级标题开始
-.projectApplicationApplypAHeader{  
-      width: 90%;
-      display: flex;
-      position: relative;
-      margin-bottom: 12px;
-      .pAHeader1{
-        width: 150px;
-        font-weight: 600;
-        font-size: 22px;
-        flex-shrink: 0;
-      }
-}
-// 项目内容、预算经费一级标题结束
-
-
-
-
-
   </style>

src/views/projectSettlement1.vue

@@ -73,8 +73,8 @@
         <!-- 活动申请填写信息区域结束 -->
 
         <!-- 项目成员区域开始 -->
-        <div class="PS1tabTit">
-            项目成员
+        <div class="tabTit">
+            <div><p>项目成员</p></div>
         </div>
         <hr>
         <el-table
@@ -120,19 +120,18 @@
         <!-- 项目成员区域结束 -->
 
         <!-- 项目简介区域开始 -->
-      <div class="PS1tabTit">
-            项目简介
+      <div class="tabTit">
+            <div><p>项目简介</p></div>
       </div>
       <hr>
-      <div class="ps1textArea">
         <el-input
           type="textarea"
           :rows="6"
           class="textArea"
+          resize="none"
           placeholder="请输入内容"
           v-model="textarea">
         </el-input>
-      </div>
         <!-- 项目简介区域结束 -->
 
       <div class="baseBtn">
@@ -208,27 +207,6 @@
   
   <style lang="less">
   .projectSettlement1{
-
-
-
-    .PS1tabTit{
-        width: 100%;
-        text-align: left;
-        font-size: 18px;
-        font-weight:bold;
-        box-sizing: border-box;
-        margin-top: 20px;
-    }
-
-    .ps1textArea{
-        width: 100%;
-        display: flex;
-        justify-content: flex-start;
-        textarea{
-          resize: none;
-        }
-      }
-
     .psSmallTit{
         width: 100%;
         margin: 15px 0px 20px 0px;

src/views/projectSettlement2.vue

@@ -67,20 +67,21 @@
         结项评价
       </div>
       <div class="tabTit">
-            科研办
+            <div><p>科研办</p></div>
       </div>
       <hr>
       <div class="ps1textArea">
         <el-input
           type="textarea"
           :rows="6"
+          resize="none"
           class="textArea"
           placeholder="请输入内容"
           v-model="textarea">
         </el-input>
       </div>
       <div class="tabTit">
-            学术委员会
+            <div><p>学术委员会</p></div>
       </div>
       <hr>
       <div class="ps1textArea">
@@ -88,18 +89,20 @@
           type="textarea"
           class="textArea"
           :rows="6"
+          resize="none"
           placeholder="请输入内容"
           v-model="textarea">
         </el-input>
       </div>
       <div class="tabTit">
-            部门审核评语
+            <div><p>部门审核评语</p></div>
       </div>
       <hr>
       <div class="ps1textArea">
         <el-input
           type="textarea"
           :rows="6"
+          resize="none"
           class="textArea"
           placeholder="请输入内容"
           v-model="textarea">
@@ -177,13 +180,6 @@
       font-size: 22px;
     }
 
-    .ps1textArea{
-        width: 100%;
-        textarea{
-          resize: none;
-        }
-    }
-
     
     .ps2Inp{
       width: 100%;