wt_project_web_bak/src/views/home/track.vue

<template>
  <div class='flex flex-justify-start full-height'>
    <div class="full-height">
      <left-bar/>
    </div>
    <div class="flex flex-col full-height full-width" style="margin-left: 300px">
      <div class="white-bg padding-left padding-top flex flex-col">
        <div class="flex flex-center full-width">
          <!------tab------>
          <div class="flex flex-center mt-15 full-width mb-20">
            <div class="flex flex-center" style="flex: 3">
              <div v-for="(item,index) in tab" :key="item.id" class="flex flex-center tab">
                <div :class="active === index ? 'tab-active' : ''"
                     @click="change(index)">{{ item.name }}
                </div>
              </div>
            </div>
            <div class="flex flex-center ml-20 mr-10" style="flex: 1">
              <base-button icon="Plus" title="添加文件夹" type="0"/>
              <base-button class="ml-20" icon="User" title="批量授权"/>
            </div>
          </div>
        </div>
        <folder_list/>
      </div>
      <div class="white-bg padding-left padding-top mt-10">
        <files_list/>
      </div>
    </div>
  </div>
</template>

<route>
{
name:'跟踪审计',
}
</route>

<script>
import leftBar from './component/left_bar.vue'
import folder_list from './component/folder_list.vue'
import files_list from './component/files_list.vue'
import baseButton from '../../components/base-button.vue'

export default {
  name: 'track',
  components: { leftBar, folder_list, files_list, baseButton },
  data () {
    return {
      type: 1,
      active: 0,
      tab: [
        {
          name: '项目必须文件'
        },
        {
          name: '相关合同'
        },
        {
          name: '财务相关资料'
        },
        {
          name: '其他文件'
        }
      ]
    }
  },
  methods: {
    change (index) {
      this.active = index
    }
  }
}
</script>

<style lang="scss" scoped>
.tab {
  width: 130px;
  height: 38px;
  background-color: #EDF0F3;
  padding: 2px 10px;
  color: #707070;
  font-size: 13px;
}

.tab:first-child {
  border-radius: 20px 0 0 20px;
}

.tab:last-child {
  border-radius: 0 20px 20px 0;
}

.tab-active {
  width: 130px;
  flex-wrap: nowrap;
  color: white;
  font-size: 15px;
  background-color: #BC002D;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 20px;
}
</style>