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