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