inleft
2022-02-17 6bcd135673be57b00ea68e58f1ae6aef2ac19e21
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>