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