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