blog/blog-facade.git

inleft

2022-01-21 f9c38ed1b72fc96b96c1d3ffdcc1a66b03bd3b73

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