喻忠伟 4 months ago
commit 8fd3ae7e52
  1. 218
      jeecgboot-vue3-master/src/views/comprehensiveEvaluation/individual.vue

@ -1,14 +1,222 @@
<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 class="paragraph">
个人综合素质综述全面落实立德树人根本任务依据CDIO工程教育理念培养德劳全面发展掌握软件工程专业所需的数学与自然科学基础知识专业基础理论知识在企业级软件开发和工业智能软件开发方向能承担软件分析设计开发项目管理等任务具备解决复杂工程问题的能力具有终身学习和创新创业意识国际交流能力团队合作精神等良好素养能适应产业与社会变革的国际化应用型人
</p>
<img src="../../assets/images/card.png" alt="">
<a-row class="card-box" :gutter="[50, 50]" type="flex">
<a-col :xs="24" :xl="12">
<p class="paragraph">
个人综合素质综述全面落实立德树人根本任务依据CDIO工程教育理念培养德劳全面发展掌握软件工程专业所需的数学与自然科学基础知识专业基础理论知识在企业级软件开发和工业智能软件开发方向能承担软件分析设计开发项目管理等任务具备解决复杂工程问题的能力具有终身学习和创新创业意识国际交流能力团队合作精神等良好素养能适应产业与社会变革的国际化应用型人
</p>
</a-col>
<a-col :xs="24" :xl="12">
<div class="ec-box">
<div class="title-box">
<div class="tit">年度维度分析</div>
</div>
<randerChart></randerChart>
</div>
</a-col>
</a-row>
<cardList style="border: 1px solid #000;"></cardList>
<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 18.6vw 60px;
width: 100%;
margin: auto;
&>* {
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: 40%;
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…
Cancel
Save