|
|
|
@ -1,48 +1,39 @@ |
|
|
|
|
<template> |
|
|
|
|
<div class="foo_card8"> |
|
|
|
|
<div class="title"> 比赛获奖情况<div class="log-btn" @click="unfold"><SvgIcon class="icon" name="zhedie" /></div |
|
|
|
|
></div> |
|
|
|
|
<div class="foo_card"> |
|
|
|
|
<!-- <div class="title"> 部门学生积分排名 </div> --> |
|
|
|
|
|
|
|
|
|
<div class="table"> |
|
|
|
|
<div class="t_item t_head"> |
|
|
|
|
<div class="name">部门名称</div> |
|
|
|
|
<div class="total">参赛人数</div> |
|
|
|
|
<div class="operate">队伍量</div> |
|
|
|
|
<div class="ranking">排名</div> |
|
|
|
|
<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 class="t_item t_con" v-for="(i,index) in props.data" :key="index"> |
|
|
|
|
<div class="ranking"> |
|
|
|
|
<div class="ol" :class="{ ac: index <= 3 }">{{ i.pm}}</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="name">{{ i.csyxname }}</div> |
|
|
|
|
<div class="operate">{{ i.bms }}</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
|
import { SvgIcon } from '/@/components/Icon'; |
|
|
|
|
|
|
|
|
|
const props = defineProps({ |
|
|
|
|
data: { |
|
|
|
|
type: Array, |
|
|
|
|
|
|
|
|
|
default: [], |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
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 { |
|
|
|
|
.foo_card { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 500px; |
|
|
|
|
height: calc(502px - 58px); |
|
|
|
|
overflow: auto; |
|
|
|
|
background: #ffffff; |
|
|
|
|
// box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
|
|
|
@ -50,19 +41,12 @@ |
|
|
|
|
|
|
|
|
|
.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: ''; |
|
|
|
|