<template>
|
<div class="blog-container ">
|
<div>
|
<span class="blog-right-side-portion-title " v-bind:class="{'title-remark':isShowRemark}">
|
|
<span v-if="isShowLink">
|
<router-link :to="link">
|
{{title}}
|
</router-link>
|
</span>
|
<span v-else>
|
{{title}}
|
</span>
|
</span>
|
</div>
|
<div class="blog-scroll show-line ">
|
<div class="blog-right-side-meta " v-for="item in list">
|
<div>
|
<span class="blog-display-hide-content">{{item.name}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</template>
|
|
<script>
|
export default {
|
props: {
|
link: {
|
default: "#"
|
},
|
title: "",
|
list: "",
|
isShowRemark: false,
|
isShowLink: false
|
},
|
data() {
|
return {
|
|
}
|
}
|
}
|
</script>
|
|
</script>
|
|
<style lang="less">
|
/*右边的部分*/
|
|
.blog-right-side-portion-title {
|
a {
|
color: black;
|
}
|
|
display: block;
|
font-size: 15px;
|
padding-bottom: 8px;
|
}
|
|
span.title-remark::after {
|
content: "(按字母索引)";
|
color: #999;
|
font-size: 10px;
|
}
|
|
.blog-right-side-meta span {
|
/*word-break: keep-all;*/
|
/*word-wrap: break-word;*/
|
color: #999;
|
font-size: 13px;
|
line-height: 17px;
|
display: block;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
/* normal文本换行*/
|
|
word-break: keep-all;
|
// transition-property: background-color;
|
// transition-duration: .2s;
|
// transition-timing-function: ease-in-out;
|
// transition-delay: 0s;
|
}
|
|
div .blog-right-side-meta a span:hover {
|
background: #262a30;
|
color: #fff;
|
// white-space: normal;
|
// word-break: break-word;
|
/*可以换行 white-space CSS 属性是用来设置如何处理元素中的空白。*/
|
height: 20%;
|
}
|
</style>
|
