web/apps/mobile/src/views/article/components/RecommendProjectCard.vue

<template>
  <ContentModuleCard class="recommend-project-card bg-white">
    <div class="header-title" slot="title">
      <span class="j-icon" :class="[titleIcon]"></span>
      <span class="header-title-text">{{ title }}</span>
      <span class="highlight-text total-number">{{ totalNumber }}</span>
    </div>
    <template #header-actions>
      <slot name="header-actions">
        <div class="action-item">
          <AppIcon name="jiankong" v-if="true" color="#9b9ca3"></AppIcon>
          <AppIcon name="yijiankong" v-else color="#9b9ca3"></AppIcon>
          <span class="action-text">监控</span>
        </div>
      </slot>
    </template>
    <div class="info-list-main">
      <ProjectCell
        v-for="(item, index) in list"
        :key="index"
        :title="item.title"
        :keys="['信息']"
        :tags="item.tags"
        :time="item.time"
        v-visited:issued="item.id"
        @click="toDetail(item)"
      ></ProjectCell>
    </div>
    <div class="show-more clickable bg-white" slot="footer">查看更多</div>
  </ContentModuleCard>
</template>
<script>
import ContentModuleCard from '@/views/article/ui/ContentModuleCard.vue'
import { AppIcon, ProjectCell } from '@/ui'
console.log()
export default {
  name: 'RecommendProjectCard',
  components: {
    ContentModuleCard,
    ProjectCell,
    AppIcon
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    titleIcon: {
      type: String,
      default: 'icon-ent-info'
    },
    totalNumber: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      list: [
        {
          id: '11111',
          tags: ['河南-郑州市-金水区', '建筑工程', '预告'],
          title:
            '淮安市高级职业技术学校台式电脑采购项目淮安市高级职业技术学校台式电脑采购项目',
          time: 1709366382763
        },
        {
          id: '2222',
          tags: ['河南-郑州市-金水区', '建筑工程', '预告'],
          title:
            '淮安市高级职业技术学校台式电脑采购项目淮安市高级职业技术学校台式电脑采购项目',
          time: 1709366382763
        },
        {
          id: '3333',
          tags: ['河南-郑州市-金水区', '建筑工程', '预告'],
          title:
            '淮安市高级职业技术学校台式电脑采购项目淮安市高级职业技术学校台式电脑采购项目',
          time: 1709366382763
        }
      ]
    }
  },
  created() {},
  methods: {
    toDetail(item) {
      console.log(item)
    }
  }
}
</script>

<style lang="scss" scoped>
.header-title {
  display: flex;
  align-items: center;
}
.header-title-text {
  margin: 0 8px;
}
.total-number {
  font-weight: 400;
}
.action-item {
  display: flex;
  align-items: center;
}
.show-more {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  font-size: 14px;
  line-height: 20px;
  color: $main;
}
</style>