proginn-frontend/kaifain_v2/components/SolutionCell.vue

<template lang="pug">
  .solution-cell
    a.cell-block(:href="`/s/${data.hash_id}`")
      .figure
        img.cover(
          :src="data.images"
        )

      .info
        .title
          span {{data.title}}
          .tag.is-choice(v-if="data.is_choice == 1") 优选
        .desc {{data.description}}
        .provider 服务商: {{data.company_name}}

    .tags
      .tag.is-primary.is-light.is-border(v-for="item in data.cats") {{item.name}}
      .tag.is-border(
        v-for="item in data.tags"
        v-if="!data.cats || !data.cats.find((cat) => cat.name === item.name)"
        ) {{item.name}}

</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'SolutionCell',
  components: {
  },

  props: {
    data: Object
  }
})
</script>

<style lang="scss">
@import '../assets/styles/vars';

.kaifain-view .solution-cell {
  padding: 24px 24px 20px;
  border-bottom: 1px solid #eee;

  .figure {
    margin: 4px 24px 0 0;
    flex: none;

    .cover {
      width: 64px;
      height: 64px;
      display: block;
    }
  }

  .info {
    font-size: 12px;
    flex: 1;
    overflow: hidden;
  }

  .tag {
    font-size: 0.6875rem;
    cursor: default;
  }

  a.tag {
    cursor: pointer;
    text-decoration: none;
  }

  .title {
    font-size: 1rem;
    font-weight: 500;
    color: $ink;
    margin-bottom: 8px;

    .tag {
      margin-left: 8px;
      height: 1.6em;
      padding-left: 0.5em;
      padding-right: 0.5em;
    }
  }

  .desc,
  .provider {
    white-space: nowrap;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .desc {
    color: lighten($ink, 10%);
    margin: 10px 0;
    font-size: 0.8125rem;
  }

  .provider {
    color: lighten($ink, 42%);
  }

  .tags {
    padding: 2px 0;
    margin: 10px 0 0 88px;
  }

  &.card {
    background: #fff;
    margin: 10px 12px;
    border-radius: 12px;
  }

  .cell-block {
    display: flex;

    &:hover {
      .title span {
        color: $primary;
      }
    }
  }
}
</style>