<template>
  <view>
    <!-- 预算和奖金 -->
    <view class="flex">
      <view class="flex-1 rounded p-0">
        <u-line-progress :percent="100" active-color="#93C5FD">
          <view class="text-black">预算2000</view>
        </u-line-progress>
      </view>
      <view>
        <u-line-progress :percent="100"> <view class="text-black">奖金100</view> </u-line-progress>
      </view>
    </view>
    <!-- 项目采购和日常采购 -->
    <view class="flex">
      <view class="rounded" style="width: 30%">
        <u-line-progress :percent="100" active-color="#FBBF24">
          <view class="text-black">项目采购1000</view>
        </u-line-progress>
      </view>
      <view style="width: 20%">
        <u-line-progress :percent="100" active-color="#FBBF24"> <view class="text-black">日常采购 50</view> </u-line-progress>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
</script>

<style>
.u-progress {
  border-radius: 5px !important;
}
</style>
