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