DataModule.vue

<template>
  <section class="data-module">
    <div class="module-top-container">
      <div class="module-top-left">
        <span class="module-name">{{name}}</span>
        <span v-if="isTop" class="module-top-btn">{{$t('home.top')}}</span>
      </div>
      <div class="module-more">
        <span>{{$t('home.more')}}</span>
        <img src="@/assets/icon/more.png" alt="">
      </div>
    </div>
    <div class="module-content-container">
      <DataListItem v-for="(item, idx) in data.list" :key="idx" :data="item" :dateText="dateText || `${$t('home.updateDate')}：`">
        <template v-if="item.isRecommend" v-slot:tag>
          <span class="item-recommend">{{$t('home.recommend')}}</span>
        </template>
      </DataListItem>
    </div>
  </section>
</template>

<script>
import DataListItem from '@/components/DataListItem'
export default {
  name: 'DataModule',
  components: { DataListItem },
  props: {
    name: {
      type: String,
      default: '协会动态'
    },
    isTop: {
      type: Boolean,
      default: true
    },
    dateText: {
      type: String,
    }
  },
  data () {
    return {
      data: {
        name: '协会动态',
        isTop: true,
        list: [
          {
            isRecommend: true,
            title: '创新推出碳中和债，助理实现30·60目标创新推出碳中和债，助理实现30·60目标创新推出碳中和债，助理实现30·60目标',
            date: '2020-02-02',
            dataType: '产品创新'
          },
          {
            isRecommend: false,
            title: '创新推出碳中和债，助理实现30·60目标创新推出碳中和60目标',
            date: '2020-02-02',
            dataType: '产品创新'
          },
          {
            isRecommend: false,
            title: '创新推出碳中和债，助理实现30·60目标出',
            date: '2020-02-02',
            dataType: '产品创新'
          },

        ]
      }
    }
  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
@import '~@/assets/css/mixins.less';

@ModuleTop: 30px;
.data-module {
  padding-top: @ModuleTop;

  .module-top-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #135faa;

    .module-top-left {
      display: flex;
      align-items: center;
      margin-bottom: -0.5px;
      .module-name {
        padding-bottom: 2px;
        box-sizing: border-box;
        font-size: 19px;
        color: #222222;
        line-height: 26px;
        border-bottom: 2.5px solid #135faa;
      }

      .module-top-btn {
        margin-left: 15px;
        height: 17px;
        line-height: 15px;
        border-radius: 10px;
        color: #135faa;
        font-size: 12px;
        padding: 0 5px;
        text-align: center;
        border: 0.5px solid #135faa;
      }
    }

    .module-more {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #999999;
      img {
        margin-left: 5px;
        margin-top: 2px;
        width: auto;
        height: 9px;
      }
    }
  }
}
.module-content-container {
  .item-recommend {
    height: 18x;
    line-height: 18px;
    font-size: 10px;
    color: white;
    padding: 0 7px;
    padding-bottom: 1px;
    border-radius: 8px;
    background: #ff4038;
    text-align: center;
  }

  .content-item {
    padding-top: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    .item-title {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      line-height: 25px;
      position: relative;

      .item-recommend {
        position: absolute;
        left: 0;
        top: 3.5px;
        height: 18px;
        line-height: 18px;
        font-size: 10px;
        color: white;
        padding: 0 7px;
        border-radius: 8px;
        background: #ff4038;
        text-align: center;
        margin-right: 10px;
      }
      .item-title-content {
        font-size: 16px;
        color: #222222;
        line-height: 25px;
        .line-clamp(2);
      }

      &.item-recommend {
        .item-title-content {
          text-indent: 50px;
        }
      }
    }
    .item-content-bottom {
      padding-top: 10px;
      display: flex;
      justify-content: space-between;

      .item-bottom-item {
        display: flex;
        align-items: center;

        @IconSize: 15px;
        .item-bottom-icon {
          width: @IconSize;
          height: @IconSize;
        }
        .item-bottom-text {
          line-height: 16px;
          font-size: 12px;
          color: #999999;
          margin-left: 7px;
        }
      }
    }
  }
}
</style>