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