<template>
|
<div class="blog-container">
|
<span class="blog-pigeonhole">归档信息</span>
|
<div class="blog-scroll ">
|
<div class="">
|
<p class="blog-pigeonhole-p">2020</p>
|
<div class="blog-pigeonhole-list">
|
|
<div class="blog-pigeonhole-item" v-for="item in list2020">
|
<router-link to="/tagTime">
|
<span>{{item.month}}月</span>
|
</router-link>
|
<span>{{item.count}}篇</span>
|
|
</div>
|
</div>
|
</div>
|
<div>
|
<p class="blog-pigeonhole-p">2019</p>
|
<div class="blog-pigeonhole-list">
|
|
<div class="blog-pigeonhole-item" v-for="item in list2019">
|
<router-link to="/tagTime">
|
<span>{{item.month}}月</span>
|
</router-link>
|
<span>{{item.count}}篇</span>
|
</div>
|
</div>
|
</div>
|
<div>
|
<p class="blog-pigeonhole-p">2019</p>
|
<div class="blog-pigeonhole-list">
|
|
<div class="blog-pigeonhole-item" v-for="item in list2019">
|
<router-link to="/tagTime">
|
<span>{{item.month}}月</span>
|
</router-link>
|
<span>{{item.count}}篇</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
list2019: [{
|
month: "12",
|
count: 10
|
}, {
|
month: "10",
|
count: 11
|
}, {
|
month: "9",
|
count: 9
|
}],
|
list2020: [{
|
month: "12",
|
count: 8
|
}, {
|
month: "10",
|
count: 7
|
}, {
|
month: "9",
|
count: 6
|
}, {
|
month: "8",
|
count: 5
|
}, {
|
month: "7",
|
count: 4
|
}, {
|
month: "6",
|
count: 3
|
}, {
|
month: "5",
|
count: 2
|
}, {
|
month: "4",
|
count: 1
|
}]
|
}
|
}
|
}
|
</script>
|
|
</script>
|
|
<style lang="less">
|
/*归档部分*/
|
|
.blog-pigeonhole {
|
font-size: 15px;
|
}
|
|
.blog-pigeonhole-p {
|
width: 20%;
|
text-align: center;
|
line-height: 20px;
|
border-radius: 6px 6px 6px 6px;
|
/*background-color: #edf0f3;*/
|
margin-left: 3%;
|
margin-bottom: 3%;
|
opacity: 0.7;
|
}
|
|
.blog-pigeonhole-list {
|
line-height: 1.6;
|
padding-left: 3%;
|
padding-right: 3%;
|
/*display: flex; !*弹性盒子*!*/
|
/*justify-content: flex-end; !*在弹性盒对象的 <div> 元素中的各项周围留有空白：*!*/
|
|
display: flex;
|
display: -webkit-flex;
|
-webkit-justify-content: flex-start;
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
/*让弹性盒元素在必要的时候拆行：*/
|
align-content: flex-start;
|
-webkit-align-content: flex-start;
|
|
}
|
|
.blog-pigeonhole-item {
|
min-width: 22%;
|
margin-left: 1.5%;
|
margin-right: 1.5%;
|
margin-bottom: 5%;
|
|
a span:first-child {
|
height: 22px;
|
background-color: #edf0f3;
|
border-radius: 6px 6px 0 0;
|
opacity: .8;
|
color: #999aaa;
|
line-height: 22px;
|
margin-bottom: 1px;
|
text-align: center;
|
}
|
|
a span:last-child {
|
height: 22px;
|
background-color: #f6f8fa;
|
border-radius: 0 0 6px 6px;
|
color: #555666;
|
line-height: 20px;
|
font-weight: 600;
|
text-align: center;
|
}
|
|
span {
|
display: block;
|
}
|
}
|
</style>
|
