forked from wangjiadong/comp
significative
4 months ago
parent
5e36c62ee0
commit
ae45422c62
3 changed files with 454 additions and 41 deletions
@ -0,0 +1,366 @@ |
|||||||
|
<template> |
||||||
|
<div class="expert"> |
||||||
|
<a-row :gutter="[16, 16]" type="flex" justify="space-between"> |
||||||
|
<a-col :md="24" :xl="12"> |
||||||
|
<a-row :gutter="[16, 16]" type="flex" justify="space-between"> |
||||||
|
<a-col :span="12"> |
||||||
|
<div class="card"> |
||||||
|
<div class="top"> |
||||||
|
<div class="text"> |
||||||
|
历史参与评分的年度比赛项目数 |
||||||
|
</div> |
||||||
|
<Icon icon="mainHome-time|svg" :size="20" /> |
||||||
|
</div> |
||||||
|
<div class="center"> |
||||||
|
<div class="text"> |
||||||
|
{{ data.lsndbsxmNumber }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="bottom"> |
||||||
|
<div class="bot_card">国赛：{{ data.gjjls }}</div> |
||||||
|
<div class="bot_card">省赛：{{ data.shengjls }}</div> |
||||||
|
<div class="bot_card">市赛：{{ data.shijls }}</div> |
||||||
|
<div class="bot_card">校赛：{{ data.xjls }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
<a-col :span="12"> |
||||||
|
<div class="card"> |
||||||
|
<div class="top"> |
||||||
|
<div class="text"> |
||||||
|
正在参与评分的年度比赛项目数 |
||||||
|
</div> |
||||||
|
<Icon icon="mainHome-time|svg" :size="20" /> |
||||||
|
</div> |
||||||
|
<div class="center"> |
||||||
|
<div class="text"> |
||||||
|
{{ data.jxzndbsxmNumber }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="bottom"> |
||||||
|
<div class="bot_card">国赛：{{ data.gjj }}</div> |
||||||
|
<div class="bot_card">省赛：{{ data.shengj }}</div> |
||||||
|
<div class="bot_card">市赛：{{ data.shij }}</div> |
||||||
|
<div class="bot_card">校赛：{{ data.xj }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
<a-row style="margin-top: 8px;width: 100%;"> |
||||||
|
<a-col :span="24"> |
||||||
|
<div class="foo_card"> |
||||||
|
<div class="title"> |
||||||
|
正在参与评分的年度比赛 |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="table"> |
||||||
|
<div class="t_item t_head"> |
||||||
|
<div class="ranking">序号</div> |
||||||
|
<div class="name">年度比赛名称</div> |
||||||
|
<div class="newp">年度比赛项目</div> |
||||||
|
<!-- <div class="total">比赛状态</div> |
||||||
|
<div class="operate">操作</div> --> |
||||||
|
</div> |
||||||
|
<div class="t_item t_con" v-for="o, i in data.jxzndbsxmList" :key="i"> |
||||||
|
<div class="ranking"> |
||||||
|
<div class="ol">{{ o.xh }}</div> |
||||||
|
</div> |
||||||
|
<div class="name">{{ o.ndbs }}</div> |
||||||
|
<div class="newp">{{ o.ndbsxm }}</div> |
||||||
|
<!-- <div class="total">已完赛</div> |
||||||
|
<div class="operate">详情</div> --> |
||||||
|
</div> |
||||||
|
<a-empty v-if="!data.lsndbsxmList.length" style="margin-top: 20px;"/> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</a-row> |
||||||
|
|
||||||
|
|
||||||
|
</a-col> |
||||||
|
<a-col :md="24" :xl="12"> |
||||||
|
<div class="foo_card"> |
||||||
|
<div class="title"> |
||||||
|
历史参与评分的年度比赛 |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="table"> |
||||||
|
<div class="t_item t_head"> |
||||||
|
<div class="ranking">序号</div> |
||||||
|
<div class="name">年度比赛名称</div> |
||||||
|
<div class="newp">年度比赛项目</div> |
||||||
|
<!-- <div class="total">比赛状态</div> |
||||||
|
<div class="operate">操作</div> --> |
||||||
|
</div> |
||||||
|
<div class="t_item t_con" v-for="o, i in data.lsndbsxmList" :key="i"> |
||||||
|
<div class="ranking"> |
||||||
|
<div class="ol">{{ o.xh }}</div> |
||||||
|
</div> |
||||||
|
<div class="name">{{ o.ndbs }}</div> |
||||||
|
<div class="newp">{{ o.ndbsxm }}</div> |
||||||
|
<!-- <div class="total">已完赛</div> |
||||||
|
<div class="operate">详情</div> --> |
||||||
|
</div> |
||||||
|
<a-empty v-if="!data.lsndbsxmList.length" style="margin-top: 50px;"/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- 带评分 --> |
||||||
|
<!-- <div class="tape-score foo_card"> |
||||||
|
<div class="title"> |
||||||
|
正在参与评分的年度比赛 |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="table"> |
||||||
|
<div class="t_item t_con" v-for="i in 6" :key="i"> |
||||||
|
<div class="name">金话筒主持人大赛</div> |
||||||
|
<div class="total">已完赛</div> |
||||||
|
<div class="operate">详情</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> --> |
||||||
|
</a-col> |
||||||
|
</a-row> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
|
||||||
|
<script setup lang="ts"> |
||||||
|
import { getZjsybsjs } from '/@/api/demo/depart'; |
||||||
|
import { Empty as AEmpty } from 'ant-design-vue'; |
||||||
|
|
||||||
|
import { ref } from 'vue' |
||||||
|
// key: 'jxzndbsxmNumber'|'jxzndbsxmList'|'lsndbsxmNumber'|'lsndbsxmList' |
||||||
|
const data = ref({ |
||||||
|
jxzndbsxmNumber: '', |
||||||
|
jxzndbsxmList: [ |
||||||
|
{ |
||||||
|
xh: '', |
||||||
|
ndbs: '', |
||||||
|
ndbsxm: '' |
||||||
|
} |
||||||
|
], |
||||||
|
lsndbsxmNumber: '', |
||||||
|
lsndbsxmList: [ |
||||||
|
{ |
||||||
|
xh: '', |
||||||
|
ndbs: '', |
||||||
|
ndbsxm: '' |
||||||
|
} |
||||||
|
], |
||||||
|
gjj: '', |
||||||
|
shengj: '', |
||||||
|
shij: '', |
||||||
|
xj: '', |
||||||
|
gjjls: '', |
||||||
|
shengjls: '', |
||||||
|
shijls: '', |
||||||
|
xjls: '' |
||||||
|
}) |
||||||
|
getZjsybsjs().then(res => { |
||||||
|
Object.assign(data.value, res) |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="less" scoped> |
||||||
|
.expert { |
||||||
|
padding-top: 16px; |
||||||
|
padding-left: 16px; |
||||||
|
|
||||||
|
.card { |
||||||
|
width: 100%; |
||||||
|
width: 100%; |
||||||
|
height: 182px; |
||||||
|
background: #FFFFFF; |
||||||
|
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03); |
||||||
|
border-radius: 4px 4px 4px 4px; |
||||||
|
padding: 20px 24px 0; |
||||||
|
|
||||||
|
.top { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.text { |
||||||
|
height: 22px; |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(0, 0, 0, 0.45); |
||||||
|
line-height: 22px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.center { |
||||||
|
margin-top: 4px; |
||||||
|
width: 357px; |
||||||
|
height: 78px; |
||||||
|
border-radius: 0px 0px 0px 0px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.text { |
||||||
|
height: 38px; |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 48px; |
||||||
|
color: rgba(51, 51, 51, 0.88); |
||||||
|
line-height: 38px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.bottom { |
||||||
|
margin-top: 18px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.bot_card { |
||||||
|
width: 91px; |
||||||
|
height: 22px; |
||||||
|
font-family: Inter, Inter; |
||||||
|
font-weight: 400; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(51, 51, 51, 0.88); |
||||||
|
line-height: 22px; |
||||||
|
text-align: left; |
||||||
|
font-style: normal; |
||||||
|
text-transform: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.foo_card { |
||||||
|
width: 100%; |
||||||
|
height: 502px; |
||||||
|
background: #FFFFFF; |
||||||
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 6px 6px 6px 6px; |
||||||
|
|
||||||
|
.title { |
||||||
|
padding-left: 23px; |
||||||
|
height: 57px; |
||||||
|
line-height: 57px; |
||||||
|
font-size: 16px; |
||||||
|
color: rgba(0, 0, 0, 0.85); |
||||||
|
position: relative; |
||||||
|
|
||||||
|
&::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 { |
||||||
|
width: 100%; |
||||||
|
height: 54px; |
||||||
|
border-bottom: 1px solid #E7E7E7; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.ranking { |
||||||
|
width: calc((80 / 756) * 100%); |
||||||
|
} |
||||||
|
|
||||||
|
.name { |
||||||
|
width: calc((542 / 756) * 100%); |
||||||
|
} |
||||||
|
|
||||||
|
.newp { |
||||||
|
width: calc((134 / 756) * 100%); |
||||||
|
} |
||||||
|
|
||||||
|
//.total { |
||||||
|
// width: calc((74 / 756) * 100%); |
||||||
|
//} |
||||||
|
// |
||||||
|
//.operate { |
||||||
|
// width: calc((60 / 756) * 100%); |
||||||
|
//} |
||||||
|
} |
||||||
|
|
||||||
|
.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%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&:nth-of-type(-n + 4) .ranking .ol { |
||||||
|
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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tape-score { |
||||||
|
height: 708px; |
||||||
|
|
||||||
|
.table { |
||||||
|
.t_item { |
||||||
|
width: 100%; |
||||||
|
height: 54px; |
||||||
|
border-bottom: 1px solid #E7E7E7; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.name { |
||||||
|
width: calc((542 / 676) * 100%); |
||||||
|
} |
||||||
|
|
||||||
|
.total { |
||||||
|
width: calc((74 / 676) * 100%); |
||||||
|
} |
||||||
|
|
||||||
|
.operate { |
||||||
|
width: calc((60 / 676) * 100%); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue