forked from wangjiadong/comp
JayChou
5 months ago
commit
f0548e5462
12 changed files with 1913 additions and 332 deletions
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
@ -0,0 +1,164 @@ |
||||
<template> |
||||
<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="total">报名人数</div> |
||||
<div class="operate">操作</div> |
||||
</div> |
||||
<div class="t_item t_con" v-for="(i,index) in props.data" :key="i"> |
||||
<div class="ranking"> |
||||
<div class="ol" :class="{ ac: index <= 3 }">{{ index +1 }}</div> |
||||
</div> |
||||
<div class="name">{{ i.name }}</div> |
||||
<div class="total">{{ i.sum }}</div> |
||||
<div class="operate">详情</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
const props = defineProps({ |
||||
data: { |
||||
type: Array, |
||||
default: [ |
||||
{ |
||||
name: '机电学院', |
||||
sum: 100, |
||||
id:1, |
||||
}, |
||||
{ |
||||
name: '机电学院', |
||||
sum: 100, |
||||
id:2, |
||||
}, |
||||
{ |
||||
name: '机电学院', |
||||
sum: 100, |
||||
id:3, |
||||
}, |
||||
{ |
||||
name: '机电学院', |
||||
sum: 100, |
||||
id:1, |
||||
}, |
||||
{ |
||||
name: '机电学院', |
||||
sum: 100, |
||||
id:2, |
||||
}, |
||||
{ |
||||
name: '机电学院', |
||||
sum: 100, |
||||
id:3, |
||||
}, |
||||
], |
||||
}, |
||||
}); |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.foo_card { |
||||
width: 100%; |
||||
height: calc(502px - 58px); |
||||
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%; |
||||
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 { |
||||
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,165 @@ |
||||
<template> |
||||
<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="total">比赛名称</div> |
||||
<div class="operate">积分</div> |
||||
</div> |
||||
<div class="t_item t_con" v-for="(i,index) in props.data" :key="i"> |
||||
<!-- <div class="ranking"> |
||||
<div class="ol" :class="{ ac: index <= 3 }">{{ index +1 }}</div> |
||||
</div> --> |
||||
<div class="name">{{ i.name }}</div> |
||||
<div class="total">{{ i.sum }}</div> |
||||
<div class="operate">{{ i.id }}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
const props = defineProps({ |
||||
data: { |
||||
type: Array, |
||||
default: [ |
||||
{ |
||||
name: '一等奖', |
||||
sum: '全国计算机高级大赛', |
||||
id:1, |
||||
}, |
||||
{ |
||||
name: '一等奖', |
||||
sum: '全国计算机高级大赛', |
||||
id:2, |
||||
}, |
||||
{ |
||||
name: '一等奖', |
||||
sum: '全国计算机高级大赛', |
||||
id:3, |
||||
}, |
||||
{ |
||||
name: '一等奖', |
||||
sum: '全国计算机高级大赛', |
||||
id:4, |
||||
}, |
||||
{ |
||||
name: '一等奖', |
||||
sum: '全国计算机高级大赛', |
||||
id:5, |
||||
}, |
||||
{ |
||||
name: '一等奖', |
||||
sum: '全国计算机高级大赛', |
||||
id:6, |
||||
}, |
||||
], |
||||
}, |
||||
}); |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.foo_card { |
||||
width: 100%; |
||||
height: calc(502px - 58px); |
||||
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%; |
||||
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 { |
||||
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,165 @@ |
||||
<template> |
||||
<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="total">比赛状态</div> |
||||
<div class="operate">操作</div> |
||||
</div> |
||||
<div class="t_item t_con" v-for="(i,index) in props.data" :key="i"> |
||||
<!-- <div class="ranking"> |
||||
<div class="ol" :class="{ ac: index <= 3 }">{{ index +1 }}</div> |
||||
</div> --> |
||||
<div class="name">{{ i.name }}</div> |
||||
<div class="total">{{ i.sum }}</div> |
||||
<div class="operate">详情</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
const props = defineProps({ |
||||
data: { |
||||
type: Array, |
||||
default: [ |
||||
{ |
||||
name: '全国计算机高级大赛', |
||||
sum: '比赛中', |
||||
id:1, |
||||
}, |
||||
{ |
||||
name: '全国计算机高级大赛', |
||||
sum: '比赛中', |
||||
id:2, |
||||
}, |
||||
{ |
||||
name: '全国计算机高级大赛', |
||||
sum: '比赛中', |
||||
id:3, |
||||
}, |
||||
{ |
||||
name: '全国计算机高级大赛', |
||||
sum: '比赛中', |
||||
id:4, |
||||
}, |
||||
{ |
||||
name: '全国计算机高级大赛', |
||||
sum: '比赛中', |
||||
id:5, |
||||
}, |
||||
{ |
||||
name: '全国计算机高级大赛', |
||||
sum: '比赛中', |
||||
id:6, |
||||
}, |
||||
], |
||||
}, |
||||
}); |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.foo_card { |
||||
width: 100%; |
||||
height: calc(502px - 58px); |
||||
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%; |
||||
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 { |
||||
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,166 @@ |
||||
<template> |
||||
<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="total">报名人数</div> |
||||
<div class="total">队伍数</div> |
||||
<div class="operate">所在院系</div> |
||||
</div> |
||||
<div class="t_item t_con" v-for="(i,index) in props.data" :key="i"> |
||||
<!-- <div class="ranking"> |
||||
<div class="ol" :class="{ ac: index <= 3 }">{{ index +1 }}</div> |
||||
</div> --> |
||||
<div class="name">{{ i.name }}</div> |
||||
<div class="total">{{ i.sum }}</div> |
||||
<div class="total">{{ i.sum }}</div> |
||||
<div class="operate">胡辣汤学院</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
const props = defineProps({ |
||||
data: { |
||||
type: Array, |
||||
default: [ |
||||
{ |
||||
name: '项目名称', |
||||
sum: 100, |
||||
id:1, |
||||
}, |
||||
{ |
||||
name: '项目名称', |
||||
sum: 100, |
||||
id:2, |
||||
}, |
||||
{ |
||||
name: '项目名称', |
||||
sum: 100, |
||||
id:3, |
||||
}, |
||||
{ |
||||
name: '项目名称', |
||||
sum: 100, |
||||
id:4, |
||||
}, |
||||
{ |
||||
name: '项目名称', |
||||
sum: 100, |
||||
id:5, |
||||
}, |
||||
{ |
||||
name: '项目名称', |
||||
sum: 100, |
||||
id:6, |
||||
}, |
||||
], |
||||
}, |
||||
}); |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.foo_card { |
||||
width: 100%; |
||||
height: calc(432px - 58px); |
||||
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%; |
||||
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 { |
||||
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,164 @@ |
||||
<template> |
||||
<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="total">学生号码</div> |
||||
<div class="operate">所在院系</div> |
||||
</div> |
||||
<div class="t_item t_con" v-for="(i,index) in props.data" :key="i"> |
||||
<!-- <div class="ranking"> |
||||
<div class="ol" :class="{ ac: index <= 3 }">{{ index +1 }}</div> |
||||
</div> --> |
||||
<div class="name">{{ i.name }}</div> |
||||
<div class="total">{{ i.sum }}</div> |
||||
<div class="operate">胡辣汤学院</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
const props = defineProps({ |
||||
data: { |
||||
type: Array, |
||||
default: [ |
||||
{ |
||||
name: '无糖', |
||||
sum: 100, |
||||
id:1, |
||||
}, |
||||
{ |
||||
name: '无糖', |
||||
sum: 100, |
||||
id:2, |
||||
}, |
||||
{ |
||||
name: '无糖', |
||||
sum: 100, |
||||
id:3, |
||||
}, |
||||
{ |
||||
name: '无糖', |
||||
sum: 100, |
||||
id:4, |
||||
}, |
||||
{ |
||||
name: '无糖', |
||||
sum: 100, |
||||
id:5, |
||||
}, |
||||
{ |
||||
name: '无糖', |
||||
sum: 100, |
||||
id:6, |
||||
}, |
||||
], |
||||
}, |
||||
}); |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.foo_card { |
||||
width: 100%; |
||||
height: calc(502px - 58px); |
||||
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%; |
||||
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 { |
||||
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> |
||||
@ -1 +1,5 @@ |
||||
export {default as ChDepartment } from './chDepartment/index.vue' |
||||
export {default as organizingCommittee } from './organizingCommittee.vue' |
||||
export {default as student } from './student.vue' |
||||
|
||||
|
||||
|
||||
@ -0,0 +1,488 @@ |
||||
<template> |
||||
<a-row :gutter="[24, 32]"> |
||||
<a-col :lg="12" :xxl="6"> |
||||
<div class="item"> |
||||
<div class="card1"> |
||||
<div class="title"> |
||||
<div class="left">比赛届数</div> |
||||
<div class="right"><SvgIcon size="20" name="shizhong" /></div> |
||||
</div> |
||||
<div class="name">第三十届电子科技大赛</div> |
||||
<div class="total">共12届，当前第12届</div> |
||||
</div> |
||||
</div> |
||||
</a-col> |
||||
<a-col :lg="12" :xxl="6" |
||||
><div class="item"> |
||||
<div class="card2"> |
||||
<div class="title"> |
||||
<div class="left">参加比赛队伍数</div> |
||||
<div class="right"><SvgIcon size="20" name="content" /></div> |
||||
</div> |
||||
<div id="chart-content"></div> |
||||
<div class="total">本月比赛：0</div> |
||||
</div> </div |
||||
></a-col> |
||||
<a-col :lg="12" :xxl="6"><div class="item"> |
||||
<div class="card3"> |
||||
<div class="title"> |
||||
<div class="left">参赛人数</div> |
||||
<div class="right"><SvgIcon size="20" name="content" /></div> |
||||
</div> |
||||
<div class="name">1314</div> |
||||
<div class="total"> |
||||
<div class="one">一等：11</div> |
||||
<div class="two">二等：1</div> |
||||
<div class="three">三等：1</div> |
||||
</div> |
||||
</div> |
||||
</div></a-col> |
||||
<a-col :lg="12" :xxl="6"><div class="item"> |
||||
<div class="card4"> |
||||
<div class="title"> |
||||
<div class="left">比赛项目数</div> |
||||
<div class="right"><SvgIcon size="20" name="content" /></div> |
||||
</div> |
||||
<div class="name">12</div> |
||||
<div class="total">报名最多的项目是：项目三 地三十届电子科技大赛</div> |
||||
</div> |
||||
</div></a-col> |
||||
</a-row> |
||||
|
||||
<a-row :gutter="[24, 32]"> |
||||
<a-col :xxl="12" :xl="12" :lg="24" :md="24" :sm="24" |
||||
><div class="Participation"> |
||||
<a-card title="参赛院系人数排名" style="width: 100%; height: 100%"> |
||||
<cardList /> |
||||
</a-card> </div |
||||
></a-col> |
||||
<a-col :xxl="12" :xl="12" :lg="24" :md="24" :sm="24" |
||||
><div class="Participation"> |
||||
<a-card title="报名学生列表" style="width: 100%; height: 100%"> |
||||
<cardListTow /> |
||||
</a-card> </div |
||||
></a-col> |
||||
</a-row> |
||||
<a-row :gutter="[24, 32]"> |
||||
<a-col :xxl="12" :xl="12" :lg="24" :md="24" :sm="24" |
||||
><div class="content-card"> |
||||
<a-card title="各项积分情况" style="width: 100%; height: 100%"> |
||||
<div class="content-chart"> |
||||
<div id="chart"></div> |
||||
<div class="content-list"> |
||||
<div class="item" v-for="(item, index) in 6" :key="index"> |
||||
<div class="sort" :class="index < 3 ? 'bgc' : ''">{{ index + 1 }}</div> |
||||
<div class="name">项目名{{ item }}</div> |
||||
<div class="code">1234分</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</a-card> |
||||
</div></a-col |
||||
> |
||||
<a-col :xxl="12" :xl="12" :lg="24" :md="24" :sm="24" |
||||
><div class="content-card"> |
||||
<a-card title="各项详细数据" style="width: 100%; height: 100%"> |
||||
<cardListThree /> |
||||
</a-card> </div |
||||
></a-col> |
||||
</a-row> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { SvgIcon } from '/@/components/Icon'; |
||||
import { onMounted } from 'vue'; |
||||
import cardList from './components/cardList.vue'; |
||||
import cardListTow from './components/cardListtow.vue'; |
||||
import cardListThree from './components/cardListThree.vue'; |
||||
import echarts from '/@/utils/lib/echarts'; |
||||
const throttle = (fn: any) => { |
||||
let timer: any; |
||||
return function () { |
||||
if (timer) { |
||||
return; |
||||
} |
||||
timer = setTimeout(() => { |
||||
fn(); |
||||
clearTimeout(timer); |
||||
timer = null; |
||||
}, 1000); |
||||
}; |
||||
}; |
||||
const initContent = () => { |
||||
const myChart = echarts.init(document.getElementById('chart-content')); |
||||
const option = { |
||||
backgroundColor: 'transparent', |
||||
title: [ |
||||
{ |
||||
text: '111', |
||||
}, |
||||
], |
||||
tooltip: { |
||||
trigger: 'axis', |
||||
axisPointer: { |
||||
lineStyle: { |
||||
color: '#57617B', |
||||
}, |
||||
}, |
||||
}, |
||||
grid: { |
||||
left: '20px', |
||||
right: '0', |
||||
bottom: '0', |
||||
top: '20px', |
||||
containLabel: false, |
||||
}, |
||||
xAxis: [ |
||||
{ |
||||
type: 'category', |
||||
show: false, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#44607C', |
||||
}, |
||||
}, |
||||
axisLabel: { |
||||
show: false, |
||||
margin: 10, |
||||
textStyle: { |
||||
fontSize: 14, |
||||
color: '#D5CBE8', |
||||
fontWeight: 700, |
||||
}, |
||||
}, |
||||
axisTick: { |
||||
show: false, |
||||
}, |
||||
data: ['一月','二月','三月','四月','五月'], |
||||
}, |
||||
], |
||||
yAxis: [ |
||||
{ |
||||
type: 'value', |
||||
name: '单位（%）', |
||||
axisTick: { |
||||
show: false, |
||||
}, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: 'none', |
||||
}, |
||||
}, |
||||
axisLabel: { |
||||
margin: 10, |
||||
show: false, |
||||
textStyle: { |
||||
fontSize: 14, |
||||
color: '#3681B5', |
||||
fontWeight: 700, |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
show: false, |
||||
lineStyle: { |
||||
color: '#57617B', |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
series: [ |
||||
{ |
||||
name: '比赛队伍', |
||||
type: 'line', |
||||
smooth: true, |
||||
stack: '总量', |
||||
symbol: 'circle', |
||||
symbolSize: 5, |
||||
showSymbol: false, |
||||
animationDelay: 2000, |
||||
animationDuration: 1000, |
||||
// markPoint: { |
||||
// symbol: |
||||
// 'path://M783.136 180.064C771.872 168.832 757.152 160 742.4 160L281.6 160C266.848 160 252.128 168.832 240.864 180.064 229.632 191.328 224 209.248 224 224l0 460.8c0 14.752 5.632 26.272 16.864 37.536C252.128 733.568 266.848 736 281.6 736l115.2 0 115.2 115.2 115.2-115.2 115.2 0c14.752 0 29.472-2.432 40.736-13.664C794.368 711.072 800 699.552 800 684.8L800 224C800 209.248 794.368 191.328 783.136 180.064z', |
||||
// symbolOffset: [0, '-100%'], |
||||
// symbolSize: 35, //这里可以改变大小 |
||||
// data: [ |
||||
// { |
||||
// type: 'max', |
||||
// name: '最大值', |
||||
// }, |
||||
// ], |
||||
// label: { |
||||
// offset: [0, -3], |
||||
// }, |
||||
// animationDelay: 3000, |
||||
// animationDuration: 1000, |
||||
// }, |
||||
lineStyle: { |
||||
normal: { |
||||
width: 3, |
||||
color: { |
||||
type: 'linear', |
||||
x: 0, |
||||
y: 0, |
||||
x2: 1, |
||||
y2: 0, |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: '#5eb2ff', // 0% 处的颜色 |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: '#5eb2ff', // 100% 处的颜色 |
||||
}, |
||||
], |
||||
globalCoord: false, // 缺省为 false |
||||
}, |
||||
opacity: 0.9, |
||||
}, |
||||
}, |
||||
areaStyle: { |
||||
normal: { |
||||
color: new echarts.graphic.LinearGradient( |
||||
0, |
||||
0, |
||||
0, |
||||
1, |
||||
[ |
||||
{ |
||||
offset: 0, |
||||
color: '#5eb2ff', |
||||
}, |
||||
{ |
||||
offset: 0.8, |
||||
color: '#5eb2ff', |
||||
}, |
||||
], |
||||
false |
||||
), |
||||
shadowColor: '#5eb2ff', |
||||
shadowBlur: 10, |
||||
}, |
||||
}, |
||||
// itemStyle: { |
||||
// normal: { |
||||
// color: '#3A5493', |
||||
// borderColor: '', |
||||
// borderWidth: 12, |
||||
// }, |
||||
// }, |
||||
data: [23,12,45,9,30], |
||||
}, |
||||
], |
||||
}; |
||||
myChart.setOption(option); |
||||
let resize = throttle(() => { |
||||
myChart.resize(); |
||||
}); |
||||
window.addEventListener('resize', resize); |
||||
}; |
||||
onMounted(() => { |
||||
initContent(); |
||||
const myChart = echarts.init(document.getElementById('chart')); |
||||
const option = { |
||||
tooltip: {}, |
||||
xAxis: { |
||||
type: 'category', |
||||
data: ['项目一', '项目二', '项目三', '项目四', '项目五', '项目六'], |
||||
}, |
||||
yAxis: { |
||||
type: 'value', |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: [120, 200, 150, 80, 70, 110], |
||||
type: 'bar', |
||||
}, |
||||
], |
||||
}; |
||||
myChart.setOption(option); |
||||
let resize = throttle(() => { |
||||
myChart.resize(); |
||||
}); |
||||
window.addEventListener('resize', resize); |
||||
}); |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
:deep .ant-row { |
||||
background-color: pink; |
||||
margin-top: 30px; |
||||
} |
||||
.item { |
||||
width: 100%; |
||||
height: 182px; |
||||
background-color: #fff; |
||||
border-radius: 15px; |
||||
overflow: hidden; |
||||
.card1 { |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: #018ffb; |
||||
padding: 20px; |
||||
.title { |
||||
display: flex; |
||||
width: 100%; |
||||
justify-content: space-between; |
||||
.left { |
||||
font-size: 14px; |
||||
color: #fff; |
||||
} |
||||
} |
||||
.name { |
||||
font-size: 32px; |
||||
color: #fff; |
||||
margin-top: 10px; |
||||
} |
||||
.total { |
||||
font-size: 12px; |
||||
color: #fff; |
||||
margin-top: 40px; |
||||
} |
||||
#chart { |
||||
width: 100%; |
||||
height: 80px; |
||||
} |
||||
} |
||||
.card2 { |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: #fff; |
||||
padding: 20px; |
||||
.title { |
||||
display: flex; |
||||
width: 100%; |
||||
justify-content: space-between; |
||||
.left { |
||||
font-size: 14px; |
||||
color: #fff; |
||||
color: rgba(0, 0, 0, 0.45); |
||||
} |
||||
} |
||||
|
||||
#chart-content { |
||||
width: 100%; |
||||
height: 80px; |
||||
} |
||||
.total{ |
||||
margin-top: 10px; |
||||
font-size: 12px; |
||||
color: #000; |
||||
} |
||||
} |
||||
.card3 { |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: #fff; |
||||
padding: 20px; |
||||
.title { |
||||
display: flex; |
||||
width: 100%; |
||||
justify-content: space-between; |
||||
.left { |
||||
font-size: 14px; |
||||
color: #fff; |
||||
color: rgba(0, 0, 0, 0.45); |
||||
} |
||||
} |
||||
|
||||
.name { |
||||
font-size: 42px; |
||||
font-weight: 500; |
||||
color: #000; |
||||
margin-top: 10px; |
||||
} |
||||
.total{ |
||||
margin-top: 20px; |
||||
font-size: 12px; |
||||
color: #000; |
||||
display: flex; |
||||
width: 100%; |
||||
justify-content: space-between; |
||||
} |
||||
} |
||||
.card4 { |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: #fff; |
||||
padding: 20px; |
||||
.title { |
||||
display: flex; |
||||
width: 100%; |
||||
justify-content: space-between; |
||||
.left { |
||||
font-size: 14px; |
||||
color: #fff; |
||||
color: rgba(0, 0, 0, 0.45); |
||||
} |
||||
} |
||||
|
||||
.name { |
||||
font-size: 42px; |
||||
font-weight: 500; |
||||
color: #000; |
||||
margin-top: 10px; |
||||
} |
||||
.total{ |
||||
margin-top: 20px; |
||||
font-size: 12px; |
||||
color: #000; |
||||
|
||||
} |
||||
} |
||||
} |
||||
.Participation { |
||||
width: 100%; |
||||
height: 502px; |
||||
background-color: #fff; |
||||
} |
||||
.content-card { |
||||
width: 100%; |
||||
height: 432px; |
||||
background-color: #fff; |
||||
.content-chart { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
#chart { |
||||
flex: 1; |
||||
height: 100%; |
||||
} |
||||
.content-list { |
||||
width: 230px; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding: 0 20px; |
||||
.item { |
||||
height: 45px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
.sort { |
||||
width: 30px; |
||||
height: 30px; |
||||
background-color: #f5f5f5; |
||||
border-radius: 50%; |
||||
text-align: center; |
||||
line-height: 30px; |
||||
font-weight: 700; |
||||
} |
||||
.bgc { |
||||
background-color: #314659; |
||||
color: #fff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
:deep .ant-card-body { |
||||
padding: 0; |
||||
width: 100%; |
||||
height: calc(100% - 58px); |
||||
} |
||||
</style> |
||||
@ -0,0 +1,430 @@ |
||||
<template> |
||||
<div class="container-box"> |
||||
<a-row :gutter="[24, 24]"> |
||||
<a-col :xxl="12" :xl="12" :lg="24"> |
||||
<a-row :gutter="[24, 24]" style="margin-top: 0"> |
||||
<a-col :span="12"> |
||||
<div class="card1"> |
||||
<div class="title"> |
||||
<div class="left">参赛人数</div> |
||||
<div class="right"><SvgIcon size="20" name="content" /></div> |
||||
</div> |
||||
<div class="name">1314</div> |
||||
<div class="total"> |
||||
<div class="one">一等：11</div> |
||||
<div class="two">二等：1</div> |
||||
<div class="three">三等：1</div> |
||||
</div> |
||||
</div> |
||||
</a-col> |
||||
<a-col :span="12"> |
||||
<div class="card1"> |
||||
<div class="title"> |
||||
<div class="left">参赛人数</div> |
||||
<div class="right"><SvgIcon size="20" name="content" /></div> |
||||
</div> |
||||
<div class="name">1314</div> |
||||
<div class="total"> |
||||
<div class="one">一等：11</div> |
||||
<div class="two">二等：1</div> |
||||
<div class="three">三等：1</div> |
||||
</div> |
||||
</div> |
||||
</a-col> |
||||
</a-row> |
||||
<a-row :gutter="[0, 0]" style="margin-top: 24px"> |
||||
<a-col :span="24"> |
||||
<div class="render"> |
||||
<a-card title="各维度积分" style="width: 100%; height: 100%"> |
||||
<div class="render-box"> |
||||
<div class="left"> |
||||
<div id="render-chart"></div> |
||||
</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-card> |
||||
</div> |
||||
</a-col> |
||||
</a-row> |
||||
</a-col> |
||||
<a-col :xxl="12" :xl="12" :lg="24"> |
||||
<div class="right-list"> |
||||
<a-card title="报名比赛" style="width: 100%; height: 100%"> |
||||
<cardListFour /> |
||||
</a-card> |
||||
</div> |
||||
</a-col> |
||||
</a-row> |
||||
<a-row :gutter="[24, 24]"> |
||||
<a-col :xxl="12" :xl="12" :lg="24" |
||||
><div class="huojiangqingkuang"> |
||||
<a-card title="获奖情况" style="width: 100%; height: 100%"> |
||||
<div id="chart-huojiang"></div> |
||||
</a-card> |
||||
</div> |
||||
</a-col> |
||||
<a-col :xxl="12" :xl="12" :lg="24"> |
||||
<div class="all-jiangxiang"> |
||||
<a-card title="所有奖项" style="width: 100%"> |
||||
<cardListFive /> |
||||
</a-card> |
||||
</div> |
||||
</a-col> |
||||
</a-row> |
||||
</div> |
||||
</template> |
||||
|
||||
<script lang="ts" setup> |
||||
import { SvgIcon } from '/@/components/Icon'; |
||||
import cardListFour from './components/cardListFour.vue'; |
||||
import cardListFive from './components/cardListFive.vue'; |
||||
import echarts from '/@/utils/lib/echarts'; |
||||
|
||||
import { onMounted } from 'vue'; |
||||
const throttle = (fn: any) => { |
||||
let timer: any; |
||||
return function () { |
||||
if (timer) { |
||||
return; |
||||
} |
||||
timer = setTimeout(() => { |
||||
fn(); |
||||
clearTimeout(timer); |
||||
timer = null; |
||||
}, 1000); |
||||
}; |
||||
} |
||||
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, |
||||
}, |
||||
]; |
||||
const initChart = () => { |
||||
const myChart = echarts.init(document.getElementById('render-chart')); |
||||
|
||||
var dataArr = [ |
||||
{ |
||||
value: [4000, 700, 3600, 3900, 1800, 4200, 700, 3600, 4200, 700, 3600, 4200, 700, 3600], |
||||
name: '1', |
||||
itemStyle: { |
||||
normal: { |
||||
lineStyle: { |
||||
color: '#55d7f2', |
||||
}, |
||||
shadowColor: '#4A99FF', |
||||
shadowBlur: 10, |
||||
}, |
||||
}, |
||||
areaStyle: { |
||||
normal: { |
||||
// 单项区域填充样式 |
||||
color: { |
||||
type: 'linear', |
||||
x: 1, //右 |
||||
y: 0, //下 |
||||
x2: 1, //左 |
||||
y2: 1, //上 |
||||
colorStops: [ |
||||
{ |
||||
offset: 0, |
||||
color: '#f0a223', |
||||
}, |
||||
{ |
||||
offset: 1, |
||||
color: '#093138', |
||||
}, |
||||
], |
||||
globalCoord: false, |
||||
}, |
||||
opacity: 1, // 区域透明度 |
||||
}, |
||||
}, |
||||
}, |
||||
]; |
||||
var colorArr = ['#fff', '#fff']; //颜色 |
||||
const option = { |
||||
backgroundColor: 'transparent', |
||||
color: colorArr, |
||||
tooltip: { |
||||
trigger: 'item', |
||||
}, |
||||
radar: { |
||||
// shape: 'circle', |
||||
name: { |
||||
textStyle: { |
||||
color: '#9ca4a6', |
||||
fontSize: 12, |
||||
}, |
||||
}, |
||||
indicator: indicator, |
||||
splitArea: { |
||||
// 坐标轴在 grid 区域中的分隔区域，默认不显示。 |
||||
show: true, |
||||
areaStyle: { |
||||
// 分隔区域的样式设置。 |
||||
color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。 |
||||
}, |
||||
}, |
||||
axisLine: { |
||||
//指向外圈文本的分隔线样式 |
||||
lineStyle: { |
||||
color: '#2a5f61', |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: '#2a5f61', // 分隔线颜色 |
||||
width: 1, // 分隔线线宽 |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: 'radar', |
||||
symbolSize: 6, |
||||
symbol: 'circle', |
||||
data: dataArr, |
||||
}, |
||||
], |
||||
}; |
||||
myChart.setOption(option); |
||||
let resize = throttle(() => { |
||||
myChart.resize(); |
||||
}); |
||||
window.addEventListener('resize', resize); |
||||
}; |
||||
const initHuojiangChart = () => { |
||||
const myChart = echarts.init(document.getElementById('chart-huojiang')); |
||||
const option = { |
||||
tooltip: { |
||||
trigger: 'item', |
||||
}, |
||||
// grid: { |
||||
// left: '20px', |
||||
// containLabel: false, |
||||
// }, |
||||
legend: { |
||||
type:"scroll", |
||||
orient: 'vertical', |
||||
left:'70%', |
||||
align:'left', |
||||
top:'middle', |
||||
textStyle: { |
||||
color:'#8C8C8C' |
||||
}, |
||||
height:250 |
||||
}, |
||||
series: [ |
||||
{ |
||||
name: '获奖情况', |
||||
type: 'pie', |
||||
center: ['35%', '50%'], |
||||
radius: '80%', |
||||
label: { |
||||
normal: { |
||||
show: false, |
||||
position: 'outter', |
||||
formatter:function (parms){ |
||||
return parms.data.value |
||||
} |
||||
} |
||||
}, |
||||
labelLine: { |
||||
show:false |
||||
|
||||
}, |
||||
data: [{ value: 1048, name: '一等奖' }, { value: 735, name: '二等奖' }, { value: 580, name: '三等奖' }], |
||||
emphasis: { |
||||
itemStyle: { |
||||
shadowBlur: 10, |
||||
shadowOffsetX: 0, |
||||
shadowColor: 'rgba(0, 0, 0, 0.5)', |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
myChart.setOption(option); |
||||
let resize = throttle(() => { |
||||
myChart.resize(); |
||||
}); |
||||
window.addEventListener('resize', resize); |
||||
}; |
||||
onMounted(() => { |
||||
initChart(); |
||||
initHuojiangChart(); |
||||
}); |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.container-box { |
||||
// padding: 20px; |
||||
.card1 { |
||||
width: 100%; |
||||
height: 182px; |
||||
background-color: #fff; |
||||
padding: 20px; |
||||
.title { |
||||
display: flex; |
||||
width: 100%; |
||||
|
||||
justify-content: space-between; |
||||
.left { |
||||
font-size: 14px; |
||||
color: #fff; |
||||
color: rgba(0, 0, 0, 0.45); |
||||
} |
||||
} |
||||
|
||||
.name { |
||||
font-size: 42px; |
||||
font-weight: 500; |
||||
color: #000; |
||||
margin-top: 10px; |
||||
} |
||||
.total { |
||||
margin-top: 20px; |
||||
font-size: 12px; |
||||
color: #000; |
||||
display: flex; |
||||
width: 100%; |
||||
justify-content: space-between; |
||||
} |
||||
} |
||||
.render { |
||||
width: 100%; |
||||
height: 451px; |
||||
background-color: #fff; |
||||
.render-box { |
||||
width: 100%; |
||||
height: 100%; |
||||
display: flex; |
||||
|
||||
.left { |
||||
flex: 1; |
||||
#render-chart { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
.right { |
||||
width: 300px; |
||||
display: flex; |
||||
align-items: center; |
||||
.content-left, |
||||
.content-right { |
||||
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; |
||||
} |
||||
} |
||||
} |
||||
.right-list { |
||||
width: 100%; |
||||
height: 100%; |
||||
background-color: #fff; |
||||
} |
||||
.huojiangqingkuang { |
||||
width: 100%; |
||||
height: 500px; |
||||
background-color: #fff; |
||||
#chart-huojiang { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
.all-jiangxiang { |
||||
width: 100%; |
||||
height: 500px; |
||||
background-color: #fff; |
||||
} |
||||
} |
||||
:deep .ant-col { |
||||
// background-color: pink; |
||||
// margin-top: 30px; |
||||
} |
||||
:deep .ant-card-body { |
||||
padding: 0; |
||||
width: 100%; |
||||
height: calc(100% - 58px); |
||||
} |
||||
</style> |
||||
@ -1,203 +1,21 @@ |
||||
<template> |
||||
<div class="workbench"> |
||||
<div class="header"> |
||||
<div class="card"> |
||||
<div class="top"> |
||||
<div class="text"> |
||||
本年度已开展比赛数 |
||||
</div> |
||||
<Icon icon="mainHome-time|svg" :size="20" /> |
||||
</div> |
||||
<div class="center"> |
||||
<div class="text"> |
||||
67 |
||||
</div> |
||||
</div> |
||||
<div class="bottom"> |
||||
<div class="bot_card">国赛：12</div> |
||||
<div class="bot_card">省赛：12</div> |
||||
<div class="bot_card">校赛：24</div> |
||||
</div> |
||||
</div> |
||||
<div class="card"> |
||||
<div class="top"> |
||||
<div class="text"> |
||||
本年度已开展比赛数 |
||||
</div> |
||||
<Icon icon="mainHome-time|svg" :size="20" /> |
||||
</div> |
||||
<div class="center"> |
||||
<div class="text"> |
||||
67 |
||||
</div> |
||||
</div> |
||||
<div class="bottom"> |
||||
<div class="bot_card">国赛：12</div> |
||||
<div class="bot_card">省赛：12</div> |
||||
<div class="bot_card">校赛：24</div> |
||||
</div> |
||||
</div> |
||||
<div class="card"> |
||||
<div class="top"> |
||||
<div class="text"> |
||||
本年度已开展比赛数 |
||||
</div> |
||||
<Icon icon="mainHome-time|svg" :size="20" /> |
||||
</div> |
||||
<div class="center"> |
||||
<div class="text"> |
||||
67 |
||||
</div> |
||||
</div> |
||||
<div class="bottom"> |
||||
<div class="bot_card">国赛：12</div> |
||||
<div class="bot_card">省赛：12</div> |
||||
<div class="bot_card">校赛：24</div> |
||||
</div> |
||||
</div> |
||||
<div class="card"> |
||||
<div class="top"> |
||||
<div class="text"> |
||||
本年度已开展比赛数 |
||||
</div> |
||||
<Icon icon="mainHome-time|svg" :size="20" /> |
||||
</div> |
||||
<div class="center"> |
||||
<div class="text"> |
||||
67 |
||||
</div> |
||||
</div> |
||||
<div class="bottom"> |
||||
<div class="bot_card">国赛：12</div> |
||||
<div class="bot_card">省赛：12</div> |
||||
<div class="bot_card">校赛：24</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="content"> |
||||
<div class="con_left"></div> |
||||
<div class="con_right"></div> |
||||
</div> |
||||
|
||||
<div class="footer"> |
||||
<div class="foo_card"></div> |
||||
<div class="foo_card"></div> |
||||
</div> |
||||
<component :is="com()" /> |
||||
</div> |
||||
</template> |
||||
<script lang="ts" setup> |
||||
|
||||
import { ChDepartment,organizingCommittee ,student} from './components/index' |
||||
function com(){ |
||||
return student |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.workbench { |
||||
padding: 16px 16px 0; |
||||
|
||||
&>* { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.header { |
||||
.card { |
||||
width: 405px; |
||||
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; |
||||
:deep .ant-row{ |
||||
margin-top: 30px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.content { |
||||
margin-top: 16px; |
||||
|
||||
.con_left { |
||||
width: 489px; |
||||
height: 459px; |
||||
background: #FFFFFF; |
||||
border-radius: 2px 2px 2px 2px; |
||||
border: 1px solid #F0F0F0; |
||||
} |
||||
|
||||
.con_right { |
||||
width: 1160px; |
||||
height: 458px; |
||||
background: #FFFFFF; |
||||
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||
border-radius: 4px 4px 4px 4px; |
||||
} |
||||
} |
||||
|
||||
.footer { |
||||
margin-top: 21px; |
||||
|
||||
.foo_card { |
||||
width: 820px; |
||||
height: 502px; |
||||
background: #FFFFFF; |
||||
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
||||
border-radius: 6px 6px 6px 6px; |
||||
} |
||||
} |
||||
|
||||
.workbench{ |
||||
padding: 0 20px; |
||||
margin-bottom: 20px; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue