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