blog/blog-facade.git

inleft

2022-03-02 846bd0e9adb70bb23778045ee1a252a6a58adc4f

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