inleft
2022-08-02 944ca64b2650470a2b0616c43f83e6e88123a7b2
commit | author | age
06ee76 1 <template>
74344a 2     <div class="recent-posts" id="recent-posts">
I 3         <div class="recent-post-item">
4             <div class="miniTag" v-if="isTop==1">置顶</div>
5             <div class="post_cover left_radius" v-if="index%2==0">
3a5d66 6
I 7                 <a :href="jumpURL" target="_blank" class="no-underline" v-if="articleFileType==5"
8                     @click="showMsg(articleFileType,jumpURL)">
9                     <div class="block left_radius"></div>
10                     <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
11                 </a>
12                 <router-link :to="{path:'/mdDetail',query:{id:id}}" :title="title" v-else>
74344a 13                     <div class="block left_radius"></div>
I 14                     <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
15                 </router-link>
16             </div>
63af45 17
74344a 18             <div class="post_cover right_radius" v-else>
3a5d66 19                 <a :href="jumpURL" target="_blank" class="no-underline" v-if="articleFileType==5"
I 20                     @click="showMsg(articleFileType,jumpURL)">
21                     <div class="block left_radius"></div>
22                     <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
23                 </a>
24                 <router-link :to="{path:'/mdDetail',query:{id:id}}" :title="title" v-else>
74344a 25                     <div class="block right_radius"></div>
I 26                     <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
27                     <!-- <img class="post_bg" src="https://unpkg.zhimg.com/ahzo@1.0.3/blogpic/1.jpg" onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" :alt="title"> -->
28                 </router-link>
29             </div>
06ee76 30
74344a 31             <div class="recent-post-info">
3a5d66 32
944ca6 33                 <!-- <a :href="jumpURL" target="_blank" class="article-title" v-if="articleFileType==5"
3a5d66 34                     @click="showMsg(articleFileType,jumpURL)">
I 35                     <a-icon type="lock" style="color:rgba(0,0,0,.25)" v-if="authStatus==3" />
36                     <a-icon type="stop" style="color:rgba(0,0,0,.25)" v-if="authStatus==2" />
37                     {{title}}
38                     <a-badge :count="1" dot v-if="isAnyUpdate==1" title="最近有更新"></a-badge>
944ca6 39                 </a> -->
3a5d66 40
944ca6 41                 <router-link :to="{path:'/mdDetail',query:{id:id,articleFileType:articleFileType}}"
I 42                     class="article-title">
74344a 43                     <a-icon type="lock" style="color:rgba(0,0,0,.25)" v-if="authStatus==3" />
I 44                     <a-icon type="stop" style="color:rgba(0,0,0,.25)" v-if="authStatus==2" />
45                     {{title}}
cb7779 46                     <a-badge :count="1" dot v-if="isAnyUpdate==1" title="最近有更新"></a-badge>
74344a 47                 </router-link>
I 48                 <!-- <a class="article-title" href="/mdDetail" :title="title"> {{title}}</a> -->
49                 <div class="article-meta-wrap" style="display: flex;">
50                     <span class="post-meta-date">
51                         <a-icon type="calendar" />
52                         <span class="article-meta-label"></span>
3a5d66 53                         <time datetime="2022-01-13T06:25:00.000Z" title=" 2022-01-13 14:25:00"> {{publishDate}} </time>
74344a 54                     </span>
I 55                     <span class="article-meta__separator" style="margin: 0px 3px ;"> | </span>
3a5d66 56
74344a 57                     <span class="article-meta">
I 58                         <a-icon type="book" />
59                         <router-link :to="{path:'/articleList',query:{typeId:articleTypeId}}"
3a5d66 60                             class="article-meta__categories"> {{articleTypeName}}</router-link>
I 61                         <span v-if="articleFileType==5">
62                             <span v-if="jumpURL !=null && jumpURL!=''">
63                                 <span class="article-meta__separator" style="margin: 0px 3px ;">|</span>
64                                 <span class="post-meta-date">
65                                     <a-icon type="share-alt" />
66                                     <a :href="jumpURL" target="_blank" class="no-underline"> 外链 </a>
67                                 </span>
68                             </span>
69
70                             <span v-else>
71                                 <span class="article-meta__separator" style="margin: 0px 3px ;">|</span>
72                                 <span class="post-meta-date">
73                                     <a-icon type="thunderbolt" />碎碎念
74                                 </span>
75                             </span>
76                         </span>
74344a 77                         <!-- <a class="article-meta__categories" href="#"> {{tag}}</a> -->
I 78                     </span>
79                 </div>
80                 <div class="content">
81                     {{introduce}}
06ee76 82                 </div>
L 83             </div>
84         </div>
85     </div>
86 </template>
87
88 <script>
cb7779 89     import {
I 90         NotificationOutlined
91     } from '@ant-design/icons-vue';
92
06ee76 93     export default {
3a5d66 94         methods: {
I 95             showMsg(articleFileType, jumpURL) {
96                 if (articleFileType == 5 && (jumpURL == null || jumpURL == "")) {
97                     this.$message.info('这只是一句碎碎念,没有更多内容啦', 3);
98                     return
99                 }
100             }
101         },
cb7779 102         components: {
I 103             NotificationOutlined
104         },
63af45 105         props: {
c23efb 106             "index": {
I 107                 default: 0,
81c155 108             },
I 109             "id": {
63f511 110                 default: 0,
I 111             },
81c155 112             "articleTypeId": {
I 113                 default: null
114             },
63f511 115             "isTop": {
63af45 116                 default: 0,
I 117             },
4b854c 118             "authStatus": {
I 119                 default: 1,
120             },
63af45 121             "title": {
I 122                 default: "",
123             },
124             "articleTypeName": {
125                 default: "",
126             },
127             "introduce": {
128                 default: "",
129             },
130             "publishDate": {
131                 default: "",
132             },
cb7779 133             "updateDate": {
I 134                 default: "",
135             },
63af45 136             "coverFileURL": {
cb7779 137                 default: "",
I 138             },
139             "isAnyUpdate": {
3a5d66 140                 default: "",
I 141             },
142             "articleFileType": {
143                 default: 1,
144             },
145             "jumpURL": {
63af45 146                 default: "",
I 147             }
148         },
06ee76 149         data() {
L 150             return {
cb7779 151                 img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/1.jpg\"",
06ee76 152             }
L 153         }
154     }
155 </script>
156
157 <style lang="less">
158     @card-bg: #f5f8fa;
159     @card-box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px rgba(255, 255, 255, 1);
160     @ahzoo-proportion: 1;
161     @cursorURL: "https://blog.ahzoo.cn/blogpic/normal.cur";
162     @global-font-size: 14px;
163     @font-color: #666;
164     @title-clolr: dimgray;
165     @card-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8), inset 9px 9px 15px rgba(0, 0, 0, 0.1), inset -9px -9px 15px rgba(255, 255, 255, 1);
166
63f511 167     .recent-post-item {
I 168         position: relative;
dc66ec 169
I 170         a {
171             position: initial;
172         }
63f511 173     }
I 174
175     .miniTag {
176         z-index: 1;
177         position: absolute;
178         right: 8px;
179         top: 8px;
180         transform: rotate(30deg);
181         box-shadow: aliceblue;
182     }
06ee76 183
L 184     // #recent-posts>.recent-post-item:not(:first-child) {
185     //     margin-top: 1rem;
186     // }
187     #recent-posts>.recent-post-item {
188         margin-top: 1rem;
189     }
190
191     #recent-posts>.recent-post-item {
192         display: -webkit-box;
193         display: -moz-box;
194         display: -webkit-flex;
195         display: -ms-flexbox;
196         display: box;
197         display: flex;
198         -webkit-box-orient: horizontal;
199         -moz-box-orient: horizontal;
200         -o-box-orient: horizontal;
201         -webkit-flex-direction: row;
202         -ms-flex-direction: row;
203         flex-direction: row;
204         -webkit-box-align: center;
205         -moz-box-align: center;
206         -o-box-align: center;
207         -ms-flex-align: center;
208         -webkit-align-items: center;
209         align-items: center;
210         border-radius: 12px 8px 8px 12px;
211
212         -webkit-transition: all .3s;
213         -moz-transition: all .3s;
214         -o-transition: all .3s;
215         -ms-transition: all .3s;
216         transition: all .3s;
217
218         background: @card-bg;
219         -webkit-box-shadow: @card-box-shadow;
220         box-shadow: @card-box-shadow;
221
222     }
223
224     .recent-post-item a {
225         // color: #99a9bf;
226         text-decoration: none;
227         word-wrap: break-word;
228         -webkit-transition: all .2s;
229         -moz-transition: all .2s;
230         -o-transition: all .2s;
231         -ms-transition: all .2s;
232         transition: all .2s;
233         overflow-wrap: break-word;
234         background-color: transparent;
235     }
236
237     .recent-post-item {
238         padding-left: calc(1.2rem * @ahzoo-proportion) !important;
239         padding-right: calc(1.2rem * @ahzoo-proportion) !important;
240         // font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
241         line-height: 2;
242
243         img {
244             max-width: 100%;
245             -webkit-transition: all .2s;
246             -moz-transition: all .2s;
247             -o-transition: all .2s;
248             -ms-transition: all .2s;
249             transition: all .2s;
250             border-style: none;
251         }
252     }
253
254     .recent-post-item * {
6d1057 255         //cursor: url(@cursorURL), auto !important;
06ee76 256         font-size: @global-font-size;
L 257         color: @font-color;
258     }
259
260     * {
261         tap-highlight-color: transparent;
262         -webkit-tap-highlight-color: transparent;
263         box-sizing: border-box;
264     }
265
266     #recent-posts>.recent-post-item .post_cover {
dc66ec 267         // position: sticky;
I 268         position: inherit;
06ee76 269
dc66ec 270         width: 33%;
06ee76 271         opacity: .8;
L 272         padding: calc(1.2rem * @ahzoo-proportion) calc(0.2rem * @ahzoo-proportion);
273         overflow: hidden;
274         height: 100%;
275         -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
276     }
277
278     #recent-posts>.recent-post-item .left_radius {
279         border-radius: 8px 0 0 8px;
280     }
281
282     #recent-posts>.recent-post-item .right_radius {
283         -webkit-box-ordinal-group: 2;
284         -moz-box-ordinal-group: 2;
285         -o-box-ordinal-group: 2;
286         -ms-flex-order: 2;
287         -webkit-order: 2;
288         order: 2;
289         border-radius: 0 8px 8px 0;
290         border-top-left-radius: 0px;
291         border-top-right-radius: 8px;
292         border-bottom-right-radius: 8px;
293         border-bottom-left-radius: 0px;
294     }
295
296     .block.left_radius {
297         background: linear-gradient(to right, transparent, @card-bg 98%);
298         position: absolute;
299         width: 100%;
300         height: calc(100% - 2.2rem * @ahzoo-proportion);
301         z-index: 2;
302         top: calc(1.1rem * @ahzoo-proportion);
303     }
304
305     #recent-posts>.recent-post-item .post_cover img.post_bg {
306         border-radius: 15px;
307         width: 100%;
308         height: 100%;
309         -webkit-transition: all .6s;
310         -moz-transition: all .6s;
311         -o-transition: all .6s;
312         -ms-transition: all .6s;
313         transition: all .6s;
314         object-fit: cover;
315     }
316
317     .block.right_radius {
318         background: linear-gradient(to left, transparent, @card-bg 98%);
319         position: absolute;
320         width: 100%;
321         height: calc(100% - 2.2rem * @ahzoo-proportion);
322         z-index: 2;
323         top: calc(1.1rem * @ahzoo-proportion);
324     }
325
326     #recent-posts>.recent-post-item>.recent-post-info {
327         width: 77%;
328         padding: 0px calc(1.2rem * @ahzoo-proportion);
329         display: flex;
330         flex-direction: column;
331         overflow: hidden;
332
333         a {
334             text-decoration: none;
335             -webkit-transition: all .2s;
336             -moz-transition: all .2s;
337             -o-transition: all .2s;
338             -ms-transition: all .2s;
339             transition: all .2s;
340             overflow-wrap: break-word;
341         }
342     }
343
344     #recent-posts>.recent-post-item>.recent-post-info>.article-title {
345         order: 1;
346         font-weight: 600;
347         color: @title-clolr;
348         font-size: 1.6em;
349         margin-bottom: 0.3rem;
350         line-height: 1.4;
351         -webkit-transition: all .2s ease-in-out;
352         -moz-transition: all .2s ease-in-out;
353         -o-transition: all .2s ease-in-out;
354         -ms-transition: all .2s ease-in-out;
355         transition: all .2s ease-in-out;
356
357         display: -webkit-box;
358         overflow: hidden;
359         -webkit-box-orient: vertical;
360         /* autoprefixer: off */
361         -webkit-line-clamp: 2;
362         /* autoprefixer: on */
363     }
364
365
366
367     #recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap {
368         order: 3;
369         color: #858585;
370         font-size: 90%;
3a5d66 371         flex-wrap: wrap;
06ee76 372
L 373         .article-meta-label {
374             padding-right: 0.2rem;
375         }
376     }
377
378     #recent-posts>.recent-post-item>.recent-post-info>.content {
379         opacity: 0;
380         line-height: .8;
381         transition: all .25s;
382         color: #999;
383         margin-bottom: 19px;
384         text-overflow: ellipsis;
385         order: 2;
386         margin: 0;
387
388         display: -webkit-box;
389         overflow: hidden;
390         -webkit-box-orient: vertical;
391         /* autoprefixer: off */
392         -webkit-line-clamp: 3;
393         /* autoprefixer: on */
394
395     }
396
397     #recent-posts>.recent-post-item>.recent-post-info>.article-title:hover {
398         color: #448aff;
399     }
400
401
402
403     //div本体阴影
404     #recent-posts>.recent-post-item:hover {
405         -webkit-box-shadow: @card-hover-box-shadow;
406         box-shadow: @card-hover-box-shadow;
407     }
408
409     // 图片缩放
410     #recent-posts>.recent-post-item:hover img.post_bg {
411         -webkit-transform: scale(.9);
412         -moz-transform: scale(.9);
413         -o-transform: scale(.9);
414         -ms-transform: scale(.9);
415         transform: scale(.9);
416         -webkit-box-shadow: @card-hover-box-shadow;
417         box-shadow: @card-hover-box-shadow;
418     }
419
420     //内容缩放 内容显示
421     #recent-posts>.recent-post-item:hover .recent-post-info .content {
422         opacity: 1;
423         line-height: 1.8;
424         transition: all .25s;
425     }
426
427     #recent-posts>.recent-post-item .post_cover img.post_bg:hover {
428         transform: scale(.9);
429     }
430
431     #recent-posts>.recent-post-item .post_cover img.post_bg:hover {
432         -webkit-transform: scale(1.1);
433         -moz-transform: scale(1.1);
434         -o-transform: scale(1.1);
435         -ms-transform: scale(1.1);
436         transform: scale(1.1);
437     }
438
439     @media screen and (max-width:768px) {
440         #recent-posts .recent-post-item .recent-post-info .article-title {
441             font-size: 1.32em !important;
442             margin-bottom: 0 !important;
443         }
444     }
445
446     @media screen and (min-width: 769px) {
447         #recent-posts>.recent-post-item>.recent-post-info>.content {
448             opacity: 0;
449             line-height: .8;
450             transition: all .25s;
451             color: #999;
452             margin-bottom: 10px;
453             display: -webkit-container;
454             -webkit-line-clamp: 3;
455             text-overflow: ellipsis;
456             overflow: hidden;
457         }
458     }
459
460     @media screen and (max-width: 768px) {
461         #recent-posts>.recent-post-item>.recent-post-info {
462             width: 69%;
463             font-size: 12px !important;
464             margin: .7rem 0;
465         }
466     }
467
468     @media screen and (max-width: 768px) {
469         #recent-posts>.recent-post-item>.recent-post-info>.content {
470             opacity: 1;
471             line-height: 1.7;
472             color: #999;
473             display: -webkit-container;
474             -webkit-line-clamp: 3;
475             text-overflow: ellipsis;
476             overflow: hidden;
477         }
478     }
479
480     @media screen and (min-width: 769px) {
481         #recent-posts>.recent-post-item {
482             height: 15em;
483         }
484     }
485
486     @media screen and (max-width: 768px) {
487         #recent-posts .recent-post-item {
488             height: 12em !important;
489             padding: 0;
490             -webkit-flex-direction: row;
491             -ms-flex-direction: row;
492             flex-direction: row;
493         }
494     }
495
496     @media only screen and (max-width: 768px) {
497         @ahzoo-proportion: 0.65;
498         @global-font-size: 12px;
499     }
500 </style>