fix

src/components/basic-step/index.vue

@@ -1,44 +1,44 @@
 <template>
-  <div class="flex flex-col full-height" style='width: 250px;overflow-y: scroll;'>
+  <div class="full-height flex flex-col">
     <div v-for='(item,index) in steps' :key='item'>
-        <div class='flex flex-align-end'>
-          <div class='flex flex-col flex-center' style="width: 40px">
-            <div :class='indicator >= index ? "step-bg" : "normal" '
-                 :style='index === 0 ? "height:60px" :"height:80px" '
-                 class='step'/>
-            <img
-                :src='indicator >= index ? dotSelect : dotNormal '
-                style='margin-top: -34px; margin-bottom: -34px;z-index: 1'/>
-          </div>
-          <!--        tips-->
-          <div class="flex flex-center">
-            <img v-if="indicator === index" src="../../assets/svg/step/marker.svg"
-                 style="margin-right: 12px;margin-top: 30px">
-            <div :style='indicator === index ? "background-color: #596A8A":"background-color: transparent" '
-                 class='content pointer' style='z-index: 2;margin-left: -15px'
-                 @click='change(index)'>
-              <div class='flex flex-col flex-align-start  full-width'>
-                <div class='padding flex flex-col ml-5 font-15 bold'>
-                  <div :style='indicator === index ? "color:#D9E6FF": "color:#AFAFAF"' class="mt-5 nowrap">
-                    {{ item.title }}
-                  </div>
-                  <div class="flex">
-                    <div :style='indicator === index ? "color:#E2AE64": "color:#825618" ' class='text-left'>
-                      {{ item.count }}<span class="font-12">个文件</span>
-                    </div>
-                    <el-icon v-if="item.isAccess === 1" style="margin-top: 4px;margin-left: 5px" color="#E2AE64">
-                      <View/>
-                    </el-icon>
-                    <el-icon v-if="item.isAccess === 2" style="margin-top: 3px;margin-left: 5px" color="#E2AE64">
-                      <EditPen/>
-                    </el-icon>
+      <div class='flex flex-align-end'>
+        <div class='flex flex-col flex-center' style="width: 40px">
+          <div :class='indicator >= index ? "step-bg" : "normal" '
+               :style='index === 0 ? "height:60px" :"height:80px" '
+               class='step'/>
+          <img
+              :src='indicator >= index ? dotSelect : dotNormal '
+              style='margin-top: -34px; margin-bottom: -34px;z-index: 1'/>
+        </div>
+        <!--        tips-->
+        <div class="flex flex-center">
+          <img v-if="indicator === index" src="../../assets/svg/step/marker.svg"
+               style="margin-right: 12px;margin-top: 30px">
+          <div :style='indicator === index ? "background-color: #596A8A":"background-color: transparent" '
+               class='content pointer' style='z-index: 2;margin-left: -15px'
+               @click='change(index)'>
+            <div class='flex flex-col flex-align-start  full-width'>
+              <div class='padding flex flex-col ml-5 font-15 bold'>
+                <div :style='indicator === index ? "color:#D9E6FF": "color:#AFAFAF"' class="mt-5 nowrap">
+                  {{ item.title }}
+                </div>
+                <div class="flex">
+                  <div :style='indicator === index ? "color:#E2AE64": "color:#825618" ' class='text-left'>
+                    {{ item.count }}<span class="font-12">个文件</span>
                   </div>
+                  <el-icon v-if="item.isAccess === 1" style="margin-top: 4px;margin-left: 5px" color="#E2AE64">
+                    <View/>
+                  </el-icon>
+                  <el-icon v-if="item.isAccess === 2" style="margin-top: 3px;margin-left: 5px" color="#E2AE64">
+                    <EditPen/>
+                  </el-icon>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
+    </div>
   </div>
 </template>
 
@@ -50,7 +50,8 @@ export default {
       type: Number,
       default: 0
     },
-    steps: Array
+    steps: Array,
+    height: Number
   },
   watch: {
     active: {
@@ -58,6 +59,11 @@ export default {
         this.indicator = val
       },
       immediate: true
+    },
+    height: {
+      handler (val) {
+      },
+      immediate: true
     }
   },
   data () {

src/views/home/component/left_bar.vue

@@ -1,29 +1,24 @@
 <template>
   <div>
-    <div class="top">
-      <div class="flex flex-col flex-center padding mt-20  ">
-        <span class='font-16 bold  mb-10'>{{data.name}}</span>
-        <main-button :width="200" type="0" @click="proInfo"/>
-        <el-divider></el-divider>
-      </div>
-    </div>
-    <div class='middle full-height' style="margin-left: 20px;text-align: left;">
-      <span class="title">项目阶段-文件管理</span>
-      <el-empty style='margin-top: 200px' v-if="stage &&  stage.length === 0 "/>
-      <basic-step class='mt-5' :active="active" :steps='stage'/>
-    </div>
-    <div class="down">
-      <div class="padding flex flex-col flex-center">
-        <el-divider></el-divider>
-        <div class="flex flex-col flex-center tip">
+    <div class="white-bg top full-height  hide-scrollbar" style='overflow-y: auto;'>
+      <el-affix :offset='60.1'>
+        <div class="flex flex-col flex-center">
+          <span class='font-16 bold  mb-10'>{{ data.name }}</span>
           <span class="font-16 bold mt-5" style="color:#787C90;">项目总投资额</span>
           <span class="mt-5 font-16 bold main-color">{{
               data.totalAmount ? data.totalAmount.toLocaleString() : '-'
             }}万元</span>
+          <main-button :width="200" type="0" @click="proInfo"/>
+          <el-divider></el-divider>
+          <span class="title">项目阶段-文件管理</span>
         </div>
+      </el-affix>
+      <div style='margin-top: 80px;'>
+        <basic-step style='margin-top: 80px' :active="active" :steps='stage'/>
       </div>
     </div>
   </div>
+
 </template>
 
 <script>
@@ -50,9 +45,16 @@ export default {
     }
   },
   data () {
-    return {}
+    return {
+      height: 0
+    }
+  },
+  created () {
+    setTimeout(() => {
+      this.height = window.getComputedStyle(this.$refs.middle).height
+      console.log(this.height)
+    }, 200)
   },
-
   methods: {
     proInfo () {
       this.$emit('typeChange')
@@ -65,8 +67,6 @@ export default {
 .top {
   width: 300px;
   position: fixed;
-  bottom: 160px;
-  top: 60px;
   background-color: #FAF9FA
 }
 
@@ -85,11 +85,13 @@ export default {
   width: 240px
 }
 
-.middle{
+.middle {
   width: 270px;
   position: fixed;
   bottom: 175px;
-  top: 220px;
+  top: 280px;
+  padding-left: 30px;
+  background-color: #FAF9FA
 }
 
 .title {