blog/blog-facade.git

inleft

2022-03-04 74344a2ec388b78fe906a22c31f8fdb77fc60b12

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