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