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