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