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