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