blog/blog-facade.git

inleft

2022-08-24 38a800ff006e7d90342ceb53ad547a8aaa2bd4d5

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