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