inleft
2024-05-18 57e3bead08715d72efaeffe90fafa179b8366473
commit | author | age
ad2b70 1 <template>
L 2     <div class="blog-article">
3         <!-- <div class="index-post-img">
4             <a href="#">
5                 <div class="item-thumb lazy"
6                     style="background-image: url(https://image.ishelo.com/usr/themes/handsome/assets/img/sj/5.jpg)">
7                 </div>
8             </a>
9         </div> -->
10
15bd39 11         <div class="blog-article-meta">
b4f6a5 12             <h2 class="blog-article-title">{{title}}</h2>
ad2b70 13             <div class="article-split-line"></div>
aab811 14             <div class="article-summary blog-scroll" v-html="source" />
ad2b70 15             <div class="article-split-line"></div>
L 16             <div class="article-message-info ">
aab811 17                 <a-row type="flex" justify="center">
I 18                     <a-col>
19                         <div class="article-item">
20                             <a-icon type="read" />
21                             <!-- <a-icon type="eye" /> -->
22                             <span> {{read}}</span>
23                         </div>
24                     </a-col>
25                     <a-col>
26                         <div class="article-item">
27                             <a-icon type="like" />
28                             <span> {{like}}</span>
29                         </div>
ad2b70 30
aab811 31                     </a-col>
I 32                     <a-col>
33                         <div class="article-item">
34                             <a-icon type="folder-open" />
35                             <span> {{folder}}</span>
36                         </div>
37                     </a-col>
38                     <a-col>
39                         <div class="article-item">
40                             <a-icon type="clock-circle" />
41                             <span> {{publishTime}}</span>
42                         </div>
43                     </a-col>
44                 </a-row>
ad2b70 45             </div>
L 46             <div class="article-split-line"></div>
47             <div class="article-read-btn">
aab811 48                 <router-link class="btn" to="/mdDetail">
I 49                     <span>阅读全文 »</span>
50                 </router-link>
ad2b70 51             </div>
L 52         </div>
53
54     </div>
55
56 </template>
57
58 <script>
0dd41b 59     //import babyActicle from '../../assets/baby.htm'
ad2b70 60     export default {
L 61         props: {
aab811 62             source: {
0dd41b 63                 default: ''
aab811 64             },
I 65             "title": {
66                 default:"陈奕迅-Body Song 歌词",
67             },
68             "read": {
69                 default:1011,
70             },
71             "like": {
72                 default:233,
73             },
74             "folder": {
75                 default:"歌词",
76             },
77             "publishTime": {
78                 default:"2020-05-26",
79             }
ad2b70 80         },
L 81         data() {
82             return {
aab811 83                 // "title": "陈奕迅-Body Song 歌词",
I 84                 // "read": 1011,
85                 // "like": 233,
86                 // "folder": "歌词",
87                 // "publishTime": "2020-05-26",
ad2b70 88             }
L 89         }
90     }
91 </script>
92
93 </script>
94
95 <style lang="less">
aab811 96     .article-item {
I 97         padding: 0px 5px;
98     }
99
ad2b70 100     /*文章部分*/
L 101     .blog-article {
102         margin-top: 10px;
103         margin-bottom: 20px;
104         border-radius: 15px;
105         border: none;
aab811 106         box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
ad2b70 107         /*box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);*/
L 108     }
109
15bd39 110     .blog-article-meta {
ad2b70 111         padding: 30px 30px 10px;
L 112         background-color: white;
113         border-radius: 15px;
114     }
115
b4f6a5 116     .blog-article-title {
ad2b70 117         color: #555;
L 118         font-size: 14px;
119         line-height: 14px;
120         padding-bottom: 15px;
121         margin-top: 0 !important;
122         display: block;
123         overflow: hidden;
124         white-space: nowrap;
125         text-overflow: ellipsis;
126         text-align: center;
d629d9 127
L 128         a {
129             color: black;
130         }
ad2b70 131     }
L 132
133     .article-split-line {
134         width: 100%;
135         height: 2px;
136         overflow: hidden;
137         font-size: 0;
138         margin-top: 8px;
139         margin-bottom: 8px;
140         border-color: rgba(237, 241, 242, .6);
141
142         border-bottom: 1px solid rgba(222, 229, 231, .45);
143         display: block
144     }
145
146     .article-message-info {
147         text-align: center;
148
149         li {
150             display: inline-block;
151             padding-right: 5px;
152             padding-left: 5px;
153
154             span {
155                 padding-left: 0px;
156             }
157         }
158     }
159
160
161     .article-summary {
162         max-height: 200px;
163         overflow: hidden;
164
165         p {
166             line-height: 17px;
167             font-size: 10px;
168         }
169     }
170
171     .article-summary p {
172         text-align: center;
173     }
174
175     .article-read-btn {
176         text-align: center;
177         display: block;
178     }
179
180     .btn {
181         display: inline-block;
182         padding: 0 20px;
183         color: #555;
184         background: #fff;
185         border: 2px solid #555;
186         text-decoration: none;
187         border-radius: 2px;
188
189         line-height: 2;
190         font-size: 14px;
191         overflow-wrap: break-word;
192         word-wrap: break-word;
193         cursor: pointer;
194
195         transition-property: background-color;
196         transition-duration: .2s;
197         transition-timing-function: ease-in-out;
198         transition-delay: 0s;
199     }
200
201     .btn:hover {
202         background: #262a30;
203         color: #fff;
204     }
205
206     /*文章图片部分*/
207     .item-thumb {
208         min-height: 250px;
209         position: relative;
210         display: block;
211         background-position: 50% 50%;
212         background-size: cover;
213         border-radius: 15px;
214     }
215
216     .item-thumb {
217         cursor: pointer;
218         transition: all 0.6s;
219     }
220
221     .item-thumb:hover {
222         transform: scale(1.05);
223     }
224
225     .item-thumb-small {
226         cursor: pointer;
227         transition: all 0.6s;
228     }
229
230     .item-thumb-small:hover {
231         transform: scale(1.05);
232     }
233 </style>