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

<template>
  <div>
    <el-card
      shadow="hover"
      class="top full-height flex flex-col hide-scrollbar"
      style="overflow-y: auto"
    >
      <div class="flex flex-col flex-center mt-15 padding">
        <span class="font-15 bold mb-10">{{ data.name }}</span>
        <span class="font-15 bold mt-5" style="color: #787c90"
          >项目总投资额</span
        >
        <span class="mt-5 font-15 bold main-color"
          >{{
            data.totalAmount ? data.totalAmount.toLocaleString() : '-'
          }}万元</span
        >
        <main-button :width="200" type="0" @click="proInfo" />
        <el-divider></el-divider>
        <div class="flex flex-center flex-justify-between full-width">
          <span class="title ml-20">项目阶段-文件管理</span>
          <span class="title mr-20 pointer" @click="record">授权记录</span>
        </div>
      </div>
      <div style="margin-left: 30px">
        <el-empty v-if="stage && stage.length === 0"></el-empty>
        <basic-step
          v-else
          style="margin-top: 20px"
          :active="active"
          :steps="stage"
        />
      </div>
    </el-card>
  </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 {
      height: 0
    }
  },
  created() {},
  methods: {
    proInfo() {
      this.$emit('typeChange')
    },
    record() {
      this.$emit('typeChange1')
    }
  }
}
</script>

<style lang="scss" scoped>
.top {
  width: 300px;
  position: sticky;
  background-color: white;
  height: calc(100vh - 100px);
}

.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: 280px;
  padding-left: 30px;
  background-color: #faf9fa;
}

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