wt_project_web_bak/src/views/home/component/left_bar.vue

<template>
  <div>
    <div class="top">
      <div class="flex flex-col padding mt-20 ml-10">
        <main-button :width="200" type="0" @click="proInfo"/>
        <el-divider></el-divider>
      </div>
    </div>
    <div class='middle ' style="margin-left: 20px;text-align: left;">
      <span class="title">项目阶段-文件管理</span>
      <el-empty 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">
          <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>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mainButton from '../../../components/main-button.vue'
import basicStep from '@/components/basic-step/index.vue'

export default {
  name: 'left_bar',
  components: { mainButton, basicStep },
  props: {
    data: Object,
    stage: Array,
    active: {
      type: Number,
      default: -1
    }
  },
  watch: {
    active: {
      handler (val) {
        // this.change(0)
      },
      immediate: true
    }
  },
  data () {
    return {}
  },

  methods: {
    proInfo () {
      this.$emit('typeChange')
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  width: 300px;
  position: fixed;
  bottom: 160px;
  top: 60px;
  background-color: #FAF9FA
}

.down {
  width: 300px;
  position: fixed;
  bottom: 0;
  padding-bottom: 20px;
  background-color: #FAF9FA
}

.tip {
  border-radius: 10px;
  background-color: #F4F4F1;
  height: 75px;
  width: 240px
}

.middle{
  width: 270px;
  position: fixed;
  bottom: 175px;
  top: 160px;
}

.title {
  color: #ECAB56;
  font-size: 16px;
  font-weight: 500;
}
</style>