| commit | author | age | ||
| ad2b70 | 1 | <template> |
| L | 2 | <div class="blog-container "> |
| 3 | <div> | |
| f9c38e | 4 | <span class="blog-right-side-portion-title " v-bind:class="{'title-remark':isShowRemark}"> |
| I | 5 | <router-link :to="link"> |
| 6 | {{title}} | |
| 7 | </router-link> | |
| 8 | </span> | |
| ad2b70 | 9 | </div> |
| L | 10 | <div class="blog-scroll show-line "> |
| 11 | <div class="blog-right-side-meta " v-for="item in list"> | |
| 12 | <div> | |
| 56a4b8 | 13 | <router-link to="/box1"> |
| I | 14 | <span class="blog-display-hide-content">{{item.name}}</span> |
| 15 | </router-link> | |
| ad2b70 | 16 | </div> |
| L | 17 | </div> |
| 18 | </div> | |
| 19 | </div> | |
| 20 | ||
| 21 | </template> | |
| 22 | ||
| 23 | <script> | |
| 24 | export default { | |
| 25 | props: { | |
| f9c38e | 26 | link: { |
| I | 27 | default:"#" |
| 28 | }, | |
| ad2b70 | 29 | title: "", |
| L | 30 | list: "", |
| 56a4b8 | 31 | isShowRemark: false |
| ad2b70 | 32 | }, |
| L | 33 | data() { |
| 34 | return { | |
| 35 | ||
| 36 | } | |
| 37 | } | |
| 38 | } | |
| 39 | </script> | |
| 40 | ||
| 41 | </script> | |
| 42 | ||
| 43 | <style lang="less"> | |
| 44 | /*右边的部分*/ | |
| 56a4b8 | 45 | |
| ad2b70 | 46 | .blog-right-side-portion-title { |
| f9c38e | 47 | a { |
| I | 48 | color: black; |
| 49 | } | |
| 50 | ||
| 56a4b8 | 51 | display: block; |
| I | 52 | font-size: 15px; |
| 53 | padding-bottom: 8px; | |
| ad2b70 | 54 | } |
| 56a4b8 | 55 | |
| ad2b70 | 56 | span.title-remark::after { |
| 56a4b8 | 57 | content: "(按字母索引)"; |
| I | 58 | color: #999; |
| 59 | font-size: 10px; | |
| ad2b70 | 60 | } |
| 56a4b8 | 61 | |
| ad2b70 | 62 | .blog-right-side-meta span { |
| L | 63 | /*word-break: keep-all;*/ |
| 64 | /*word-wrap: break-word;*/ | |
| 65 | color: #999; | |
| 66 | font-size: 13px; | |
| 67 | line-height: 17px; | |
| 68 | display: block; | |
| 69 | overflow: hidden; | |
| 70 | text-overflow: ellipsis; | |
| 71 | ||
| 72 | white-space: nowrap; | |
| 73 | /* normal文本换行*/ | |
| 74 | ||
| 75 | word-break: keep-all; | |
| 76 | // transition-property: background-color; | |
| 77 | // transition-duration: .2s; | |
| 78 | // transition-timing-function: ease-in-out; | |
| 79 | // transition-delay: 0s; | |
| 80 | } | |
| 81 | ||
| 82 | div .blog-right-side-meta a span:hover { | |
| 56a4b8 | 83 | background: #262a30; |
| ad2b70 | 84 | color: #fff; |
| d629d9 | 85 | // white-space: normal; |
| L | 86 | // word-break: break-word; |
| ad2b70 | 87 | /*可以换行 white-space CSS 属性是用来设置如何处理元素中的空白。*/ |
| L | 88 | height: 20%; |
| 89 | } | |
| 90 | </style> | |
