<template>
  <view class="bg-white shadow-sm rounded-2 mx-4 p-2">
    <view class="flex flex-items-center">
      <view>待办事项</view>
      <wd-icon name="arrow-right" size="14px" class="ml-a" color="#bfbfbf"></wd-icon>
    </view>
    <view class="mt-2">
      <view
        class="flex flex-items-center text-3.5 py-1.5"
        v-for="(item, index) in list"
        :key="index"
      >
        <image src="/static/images/icon_audit.png" mode="aspectFill" class="w-4.5 h-4.5"></image>
        <view class="ml-3 font-bold">{{ item.name }}</view>
        <view class="ml-2 w-1 h-1 bg-black rounded-50%"></view>
        <view class="ml-2">{{ item.content }}</view>
        <view class="color-[#2954ee] bg-[#f5f4fa] px-2 px-1 ml-a rounded">去处理</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  const list = [
    {
      title: '审批',
      content: '您有新的补卡待你处理'
    },
    {
      title: '审批',
      content: '您有新的请假待你处理'
    }
  ]
</script>
