feat: 任务列表开发

src/renderer/views/components/Task/index.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="task p-[12px]">
+        <div class="flex border border-[#BEDBFF] h-[48px] p-[4px] rounded-[10px] bg-[#EFF6FF] task-tab">
+            <div v-for="item in tabs" :key="item.value" class="flex-1 flex text-center items-center h-full align-middle text" :class="active === item.value && 'active'" @click="changeTab(item.value)">
+                <div class="flex-1">{{ item.name }}<span v-if="item.total">{{`（${item.total > 98 && item.total + '+' || item.total}）`}}</span></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+
+const tabs = reactive([{
+    name: '待处理',
+    value: 1,
+    total: 10,
+},{
+    name: '已处理',
+    value: 2,
+    total: 99,
+}])
+const active = ref(1);
+const changeTab = (val:number) => {
+    active.value = val;
+};
+</script>
+
+<style scoped>
+.task-tab .text {
+    color: #525866;
+    font-size: 14px;
+    cursor: pointer;
+}
+.task-tab .active {
+    position: relative;
+    color: #2B7FFF;
+    background: #FFFFFF;
+    border-radius: 8px;
+}
+.task-tab .active::after {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    content: '';
+    border-radius: 8px;
+    border: 1px solid #2B7FFF;
+}
+</style>