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