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

<template>
  <div class="card">
    <div class="card-header card-header-image">
      <a href="#">
        <img src="@/assets/img/home_ban1.jpg" alt>
      </a>
    </div>
    <div class="card-body">
      <div class="card-title" :title="item.title">{{item.title}}</div>
      <div class="card-desc">
        <!-- <span>{{item.participantNum}}人已参与</span> -->
      </div>
      <div class="card-action">
        <div class="btn btn-small btn-info" @click="goToTaskDetail(item.projectId,item.id)">查看详情</div>
        <div class="participate-num">
          <!-- <span v-bind:class="['badge',{ 'ios-platform': item.toLowerCase()=='ios','android-platform': item.toLowerCase()=='android','web-platform': item.toLowerCase()=='web'}]" v-for="item in platformType">{{item}}</span> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import PlatformType from '@/constants/enum/platform-type'
export default {
  name: "Task-Card",
  props: { item: {} },
  data() {
    return {
      // platformType:[]
    }
  },
  mounted() {
    // this.item.platform.map((item)=>{
    //   this.platformType.push(PlatformType[item])
    // })
  },
  watch:{
    item() {

    }
  },
  methods:{
    goToTaskDetail(projectId,id){
      this.$router.push({name: "Task", params: {projectId:projectId,taskId: id}})
    }
  }
};
</script>

<style lang="less" scoped>
.card {
  cursor: default;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  border: 0;
  margin-bottom: 30px;
  margin-top: 30px;
  border-radius: 6px;
  color: rgba(0, 0, 0, 0.87);
  background: #fff;
  width: 100%;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
  .card-header {
    border: 0;
  }

  .card-body {
    padding: 5px 30px 15px;
    flex: 1 1 auto;
  }
}
.card .card-header.card-header-image {
  position: relative;
  padding: 0;
  z-index: 1;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: -30px;
  border-radius: 6px;
}
.card .card-header.card-header-image img {
  width: 100%;
  border-radius: 6px;
  pointer-events: none;
  box-shadow: 0px 16px 20px -8px rgba(0, 0, 0, 0.24),
    0px 9px 9px -5px rgba(0, 0, 0, 0.2);
}
.card .card-header.card-header-image .colored-shadow {
  transform: scale(0.94);
  top: 12px;
  filter: blur(12px);
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  z-index: -1;
  transition: opacity 0.45s;
  opacity: 1;
}

.card .card-desc {
  min-height: 5px;
  margin: 10px 0;
  font-size: 1.2rem;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 18px;
}

.card .card-title:last-child {
  margin-bottom: 0;
}

.card .card-title {
  margin-top: 10px;
  color: #3c4858;
  font-size: 1.8rem;
  font-weight: 700;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
}
.card-action {
  margin: 0 auto;
  text-align: center;
}
.participate-num{
  font-size: 1rem;
  padding-top:5px;
}
</style>