crowd-test-service-frontend/src/components/commons/ProjectItem.vue

<template>
  <div class="project-item-container">
    <el-row type="flex" align="middle" justify="center" style="font-size: 14px;">
      <el-col :span="6" type="flex" align="middle" justify="center">
        <el-badge :value="project.statusVO.text" class="item" :type="project.statusVO.style">
          <img class="project-cover" src="@/assets/img/home_ban1.jpg">
        </el-badge>
      </el-col>
      <el-col :span="6" type="flex" align="middle" justify="center">{{project.name}}</el-col>
      <!--<el-col :span="4">{{project.id}}</el-col>-->
      <el-col :span="3" type="flex" align="middle" justify="center">
        <span style="font-size: 10px;"
              v-bind:class="['badge']"
        >{{project.platform}}</span>
      </el-col>
      <el-col :span="3" type="flex" align="middle" justify="center">
        <div class="badge">¥{{project.budget}}</div>
      </el-col>
      <el-col :span="3" type="flex" align="middle" justify="center">
        <div>{{project.joinCount}}</div>
      </el-col>
      <el-col :span="4" type="flex" align="middle" justify="center">
        <el-badge v-if="project.needHandle" is-dot class="item">
          <span class="btn btn-small btn-info" @click="goToProjectDetail(project.id)">查看详情</span>
        </el-badge>
        <span v-if="!project.needHandle" class="btn btn-small btn-info" @click="goToProjectDetail(project.id)">查看详情</span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import PlatformType from '@/constants/enum/platform-type'

  export default {
  name: 'Project-Item',
  props: {
    projectItem: {}
  },
  data () {
    return {
      project: this.projectItem,
      platformType: PlatformType
    }
  },
  mounted () {
    // this.project.platform.map(item => {
    //   this.platformType.push(PlatformType[item]);
    // });
  },
  methods: {
    goToProjectDetail (id) {
      console.log(id)
      this.$router.push({name: 'Project', params: {projectId: id}})
    }
  }
}
</script>

<style lang="less" scoped>
  .project-item-container {
    /*padding: 20px;*/
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #eee;
    margin-top: 5px;
    margin-bottom: 5px;
    span {
      display: inline-block;
    }
  }

  .project-cover {
    width: 200px;
    height: 130px;
    vertical-align: middle;
  }

  .project-title {
    font-weight: 700;
  }

  .project-td {
    //padding: 15px;
  }

  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    //padding: 10px 0;
    background-color: #f9fafc;
  }
</style>