<template>
  <view class="capital">
    <MContentTitle title="投垫资" />
    <view class="capital-list">
      <view v-for="item in workList" :key="item.id" class="items-stat gap-18rpx flex justify-start">
        <text class="i-custom-money wh-28rpx mt-6rpx" />
        <view class="flex-1">
          <view class="mb-8rpx flex items-center justify-between">
            <text class="text-28rpx font-500 text-color-1">{{ item.title }}</text>
            <text class="text-28rpx font-500 text-color-up">- 76352.0</text>
          </view>
          <view class="flex justify-between">
            <text class="text-24rpx text-color-place">共28笔</text>
            <text class="text-28rpx font-500 text-color-down">+ 5676.0</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  defineOptions({ name: 'MyWork' })

  const workList = ref([
    {
      id: '1',
      title: '研发设备采购',
      desc: '工作描述1',
      status: '2',
      time: '2025-1-1',
    },
    {
      id: '2',
      title: '研发设备采购',
      desc: '工作描述2',
      status: '4',
      time: '2025-1-1',
    },
    {
      id: '2',
      title: '研发设备采购',
      desc: '工作描述2',
      status: '3',
      time: '2025-1-1',
    },
  ])
</script>

<style lang="scss" scoped>
  .capital {
    @apply rounded-16rpx p-32rpx bg-bg-card mt-24rpx;
    .capital-list {
      @apply gap-40rpx mt-40rpx flex flex-col;
    }
  }
</style>
