blog/blog-facade.git

inleft

2022-02-22 c23efbe2832d1a9eecd4ef5d20d984661b24dd22

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