<template>
|
<div class="blog-container archive">
|
<span class="blog-pigeonhole">
|
<router-link :to="{name:'tagTime'}">
|
归档信息
|
</router-link>
|
</span>
|
<div class="blog-scroll" v-bind:class="{miniHeight:showLess,maxHeight:!showLess}">
|
<div v-for="(yearData,index) in myData" class="fade" v-if="index < 2 || !showLess">
|
<router-link :to="{name:'tagTime',query:{year:yearData.year}}">
|
<p class="blog-pigeonhole-p">{{yearData.year}}年</p>
|
</router-link>
|
<div class="blog-pigeonhole-list">
|
<div class="blog-pigeonhole-item" v-for="item in yearData.list">
|
<router-link :to="{name:'tagTime',
|
query:{year:yearData.year,month:item.month}}">
|
<span>{{item.month}}月</span>
|
</router-link>
|
<span>{{item.count}}篇</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div @click="()=>showLess=!showLess" v-if="myData.length>2 && showLess">...</div>
|
</div>
|
|
</template>
|
|
<script>
|
import {
|
archive
|
} from '../../api/blogStatistics.js'
|
|
export default {
|
|
beforeMount() {
|
archive({}).then((res) => {
|
this.myData = res.data;
|
})
|
},
|
data() {
|
return {
|
showLess: true,
|
"myData": [],
|
}
|
}
|
}
|
</script>
|
|
</script>
|
|
<style lang="less">
|
.blog-scroll {
|
transition: all ease-in-out 0.8s;
|
}
|
|
.miniHeight {
|
max-height: 150px;
|
}
|
|
.maxHeight {
|
max-height: 800px;
|
}
|
|
/*归档部分*/
|
.archive {
|
a {
|
color: black;
|
}
|
|
}
|
|
.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: 5%;
|
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;
|
transition: all 1 ease;
|
}
|
|
.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>
|
