forked from wangjiadong/comp
parent
de2a695edc
commit
3b5b6deb4f
1 changed files with 209 additions and 5 deletions
@ -1,14 +1,218 @@ |
|||||||
<template> |
<template> |
||||||
<div> |
<div class="personage"> |
||||||
个人 |
<h1 class="title">机电学院比赛综合报告</h1> |
||||||
|
<p class="paragraph"> |
||||||
|
我是比赛综述:全面落实立德树人根本任务,依据CDIO工程教育理念,培养德、智、体、美、劳全面发展,掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向,能承担软件分析、设计、开发、项目管理等任务,具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好素养,能适应产业与社会变革的国际化应用型人。 |
||||||
|
</p> |
||||||
|
<a-row class="card-box" :gutter="[16, 16]" type="flex"> |
||||||
|
<a-col :xs="24" :md="12" :xl="6" v-for="i in 4" :key="i"> |
||||||
|
<div class="card"> |
||||||
|
<div class="inner"> |
||||||
|
<div class="container"> |
||||||
|
<div class="fl-box"> |
||||||
|
<div class="tit">参加的比赛数</div> |
||||||
|
<div class="center">88</div> |
||||||
|
<div class="info"> |
||||||
|
<div class="li">国赛:12</div> |
||||||
|
<div class="li">省赛:32</div> |
||||||
|
<div class="li">校赛:44</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<p> |
||||||
|
个人综合素质综述:全面落实立德树人根本任务,依据CDIO工程教育理念,培养德、智、体、美、劳全面发展,掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向,能承担软件分析、设计、开发、项目管理等任务,具备解决复杂工程问题的能力;具有终身学习和创新创业 |
||||||
|
</p> |
||||||
|
<img src="../../assets/images/card.png" alt=""> |
||||||
|
<p> |
||||||
|
个人综合素质综述:全面落实立德树人根本任务,依据CDIO工程教育理念,培养德、智、体、美、劳全面发展,掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向,能承担软件分析、设计、开发、项目管理等任务,具备解决复杂工程问题的能力;具有终身学习和创新创业 |
||||||
|
</p> |
||||||
|
<a-row class="card-box" :gutter="[50, 50]" type="flex"> |
||||||
|
<a-col :xs="24" :xl="10"> |
||||||
|
<div class="ec-box"> |
||||||
|
<div class="title-box"> |
||||||
|
<div class="tit">年度维度分析</div> |
||||||
|
</div> |
||||||
|
<randerChart></randerChart> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
<a-col :xs="24" :xl="14"> |
||||||
|
<cardList style="border: 1px solid #000;"></cardList> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
<img src="../../assets/images/card.png" alt=""> |
||||||
|
<p class="paragraph"> |
||||||
|
我是比赛参赛情况综述:全面落实立德树人根本任务,依据CDIO工程教育理念,培养德、智、体、美、劳全面发展,掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向,能承担软件分析、设计、开发、项目管理等任务,具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好素养,能适应产业与社会变革的国际化应用型人。 |
||||||
|
</p> |
||||||
|
<div class="table-box"> |
||||||
|
<table> |
||||||
|
<caption> |
||||||
|
个人比赛获奖情况 |
||||||
|
</caption> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th scope="col">获奖等级</th> |
||||||
|
<th scope="col">比赛名称</th> |
||||||
|
<th scope="col">项目名称</th> |
||||||
|
<th scope="col">所在小队</th> |
||||||
|
<th scope="col">积分</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
<tr> |
||||||
|
<th scope="row">一等奖</th> |
||||||
|
<td>全国计算机大赛</td> |
||||||
|
<td>项目一</td> |
||||||
|
<td>我是一个小队</td> |
||||||
|
<td>135</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<th scope="row">一等奖</th> |
||||||
|
<td>全国计算机大赛</td> |
||||||
|
<td>项目一</td> |
||||||
|
<td>我是一个小队</td> |
||||||
|
<td>135</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
|
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script lang='ts' setup> |
<script lang='ts' setup> |
||||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
import cardList from './components/cardList.vue'; |
||||||
|
import randerChart from './components/randerChart.vue'; |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang='scss' scoped> |
<style lang='less' scoped> |
||||||
|
.personage { |
||||||
|
padding: 0 100px 100px; |
||||||
|
|
||||||
|
&>* { |
||||||
|
margin: 50px 0; |
||||||
|
} |
||||||
|
|
||||||
|
&>img { |
||||||
|
margin: -50px 0; |
||||||
|
} |
||||||
|
|
||||||
|
&>.title { |
||||||
|
text-align: center; |
||||||
|
font-size: 35px; |
||||||
|
font-weight: bolder; |
||||||
|
} |
||||||
|
|
||||||
|
.paragraph { |
||||||
|
font-size: 16px; |
||||||
|
text-indent: 2em; |
||||||
|
} |
||||||
|
|
||||||
|
.card { |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
.inner { |
||||||
|
height: 0; |
||||||
|
padding-top: 30%; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.container { |
||||||
|
position: absolute; |
||||||
|
inset: 0; |
||||||
|
border-radius: 5px; |
||||||
|
border: 1px solid; |
||||||
|
line-height: 1; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.fl-box { |
||||||
|
height: 80%; |
||||||
|
margin: auto; |
||||||
|
margin-left: 25px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.tit { |
||||||
|
color: #a0a0a0; |
||||||
|
} |
||||||
|
|
||||||
|
.center { |
||||||
|
font-size: 30px; |
||||||
|
font-weight: bolder; |
||||||
|
} |
||||||
|
|
||||||
|
.info { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.ec-box { |
||||||
|
width: 100%; |
||||||
|
border-radius: 2px 2px 2px 2px; |
||||||
|
border: 1px solid #000; |
||||||
|
|
||||||
|
.title-box { |
||||||
|
height: 58px; |
||||||
|
border-radius: 2px 2px 0px 0px; |
||||||
|
box-shadow: 0px 1px 2px 0px #707070; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.tit { |
||||||
|
margin-left: 4%; |
||||||
|
height: 58px; |
||||||
|
line-height: 58px; |
||||||
|
font-size: 16px; |
||||||
|
color: rgba(0, 0, 0, 0.85); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.table-box { |
||||||
|
border: 1px solid; |
||||||
|
padding: 40px 20px; |
||||||
|
|
||||||
|
table { |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
caption { |
||||||
|
caption-side: top; |
||||||
|
padding-bottom: 20px; |
||||||
|
text-align: center; |
||||||
|
color: #000; |
||||||
|
font-size: 26px; |
||||||
|
} |
||||||
|
|
||||||
|
thead { |
||||||
|
text-align: left; |
||||||
|
color: rgb(160 160 160); |
||||||
|
} |
||||||
|
|
||||||
|
tr { |
||||||
|
text-align: left; |
||||||
|
border-bottom: 1px solid rgb(219, 216, 216); |
||||||
|
|
||||||
|
th, |
||||||
|
td { |
||||||
|
padding: 10px 0; |
||||||
|
} |
||||||
|
|
||||||
|
th:first-child { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
td:last-child { |
||||||
|
color: rgb(64, 51, 253); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
</style> |
</style> |
||||||
|
Loading…
Reference in new issue