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