blog/blog-facade.git

inleft

2022-02-21 4b854c29227ef08ea178a3bba527a40ca2f84674

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