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