blog/blog-facade.git

inleft

2022-08-10 10572998aa54d61c45df3e334eb01e44a15df729

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">
3a5d66	6
105729	7	<router-link :to="{path:'/platform'}" :title="title" v-if="articleFileType==myConstant.fileTypeVideo">
I	8	<div class="block left_radius"></div>
	9	<img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
	10	</router-link>
	11	<a :href="jumpURL" target="_blank" class="no-underline"
	12	v-else-if="articleFileType==myConstant.fileTypeShort" @click="showMsg(articleFileType,jumpURL)">
3a5d66	13	<div class="block left_radius"></div>
I	14	<img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
	15	</a>
	16	<router-link :to="{path:'/mdDetail',query:{id:id}}" :title="title" v-else>
74344a	17	<div class="block left_radius"></div>
I	18	<img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
	19	</router-link>
	20	</div>
63af45	21
74344a	22	<div class="post_cover right_radius" v-else>
105729	23	<router-link :to="{path:'/platform'}" :title="title" v-if="articleFileType==myConstant.fileTypeVideo">
I	24	<div class="block left_radius"></div>
	25	<img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
	26	</router-link>
	27	<a :href="jumpURL" target="_blank" class="no-underline"
	28	v-else-if="articleFileType==myConstant.fileTypeShort" @click="showMsg(articleFileType,jumpURL)">
3a5d66	29	<div class="block left_radius"></div>
I	30	<img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
	31	</a>
	32	<router-link :to="{path:'/mdDetail',query:{id:id}}" :title="title" v-else>
74344a	33	<div class="block right_radius"></div>
I	34	<img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
	35	</router-link>
	36	</div>
06ee76	37
74344a	38	<div class="recent-post-info">
3a5d66	39
944ca6	40	<router-link :to="{path:'/mdDetail',query:{id:id,articleFileType:articleFileType}}"
I	41	class="article-title">
74344a	42	<a-icon type="lock" style="color:rgba(0,0,0,.25)" v-if="authStatus==3" />
I	43	<a-icon type="stop" style="color:rgba(0,0,0,.25)" v-if="authStatus==2" />
	44	{{title}}
cb7779	45	<a-badge :count="1" dot v-if="isAnyUpdate==1" title="最近有更新"></a-badge>
74344a	46	</router-link>
I	47	<!-- <a class="article-title" href="/mdDetail" :title="title"> {{title}}</a> -->
	48	<div class="article-meta-wrap" style="display: flex;">
	49	<span class="post-meta-date">
	50	<a-icon type="calendar" />
	51	<span class="article-meta-label"></span>
3a5d66	52	<time datetime="2022-01-13T06:25:00.000Z" title=" 2022-01-13 14:25:00"> {{publishDate}} </time>
74344a	53	</span>
I	54	<span class="article-meta__separator" style="margin: 0px 3px ;"> \| </span>
3a5d66	55
74344a	56	<span class="article-meta">
I	57	<a-icon type="book" />
	58	<router-link :to="{path:'/articleList',query:{typeId:articleTypeId}}"
3a5d66	59	class="article-meta__categories"> {{articleTypeName}}</router-link>
105729	60	<span v-if="articleFileType==myConstant.fileTypeShort">
3a5d66	61	<span v-if="jumpURL !=null && jumpURL!=''">
I	62	<span class="article-meta__separator" style="margin: 0px 3px ;">\|</span>
	63	<span class="post-meta-date">
	64	<a-icon type="share-alt" />
	65	<a :href="jumpURL" target="_blank" class="no-underline"> 外链 </a>
	66	</span>
	67	</span>
	68
	69	<span v-else>
	70	<span class="article-meta__separator" style="margin: 0px 3px ;">\|</span>
	71	<span class="post-meta-date">
	72	<a-icon type="thunderbolt" />碎碎念
	73	</span>
	74	</span>
105729	75	</span>
I	76
	77	<span v-if="articleFileType==myConstant.fileTypeVideo">
	78	<span v-if="jumpURL !=null && jumpURL!=''">
	79	<span class="article-meta__separator" style="margin: 0px 3px ;">\|</span>
	80	<span class="post-meta-date">
	81	<a-icon type="video-camera" />
	82	<a :href="jumpURL" target="_blank" class="no-underline"> 视频 </a>
	83	</span>
	84	</span>
	85
3a5d66	86	</span>
74344a	87	<!-- <a class="article-meta__categories" href="#"> {{tag}}</a> -->
I	88	</span>
	89	</div>
	90	<div class="content">
	91	{{introduce}}
06ee76	92	</div>
L	93	</div>
	94	</div>
	95	</div>
	96	</template>
	97
	98	<script>
cb7779	99	import {
I	100	NotificationOutlined
	101	} from '@ant-design/icons-vue';
	102
105729	103	import myConstant from "../../config/myConstant.js"
I	104
	105
06ee76	106	export default {
3a5d66	107	methods: {
I	108	showMsg(articleFileType, jumpURL) {
105729	109	if (articleFileType == myConstant.fileTypeShort && (jumpURL == null \|\| jumpURL == "")) {
3a5d66	110	this.$message.info('这只是一句碎碎念,没有更多内容啦', 3);
I	111	return
	112	}
	113	}
	114	},
cb7779	115	components: {
I	116	NotificationOutlined
	117	},
63af45	118	props: {
c23efb	119	"index": {
I	120	default: 0,
81c155	121	},
I	122	"id": {
63f511	123	default: 0,
I	124	},
81c155	125	"articleTypeId": {
I	126	default: null
	127	},
63f511	128	"isTop": {
63af45	129	default: 0,
I	130	},
4b854c	131	"authStatus": {
I	132	default: 1,
	133	},
63af45	134	"title": {
I	135	default: "",
	136	},
	137	"articleTypeName": {
	138	default: "",
	139	},
	140	"introduce": {
	141	default: "",
	142	},
	143	"publishDate": {
	144	default: "",
	145	},
cb7779	146	"updateDate": {
I	147	default: "",
	148	},
63af45	149	"coverFileURL": {
cb7779	150	default: "",
I	151	},
	152	"isAnyUpdate": {
3a5d66	153	default: "",
I	154	},
	155	"articleFileType": {
	156	default: 1,
	157	},
	158	"jumpURL": {
63af45	159	default: "",
I	160	}
	161	},
06ee76	162	data() {
L	163	return {
105729	164	myConstant: myConstant,
cb7779	165	img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/1.jpg\"",
06ee76	166	}
L	167	}
	168	}
	169	</script>
	170
	171	<style lang="less">
	172	@card-bg: #f5f8fa;
	173	@card-box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px rgba(255, 255, 255, 1);
	174	@ahzoo-proportion: 1;
	175	@cursorURL: "https://blog.ahzoo.cn/blogpic/normal.cur";
	176	@global-font-size: 14px;
	177	@font-color: #666;
	178	@title-clolr: dimgray;
	179	@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);
	180
63f511	181	.recent-post-item {
I	182	position: relative;
dc66ec	183
I	184	a {
	185	position: initial;
	186	}
63f511	187	}
I	188
	189	.miniTag {
	190	z-index: 1;
	191	position: absolute;
	192	right: 8px;
	193	top: 8px;
	194	transform: rotate(30deg);
	195	box-shadow: aliceblue;
	196	}
06ee76	197
L	198	// #recent-posts>.recent-post-item:not(:first-child) {
	199	// margin-top: 1rem;
	200	// }
	201	#recent-posts>.recent-post-item {
	202	margin-top: 1rem;
	203	}
	204
	205	#recent-posts>.recent-post-item {
	206	display: -webkit-box;
	207	display: -moz-box;
	208	display: -webkit-flex;
	209	display: -ms-flexbox;
	210	display: box;
	211	display: flex;
	212	-webkit-box-orient: horizontal;
	213	-moz-box-orient: horizontal;
	214	-o-box-orient: horizontal;
	215	-webkit-flex-direction: row;
	216	-ms-flex-direction: row;
	217	flex-direction: row;
	218	-webkit-box-align: center;
	219	-moz-box-align: center;
	220	-o-box-align: center;
	221	-ms-flex-align: center;
	222	-webkit-align-items: center;
	223	align-items: center;
	224	border-radius: 12px 8px 8px 12px;
	225
	226	-webkit-transition: all .3s;
	227	-moz-transition: all .3s;
	228	-o-transition: all .3s;
	229	-ms-transition: all .3s;
	230	transition: all .3s;
	231
	232	background: @card-bg;
	233	-webkit-box-shadow: @card-box-shadow;
	234	box-shadow: @card-box-shadow;
	235
	236	}
	237
	238	.recent-post-item a {
	239	// color: #99a9bf;
	240	text-decoration: none;
	241	word-wrap: break-word;
	242	-webkit-transition: all .2s;
	243	-moz-transition: all .2s;
	244	-o-transition: all .2s;
	245	-ms-transition: all .2s;
	246	transition: all .2s;
	247	overflow-wrap: break-word;
	248	background-color: transparent;
	249	}
	250
	251	.recent-post-item {
	252	padding-left: calc(1.2rem * @ahzoo-proportion) !important;
	253	padding-right: calc(1.2rem * @ahzoo-proportion) !important;
	254	// font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
	255	line-height: 2;
	256
	257	img {
	258	max-width: 100%;
	259	-webkit-transition: all .2s;
	260	-moz-transition: all .2s;
	261	-o-transition: all .2s;
	262	-ms-transition: all .2s;
	263	transition: all .2s;
	264	border-style: none;
	265	}
	266	}
	267
	268	.recent-post-item * {
6d1057	269	//cursor: url(@cursorURL), auto !important;
06ee76	270	font-size: @global-font-size;
L	271	color: @font-color;
	272	}
	273
	274	* {
	275	tap-highlight-color: transparent;
	276	-webkit-tap-highlight-color: transparent;
	277	box-sizing: border-box;
	278	}
	279
	280	#recent-posts>.recent-post-item .post_cover {
dc66ec	281	// position: sticky;
I	282	position: inherit;
06ee76	283
dc66ec	284	width: 33%;
06ee76	285	opacity: .8;
L	286	padding: calc(1.2rem * @ahzoo-proportion) calc(0.2rem * @ahzoo-proportion);
	287	overflow: hidden;
	288	height: 100%;
	289	-webkit-mask-image: -webkit-radial-gradient(#fff, #000);
	290	}
	291
	292	#recent-posts>.recent-post-item .left_radius {
	293	border-radius: 8px 0 0 8px;
	294	}
	295
	296	#recent-posts>.recent-post-item .right_radius {
	297	-webkit-box-ordinal-group: 2;
	298	-moz-box-ordinal-group: 2;
	299	-o-box-ordinal-group: 2;
	300	-ms-flex-order: 2;
	301	-webkit-order: 2;
	302	order: 2;
	303	border-radius: 0 8px 8px 0;
	304	border-top-left-radius: 0px;
	305	border-top-right-radius: 8px;
	306	border-bottom-right-radius: 8px;
	307	border-bottom-left-radius: 0px;
	308	}
	309
	310	.block.left_radius {
	311	background: linear-gradient(to right, transparent, @card-bg 98%);
	312	position: absolute;
	313	width: 100%;
	314	height: calc(100% - 2.2rem * @ahzoo-proportion);
	315	z-index: 2;
	316	top: calc(1.1rem * @ahzoo-proportion);
	317	}
	318
	319	#recent-posts>.recent-post-item .post_cover img.post_bg {
	320	border-radius: 15px;
	321	width: 100%;
	322	height: 100%;
	323	-webkit-transition: all .6s;
	324	-moz-transition: all .6s;
	325	-o-transition: all .6s;
	326	-ms-transition: all .6s;
	327	transition: all .6s;
	328	object-fit: cover;
	329	}
	330
	331	.block.right_radius {
	332	background: linear-gradient(to left, transparent, @card-bg 98%);
	333	position: absolute;
	334	width: 100%;
	335	height: calc(100% - 2.2rem * @ahzoo-proportion);
	336	z-index: 2;
	337	top: calc(1.1rem * @ahzoo-proportion);
	338	}
	339
	340	#recent-posts>.recent-post-item>.recent-post-info {
	341	width: 77%;
	342	padding: 0px calc(1.2rem * @ahzoo-proportion);
	343	display: flex;
	344	flex-direction: column;
	345	overflow: hidden;
	346
	347	a {
	348	text-decoration: none;
	349	-webkit-transition: all .2s;
	350	-moz-transition: all .2s;
	351	-o-transition: all .2s;
	352	-ms-transition: all .2s;
	353	transition: all .2s;
	354	overflow-wrap: break-word;
	355	}
	356	}
	357
	358	#recent-posts>.recent-post-item>.recent-post-info>.article-title {
	359	order: 1;
	360	font-weight: 600;
	361	color: @title-clolr;
	362	font-size: 1.6em;
	363	margin-bottom: 0.3rem;
	364	line-height: 1.4;
	365	-webkit-transition: all .2s ease-in-out;
	366	-moz-transition: all .2s ease-in-out;
	367	-o-transition: all .2s ease-in-out;
	368	-ms-transition: all .2s ease-in-out;
	369	transition: all .2s ease-in-out;
	370
	371	display: -webkit-box;
	372	overflow: hidden;
	373	-webkit-box-orient: vertical;
	374	/* autoprefixer: off */
	375	-webkit-line-clamp: 2;
	376	/* autoprefixer: on */
	377	}
	378
	379
	380
	381	#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap {
	382	order: 3;
	383	color: #858585;
	384	font-size: 90%;
3a5d66	385	flex-wrap: wrap;
06ee76	386
L	387	.article-meta-label {
	388	padding-right: 0.2rem;
	389	}
	390	}
	391
	392	#recent-posts>.recent-post-item>.recent-post-info>.content {
	393	opacity: 0;
	394	line-height: .8;
	395	transition: all .25s;
	396	color: #999;
	397	margin-bottom: 19px;
	398	text-overflow: ellipsis;
	399	order: 2;
	400	margin: 0;
	401
	402	display: -webkit-box;
	403	overflow: hidden;
	404	-webkit-box-orient: vertical;
	405	/* autoprefixer: off */
	406	-webkit-line-clamp: 3;
	407	/* autoprefixer: on */
	408
	409	}
	410
	411	#recent-posts>.recent-post-item>.recent-post-info>.article-title:hover {
	412	color: #448aff;
	413	}
	414
	415
	416
	417	//div本体阴影
	418	#recent-posts>.recent-post-item:hover {
	419	-webkit-box-shadow: @card-hover-box-shadow;
	420	box-shadow: @card-hover-box-shadow;
	421	}
	422
	423	// 图片缩放
	424	#recent-posts>.recent-post-item:hover img.post_bg {
	425	-webkit-transform: scale(.9);
	426	-moz-transform: scale(.9);
	427	-o-transform: scale(.9);
	428	-ms-transform: scale(.9);
	429	transform: scale(.9);
	430	-webkit-box-shadow: @card-hover-box-shadow;
	431	box-shadow: @card-hover-box-shadow;
	432	}
	433
	434	//内容缩放内容显示
	435	#recent-posts>.recent-post-item:hover .recent-post-info .content {
	436	opacity: 1;
	437	line-height: 1.8;
	438	transition: all .25s;
	439	}
	440
	441	#recent-posts>.recent-post-item .post_cover img.post_bg:hover {
	442	transform: scale(.9);
	443	}
	444
	445	#recent-posts>.recent-post-item .post_cover img.post_bg:hover {
	446	-webkit-transform: scale(1.1);
	447	-moz-transform: scale(1.1);
	448	-o-transform: scale(1.1);
	449	-ms-transform: scale(1.1);
	450	transform: scale(1.1);
	451	}
	452
	453	@media screen and (max-width:768px) {
	454	#recent-posts .recent-post-item .recent-post-info .article-title {
	455	font-size: 1.32em !important;
	456	margin-bottom: 0 !important;
	457	}
	458	}
	459
	460	@media screen and (min-width: 769px) {
	461	#recent-posts>.recent-post-item>.recent-post-info>.content {
	462	opacity: 0;
	463	line-height: .8;
	464	transition: all .25s;
	465	color: #999;
	466	margin-bottom: 10px;
	467	display: -webkit-container;
	468	-webkit-line-clamp: 3;
	469	text-overflow: ellipsis;
	470	overflow: hidden;
	471	}
	472	}
	473
	474	@media screen and (max-width: 768px) {
	475	#recent-posts>.recent-post-item>.recent-post-info {
	476	width: 69%;
	477	font-size: 12px !important;
	478	margin: .7rem 0;
	479	}
	480	}
	481
	482	@media screen and (max-width: 768px) {
	483	#recent-posts>.recent-post-item>.recent-post-info>.content {
	484	opacity: 1;
	485	line-height: 1.7;
	486	color: #999;
	487	display: -webkit-container;
	488	-webkit-line-clamp: 3;
	489	text-overflow: ellipsis;
	490	overflow: hidden;
	491	}
	492	}
	493
	494	@media screen and (min-width: 769px) {
	495	#recent-posts>.recent-post-item {
	496	height: 15em;
	497	}
	498	}
	499
	500	@media screen and (max-width: 768px) {
	501	#recent-posts .recent-post-item {
	502	height: 12em !important;
	503	padding: 0;
	504	-webkit-flex-direction: row;
	505	-ms-flex-direction: row;
	506	flex-direction: row;
	507	}
	508	}
	509
	510	@media only screen and (max-width: 768px) {
	511	@ahzoo-proportion: 0.65;
	512	@global-font-size: 12px;
	513	}
	514	</style>