|
|
@ -1,13 +1,95 @@ |
|
|
|
<template> |
|
|
|
<div class="task-form">11111111111111</div> |
|
|
|
<div class="task-progress flex flex-wrap justify-between"> |
|
|
|
<div class="wrap overflow-hidden"> |
|
|
|
<a-card title="任务目标"> |
|
|
|
<div class="flex flex-wrap justify-center"> |
|
|
|
<div class="achievements border-right text-center"> |
|
|
|
<p class="num">1/6</p> |
|
|
|
<p class="name">论文</p> |
|
|
|
</div> |
|
|
|
<div class="achievements border-bottom text-center"> |
|
|
|
<p class="num">1/6</p> |
|
|
|
<p class="name">专利</p> |
|
|
|
</div> |
|
|
|
<div class="achievements border-top text-center"> |
|
|
|
<p class="num">1/6</p> |
|
|
|
<p class="name">软著</p> |
|
|
|
</div> |
|
|
|
<div class="achievements border-left text-center"> |
|
|
|
<p class="num">1/6</p> |
|
|
|
<p class="name">会议</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</a-card> |
|
|
|
</div> |
|
|
|
<div class="wrap overflow-hidden"> |
|
|
|
<a-card title="概览"> |
|
|
|
<div class="topic"> |
|
|
|
<p>脑卒中远程康复与健康监护系统</p> |
|
|
|
<a-progress |
|
|
|
:percent="30" |
|
|
|
:strokeWidth="22" |
|
|
|
:show-info="false" |
|
|
|
:stroke-color="'#1890FF'" |
|
|
|
:trail-color="'rgba(24, 144, 255, 0.2)'" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="sub-topic"> |
|
|
|
<div class="topic"> |
|
|
|
<p>穿戴式运动捕获单元</p> |
|
|
|
<a-progress |
|
|
|
:percent="30" |
|
|
|
:strokeWidth="22" |
|
|
|
:show-info="false" |
|
|
|
:stroke-color="colorList[0].color" |
|
|
|
:trail-color="colorList[0].bgColor" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="topic"> |
|
|
|
<p>穿戴式康复数据手套</p> |
|
|
|
<a-progress |
|
|
|
:percent="30" |
|
|
|
:strokeWidth="22" |
|
|
|
:show-info="false" |
|
|
|
:stroke-color="colorList[1].color" |
|
|
|
:trail-color="colorList[1].bgColor" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</a-card> |
|
|
|
</div> |
|
|
|
<div class="wrap overflow-hidden"> |
|
|
|
<a-card title="穿戴式运动捕获单元"> |
|
|
|
<p>card content</p> |
|
|
|
<p>card content</p> |
|
|
|
<p>card content</p> |
|
|
|
</a-card> |
|
|
|
</div> |
|
|
|
<div class="wrap overflow-hidden"> |
|
|
|
<a-card title="穿戴式康复数据手套"> |
|
|
|
<p>card content</p> |
|
|
|
<p>card content</p> |
|
|
|
<p>card content</p> |
|
|
|
</a-card> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
// import { computed, watch, ref } from 'vue'; |
|
|
|
import { ref } from 'vue'; |
|
|
|
|
|
|
|
// import { useStore } from 'vuex'; |
|
|
|
|
|
|
|
// const store = useStore(); |
|
|
|
|
|
|
|
const colorList = ref([ |
|
|
|
{ color: '#FF9191', bgColor: 'rgba(255, 145, 145, 0.2)' }, |
|
|
|
{ color: '#FF934B', bgColor: 'rgba(255, 147, 75, 0.2)' }, |
|
|
|
]); |
|
|
|
|
|
|
|
// const signInFormRef = ref(null); |
|
|
|
// const signInForm = ref({ |
|
|
|
// username: '', |
|
|
@ -32,4 +114,70 @@ |
|
|
|
// }); |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped></style> |
|
|
|
<style scoped> |
|
|
|
.wrap { |
|
|
|
margin-top: 16px; |
|
|
|
width: calc((100% - 16px) / 2); |
|
|
|
background-color: #fff; |
|
|
|
border-radius: 10px; |
|
|
|
border: 1px solid #cccccc; |
|
|
|
} |
|
|
|
|
|
|
|
.wrap:nth-child(-n + 2) { |
|
|
|
margin-top: 0; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.ant-card-head) { |
|
|
|
padding: 0 16px; |
|
|
|
min-height: 45px; |
|
|
|
max-height: 45px; |
|
|
|
border-color: #cccccc; |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.ant-card-head-title) { |
|
|
|
padding: 0; |
|
|
|
line-height: 45px; |
|
|
|
} |
|
|
|
|
|
|
|
.wrap .num { |
|
|
|
font-size: 22px; |
|
|
|
color: #4b8aff; |
|
|
|
} |
|
|
|
|
|
|
|
.wrap .name { |
|
|
|
color: #666666; |
|
|
|
} |
|
|
|
|
|
|
|
.wrap p { |
|
|
|
margin: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.border-right { |
|
|
|
border-right: 1px solid #cccccc; |
|
|
|
margin-right: -1px; |
|
|
|
} |
|
|
|
|
|
|
|
.border-left { |
|
|
|
border-left: 1px solid #cccccc; |
|
|
|
} |
|
|
|
|
|
|
|
.border-top { |
|
|
|
border-top: 1px solid #cccccc; |
|
|
|
margin-top: -1px; |
|
|
|
} |
|
|
|
|
|
|
|
.border-bottom { |
|
|
|
border-bottom: 1px solid #cccccc; |
|
|
|
} |
|
|
|
|
|
|
|
.achievements { |
|
|
|
width: 40%; |
|
|
|
padding: 25px 0; |
|
|
|
} |
|
|
|
|
|
|
|
.topic p { |
|
|
|
margin-bottom: 8px; |
|
|
|
color: #666666; |
|
|
|
} |
|
|
|
</style> |
|
|
|