blog/blog-facade.git

inleft

2022-02-16 63af45eaa849552e4ea3ff0248c47bacb62cacdb

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