feat: 任务列表

src/renderer/components/TaskList/Card.vue

@@ -0,0 +1,37 @@
+<template>
+    <div v-for="item in task" :key="item.id"
+        class="border border-solid border-[#E5E8EE] rounded-[12px] p-[12px] mb-[12px] task">
+        <div class="flex items-center pb-[12px]" style="border-bottom: 1px dashed #E5E8EE;">
+            <img class="w-[24px] h-[24px] rounded-[8px]] mr-[4px]" src="@assets/images/task/xc.png" />
+            <div class="text-[16px] text-[#171717] font-bold mr-[8px]">{{ item.name }}</div>
+            <div class="pl-[8px] pr-[8px] bg-[#FFC0C5] text-[12px] text-[#681219] font-bold rounded-[100px]">{{
+                item.statusText }}</div>
+        </div>
+        <div class="flex items-center mt-[12px]">
+            <component :is="item.desIcon" :color="item.color" class="w-[15px] mr-[4px]" />
+            <div class="text-[#FB3748] text-[14px]">{{ item.des }}</div>
+        </div>
+        <div v-if="item.button" class="mt-[24px]">
+            <button class="w-[100%] h-[40px] bg-[#2B7FFF] text-white text-[14px] font-bold rounded-[12px]">登录</button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { task } from '@constant/task'
+</script>
+
+<style scoped>
+.task {
+    position: relative;
+    z-index: 1;
+    transition: all .2s linear;
+}
+
+.task:hover {
+    z-index: 2;
+    box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
+    transform: translate3d(0, -2px, 0);
+}
+</style>