lijh
2022-01-13 ad2b70777b866a9f4848a89fd0e343f991f8a604
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<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"><a href="#">陈奕迅-Body Song 歌词</a></h2>
            <div class="article-split-line"></div>
            <div class="article-summary blog-scroll">
                <p>Baby Song - 陈奕迅 (Eason Chan)</p>
                <p>词:岑宁儿</p>
                <p>曲:岑宁儿</p>
                <p>你的眼睛 像颗水晶通透</p>
                <p>里面有一个无穷无尽的宇宙</p>
                <p>小小的你 在你小小的梦里</p>
                <p>把我所有大大的事情都吹进风里</p>
                <p>我为我将对你撒的谎先跟你道歉</p>
                <p>当你发现黑白不是那么的分明</p>
                <p>世界不是那么的公平</p>
                <p>别太失望 我讲的是个梦想</p>
                <p>不用太听我们的话</p>
                <p>不要让任何人告诉你</p>
                <p>你该怎样对待世界</p>
                <p>或它该怎对你</p>
                <p>要跟现在一样随心</p>
                <p>让你的眼睛和心依然纯净</p>
                <p>可惜世界不及你好</p>
                <p>原谅我们 我们都还在找</p>
                <p>而时间它只负责流动</p>
                <p>不负责 育你成长</p>
                <p>不过你只需要倾听</p>
                <p>倾听你的心</p>
                <p>你的眼睛 像颗水晶通透</p>
                <p>里面有一个无穷无尽的宇宙</p>
                <p>小小的你 在你小小的梦里</p>
                <p>把我所有大大的事情都吹进风里</p>
                <p>都吹进风里</p>
                <p>-</p>
            </div>
            <div class="article-split-line"></div>
            <div class="article-message-info ">
                <ul>
                    <li>
                        <a-icon type="read" />
                        <!-- <a-icon type="eye" /> -->
                        <span> 101</span>
                    </li>
                    <li>
                        <a-icon type="like" /> 
                        <span> 233</span>
 
                    </li>
                    <li>
                        <a-icon type="folder-open" />
                        <span> 歌词</span>
                    </li>
                    <li>
                        <a-icon type="clock-circle" /> 
                        <span>2020-05-26 18:00:00</span>
                    </li>
                </ul>
            </div>
            <div class="article-split-line"></div>
            <div class="article-read-btn"><a class="btn" href="#" rel="contents">阅读全文 »</a></div>
        </div>
 
    </div>
 
</template>
 
<script>
    export default {
        props: {
            title: "",
            list: ""
        },
        data() {
            return {
 
            }
        }
    }
</script>
 
</script>
 
<style lang="less">
    /*文章部分*/
    .blog-article {
        margin-top: 10px;
        margin-bottom: 20px;
        border-radius: 15px;
        border: none;
        /*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;
    }
 
    .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>