blog/blog-facade.git

inleft

2022-02-21 63f5119bcc714c36fe8db21e5461d73eb5a0eaa0

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