blog的前端代码
view | history | commit | commitdiff
inleft
2022-08-05 2795bef55b825acd0065d991e835c5f616ec4724
commit | author | age
15bd39 1 <template>
L 2     <div>
3         <div class="recent-posts" id="recent-posts">
4             <div class="recent-post-item">
5                 <div class="post_cover left_radius">
b4f6a5 6                     <a href="#" title="使用KeyStore生成证书">
15bd39 7                         <div class="block left_radius"></div>
L 8                         <img class="post_bg" src="https://unpkg.zhimg.com/ahzo@1.0.3/blogpic/1.jpg"
9                             onerror="this.onerror=null,this.src=&quot;/img/404.jpg&quot;" alt="使用KeyStore生成证书">
10                     </a>
11                 </div>
12                 <div class="recent-post-info">
b4f6a5 13                     <a class="article-title" href="#" title="使用KeyStore生成证书">使用KeyStore生成证书</a>
15bd39 14                     <div class="article-meta-wrap">
L 15                         <span class="post-meta-date">
16                             <i class="far fa-calendar-alt"></i>
17                             <span class="article-meta-label"></span>
18                             <time datetime="2022-01-13T06:25:00.000Z" title=" 2022-01-13 14:25:00">2022-01-13</time>
19                         </span>
20                         <span class="article-meta">
21                             <span class="article-meta__separator">|</span>
b4f6a5 22                             <i class="fas fa-inbox"></i><a class="article-meta__categories" href="#">随手记</a>
15bd39 23                         </span>
L 24                     </div>
25                     <div class="content">
26                         前言Keytool是一个Java数据证书的管理工具 ， 在keystore里，包含两种数据： 密钥实体（Key entity）：即密钥（secret...
b4f6a5 27                         key）又或者是私钥和配对公钥（采用非对称加密） 可信任的证书实体（trusted certificate entries）：即证书（包含公钥） keytool常用命令: genkey
15bd39 28                         在用户主目录中创建一个默认文件”.keystore” alias 产生别名 keystore 指定密钥库的名称(产生的各类信息将不在.keystore文件中) keyalg
b4f6a5 29                         指定密钥的算法 (如
15bd39 30                         RSA DSA（如果不指定默认采用DSA）) validity 指定创建的证书有效期多少天 keysize 指定密钥长度 storepass
L 31                         指定密钥库的密码(获取keystore信息所需的密码)
32                         keypass 指定别名条目的密码(私钥的密码) dname 指定证书拥有者信息 例如：
b4f6a5 33                         “CN=名字与姓氏,OU=组织单位名称,O=组织名称,L=城市或区域名称,ST=州或省份名称,C=单位的两字母国家代码” list 显示密钥库中的证书信息 keytool - ...
15bd39 34                     </div>
L 35                 </div>
36             </div>
37         </div>
38     </div>
39 </template>
40
41 <script>
42     export default {
43     }
44 </script>
45
46 <style lang="less">
47     @card-bg: #f5f8fa;
48     @card-box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px rgba(255, 255, 255, 1);
49     @ahzoo-proportion: 1;
50     @cursorURL: "https://blog.ahzoo.cn/blogpic/normal.cur";
51     @global-font-size: 14px;
52     @font-color: #666;
53     @title-clolr: dimgray;
b4f6a5 54     @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);
15bd39 55
L 56     #recent-posts>.recent-post-item {
57         display: -webkit-box;
58         display: -moz-box;
59         display: -webkit-flex;
60         display: -ms-flexbox;
61         display: box;
62         display: flex;
63         -webkit-box-orient: horizontal;
64         -moz-box-orient: horizontal;
65         -o-box-orient: horizontal;
66         -webkit-flex-direction: row;
67         -ms-flex-direction: row;
68         flex-direction: row;
69         -webkit-box-align: center;
70         -moz-box-align: center;
71         -o-box-align: center;
72         -ms-flex-align: center;
73         -webkit-align-items: center;
74         align-items: center;
75         border-radius: 12px 8px 8px 12px;
76         background: var(--card-bg);
77         -webkit-box-shadow: var(--card-box-shadow);
78         box-shadow: var(--card-box-shadow);
79         -webkit-transition: all .3s;
80         -moz-transition: all .3s;
81         -o-transition: all .3s;
82         -ms-transition: all .3s;
83         transition: all .3s;
84
85         background: @card-bg;
86         -webkit-box-shadow: @card-box-shadow;
87         box-shadow: @card-box-shadow;
88
89     }
90
b4f6a5 91     .recent-post-item a {
06ee76 92         // color: #99a9bf;
b4f6a5 93         text-decoration: none;
I 94         word-wrap: break-word;
95         -webkit-transition: all .2s;
96         -moz-transition: all .2s;
97         -o-transition: all .2s;
98         -ms-transition: all .2s;
99         transition: all .2s;
100         overflow-wrap: break-word;
101         background-color: transparent;
102     }
103
15bd39 104     .recent-post-item {
L 105         padding-left: calc(1.2rem * @ahzoo-proportion) !important;
106         padding-right: calc(1.2rem * @ahzoo-proportion) !important;
107         // font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
108         line-height: 2;
109
110         img {
111             max-width: 100%;
112             -webkit-transition: all .2s;
113             -moz-transition: all .2s;
114             -o-transition: all .2s;
115             -ms-transition: all .2s;
116             transition: all .2s;
117             border-style: none;
118         }
119     }
120
121     .recent-post-item * {
122         cursor: url(@cursorURL), auto !important;
123         font-size: @global-font-size;
124         color: var(--font-color);
125     }
126
127     * {
128         tap-highlight-color: transparent;
129         -webkit-tap-highlight-color: transparent;
130         box-sizing: border-box;
131     }
132
133     #recent-posts>.recent-post-item .post_cover {
134         width: 33%;
135         position: sticky;
136
137         opacity: .8;
138         padding: calc(1.2rem * @ahzoo-proportion) calc(0.2rem * @ahzoo-proportion);
139         overflow: hidden;
140         height: 100%;
141         -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
142     }
143
144     #recent-posts>.recent-post-item .left_radius {
145         border-radius: 8px 0 0 8px;
146     }
147
148     .block.left_radius {
149         background: linear-gradient(to right, transparent, @card-bg 98%);
150         position: absolute;
151         width: 100%;
152         height: calc(100% - 2.2rem * @ahzoo-proportion);
153         z-index: 2;
154         top: calc(1.1rem * @ahzoo-proportion);
155     }
156
157     #recent-posts>.recent-post-item .post_cover img.post_bg {
158         border-radius: 15px;
159         width: 100%;
160         height: 100%;
161         -webkit-transition: all .6s;
162         -moz-transition: all .6s;
163         -o-transition: all .6s;
164         -ms-transition: all .6s;
165         transition: all .6s;
166         object-fit: cover;
167     }
168
169     #recent-posts>.recent-post-item>.recent-post-info {
170         width: 77%;
171         padding: 0px calc(1.2rem * @ahzoo-proportion);
172         display: flex;
173         flex-direction: column;
174         overflow: hidden;
175
176         a {
177             text-decoration: none;
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         }
185     }
186
187     #recent-posts>.recent-post-item>.recent-post-info>.article-title {
188         order: 1;
189         font-weight: 600;
190         color: @title-clolr;
191         font-size: 1.6em;
b4f6a5 192         margin-bottom: 0.3rem;
15bd39 193         line-height: 1.4;
L 194         -webkit-transition: all .2s ease-in-out;
195         -moz-transition: all .2s ease-in-out;
196         -o-transition: all .2s ease-in-out;
197         -ms-transition: all .2s ease-in-out;
198         transition: all .2s ease-in-out;
199
200         display: -webkit-box;
201         overflow: hidden;
202         -webkit-box-orient: vertical;
b4f6a5 203         /* autoprefixer: off */
I 204         -webkit-line-clamp: 2;
205         /* autoprefixer: on */
15bd39 206     }
b4f6a5 207
I 208
15bd39 209
L 210     #recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap {
211         order: 3;
212         color: #858585;
213         font-size: 90%;
214
215         .article-meta-label {
216             padding-right: 0.2rem;
217         }
218     }
219
220     #recent-posts>.recent-post-item>.recent-post-info>.content {
221         opacity: 0;
222         line-height: .8;
223         transition: all .25s;
224         color: #999;
225         margin-bottom: 19px;
226         text-overflow: ellipsis;
227         order: 2;
228         margin: 0;
b4f6a5 229
I 230         display: -webkit-box;
15bd39 231         overflow: hidden;
b4f6a5 232         -webkit-box-orient: vertical;
I 233         /* autoprefixer: off */
234         -webkit-line-clamp: 3;
235         /* autoprefixer: on */
236
15bd39 237     }
L 238
b4f6a5 239     #recent-posts>.recent-post-item>.recent-post-info>.article-title:hover {
I 240         color: #448aff;
241     }
242
243
15bd39 244
L 245     //div本体阴影
246     #recent-posts>.recent-post-item:hover {
247         -webkit-box-shadow: @card-hover-box-shadow;
248         box-shadow: @card-hover-box-shadow;
249     }
250
251     // 图片缩放
252     #recent-posts>.recent-post-item:hover img.post_bg {
253         -webkit-transform: scale(.9);
254         -moz-transform: scale(.9);
255         -o-transform: scale(.9);
256         -ms-transform: scale(.9);
257         transform: scale(.9);
258         -webkit-box-shadow: @card-hover-box-shadow;
259         box-shadow: @card-hover-box-shadow;
260     }
261
262     //内容缩放 内容显示
263     #recent-posts>.recent-post-item:hover .recent-post-info .content {
264         opacity: 1;
265         line-height: 1.8;
266         transition: all .25s;
267     }
268
269     #recent-posts>.recent-post-item .post_cover img.post_bg:hover {
270         transform: scale(.9);
271     }
272
273     #recent-posts>.recent-post-item .post_cover img.post_bg:hover {
274         -webkit-transform: scale(1.1);
275         -moz-transform: scale(1.1);
276         -o-transform: scale(1.1);
277         -ms-transform: scale(1.1);
278         transform: scale(1.1);
279     }
b4f6a5 280
I 281     @media screen and (max-width:768px) {
282         #recent-posts .recent-post-item .recent-post-info .article-title {
283             font-size: 1.32em !important;
284             margin-bottom: 0 !important;
285         }
286     }
287
288     @media screen and (min-width: 769px) {
289         #recent-posts>.recent-post-item>.recent-post-info>.content {
290             opacity: 0;
291             line-height: .8;
292             transition: all .25s;
293             color: #999;
294             margin-bottom: 10px;
295             display: -webkit-container;
296             -webkit-line-clamp: 3;
297             text-overflow: ellipsis;
298             overflow: hidden;
299         }
300     }
301
302     @media screen and (max-width: 768px) {
303         #recent-posts>.recent-post-item>.recent-post-info {
304             width: 69%;
305             font-size: 12px !important;
306             margin: .7rem 0;
307         }
308     }
309
310     @media screen and (max-width: 768px) {
311         #recent-posts>.recent-post-item>.recent-post-info>.content {
312             opacity: 1;
313             line-height: 1.7;
314             color: #999;
315             display: -webkit-container;
316             -webkit-line-clamp: 3;
317             text-overflow: ellipsis;
318             overflow: hidden;
319         }
320     }
321
322     @media screen and (min-width: 769px) {
323         #recent-posts>.recent-post-item {
324             height: 15em;
325         }
326     }
327
328     @media screen and (max-width: 768px) {
329         #recent-posts .recent-post-item {
330             height: 12em !important;
331             padding: 0;
332             -webkit-flex-direction: row;
333             -ms-flex-direction: row;
334             flex-direction: row;
335         }
336     }
337
338     @media only screen and (max-width: 768px) {
339         @ahzoo-proportion: 0.65;
340         @global-font-size: 12px;
341     }
15bd39 342 </style>