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

<template>
  <ContentModuleCard title="招标/采购进度" class="content-project-timeline">
    <div class="action-right-container" slot="header-actions">
      <span class="action-item clickable download-project-doc">
        <AppIcon name="xiazaixiangmubaogao"></AppIcon>
        <span class="action-text">下载项目报告</span>
      </span>
      <span class="action-item clickable follow-project">
        <AppIcon name="jiankong" v-if="true" color="#9b9ca3"></AppIcon>
        <AppIcon name="yijiankong" v-else color="#9b9ca3"></AppIcon>
        <span class="action-text">监控</span>
      </span>
    </div>
    <div class="bg-white">
      <TimeLine
        :markedSameId="articleId"
        :stepList="stepList"
        @itemClick="itemClick"
      ></TimeLine>
    </div>
  </ContentModuleCard>
</template>
<script>
import ContentModuleCard from '@/views/article/ui/ContentModuleCard.vue'
import { AppIcon, TimeLine } from '@/ui'

export default {
  name: 'ContentProjectTimeline',
  components: {
    AppIcon,
    TimeLine,
    ContentModuleCard
  },
  props: {
    articleId: {
      type: String,
      default: '226'
    }
  },
  data() {
    return {
      stepList: [
        {
          id: '226',
          step_time: '2024-02-26',
          // step_bidamount: 'moneyUnit(111)',
          tags: [111],
          content: '226-内容内容内容内容内容内容'
        },
        {
          id: '225',
          step_time: '2024-02-25',
          tags: [111, 222, 333],
          content: '225-内容内容内容内容内容内容'
        },
        {
          id: '224',
          step_time: '2024-02-24',
          tags: [111, 222, 333],
          content: '224-内容内容内容内容内容内容'
        }
      ]
    }
  },
  created() {},
  methods: {
    itemClick(item) {
      console.log(item)
    }
  }
}
</script>

<style lang="scss" scoped>
.action-item {
  color: $main;
  font-size: 14px;
  line-height: 20px;
  &:not(:last-of-type) {
    margin-right: 16px;
  }
  .action-text {
    margin-left: 4px;
  }
}
</style>