inleft
2022-03-02 846bd0e9adb70bb23778045ee1a252a6a58adc4f
commit | author | age
06ee76 1 <template>
L 2     <div>
63af45 3         <div class="recent-posts" id="recent-posts">
06ee76 4             <div class="recent-post-item">
63f511 5                 <div class="miniTag" v-if="isTop==1">置顶</div>
c23efb 6                 <div class="post_cover left_radius" v-if="index%2==0">
28d46d 7                     <router-link :to="{path:'/mdDetail',query:{id:id}}" :title="title">
06ee76 8                         <div class="block left_radius"></div>
4b854c 9                         <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
06ee76 10                     </router-link>
L 11                 </div>
63af45 12
06ee76 13                 <div class="post_cover right_radius" v-else>
28d46d 14                     <router-link :to="{path:'/mdDetail',query:{id:id}}" :title="title">
06ee76 15                         <div class="block right_radius"></div>
4b854c 16                         <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
63af45 17                         <!-- <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"> -->
06ee76 18                     </router-link>
L 19                 </div>
20
21                 <div class="recent-post-info">
4b854c 22                     <router-link :to="{path:'/mdDetail',query:{id:id}}" class="article-title">
63f511 23                         <a-icon type="lock" style="color:rgba(0,0,0,.25)" v-if="authStatus==3" />
I 24                         <a-icon type="stop" style="color:rgba(0,0,0,.25)" v-if="authStatus==2" />
4b854c 25                         {{title}}
I 26                     </router-link>
06ee76 27                     <!-- <a class="article-title" href="/mdDetail" :title="title"> {{title}}</a> -->
L 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"
63af45 33                                 title=" 2022-01-13 14:25:00">{{publishDate}}</time>
06ee76 34                         </span>
L 35                         <span class="article-meta__separator" style="margin: 0px 3px ;"> | </span>
36                         <span class="article-meta">
37                             <a-icon type="book" />
81c155 38                             <router-link :to="{path:'/articleList',query:{typeId:articleTypeId}}"
I 39                                 class="article-meta__categories">
4b854c 40                                 {{articleTypeName}}
63af45 41                             </router-link>
06ee76 42                             <!-- <a class="article-meta__categories" href="#"> {{tag}}</a> -->
L 43                         </span>
44                     </div>
45                     <div class="content">
63af45 46                         {{introduce}}
06ee76 47                     </div>
L 48                 </div>
49             </div>
50         </div>
51     </div>
52 </template>
53
54 <script>
55     export default {
63af45 56         props: {
c23efb 57             "index": {
I 58                 default: 0,
81c155 59             },
I 60             "id": {
63f511 61                 default: 0,
I 62             },
81c155 63             "articleTypeId": {
I 64                 default: null
65             },
63f511 66             "isTop": {
63af45 67                 default: 0,
I 68             },
4b854c 69             "authStatus": {
I 70                 default: 1,
71             },
63af45 72             "title": {
I 73                 default: "",
74             },
75             "articleTypeName": {
76                 default: "",
77             },
78             "introduce": {
79                 default: "",
80             },
81             "publishDate": {
82                 default: "",
83             },
84             "coverFileURL": {
85                 default: "",
86             }
87         },
06ee76 88         data() {
L 89             return {
4b854c 90                 img404: "this.onerror='';this.src=\"https://unpkg.zhimg.com/ahzo@1.0.3/blogpic/1.jpg\"",
63af45 91                 //     "title": "使用KeyStore生成证书",
I 92                 //     "publishTime": "2022-01-14",
93                 //     "tag": "随手记",
94                 //     "content": "前言Keytool是一个Java数据证书的管理工具 , 在keystore里,包含两种数据: 密钥实体(Key entity):即密钥(secret key)又或者是私钥和配对公钥(采用非对称加密) 可信任的证书实体(trusted certificate entries):即证书(包含公钥) keytool常用命令: genkey 在用户主目录中创建一个默认文件”.keystore” alias 产生别名 keystore 指定密钥库的名称(产生的各类信息将不在.keystore文件中) keyalg 指定密钥的算法 (如 RSA DSA(如果不指定默认采用DSA)) validity 指定创建的证书有效期多少天 keysize 指定密钥长度 storepass 指定密钥库的密码(获取keystore信息所需的密码) keypass 指定别名条目的密码(私钥的密码) dname 指定证书拥有者信息 例如: “CN=名字与姓氏,OU=组织单位名称,O=组织名称,L=城市或区域名称,ST=州或省份名称,C=单位的两字母国家代码 list 显示密钥库中的证书信息 keytool - ..."
06ee76 95             }
L 96         }
97     }
98 </script>
99
100 <style lang="less">
101     @card-bg: #f5f8fa;
102     @card-box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px rgba(255, 255, 255, 1);
103     @ahzoo-proportion: 1;
104     @cursorURL: "https://blog.ahzoo.cn/blogpic/normal.cur";
105     @global-font-size: 14px;
106     @font-color: #666;
107     @title-clolr: dimgray;
108     @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);
109
63f511 110     .recent-post-item {
I 111         position: relative;
112     }
113
114     .miniTag {
115         z-index: 1;
116         position: absolute;
117         right: 8px;
118         top: 8px;
119         transform: rotate(30deg);
120         box-shadow: aliceblue;
121     }
06ee76 122
L 123     // #recent-posts>.recent-post-item:not(:first-child) {
124     //     margin-top: 1rem;
125     // }
126     #recent-posts>.recent-post-item {
127         margin-top: 1rem;
128     }
129
130     #recent-posts>.recent-post-item {
131         display: -webkit-box;
132         display: -moz-box;
133         display: -webkit-flex;
134         display: -ms-flexbox;
135         display: box;
136         display: flex;
137         -webkit-box-orient: horizontal;
138         -moz-box-orient: horizontal;
139         -o-box-orient: horizontal;
140         -webkit-flex-direction: row;
141         -ms-flex-direction: row;
142         flex-direction: row;
143         -webkit-box-align: center;
144         -moz-box-align: center;
145         -o-box-align: center;
146         -ms-flex-align: center;
147         -webkit-align-items: center;
148         align-items: center;
149         border-radius: 12px 8px 8px 12px;
150
151         -webkit-transition: all .3s;
152         -moz-transition: all .3s;
153         -o-transition: all .3s;
154         -ms-transition: all .3s;
155         transition: all .3s;
156
157         background: @card-bg;
158         -webkit-box-shadow: @card-box-shadow;
159         box-shadow: @card-box-shadow;
160
161     }
162
163     .recent-post-item a {
164         // color: #99a9bf;
165         text-decoration: none;
166         word-wrap: break-word;
167         -webkit-transition: all .2s;
168         -moz-transition: all .2s;
169         -o-transition: all .2s;
170         -ms-transition: all .2s;
171         transition: all .2s;
172         overflow-wrap: break-word;
173         background-color: transparent;
174     }
175
176     .recent-post-item {
177         padding-left: calc(1.2rem * @ahzoo-proportion) !important;
178         padding-right: calc(1.2rem * @ahzoo-proportion) !important;
179         // font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
180         line-height: 2;
181
182         img {
183             max-width: 100%;
184             -webkit-transition: all .2s;
185             -moz-transition: all .2s;
186             -o-transition: all .2s;
187             -ms-transition: all .2s;
188             transition: all .2s;
189             border-style: none;
190         }
191     }
192
193     .recent-post-item * {
6d1057 194         //cursor: url(@cursorURL), auto !important;
06ee76 195         font-size: @global-font-size;
L 196         color: @font-color;
197     }
198
199     * {
200         tap-highlight-color: transparent;
201         -webkit-tap-highlight-color: transparent;
202         box-sizing: border-box;
203     }
204
205     #recent-posts>.recent-post-item .post_cover {
206         width: 33%;
207         position: sticky;
208
209         opacity: .8;
210         padding: calc(1.2rem * @ahzoo-proportion) calc(0.2rem * @ahzoo-proportion);
211         overflow: hidden;
212         height: 100%;
213         -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
214     }
215
216     #recent-posts>.recent-post-item .left_radius {
217         border-radius: 8px 0 0 8px;
218     }
219
220     #recent-posts>.recent-post-item .right_radius {
221         -webkit-box-ordinal-group: 2;
222         -moz-box-ordinal-group: 2;
223         -o-box-ordinal-group: 2;
224         -ms-flex-order: 2;
225         -webkit-order: 2;
226         order: 2;
227         border-radius: 0 8px 8px 0;
228         border-top-left-radius: 0px;
229         border-top-right-radius: 8px;
230         border-bottom-right-radius: 8px;
231         border-bottom-left-radius: 0px;
232     }
233
234     .block.left_radius {
235         background: linear-gradient(to right, transparent, @card-bg 98%);
236         position: absolute;
237         width: 100%;
238         height: calc(100% - 2.2rem * @ahzoo-proportion);
239         z-index: 2;
240         top: calc(1.1rem * @ahzoo-proportion);
241     }
242
243     #recent-posts>.recent-post-item .post_cover img.post_bg {
244         border-radius: 15px;
245         width: 100%;
246         height: 100%;
247         -webkit-transition: all .6s;
248         -moz-transition: all .6s;
249         -o-transition: all .6s;
250         -ms-transition: all .6s;
251         transition: all .6s;
252         object-fit: cover;
253     }
254
255     .block.right_radius {
256         background: linear-gradient(to left, transparent, @card-bg 98%);
257         position: absolute;
258         width: 100%;
259         height: calc(100% - 2.2rem * @ahzoo-proportion);
260         z-index: 2;
261         top: calc(1.1rem * @ahzoo-proportion);
262     }
263
264     #recent-posts>.recent-post-item>.recent-post-info {
265         width: 77%;
266         padding: 0px calc(1.2rem * @ahzoo-proportion);
267         display: flex;
268         flex-direction: column;
269         overflow: hidden;
270
271         a {
272             text-decoration: none;
273             -webkit-transition: all .2s;
274             -moz-transition: all .2s;
275             -o-transition: all .2s;
276             -ms-transition: all .2s;
277             transition: all .2s;
278             overflow-wrap: break-word;
279         }
280     }
281
282     #recent-posts>.recent-post-item>.recent-post-info>.article-title {
283         order: 1;
284         font-weight: 600;
285         color: @title-clolr;
286         font-size: 1.6em;
287         margin-bottom: 0.3rem;
288         line-height: 1.4;
289         -webkit-transition: all .2s ease-in-out;
290         -moz-transition: all .2s ease-in-out;
291         -o-transition: all .2s ease-in-out;
292         -ms-transition: all .2s ease-in-out;
293         transition: all .2s ease-in-out;
294
295         display: -webkit-box;
296         overflow: hidden;
297         -webkit-box-orient: vertical;
298         /* autoprefixer: off */
299         -webkit-line-clamp: 2;
300         /* autoprefixer: on */
301     }
302
303
304
305     #recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap {
306         order: 3;
307         color: #858585;
308         font-size: 90%;
309
310         .article-meta-label {
311             padding-right: 0.2rem;
312         }
313     }
314
315     #recent-posts>.recent-post-item>.recent-post-info>.content {
316         opacity: 0;
317         line-height: .8;
318         transition: all .25s;
319         color: #999;
320         margin-bottom: 19px;
321         text-overflow: ellipsis;
322         order: 2;
323         margin: 0;
324
325         display: -webkit-box;
326         overflow: hidden;
327         -webkit-box-orient: vertical;
328         /* autoprefixer: off */
329         -webkit-line-clamp: 3;
330         /* autoprefixer: on */
331
332     }
333
334     #recent-posts>.recent-post-item>.recent-post-info>.article-title:hover {
335         color: #448aff;
336     }
337
338
339
340     //div本体阴影
341     #recent-posts>.recent-post-item:hover {
342         -webkit-box-shadow: @card-hover-box-shadow;
343         box-shadow: @card-hover-box-shadow;
344     }
345
346     // 图片缩放
347     #recent-posts>.recent-post-item:hover img.post_bg {
348         -webkit-transform: scale(.9);
349         -moz-transform: scale(.9);
350         -o-transform: scale(.9);
351         -ms-transform: scale(.9);
352         transform: scale(.9);
353         -webkit-box-shadow: @card-hover-box-shadow;
354         box-shadow: @card-hover-box-shadow;
355     }
356
357     //内容缩放 内容显示
358     #recent-posts>.recent-post-item:hover .recent-post-info .content {
359         opacity: 1;
360         line-height: 1.8;
361         transition: all .25s;
362     }
363
364     #recent-posts>.recent-post-item .post_cover img.post_bg:hover {
365         transform: scale(.9);
366     }
367
368     #recent-posts>.recent-post-item .post_cover img.post_bg:hover {
369         -webkit-transform: scale(1.1);
370         -moz-transform: scale(1.1);
371         -o-transform: scale(1.1);
372         -ms-transform: scale(1.1);
373         transform: scale(1.1);
374     }
375
376     @media screen and (max-width:768px) {
377         #recent-posts .recent-post-item .recent-post-info .article-title {
378             font-size: 1.32em !important;
379             margin-bottom: 0 !important;
380         }
381     }
382
383     @media screen and (min-width: 769px) {
384         #recent-posts>.recent-post-item>.recent-post-info>.content {
385             opacity: 0;
386             line-height: .8;
387             transition: all .25s;
388             color: #999;
389             margin-bottom: 10px;
390             display: -webkit-container;
391             -webkit-line-clamp: 3;
392             text-overflow: ellipsis;
393             overflow: hidden;
394         }
395     }
396
397     @media screen and (max-width: 768px) {
398         #recent-posts>.recent-post-item>.recent-post-info {
399             width: 69%;
400             font-size: 12px !important;
401             margin: .7rem 0;
402         }
403     }
404
405     @media screen and (max-width: 768px) {
406         #recent-posts>.recent-post-item>.recent-post-info>.content {
407             opacity: 1;
408             line-height: 1.7;
409             color: #999;
410             display: -webkit-container;
411             -webkit-line-clamp: 3;
412             text-overflow: ellipsis;
413             overflow: hidden;
414         }
415     }
416
417     @media screen and (min-width: 769px) {
418         #recent-posts>.recent-post-item {
419             height: 15em;
420         }
421     }
422
423     @media screen and (max-width: 768px) {
424         #recent-posts .recent-post-item {
425             height: 12em !important;
426             padding: 0;
427             -webkit-flex-direction: row;
428             -ms-flex-direction: row;
429             flex-direction: row;
430         }
431     }
432
433     @media only screen and (max-width: 768px) {
434         @ahzoo-proportion: 0.65;
435         @global-font-size: 12px;
436     }
437 </style>