103 lines
4.8 KiB
Vue
103 lines
4.8 KiB
Vue
<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> |