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

<template>
  <div class="project-item-container">
    <span class="col-xl-2 col-lg-3 col-md-4 col-sm-1">
      <img class="project-cover" src="@/assets/img/home_ban1.jpg">
    </span>
    <span class="project-title col-md-2 col-sm-10">{{project.name}}</span>
    <span class="project-title col-md-2 col-sm-10">{{project.id}}</span>
    <span class="col-md-2 col-sm-10">
      <span
        v-bind:class="['badge',{ 'ios-platform': item=='0','android-platform': item=='1','web-platform': item=='2'}]"
        v-for="item in project.platform"
      >{{platformType[item]}}</span>
    </span>
    <span class="col-md-1 col-sm-5">¥{{project.price}}</span>
    <span class="project-td">
      <span class="btn btn-medium btn-info" @click="goToProjectDetail(projectId)">查看详情</span>
    </span>
  </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;
    border: 1px solid #eee;
    margin: 15px 5px;
    span {
      display: inline-block;
    }
  }

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

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

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