You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

100 lines
2.2 KiB

3 years ago
<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">教育部关于公布高等学校信息公开事项清单的通知</li>
<li class="news__list--item">高等学校信息公开办法教育部令第29号</li>
<li class="news__list--item">苏州卫生职业技术学院信息公开实施办法试行</li>
<li class="news__list--item">苏州卫生职业技术学院信息公开实施办法试行</li>
<li class="news__list--item"> 苏州卫生职业技术学院信息公开实施办法试行</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">
</ul>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
export default {
data() {
return {}
},
methods: {},
computed: {},
}
</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;
}
}
}
</style>