blog的前端代码
view | history | commit | commitdiff
inleft
2022-03-03 dc66ec6f3c3ae560bdcbb5e0a1790b27228205e8
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;
dc66ec 112
I 113         a {
114             position: initial;
115         }
63f511 116     }
I 117
118     .miniTag {
119         z-index: 1;
120         position: absolute;
121         right: 8px;
122         top: 8px;
123         transform: rotate(30deg);
124         box-shadow: aliceblue;
125     }
06ee76 126
L 127     // #recent-posts>.recent-post-item:not(:first-child) {
128     //     margin-top: 1rem;
129     // }
130     #recent-posts>.recent-post-item {
131         margin-top: 1rem;
132     }
133
134     #recent-posts>.recent-post-item {
135         display: -webkit-box;
136         display: -moz-box;
137         display: -webkit-flex;
138         display: -ms-flexbox;
139         display: box;
140         display: flex;
141         -webkit-box-orient: horizontal;
142         -moz-box-orient: horizontal;
143         -o-box-orient: horizontal;
144         -webkit-flex-direction: row;
145         -ms-flex-direction: row;
146         flex-direction: row;
147         -webkit-box-align: center;
148         -moz-box-align: center;
149         -o-box-align: center;
150         -ms-flex-align: center;
151         -webkit-align-items: center;
152         align-items: center;
153         border-radius: 12px 8px 8px 12px;
154
155         -webkit-transition: all .3s;
156         -moz-transition: all .3s;
157         -o-transition: all .3s;
158         -ms-transition: all .3s;
159         transition: all .3s;
160
161         background: @card-bg;
162         -webkit-box-shadow: @card-box-shadow;
163         box-shadow: @card-box-shadow;
164
165     }
166
167     .recent-post-item a {
168         // color: #99a9bf;
169         text-decoration: none;
170         word-wrap: break-word;
171         -webkit-transition: all .2s;
172         -moz-transition: all .2s;
173         -o-transition: all .2s;
174         -ms-transition: all .2s;
175         transition: all .2s;
176         overflow-wrap: break-word;
177         background-color: transparent;
178     }
179
180     .recent-post-item {
181         padding-left: calc(1.2rem * @ahzoo-proportion) !important;
182         padding-right: calc(1.2rem * @ahzoo-proportion) !important;
183         // font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
184         line-height: 2;
185
186         img {
187             max-width: 100%;
188             -webkit-transition: all .2s;
189             -moz-transition: all .2s;
190             -o-transition: all .2s;
191             -ms-transition: all .2s;
192             transition: all .2s;
193             border-style: none;
194         }
195     }
196
197     .recent-post-item * {
6d1057 198         //cursor: url(@cursorURL), auto !important;
06ee76 199         font-size: @global-font-size;
L 200         color: @font-color;
201     }
202
203     * {
204         tap-highlight-color: transparent;
205         -webkit-tap-highlight-color: transparent;
206         box-sizing: border-box;
207     }
208
209     #recent-posts>.recent-post-item .post_cover {
dc66ec 210         // position: sticky;
I 211         position: inherit;
06ee76 212
dc66ec 213         width: 33%;
06ee76 214         opacity: .8;
L 215         padding: calc(1.2rem * @ahzoo-proportion) calc(0.2rem * @ahzoo-proportion);
216         overflow: hidden;
217         height: 100%;
218         -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
219     }
220
221     #recent-posts>.recent-post-item .left_radius {
222         border-radius: 8px 0 0 8px;
223     }
224
225     #recent-posts>.recent-post-item .right_radius {
226         -webkit-box-ordinal-group: 2;
227         -moz-box-ordinal-group: 2;
228         -o-box-ordinal-group: 2;
229         -ms-flex-order: 2;
230         -webkit-order: 2;
231         order: 2;
232         border-radius: 0 8px 8px 0;
233         border-top-left-radius: 0px;
234         border-top-right-radius: 8px;
235         border-bottom-right-radius: 8px;
236         border-bottom-left-radius: 0px;
237     }
238
239     .block.left_radius {
240         background: linear-gradient(to right, transparent, @card-bg 98%);
241         position: absolute;
242         width: 100%;
243         height: calc(100% - 2.2rem * @ahzoo-proportion);
244         z-index: 2;
245         top: calc(1.1rem * @ahzoo-proportion);
246     }
247
248     #recent-posts>.recent-post-item .post_cover img.post_bg {
249         border-radius: 15px;
250         width: 100%;
251         height: 100%;
252         -webkit-transition: all .6s;
253         -moz-transition: all .6s;
254         -o-transition: all .6s;
255         -ms-transition: all .6s;
256         transition: all .6s;
257         object-fit: cover;
258     }
259
260     .block.right_radius {
261         background: linear-gradient(to left, transparent, @card-bg 98%);
262         position: absolute;
263         width: 100%;
264         height: calc(100% - 2.2rem * @ahzoo-proportion);
265         z-index: 2;
266         top: calc(1.1rem * @ahzoo-proportion);
267     }
268
269     #recent-posts>.recent-post-item>.recent-post-info {
270         width: 77%;
271         padding: 0px calc(1.2rem * @ahzoo-proportion);
272         display: flex;
273         flex-direction: column;
274         overflow: hidden;
275
276         a {
277             text-decoration: none;
278             -webkit-transition: all .2s;
279             -moz-transition: all .2s;
280             -o-transition: all .2s;
281             -ms-transition: all .2s;
282             transition: all .2s;
283             overflow-wrap: break-word;
284         }
285     }
286
287     #recent-posts>.recent-post-item>.recent-post-info>.article-title {
288         order: 1;
289         font-weight: 600;
290         color: @title-clolr;
291         font-size: 1.6em;
292         margin-bottom: 0.3rem;
293         line-height: 1.4;
294         -webkit-transition: all .2s ease-in-out;
295         -moz-transition: all .2s ease-in-out;
296         -o-transition: all .2s ease-in-out;
297         -ms-transition: all .2s ease-in-out;
298         transition: all .2s ease-in-out;
299
300         display: -webkit-box;
301         overflow: hidden;
302         -webkit-box-orient: vertical;
303         /* autoprefixer: off */
304         -webkit-line-clamp: 2;
305         /* autoprefixer: on */
306     }
307
308
309
310     #recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap {
311         order: 3;
312         color: #858585;
313         font-size: 90%;
314
315         .article-meta-label {
316             padding-right: 0.2rem;
317         }
318     }
319
320     #recent-posts>.recent-post-item>.recent-post-info>.content {
321         opacity: 0;
322         line-height: .8;
323         transition: all .25s;
324         color: #999;
325         margin-bottom: 19px;
326         text-overflow: ellipsis;
327         order: 2;
328         margin: 0;
329
330         display: -webkit-box;
331         overflow: hidden;
332         -webkit-box-orient: vertical;
333         /* autoprefixer: off */
334         -webkit-line-clamp: 3;
335         /* autoprefixer: on */
336
337     }
338
339     #recent-posts>.recent-post-item>.recent-post-info>.article-title:hover {
340         color: #448aff;
341     }
342
343
344
345     //div本体阴影
346     #recent-posts>.recent-post-item:hover {
347         -webkit-box-shadow: @card-hover-box-shadow;
348         box-shadow: @card-hover-box-shadow;
349     }
350
351     // 图片缩放
352     #recent-posts>.recent-post-item:hover img.post_bg {
353         -webkit-transform: scale(.9);
354         -moz-transform: scale(.9);
355         -o-transform: scale(.9);
356         -ms-transform: scale(.9);
357         transform: scale(.9);
358         -webkit-box-shadow: @card-hover-box-shadow;
359         box-shadow: @card-hover-box-shadow;
360     }
361
362     //内容缩放 内容显示
363     #recent-posts>.recent-post-item:hover .recent-post-info .content {
364         opacity: 1;
365         line-height: 1.8;
366         transition: all .25s;
367     }
368
369     #recent-posts>.recent-post-item .post_cover img.post_bg:hover {
370         transform: scale(.9);
371     }
372
373     #recent-posts>.recent-post-item .post_cover img.post_bg:hover {
374         -webkit-transform: scale(1.1);
375         -moz-transform: scale(1.1);
376         -o-transform: scale(1.1);
377         -ms-transform: scale(1.1);
378         transform: scale(1.1);
379     }
380
381     @media screen and (max-width:768px) {
382         #recent-posts .recent-post-item .recent-post-info .article-title {
383             font-size: 1.32em !important;
384             margin-bottom: 0 !important;
385         }
386     }
387
388     @media screen and (min-width: 769px) {
389         #recent-posts>.recent-post-item>.recent-post-info>.content {
390             opacity: 0;
391             line-height: .8;
392             transition: all .25s;
393             color: #999;
394             margin-bottom: 10px;
395             display: -webkit-container;
396             -webkit-line-clamp: 3;
397             text-overflow: ellipsis;
398             overflow: hidden;
399         }
400     }
401
402     @media screen and (max-width: 768px) {
403         #recent-posts>.recent-post-item>.recent-post-info {
404             width: 69%;
405             font-size: 12px !important;
406             margin: .7rem 0;
407         }
408     }
409
410     @media screen and (max-width: 768px) {
411         #recent-posts>.recent-post-item>.recent-post-info>.content {
412             opacity: 1;
413             line-height: 1.7;
414             color: #999;
415             display: -webkit-container;
416             -webkit-line-clamp: 3;
417             text-overflow: ellipsis;
418             overflow: hidden;
419         }
420     }
421
422     @media screen and (min-width: 769px) {
423         #recent-posts>.recent-post-item {
424             height: 15em;
425         }
426     }
427
428     @media screen and (max-width: 768px) {
429         #recent-posts .recent-post-item {
430             height: 12em !important;
431             padding: 0;
432             -webkit-flex-direction: row;
433             -ms-flex-direction: row;
434             flex-direction: row;
435         }
436     }
437
438     @media only screen and (max-width: 768px) {
439         @ahzoo-proportion: 0.65;
440         @global-font-size: 12px;
441     }
442 </style>