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