|
|
<template>
|
|
|
<div>
|
|
|
<div class="news">
|
|
|
<el-row :gutter="38">
|
|
|
<el-col :span="12">
|
|
|
<div class="news__header">
|
|
|
<div class="news__header--diamond">热点资料</div>
|
|
|
<div class="news__header--line"></div>
|
|
|
</div>
|
|
|
|
|
|
<ul class="news__list">
|
|
|
<li class="news__list--item">
|
|
|
<div>教育部关于公布《高等学校信息公开事项清单》的通知</div>
|
|
|
<div>2023-05-21</div>
|
|
|
</li>
|
|
|
<li class="news__list--item">
|
|
|
<div>高等学校信息公开办法（教育部令第29号）</div>
|
|
|
<div>2023-05-21</div>
|
|
|
</li>
|
|
|
<li class="news__list--item">
|
|
|
<div>苏州卫生职业技术学院信息公开实施办法（试行）</div>
|
|
|
<div>2023-05-21</div>
|
|
|
</li>
|
|
|
<li class="news__list--item">
|
|
|
<div>苏州卫生职业技术学院信息公开实施办法（试行）</div>
|
|
|
<div>2023-05-21</div>
|
|
|
</li>
|
|
|
<li class="news__list--item">
|
|
|
<div> 苏州卫生职业技术学院信息公开实施办法（试行）</div>
|
|
|
<div>2023-05-21</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="12">
|
|
|
<div class="news__header">
|
|
|
<div class="news__header--diamond">最新资料</div>
|
|
|
<div class="news__header--line"></div>
|
|
|
</div>
|
|
|
|
|
|
<ul class="news__list">
|
|
|
<li class="news__list--item">
|
|
|
<div>教育部关于公布《高等学校信息公开事项清单》的通知</div>
|
|
|
<div>2023-05-21</div>
|
|
|
</li>
|
|
|
<li class="news__list--item">
|
|
|
<div>高等学校信息公开办法（教育部令第29号）</div>
|
|
|
<div>2023-05-21</div>
|
|
|
</li>
|
|
|
<li class="news__list--item">
|
|
|
<div>苏州卫生职业技术学院信息公开实施办法（试行）</div>
|
|
|
<div>2023-05-21</div>
|
|
|
</li>
|
|
|
<li class="news__list--item">
|
|
|
<div>苏州卫生职业技术学院信息公开实施办法（试行）</div>
|
|
|
<div>2023-05-21</div>
|
|
|
</li>
|
|
|
<li class="news__list--item">
|
|
|
<div> 苏州卫生职业技术学院信息公开实施办法（试行）</div>
|
|
|
<div>2023-05-21</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
|
|
|
<div class="department">
|
|
|
<div class="department__title">
|
|
|
<div class="department__title--linear"></div>
|
|
|
<div class="department__title--center">
|
|
|
<div>部门</div>
|
|
|
<div>Department</div>
|
|
|
</div>
|
|
|
<div class="department__title--linear"></div>
|
|
|
</div>
|
|
|
|
|
|
<div class="department__list">
|
|
|
<div v-for="item in 14" class="department__list--item">
|
|
|
<div>{{item}}</div>
|
|
|
</div>
|
|
|
<div class="department__list--item">
|
|
|
<div @click="$router.push('/index/department')">更多...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="label">
|
|
|
<div class="label__first">
|
|
|
<el-image style="width: 49px;height: 49px;margin-bottom: 29px;"
|
|
|
:src="require('@/assets/reception/icon-light.png')"></el-image>
|
|
|
<div>标签</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="label-group"
|
|
|
v-for="(group, index) in labelGroup">
|
|
|
<div :class="index % 2 ? 'label-group__left--single' : 'label-group__left--complex'">
|
|
|
<div v-for="(item, index2) in group.left"
|
|
|
:style="{ 'background': labelColor(index2) }"
|
|
|
:class="index % 2 ? 'single-item label-item' : 'complex-item label-item'">
|
|
|
<p>{{ item }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="label-group__right label-item"
|
|
|
:style="{ 'background': labelColor(index + 3) }"
|
|
|
v-if="group.right">
|
|
|
<p>{{ group.right }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
labels: ['学籍管理','人才','补助','培养方案','综合科技','党建工作创新奖','处置','党建工作创新奖','处置','党建工作创新奖','处置'],
|
|
|
labelGroup: []
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
labelsHandler() {
|
|
|
let groups = Math.ceil(this.labels.length / 4)
|
|
|
for(let i = 0; i < groups; i++) {
|
|
|
let group = this.labels.slice(i * 4,i * 4 + 4)
|
|
|
this.labelGroup.push({
|
|
|
left: group.slice(0, 3),
|
|
|
right: group[3] ? group[3] : false
|
|
|
})
|
|
|
}
|
|
|
console.log(this.labelGroup)
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
labelColor () {
|
|
|
let color = ["#85CBC8", "#67BCE6", "#5F97CA", "#7792C4"]
|
|
|
|
|
|
return function (index) {
|
|
|
return color[index % 4]
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
this.labelsHandler()
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.news {
|
|
|
|
|
|
padding: 33px 18.75% 38px 18.75%;
|
|
|
|
|
|
&__header {
|
|
|
display: flex;
|
|
|
align-items: flex-end;
|
|
|
|
|
|
&--diamond {
|
|
|
width: 108px;
|
|
|
height: 28px;
|
|
|
line-height: 28px;
|
|
|
font-size: 16px;
|
|
|
color: #fff;
|
|
|
font-weight: 500;
|
|
|
text-align: center;
|
|
|
|
|
|
z-index: 1;
|
|
|
position: relative;
|
|
|
&::before {
|
|
|
content: "";
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: #cad8e4;
|
|
|
transform: skewX(20deg);
|
|
|
|
|
|
z-index: -1;
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
}
|
|
|
&::after {
|
|
|
content: "";
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: #3c7ac0;
|
|
|
transform: skewX(-20deg);
|
|
|
|
|
|
z-index: -1;
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
}
|
|
|
}
|
|
|
&--line {
|
|
|
flex: 1;
|
|
|
height: 1px;
|
|
|
background: #C7D9E5;
|
|
|
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
&__list {
|
|
|
|
|
|
padding: 34px 0 0 26px;
|
|
|
|
|
|
&--item {
|
|
|
list-style: none;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
cursor: pointer;
|
|
|
transition: all .2ms;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
&:hover {
|
|
|
color: #3c7ac0;
|
|
|
}
|
|
|
& > div {
|
|
|
font-size: 13px;
|
|
|
|
|
|
&:nth-child(2) {
|
|
|
color: #999999;
|
|
|
}
|
|
|
}
|
|
|
&::before {
|
|
|
content: "";
|
|
|
width: 6px;
|
|
|
height: 6px;
|
|
|
border-radius: 6px;
|
|
|
background: #cad8e4;
|
|
|
|
|
|
position: absolute;
|
|
|
top: calc(50% - 3px);
|
|
|
left: -12px;
|
|
|
}
|
|
|
|
|
|
& + li {
|
|
|
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.department {
|
|
|
background: url("../../../assets/reception/department-bkg.png") no-repeat center;
|
|
|
background-size: cover;
|
|
|
|
|
|
margin-top: 37px;
|
|
|
padding: 32px 18.7% 19px 18.7%;
|
|
|
|
|
|
&__title {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
&--linear {
|
|
|
background: #fff;
|
|
|
height: 2px;
|
|
|
flex: 1;
|
|
|
}
|
|
|
&--center {
|
|
|
font-weight: 500;
|
|
|
font-size: 21px;
|
|
|
line-height: 21px;
|
|
|
color: #fff;
|
|
|
text-align: center;
|
|
|
width: 144px;
|
|
|
|
|
|
margin: 0 14px;
|
|
|
position: relative;
|
|
|
& > div:nth-child(1) {
|
|
|
padding: 2px 0 7px 0;
|
|
|
}
|
|
|
& > div:nth-child(2) {
|
|
|
font-size: 13px;
|
|
|
line-height: 13px;
|
|
|
color: #B6CEF0;
|
|
|
|
|
|
}
|
|
|
|
|
|
&::before {
|
|
|
content: "";
|
|
|
width: 20px;
|
|
|
height: 24px;
|
|
|
border-top: 3px solid #fff;
|
|
|
border-left: 3px solid #fff;
|
|
|
|
|
|
position: absolute;
|
|
|
top: -3px;
|
|
|
left: -3px;
|
|
|
}
|
|
|
&::after {
|
|
|
content: "";
|
|
|
width: 20px;
|
|
|
height: 24px;
|
|
|
border-bottom: 3px solid #fff;
|
|
|
border-right: 3px solid #fff;
|
|
|
|
|
|
position: absolute;
|
|
|
bottom: -3px;
|
|
|
right: -3px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&__list {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
|
|
|
margin-top: 41px;
|
|
|
|
|
|
&--item {
|
|
|
background: #fff;
|
|
|
width: 176px;
|
|
|
height: 80px;
|
|
|
color: #1A5CA3;
|
|
|
font-size: 16px;
|
|
|
line-height: 80px;
|
|
|
text-align: center;
|
|
|
font-weight: 500;
|
|
|
cursor: pointer;
|
|
|
transition: all .2ms;
|
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
&:hover {
|
|
|
color: #fff;
|
|
|
background: url("../../../assets/reception/department-item1.png") no-repeat 0 0;
|
|
|
background-size: cover;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.label {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
|
|
|
padding: 42px 18.7% 39px 18.7%;
|
|
|
|
|
|
& > div:nth-child(1) {
|
|
|
height: 161px;
|
|
|
width: 140px;
|
|
|
background: #F29D5B;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
|
|
|
& > div {
|
|
|
color: #fff;
|
|
|
font-size: 16px;
|
|
|
font-weight: 500;
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-group {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
|
|
|
.label-item {
|
|
|
flex: 1;
|
|
|
color: #fff;
|
|
|
font-size: 16px;
|
|
|
text-align: center;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
&__left--single {
|
|
|
flex: 2.2;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-between;
|
|
|
align-content: space-between;
|
|
|
|
|
|
.single-item {
|
|
|
height: calc(50% - 6px);
|
|
|
|
|
|
margin-left: 12px;
|
|
|
}
|
|
|
& > div:only-child {
|
|
|
height: 100%;
|
|
|
}
|
|
|
& > div:nth-last-child(1) {
|
|
|
flex-basis: 100%;
|
|
|
|
|
|
}
|
|
|
}
|
|
|
&__left--complex {
|
|
|
flex: 2.2;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-between;
|
|
|
align-content: space-between;
|
|
|
|
|
|
.complex-item {
|
|
|
height: calc(50% - 6px);
|
|
|
|
|
|
margin-left: 12px;
|
|
|
}
|
|
|
& > div:only-child {
|
|
|
height: 100%;
|
|
|
}
|
|
|
& > div:nth-child(1) {
|
|
|
flex-basis: 100%;
|
|
|
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
&__right {
|
|
|
|
|
|
margin-left: 12px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 900px) {
|
|
|
.label-item > p {
|
|
|
font-size: 12px;
|
|
|
width: 20px;
|
|
|
text-overflow: ellipsis;
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
