forked from wangjiadong/comp
Merge branch 'main' of http://182.92.169.222:3000/zhc077/hnjd_comp
significative
5 months ago
commit
838ee2836a
7 changed files with 1000 additions and 39 deletions
@ -0,0 +1,150 @@ |
|||||||
|
<template> |
||||||
|
<div class="foo_card7"> |
||||||
|
<div class="title"> 比赛获奖情况<SvgIcon class="icon" @click="unfold" name="zhedie" /></div> |
||||||
|
|
||||||
|
<div class="table"> |
||||||
|
<div class="t_item t_head"> |
||||||
|
<div class="name">获奖等级</div> |
||||||
|
<div class="total">项目名称</div> |
||||||
|
<div class="total">所在小队</div> |
||||||
|
<div class="operate">积分</div> |
||||||
|
</div> |
||||||
|
<div class="t_item t_con" v-for="(i) in 20" :key="i"> |
||||||
|
<div class="name">一等奖</div> |
||||||
|
<div class="total">项目一</div> |
||||||
|
<div class="total">一路向北</div> |
||||||
|
<div class="operate">121</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import { SvgIcon } from '/@/components/Icon'; |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
data: { |
||||||
|
type: Array, |
||||||
|
|
||||||
|
}, |
||||||
|
}); |
||||||
|
let falg = false; |
||||||
|
const unfold = () => { |
||||||
|
const dom: any = document.querySelector('.foo_card7') as Element; |
||||||
|
falg = !falg; |
||||||
|
if (falg) { |
||||||
|
dom.style.height = 'auto'; |
||||||
|
} else { |
||||||
|
dom.style.height = '500px'; |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.foo_card7 { |
||||||
|
width: 100%; |
||||||
|
height: 500px; |
||||||
|
overflow: auto; |
||||||
|
background: #ffffff; |
||||||
|
// box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
// border-radius: 6px 6px 6px 6px; |
||||||
|
|
||||||
|
.title { |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
|
padding-left: 23px; |
||||||
|
height: 57px; |
||||||
|
line-height: 57px; |
||||||
|
font-size: 16px; |
||||||
|
color: rgba(0, 0, 0, 0.85); |
||||||
|
position: relative; |
||||||
|
.icon { |
||||||
|
position: absolute; |
||||||
|
right: 20px; |
||||||
|
top: 20px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
&::before { |
||||||
|
content: ''; |
||||||
|
display: block; |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
height: 1px; |
||||||
|
background-color: rgba(5, 5, 5, 0.06); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.table { |
||||||
|
width: 100%; |
||||||
|
padding-left: 32px; |
||||||
|
|
||||||
|
.t_item { |
||||||
|
height: 54px; |
||||||
|
border-bottom: 1px solid #e7e7e7; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
.ranking { |
||||||
|
width: 80px; |
||||||
|
} |
||||||
|
|
||||||
|
.name { |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.total { |
||||||
|
width: 74px; |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.operate { |
||||||
|
width: 80px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.t_head { |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.4); |
||||||
|
} |
||||||
|
|
||||||
|
.t_con { |
||||||
|
.ranking { |
||||||
|
.ol { |
||||||
|
width: 24px; |
||||||
|
height: 24px; |
||||||
|
background: #e7e7e7; |
||||||
|
color: rgba(0, 0, 0, 0.9); |
||||||
|
font-size: 14px; |
||||||
|
line-height: 24px; |
||||||
|
text-align: center; |
||||||
|
border-radius: 50%; |
||||||
|
|
||||||
|
&.ac { |
||||||
|
background: #0052d9; |
||||||
|
color: rgba(255, 255, 255, 0.9); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.name { |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.9); |
||||||
|
} |
||||||
|
|
||||||
|
.total { |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.9); |
||||||
|
} |
||||||
|
|
||||||
|
.operate { |
||||||
|
font-size: 14px; |
||||||
|
color: #0052d9; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,148 @@ |
|||||||
|
<template> |
||||||
|
<div class="foo_card8"> |
||||||
|
<div class="title"> 比赛获奖情况<SvgIcon class="icon" @click="unfold" name="zhedie" /></div> |
||||||
|
|
||||||
|
<div class="table"> |
||||||
|
<div class="t_item t_head"> |
||||||
|
<div class="name">部门名称</div> |
||||||
|
<div class="total">参赛人数</div> |
||||||
|
<div class="operate">队伍量</div> |
||||||
|
</div> |
||||||
|
<div class="t_item t_con" v-for="(i) in 20" :key="i"> |
||||||
|
<div class="name">机电学院</div> |
||||||
|
<div class="total">2121</div> |
||||||
|
<div class="operate">121</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import { SvgIcon } from '/@/components/Icon'; |
||||||
|
|
||||||
|
const props = defineProps({ |
||||||
|
data: { |
||||||
|
type: Array, |
||||||
|
|
||||||
|
}, |
||||||
|
}); |
||||||
|
let falg = false; |
||||||
|
const unfold = () => { |
||||||
|
const dom: any = document.querySelector('.foo_card8') as Element; |
||||||
|
falg = !falg; |
||||||
|
if (falg) { |
||||||
|
dom.style.height = 'auto'; |
||||||
|
} else { |
||||||
|
dom.style.height = '500px'; |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.foo_card8 { |
||||||
|
width: 100%; |
||||||
|
height: 500px; |
||||||
|
overflow: auto; |
||||||
|
background: #ffffff; |
||||||
|
// box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
// border-radius: 6px 6px 6px 6px; |
||||||
|
|
||||||
|
.title { |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
|
padding-left: 23px; |
||||||
|
height: 57px; |
||||||
|
line-height: 57px; |
||||||
|
font-size: 16px; |
||||||
|
color: rgba(0, 0, 0, 0.85); |
||||||
|
position: relative; |
||||||
|
.icon { |
||||||
|
position: absolute; |
||||||
|
right: 20px; |
||||||
|
top: 20px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
&::before { |
||||||
|
content: ''; |
||||||
|
display: block; |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
height: 1px; |
||||||
|
background-color: rgba(5, 5, 5, 0.06); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.table { |
||||||
|
width: 100%; |
||||||
|
padding-left: 32px; |
||||||
|
|
||||||
|
.t_item { |
||||||
|
height: 54px; |
||||||
|
border-bottom: 1px solid #e7e7e7; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
.ranking { |
||||||
|
width: 80px; |
||||||
|
} |
||||||
|
|
||||||
|
.name { |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.total { |
||||||
|
width: 74px; |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.operate { |
||||||
|
width: 80px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.t_head { |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.4); |
||||||
|
} |
||||||
|
|
||||||
|
.t_con { |
||||||
|
.ranking { |
||||||
|
.ol { |
||||||
|
width: 24px; |
||||||
|
height: 24px; |
||||||
|
background: #e7e7e7; |
||||||
|
color: rgba(0, 0, 0, 0.9); |
||||||
|
font-size: 14px; |
||||||
|
line-height: 24px; |
||||||
|
text-align: center; |
||||||
|
border-radius: 50%; |
||||||
|
|
||||||
|
&.ac { |
||||||
|
background: #0052d9; |
||||||
|
color: rgba(255, 255, 255, 0.9); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.name { |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.9); |
||||||
|
} |
||||||
|
|
||||||
|
.total { |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.9); |
||||||
|
} |
||||||
|
|
||||||
|
.operate { |
||||||
|
font-size: 14px; |
||||||
|
color: #0052d9; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,82 @@ |
|||||||
|
<template> |
||||||
|
<div id="ec_bar" ref="ec_bar"></div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script lang="ts" setup> |
||||||
|
import echarts from '/@/utils/lib/echarts'; |
||||||
|
|
||||||
|
import { onMounted} from 'vue'; |
||||||
|
onMounted(() => { |
||||||
|
const myChart = echarts.init(document.getElementById('ec_bar')) |
||||||
|
const option = { |
||||||
|
tooltip: { |
||||||
|
trigger: 'axis', // 触发类型为坐标轴触发 |
||||||
|
axisPointer: { |
||||||
|
type: 'line', |
||||||
|
label: { |
||||||
|
backgroundColor: '#6a7985' // 自定义交叉线标签的背景色 |
||||||
|
} |
||||||
|
}, |
||||||
|
formatter: function (params) { |
||||||
|
let result = '<div class="bar_card">'; |
||||||
|
result += `<div class="title">维度名称</div>` |
||||||
|
params.forEach(param => { |
||||||
|
result += `<div class="item" style="color: ${param.color};"> |
||||||
|
${param.seriesName}年 ${param.value} |
||||||
|
</div>`; |
||||||
|
}); |
||||||
|
result += '</div>'; |
||||||
|
return result; |
||||||
|
} |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
left: '0%', |
||||||
|
right: '0%', |
||||||
|
top: '5%', |
||||||
|
bottom: '50px', |
||||||
|
// 如果需要，还可以设置containLabel来控制坐标轴标签是否完全包含在grid区域内 |
||||||
|
containLabel: true |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
data: ['2023', '2024'], |
||||||
|
bottom: '20px', |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
data: ['维度一', '维度一', '维度一', '维度一', '维度一', '维度一', '维度一'] |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
type: 'value', |
||||||
|
min: 0, |
||||||
|
max: 100, |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: '2023', |
||||||
|
type: 'bar', |
||||||
|
data: [33, 44, 58, 85, 47, 38, 45], |
||||||
|
barWidth: '20px', |
||||||
|
itemStyle: { |
||||||
|
color: '#0052D9', |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '2024', |
||||||
|
type: 'bar', |
||||||
|
data: [36, 34, 48, 62, 43, 30, 37], |
||||||
|
barWidth: '20px', |
||||||
|
itemStyle: { |
||||||
|
color: '#699EF5', |
||||||
|
} |
||||||
|
}, |
||||||
|
] |
||||||
|
} |
||||||
|
myChart.setOption(option) |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
#ec_bar{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,14 +1,315 @@ |
|||||||
<template> |
<template> |
||||||
<div> |
<div class="container"> |
||||||
部门 |
<div class="title">河南机电学院比赛综合报告</div> |
||||||
|
<p class="description" |
||||||
|
>我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p |
||||||
|
> |
||||||
|
<div class="card-content"> |
||||||
|
<div class="item" v-for="item in 4" :key="item"> |
||||||
|
<div class="top-title">本年度已开展比赛数</div> |
||||||
|
<div class="sum">88</div> |
||||||
|
<div class="content"> |
||||||
|
<div>国赛：12</div> |
||||||
|
<div>国赛：12</div> |
||||||
|
<div>国赛：12</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<cardTitle title="比赛学生综合能力评价分析" /> |
||||||
|
<p class="description" |
||||||
|
>我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p |
||||||
|
> |
||||||
|
<div class="year-content"> |
||||||
|
<div class="year-content-top"> |
||||||
|
<div class="left border-000"> |
||||||
|
<div class="border-title">年度维度分析</div> |
||||||
|
<randerChart /> |
||||||
|
</div> |
||||||
|
<div class="right border-000"> |
||||||
|
<cardList /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="zhuzhuangtu border-000"> |
||||||
|
<a-tabs v-model:activeKey="activeKey"> |
||||||
|
<a-tab-pane key="1" tab="全校近两年维度积分"> |
||||||
|
<div class="zhuzhuangtu-box"> |
||||||
|
<div class="left"> |
||||||
|
<pillarChart /> |
||||||
|
</div> |
||||||
|
<div class="right"> |
||||||
|
<div class="content-left"> |
||||||
|
<div class="item" v-for="(item, index) in indicator.slice(0, 6)" :key="index"> |
||||||
|
<div class="sort" :class="index < 3 ? 'active' : ''">{{ index + 1 }}</div> |
||||||
|
<div class="text">{{ item.text }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="content-right"> |
||||||
|
<div class="item" v-for="(item, index) in indicator.slice(-6)" :key="index"> |
||||||
|
<div class="sort">{{ index + 1 }}</div> |
||||||
|
<div class="text">{{ item.text }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</a-tab-pane> |
||||||
|
</a-tabs> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<cardTitle title="比赛学生参赛情况分析" /> |
||||||
|
<p class="description" |
||||||
|
>我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p |
||||||
|
> |
||||||
|
<div class="participation-status-content"> |
||||||
|
<div class="right border-000"> |
||||||
|
<cardList2 /> |
||||||
|
</div> |
||||||
|
<div class="left border-000"> |
||||||
|
<!-- <div class="border-title">年度维度分析</div> --> |
||||||
|
<cakeChart /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<cardTitle title="比赛学生获奖情况分析" /> |
||||||
|
<p class="description" |
||||||
|
>我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p |
||||||
|
> |
||||||
|
<div class="participation-status-content"> |
||||||
|
<div class="right border-000"> |
||||||
|
<cardList3 /> |
||||||
|
</div> |
||||||
|
<div class="left border-000"> |
||||||
|
<!-- <div class="border-title">年度维度分析</div> --> |
||||||
|
<ringChart /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<cardTitle title="部门参赛情况分析" /> |
||||||
|
<p class="description" |
||||||
|
>我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p |
||||||
|
> |
||||||
|
<div class="participation-status-content"> |
||||||
|
<div class="right border-000"> |
||||||
|
<cardList7 /> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="footer border-000"> |
||||||
|
<cardList6 /> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script lang='ts' setup> |
<script lang="ts" setup> |
||||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
import cardTitle from './components/cardTitle.vue'; |
||||||
|
import cardList from './components/cardList.vue'; |
||||||
|
import cardList2 from './components/cardList2.vue'; |
||||||
|
import cardList3 from './components/cardList3.vue'; |
||||||
|
import cardList7 from './components/cardList8.vue'; |
||||||
|
import cardList6 from './components/cardList6.vue'; |
||||||
|
|
||||||
|
import randerChart from './components/randerChart.vue'; |
||||||
|
import cakeChart from './components/cakeChart.vue'; |
||||||
|
import ringChart from './components/ringChart.vue'; |
||||||
|
import pillarChart from './components/pillarChart.vue'; |
||||||
|
import { ref } from 'vue'; |
||||||
|
const activeKey = ref('1'); |
||||||
|
var indicator = [ |
||||||
|
{ |
||||||
|
text: '前言探索', |
||||||
|
max: 6000, |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: '奠定基础', |
||||||
|
max: 5000, |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: '知识分析', |
||||||
|
max: 5000, |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: '社会责任', |
||||||
|
max: 5000, |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: '独立思考', |
||||||
|
max: 5500, |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: '拓宽视野', |
||||||
|
max: 5000, |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: '激发兴趣', |
||||||
|
max: 5000, |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: '沟通协调', |
||||||
|
max: 5000, |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: '设计开发', |
||||||
|
max: 5000, |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: '研判分析', |
||||||
|
max: 5000, |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: '创新能力', |
||||||
|
max: 5000, |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: '团队协作', |
||||||
|
max: 5000, |
||||||
|
}, |
||||||
|
]; |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang='scss' scoped> |
<style lang="less" scoped> |
||||||
|
.container { |
||||||
|
width: 1200px; |
||||||
|
margin: 0 auto; |
||||||
|
// height: 100vh; |
||||||
|
padding-bottom: 30px; |
||||||
|
.title { |
||||||
|
width: 100%; |
||||||
|
font-size: 36px; |
||||||
|
text-align: center; |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
.description { |
||||||
|
text-indent: 2em; |
||||||
|
margin: 30px 0; |
||||||
|
} |
||||||
|
.card-content { |
||||||
|
display: flex; |
||||||
|
.item { |
||||||
|
width: 25%; |
||||||
|
height: 150px; |
||||||
|
border: 1px solid #000; |
||||||
|
margin-right: 10px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
padding: 10px 15px; |
||||||
|
.top-title { |
||||||
|
font-size: 12px; |
||||||
|
color: #aaa; |
||||||
|
} |
||||||
|
.sum { |
||||||
|
font-size: 36px; |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
.content { |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
font-size: 12px; |
||||||
|
color: #999; |
||||||
|
} |
||||||
|
} |
||||||
|
.item:nth-child(4) { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
.year-content { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
|
||||||
|
.year-content-top { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
.left { |
||||||
|
width: 500px; |
||||||
|
height: 500px; |
||||||
|
} |
||||||
|
.right { |
||||||
|
flex: 1; |
||||||
|
height: auto; |
||||||
|
margin-left: 50px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.zhuzhuangtu { |
||||||
|
.zhuzhuangtu-box { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
width: 100%; |
||||||
|
margin: 30px 0; |
||||||
|
min-height: 400px; |
||||||
|
padding: 0 20px; |
||||||
|
|
||||||
|
.left { |
||||||
|
width: 70%; |
||||||
|
height: 400px; |
||||||
|
} |
||||||
|
.right { |
||||||
|
width: 30%; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
.content-left, |
||||||
|
.content-right { |
||||||
|
padding-left: 40px; |
||||||
|
width: 100%; |
||||||
|
.item { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
height: 30px; |
||||||
|
margin: 10px 0; |
||||||
|
.sort { |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
border-radius: 50%; |
||||||
|
background-color: #f6f6f6; |
||||||
|
text-align: center; |
||||||
|
line-height: 20px; |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
.active { |
||||||
|
color: #fff; |
||||||
|
background-color: #32485a; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.right > div { |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
.participation-status-content { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
.left { |
||||||
|
width: 500px; |
||||||
|
height: 500px; |
||||||
|
margin-left: 50px; |
||||||
|
} |
||||||
|
.right { |
||||||
|
flex: 1; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
.footer { |
||||||
|
width: 100%; |
||||||
|
margin: 30px 0; |
||||||
|
} |
||||||
|
} |
||||||
|
.border-000 { |
||||||
|
border: 1px solid #000; |
||||||
|
} |
||||||
|
.border-title { |
||||||
|
width: 100%; |
||||||
|
border-bottom: 1px solid #000; |
||||||
|
height: 50px; |
||||||
|
line-height: 50px; |
||||||
|
font-size: 14px; |
||||||
|
padding: 0 20px; |
||||||
|
} |
||||||
</style> |
</style> |
||||||
|
|||||||
@ -1,14 +1,159 @@ |
|||||||
<template> |
<template> |
||||||
<div> |
<div class="container"> |
||||||
组委会 |
<div class="title">河南机电学院比赛综组委会报告</div> |
||||||
|
<p class="description" |
||||||
|
>我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p |
||||||
|
> |
||||||
|
<div class="card-content"> |
||||||
|
<div class="item" v-for="(item,index) in 4" :key="item"> |
||||||
|
<div class="top-title">{{ formatTitle(index) }}</div> |
||||||
|
<div class="sum">{{ index === 0 ? '第八届': '88' }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<cardTitle title="参赛学生综合能力评价分析" /> |
||||||
|
<p class="description" |
||||||
|
>我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p |
||||||
|
> |
||||||
|
<div class="year-content"> |
||||||
|
<div class="left border-000"> |
||||||
|
<div class="border-title">年度维度分析</div> |
||||||
|
<randerChart /> |
||||||
|
</div> |
||||||
|
<div class="right border-000"> |
||||||
|
<cardList /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<cardTitle title="比赛学生获奖情况分析" /> |
||||||
|
<p class="description" |
||||||
|
>我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p |
||||||
|
> |
||||||
|
<div class="participation-status-content"> |
||||||
|
<div class="right border-000"> |
||||||
|
<cardList7 /> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
<cardTitle title="部门参赛情况分析" /> |
||||||
|
<p class="description" |
||||||
|
>我是比赛综述:全面落实立德树人根本任务，依据CDI0工程教育理念，培养德、智、体、美、劳全面发展，掌握软件工程专业所需的数学与自然科学基础知识、专业基础理论知识;在企业级软件开发和工业智能软件开发方向，能承担软件分析、设计、开发、项目管理等任务，具备解决复杂工程问题的能力;具有终身学习和创新创业意识、国际交流能力、团队合作精神等良好案养，能适应产业与社会变革的国阿化应用型人才。<br />本专业毕业生经过五年左右的实际工作，能够达到以下目标:</p |
||||||
|
> |
||||||
|
<div class="participation-status-content"> |
||||||
|
<div class="right border-000"> |
||||||
|
<cardList8 /> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script lang='ts' setup> |
<script lang="ts" setup> |
||||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
import cardTitle from './components/cardTitle.vue'; |
||||||
|
import cardList from './components/cardList.vue'; |
||||||
|
import cardList7 from './components/cardList7.vue'; |
||||||
|
import cardList8 from './components/cardList8.vue'; |
||||||
|
import randerChart from './components/randerChart.vue'; |
||||||
|
|
||||||
|
// import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
||||||
|
const formatTitle = (index:number) => { |
||||||
|
const arr:any = ['当前届数','参赛人数','参赛队伍数','比赛项目数'] |
||||||
|
return arr[index] |
||||||
|
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style lang='scss' scoped> |
<style lang="less" scoped> |
||||||
|
.container { |
||||||
|
width: 1200px; |
||||||
|
margin: 0 auto; |
||||||
|
// height: 100vh; |
||||||
|
padding-bottom: 30px; |
||||||
|
.title { |
||||||
|
width: 100%; |
||||||
|
font-size: 36px; |
||||||
|
text-align: center; |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
.description { |
||||||
|
text-indent: 2em; |
||||||
|
margin: 30px 0; |
||||||
|
} |
||||||
|
.card-content { |
||||||
|
display: flex; |
||||||
|
.item { |
||||||
|
width: 25%; |
||||||
|
height: 100px; |
||||||
|
border: 1px solid #000; |
||||||
|
margin-right: 10px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
padding: 10px 15px; |
||||||
|
.top-title { |
||||||
|
font-size: 12px; |
||||||
|
color: #aaa; |
||||||
|
} |
||||||
|
.sum { |
||||||
|
font-size: 36px; |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
.content { |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
font-size: 12px; |
||||||
|
color: #999; |
||||||
|
} |
||||||
|
} |
||||||
|
.item:nth-child(4) { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
.year-content { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
.left { |
||||||
|
width: 500px; |
||||||
|
height: 500px; |
||||||
|
} |
||||||
|
.right { |
||||||
|
flex: 1; |
||||||
|
height: auto; |
||||||
|
margin-left: 50px; |
||||||
|
} |
||||||
|
} |
||||||
|
.participation-status-content { |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
.left { |
||||||
|
width: 500px; |
||||||
|
height: 500px; |
||||||
|
margin-left: 50px; |
||||||
|
} |
||||||
|
.right { |
||||||
|
flex: 1; |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
.footer{ |
||||||
|
width: 100%; |
||||||
|
margin: 30px 0; |
||||||
|
} |
||||||
|
} |
||||||
|
.border-000 { |
||||||
|
border: 1px solid #000; |
||||||
|
} |
||||||
|
.border-title { |
||||||
|
width: 100%; |
||||||
|
border-bottom: 1px solid #000; |
||||||
|
height: 50px; |
||||||
|
line-height: 50px; |
||||||
|
font-size: 14px; |
||||||
|
padding: 0 20px; |
||||||
|
} |
||||||
</style> |
</style> |
||||||
|
|
||||||
Loading…
Reference in new issue