<template>
|
<div class="blog-article">
|
<!-- <div class="index-post-img">
|
<a href="#">
|
<div class="item-thumb lazy"
|
style="background-image: url(https://image.ishelo.com/usr/themes/handsome/assets/img/sj/5.jpg)">
|
</div>
|
</a>
|
</div> -->
|
|
<div class="article-meta">
|
<h2 class="article-title">{{title}}</h2>
|
<div class="article-split-line"></div>
|
<div class="article-summary blog-scroll" v-html="source" />
|
<div class="article-split-line"></div>
|
<div class="article-message-info ">
|
<a-row type="flex" justify="center">
|
<a-col>
|
<div class="article-item">
|
<a-icon type="read" />
|
<!-- <a-icon type="eye" /> -->
|
<span> {{read}}</span>
|
</div>
|
</a-col>
|
<a-col>
|
<div class="article-item">
|
<a-icon type="like" />
|
<span> {{like}}</span>
|
</div>
|
|
</a-col>
|
<a-col>
|
<div class="article-item">
|
<a-icon type="folder-open" />
|
<span> {{folder}}</span>
|
</div>
|
</a-col>
|
<a-col>
|
<div class="article-item">
|
<a-icon type="clock-circle" />
|
<span> {{publishTime}}</span>
|
</div>
|
</a-col>
|
</a-row>
|
</div>
|
<div class="article-split-line"></div>
|
<div class="article-read-btn">
|
<router-link class="btn" to="/mdDetail">
|
<span>阅读全文 »</span>
|
</router-link>
|
</div>
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
import babyActicle from '../../assets/baby.htm'
|
export default {
|
props: {
|
source: {
|
default: babyActicle
|
},
|
"title": {
|
default:"陈奕迅-Body Song 歌词",
|
},
|
"read": {
|
default:1011,
|
},
|
"like": {
|
default:233,
|
},
|
"folder": {
|
default:"歌词",
|
},
|
"publishTime": {
|
default:"2020-05-26",
|
}
|
},
|
data() {
|
return {
|
// "title": "陈奕迅-Body Song 歌词",
|
// "read": 1011,
|
// "like": 233,
|
// "folder": "歌词",
|
// "publishTime": "2020-05-26",
|
}
|
}
|
}
|
</script>
|
|
</script>
|
|
<style lang="less">
|
.article-item {
|
padding: 0px 5px;
|
}
|
|
/*文章部分*/
|
.blog-article {
|
margin-top: 10px;
|
margin-bottom: 20px;
|
border-radius: 15px;
|
border: none;
|
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
|
/*box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);*/
|
}
|
|
.article-meta {
|
padding: 30px 30px 10px;
|
background-color: white;
|
border-radius: 15px;
|
}
|
|
.article-title {
|
color: #555;
|
font-size: 14px;
|
line-height: 14px;
|
padding-bottom: 15px;
|
margin-top: 0 !important;
|
display: block;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
text-align: center;
|
|
a {
|
color: black;
|
}
|
}
|
|
.article-split-line {
|
width: 100%;
|
height: 2px;
|
overflow: hidden;
|
font-size: 0;
|
margin-top: 8px;
|
margin-bottom: 8px;
|
border-color: rgba(237, 241, 242, .6);
|
|
border-bottom: 1px solid rgba(222, 229, 231, .45);
|
display: block
|
}
|
|
.article-message-info {
|
text-align: center;
|
|
li {
|
display: inline-block;
|
padding-right: 5px;
|
padding-left: 5px;
|
|
span {
|
padding-left: 0px;
|
}
|
}
|
}
|
|
|
.article-summary {
|
max-height: 200px;
|
overflow: hidden;
|
|
p {
|
line-height: 17px;
|
font-size: 10px;
|
}
|
}
|
|
.article-summary p {
|
text-align: center;
|
}
|
|
.article-read-btn {
|
text-align: center;
|
display: block;
|
}
|
|
.btn {
|
display: inline-block;
|
padding: 0 20px;
|
color: #555;
|
background: #fff;
|
border: 2px solid #555;
|
text-decoration: none;
|
border-radius: 2px;
|
|
line-height: 2;
|
font-size: 14px;
|
overflow-wrap: break-word;
|
word-wrap: break-word;
|
cursor: pointer;
|
|
transition-property: background-color;
|
transition-duration: .2s;
|
transition-timing-function: ease-in-out;
|
transition-delay: 0s;
|
}
|
|
.btn:hover {
|
background: #262a30;
|
color: #fff;
|
}
|
|
/*文章图片部分*/
|
.item-thumb {
|
min-height: 250px;
|
position: relative;
|
display: block;
|
background-position: 50% 50%;
|
background-size: cover;
|
border-radius: 15px;
|
}
|
|
.item-thumb {
|
cursor: pointer;
|
transition: all 0.6s;
|
}
|
|
.item-thumb:hover {
|
transform: scale(1.05);
|
}
|
|
.item-thumb-small {
|
cursor: pointer;
|
transition: all 0.6s;
|
}
|
|
.item-thumb-small:hover {
|
transform: scale(1.05);
|
}
|
</style>
|
