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