parent
64c80f7ca6
commit
4f93158656
|
After Width: | Height: | Size: 13 KiB |
@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div class="label">
|
||||
<div class="container">
|
||||
<div class="title">
|
||||
<div class="title__text">所有标签</div>
|
||||
<el-input placeholder="搜索标签" v-model="input" class="title__input">
|
||||
<template #append>
|
||||
<el-button class="title__input--btn" icon="el-icon-search"></el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<div class="list">
|
||||
<div class="list__item" v-for="i in 15">
|
||||
<div>
|
||||
<svg viewBox="0 0 13 11"
|
||||
preserveAspectRatio="xMinYMin meet">
|
||||
<path d="M 1 11 L 1 1 L 12 1 L 12 10 l -7 0 l 0 -5 l 4 0"
|
||||
fill="none"
|
||||
stroke="#4c84c5"
|
||||
stroke-width="2"
|
||||
pathLength="1"></path>
|
||||
</svg>
|
||||
<div>{{ labels[i % labels.length] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input: '',
|
||||
labels: ['学籍管理','人才','补助','培养方案','综合科技','党建工作创新奖','处置','党建工作创新奖','处置','党建工作创新奖','处置'],
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
computed: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.label {
|
||||
background: #f8f8f8;
|
||||
|
||||
padding: 31px 18.75%;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 15px 0 rgba(130,127,126,0.1);
|
||||
|
||||
padding: 24px 23px 44px 22px;
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&__text {
|
||||
|
||||
padding-left: 5px;
|
||||
}
|
||||
&__input {
|
||||
width: 207px;
|
||||
|
||||
& ::v-deep .el-input__inner {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
&--btn {
|
||||
width: 48px;
|
||||
height: 35px;
|
||||
background: #3788D6;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-column-gap: 17px;
|
||||
grid-row-gap: 30px;
|
||||
|
||||
margin-top: 19px;
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all .2s;
|
||||
border-radius: 30px;
|
||||
cursor: pointer;
|
||||
|
||||
padding: 9px 19px;
|
||||
|
||||
& > svg {
|
||||
width: 13px;
|
||||
height: 11px;
|
||||
}
|
||||
& > div {
|
||||
|
||||
padding-left: 13px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #EEEBEA;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div class="list1">
|
||||
<div class="container">
|
||||
<div class="list">
|
||||
<div class="list__item" v-for="i in 8">
|
||||
<div class="list__item--name">教育部关于公布《高等学校信息公开事项清单》的通知</div>
|
||||
<div class="list__item--date">{{ $moment(new Date()).format('YYYY-MM-DD') }}</div>
|
||||
<div class="list__item--btn">预览</div>
|
||||
<div class="list__item--download">
|
||||
<i class="el-icon-download"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-pagination
|
||||
class="page"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {},
|
||||
computed: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.list1 {
|
||||
background: #f8f8f8;
|
||||
|
||||
padding: 31px 18.75%;
|
||||
}
|
||||
.container {
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 15px 0 rgba(130,127,126,0.1);
|
||||
|
||||
padding: 24px 23px 44px 22px;
|
||||
|
||||
}
|
||||
.list {
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #F8F8F8;
|
||||
|
||||
padding: 11px 9px 11px 27px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
border-radius: 6px;
|
||||
background: #cad8e4;
|
||||
|
||||
transform: translateY(-50%);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
}
|
||||
&--name {
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
|
||||
}
|
||||
&--date {
|
||||
font-size: 13px;
|
||||
color: #999999;
|
||||
|
||||
margin-right: 42px;
|
||||
}
|
||||
&--btn {
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: #247EC3;
|
||||
border-radius: 30px;
|
||||
border: 1px solid #247EC3;
|
||||
transition: all .2s;
|
||||
|
||||
padding: 7px 17px;
|
||||
margin-right: 23px;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: #247EC3;
|
||||
}
|
||||
}
|
||||
&--download {
|
||||
cursor: pointer;
|
||||
& > i{
|
||||
font-size: 16px;
|
||||
color: #247EC3;
|
||||
}
|
||||
|
||||
padding-right: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
margin-top: 30px;
|
||||
|
||||
& ::v-deep .btn-prev, ::v-deep .btn-next ,::v-deep .el-pager > li {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
line-height: 39px;
|
||||
text-align: center;
|
||||
border-radius: 100px;
|
||||
background: #fff;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
& ::v-deep .btn-prev, ::v-deep .btn-next {
|
||||
background: #fff;
|
||||
border: 1px solid #e7e7e7;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<div class="list1">
|
||||
<div class="container">
|
||||
<div class="list">
|
||||
<div class="list__item" v-for="i in 8">
|
||||
<div class="list__item--pre">苏卫【2011】2号</div>
|
||||
<div class="list__item--name">教育部关于公布《高等学校信息公开事项清单》的通知</div>
|
||||
<div class="list__item--date">{{ $moment(new Date()).format('YYYY-MM-DD') }}</div>
|
||||
<div class="list__item--btn">预览</div>
|
||||
<div class="list__item--download">
|
||||
<i class="el-icon-download"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-pagination
|
||||
class="page"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {},
|
||||
computed: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.list1 {
|
||||
background: #f8f8f8;
|
||||
|
||||
padding: 31px 18.75%;
|
||||
}
|
||||
.container {
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 15px 0 rgba(130,127,126,0.1);
|
||||
|
||||
padding: 24px 23px 44px 22px;
|
||||
|
||||
}
|
||||
.list {
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #F8F8F8;
|
||||
|
||||
padding: 11px 9px 11px 0;
|
||||
|
||||
&--pre {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #398AC9;
|
||||
|
||||
padding-right: 10px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content:'';
|
||||
width: 2px;
|
||||
background: #398AC9;
|
||||
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
bottom: 2px;
|
||||
right: -1px;
|
||||
}
|
||||
}
|
||||
&--name {
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
|
||||
padding-left: 10px;
|
||||
}
|
||||
&--date {
|
||||
font-size: 13px;
|
||||
color: #999999;
|
||||
|
||||
margin-right: 42px;
|
||||
}
|
||||
&--btn {
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: #247EC3;
|
||||
border-radius: 30px;
|
||||
border: 1px solid #247EC3;
|
||||
transition: all .2s;
|
||||
|
||||
padding: 7px 17px;
|
||||
margin-right: 23px;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: #247EC3;
|
||||
}
|
||||
}
|
||||
&--download {
|
||||
cursor: pointer;
|
||||
& > i{
|
||||
font-size: 16px;
|
||||
color: #247EC3;
|
||||
}
|
||||
|
||||
padding-right: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
margin-top: 30px;
|
||||
|
||||
& ::v-deep .btn-prev, ::v-deep .btn-next ,::v-deep .el-pager > li {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
line-height: 39px;
|
||||
text-align: center;
|
||||
border-radius: 100px;
|
||||
background: #fff;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
& ::v-deep .btn-prev, ::v-deep .btn-next {
|
||||
background: #fff;
|
||||
border: 1px solid #e7e7e7;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue