<template>
    <div>
    <div style="background: #ececec; display: flex;flex-direction: row;width: 85vw;height: 350px;">


        <a-tabs v-model:activeKey="activeKey">
            <a-tab-pane key="1" tab="项目 1"></a-tab-pane>
            <a-tab-pane key="2" tab="项目 2" force-render></a-tab-pane>
            <a-tab-pane key="3" tab="项目 3"></a-tab-pane>
        </a-tabs>

       <div style="margin-top: 50px; display: flex;flex-direction: row;margin-left: -180px" class="Text" >
        <a-card title="前端设计" :bordered="false" style="width: 300px;height: 200px;margin-left: 10px;margin-top: 20px">
            <p>进度</p>
            <a-progress :percent="50" status="active" />
            <a-avatar-group :max-count="2" :max-style="{ color: '#f56a00', backgroundColor: '#fde3cf' }">
                <a-avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2" />
                <a-avatar style="background-color: #1890ff">K</a-avatar>
                <a-tooltip title="Ant User" placement="top">
                    <a-avatar style="background-color: #87d068">
                        <template #icon><UserOutlined /></template>
                    </a-avatar>
                </a-tooltip>
                <a-avatar style="background-color: #1890ff">
                    <template #icon><AntDesignOutlined /></template>
                </a-avatar>
            </a-avatar-group>
        </a-card>
        <a-card title="后端设计" :bordered="false" style="width: 300px;height: 200px;margin-left: 20px;margin-top: 20px">
            <p>进度</p>
            <a-progress :percent="80" status="active" stroke-color="green" />
            <a-avatar-group :max-count="2" :max-style="{ color: '#f56a00', backgroundColor: '#fde3cf' }">
                <a-avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2" />
                <a-avatar style="background-color: #1890ff">K</a-avatar>
                <a-tooltip title="Ant User" placement="top">
                    <a-avatar style="background-color: #87d068">
                        <template #icon><UserOutlined /></template>
                    </a-avatar>
                </a-tooltip>
                <a-avatar style="background-color: #1890ff">
                    <template #icon><AntDesignOutlined /></template>
                </a-avatar>
            </a-avatar-group>
        </a-card>
        <a-card style="width: 300px;height: 200px;margin-left: 20px;margin-top: 20px">
            <a-progress type="dashboard" :percent="75" style="margin-left: 50px"/>
            <p style="text-align: center;margin-left: -20px">项目总进度</p>
        </a-card>
        <a-card style="width: 300px;height: 200px;margin-left: 20px;margin-top: 20px;background-color:#d5eef6;">
            <div style="display: flex;flex-direction: row">
                <p style="margin-right: 80px">老师</p>
                <p>总人数：</p>
            </div>
            详情：
            <a-avatar-group>
            <a-avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=1" />
            <a href="https://www.antdv.com">
                <a-avatar style="background-color: #f56a00">K</a-avatar>
            </a>
            <a-tooltip title="Ant User" placement="top">
                <a-avatar style="background-color: #87d068">
                    <template #icon><UserOutlined /></template>
                </a-avatar>
            </a-tooltip>
            <a-avatar style="background-color: #1890ff">
                <template #icon><AntDesignOutlined /></template>
            </a-avatar>
        </a-avatar-group>
            <hr>
            <div style="display: flex;flex-direction: row">
                <p style="margin-right: 80px">学生</p>
                <p>总人数：</p>
            </div>
            <div>
            详情：
            <a-avatar-group :max-count="2" :max-style="{ color: '#f56a00', backgroundColor: '#fde3cf' }">
                <a-avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2" />
                <a-avatar style="background-color: #1890ff">K</a-avatar>
                <a-tooltip title="Ant User" placement="top">
                    <a-avatar style="background-color: #87d068">
                        <template #icon><UserOutlined /></template>
                    </a-avatar>
                </a-tooltip>
                <a-avatar style="background-color: #1890ff">
                    <template #icon><AntDesignOutlined /></template>
                </a-avatar>
            </a-avatar-group>
            </div>

        </a-card>


</div>
    </div>
    <div style="width: 85vw;height: 300px;"></div>
    </div>
</template>

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

const activeKey = ref('1');
</script>