<template>
    <div>
        <div class="bg-fff round-12 p-16">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="w-40 h-40 bg-main round-6 mr-10" style="background-color: rgba(var(--main-color), 0.1);"></div>
                    <div class="section2-head">
                        <div class="fs-16 fw-700 color-000">任务中心</div>
                        <p class="fs-14 color-666">三大类任务数量概览 (点击数字进入协作)</p>
                    </div>
                </div>
                <div class="flex-items-center color-888 pointer">
                    <svg t="1786427654955" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6217" width="16" height="16">
                        <path
                            d="M566.2 166.9c-11.7-11.7-30.8-11.7-42.4 0L509.7 181c-11.7 11.7-11.7 30.8 0 42.4l254.9 254.9c11.7 11.7 11.7 30.8 0 42.4L509.2 776.1c-11.7 11.7-11.7 30.8 0 42.4l14.1 14.1c11.7 11.7 30.8 11.7 42.4 0l311.1-311.1c11.7-11.7 21.1-21.3 21-21.4-0.1-0.1 0-0.4 0.2-0.6 0.2-0.2-9.1-10-20.8-21.6l-311-311z"
                            fill="#888888" p-id="6218"></path>
                        <path
                            d="M769 460c16.5 0 30 13.5 30 30v20c0 16.5-13.5 30-30 30H129c-16.5 0-30-13.5-30-30v-20c0-16.5 13.5-30 30-30h640z"
                            fill="#888888" p-id="6219"></path>
                    </svg>
                    <span>全部</span>
                </div>
            </div>
            <section class="mt-20">
                <div v-for="(value, index) in list" :key="index" class="round-6 p-12 mt-10 flex justify-between"
                    style="background-color: #88888810;">
                    <div class="">
                        <span class="font-bold">给我的任务</span>
                        <div class="flex items-center gap-10 mt-6">
                            <el-tag type="warning" round>待完成2</el-tag>
                            <el-tag type="success" round>已达标4</el-tag>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <div class="bg-fff round-12 p-16 mt-20">
            <div class="flex items-center">
                <div class="w-40 h-40 bg-main round-6 mr-10" style="background-color: rgba(var(--main-color), 0.1);"></div>
                <div class="section2-head">
                    <div class="fs-16 fw-700 color-000">帮助中心</div>
                    <p class="fs-14 color-666">快速查阅文档、视频、客服与反馈</p>
                </div>
            </div>
            <section class="flex flex-wrap gap-10 mt-20">
                <div v-for="(item, index) in helpItems" :key="index" class="round-6 p-12 flex-center flex-col pointer"
                    style="background-color: #88888810;flex: 0 0 calc((100% - 10px*2)/3);">
                    <span class="font-bold">⬇️</span>
                    <span class="font-bold">{{ item.label }}</span>
                </div>
            </section>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const list = ref([1, 2])
const helpItems = [
    { label: '帮助文档', value: 1, num: 6 },
    { label: '视频教程', value: 2, num: 3 },
    { label: '意见反馈', value: 3, num: 0 },
    { label: '联系客服', value: 4, num: 2 },
    { label: '常见问题', value: 5, num: 0 },
]
</script>

<style lang="scss" scoped></style>