inleft
2024-05-18 57e3bead08715d72efaeffe90fafa179b8366473
commit | author | age
41b36f 1 <template>
I 2     <div class="blog-container archive">
3         <span class="blog-pigeonhole">
63f511 4             <router-link :to="{name:'tagTime'}">
41b36f 5                 归档信息
I 6             </router-link>
7         </span>
fa1bd9 8         <div class="blog-scroll" v-bind:class="{miniHeight:showLess,maxHeight:!showLess}">
I 9             <div v-for="(yearData,index) in myData" class="fade" v-if="index < 2 || !showLess">
63f511 10                 <router-link :to="{name:'tagTime',query:{year:yearData.year}}">
aab811 11                     <p class="blog-pigeonhole-p">{{yearData.year}}年</p>
41b36f 12                 </router-link>
I 13                 <div class="blog-pigeonhole-list">
14                     <div class="blog-pigeonhole-item" v-for="item in yearData.list">
63f511 15                         <router-link :to="{name:'tagTime',
fa1bd9 16                             query:{year:yearData.year,month:item.month}}">
41b36f 17                             <span>{{item.month}}月</span>
I 18                         </router-link>
4b854c 19                         <span>{{item.count}}篇</span>
41b36f 20                     </div>
I 21                 </div>
22             </div>
23         </div>
fa1bd9 24         <div @click="()=>showLess=!showLess" v-if="myData.length>2 && showLess">...</div>
41b36f 25     </div>
I 26
27 </template>
28
29 <script>
4b854c 30     import {
I 31         archive
32     } from '../../api/blogStatistics.js'
fa1bd9 33
41b36f 34     export default {
fa1bd9 35
4b854c 36         beforeMount() {
I 37             archive({}).then((res) => {
38                 this.myData = res.data;
39             })
40         },
41b36f 41         data() {
I 42             return {
fa1bd9 43                 showLess: true,
I 44                 "myData": [],
41b36f 45             }
I 46         }
47     }
48 </script>
49
50 </script>
51
52 <style lang="less">
fa1bd9 53     .blog-scroll {
I 54         transition: all ease-in-out 0.8s;
55     }
56
57     .miniHeight {
c3aa82 58         max-height: 150px;
fa1bd9 59     }
I 60
61     .maxHeight {
62         max-height: 800px;
63     }
64
41b36f 65     /*归档部分*/
I 66     .archive {
67         a {
68             color: black;
69         }
fa1bd9 70
41b36f 71     }
I 72
73     .blog-pigeonhole {
74         font-size: 15px;
75     }
76
77     .blog-pigeonhole-p {
78         width: 20%;
79         text-align: center;
80         line-height: 20px;
81         border-radius: 6px 6px 6px 6px;
82         /*background-color: #edf0f3;*/
fa1bd9 83         margin-left: 5%;
41b36f 84         margin-bottom: 3%;
I 85         opacity: 0.7;
86     }
87
88     .blog-pigeonhole-list {
89         line-height: 1.6;
90         padding-left: 3%;
91         padding-right: 3%;
92         /*display: flex; !*弹性盒子*!*/
93         /*justify-content: flex-end; !*在弹性盒对象的 <div> 元素中的各项周围留有空白:*!*/
94
95         display: flex;
96         display: -webkit-flex;
97         -webkit-justify-content: flex-start;
98         justify-content: flex-start;
99
100         flex-wrap: wrap;
101         /*让弹性盒元素在必要的时候拆行:*/
102         align-content: flex-start;
103         -webkit-align-content: flex-start;
fa1bd9 104         transition: all 1 ease;
41b36f 105     }
I 106
107     .blog-pigeonhole-item {
108         min-width: 22%;
109         margin-left: 1.5%;
110         margin-right: 1.5%;
111         margin-bottom: 5%;
112
113         a span:first-child {
114             height: 22px;
115             background-color: #edf0f3;
116             border-radius: 6px 6px 0 0;
117             opacity: .8;
118             color: #999aaa;
119             line-height: 22px;
120             margin-bottom: 1px;
121             text-align: center;
122         }
123
124         a span:last-child {
125             height: 22px;
126             background-color: #f6f8fa;
127             border-radius: 0 0 6px 6px;
128             color: #555666;
129             line-height: 20px;
130             font-weight: 600;
131             text-align: center;
132         }
133
134         span {
135             display: block;
136         }
137     }
138 </style>