blog/blog-facade.git

inleft

2022-08-18 916b6bf89465f057532ad8469e4e0002fc361716

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
bc9518	7	<router-link :to="{path:'videoDetail',query:{id:id,articleFileType:articleFileType}}" :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> -->
I	17	<router-link :to="{path:'/mdDetail',query:{id:id,articleFileType:articleFileType}}" :title="title"
	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>
bc9518	25	<router-link :to="{path:'videoDetail',query:{id:id,articleFileType:articleFileType}}" :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> -->
I	35	<router-link :to="{path:'/mdDetail',query:{id:id,articleFileType:articleFileType}}" :title="title"
	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
bc9518	44	<router-link :to="{path:'/videoDetail',query:{id:id,articleFileType:articleFileType}}"
I	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
I	52	<router-link :to="{path:'/mdDetail',query:{id:id,articleFileType:articleFileType}}"
	53	class="article-title" v-else>
	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	},
I	134	"id": {
63f511	135	default: 0,
I	136	},
81c155	137	"articleTypeId": {
I	138	default: null
	139	},
63f511	140	"isTop": {
63af45	141	default: 0,
I	142	},
4b854c	143	"authStatus": {
I	144	default: 1,
	145	},
63af45	146	"title": {
I	147	default: "",
	148	},
	149	"articleTypeName": {
	150	default: "",
	151	},
	152	"introduce": {
	153	default: "",
	154	},
	155	"publishDate": {
	156	default: "",
	157	},
cb7779	158	"updateDate": {
I	159	default: "",
	160	},
63af45	161	"coverFileURL": {
cb7779	162	default: "",
I	163	},
	164	"isAnyUpdate": {
3a5d66	165	default: "",
I	166	},
	167	"articleFileType": {
	168	default: 1,
	169	},
	170	"jumpURL": {
63af45	171	default: "",
I	172	}
	173	},
06ee76	174	data() {
L	175	return {
105729	176	myConstant: myConstant,
cb7779	177	img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/1.jpg\"",
06ee76	178	}
L	179	}
	180	}
	181	</script>
	182
	183	<style lang="less">
	184	@card-bg: #f5f8fa;
	185	@card-box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px rgba(255, 255, 255, 1);
	186	@ahzoo-proportion: 1;
	187	@cursorURL: "https://blog.ahzoo.cn/blogpic/normal.cur";
	188	@global-font-size: 14px;
	189	@font-color: #666;
	190	@title-clolr: dimgray;
	191	@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);
	192
63f511	193	.recent-post-item {
I	194	position: relative;
dc66ec	195
I	196	a {
	197	position: initial;
	198	}
63f511	199	}
I	200
	201	.miniTag {
	202	z-index: 1;
	203	position: absolute;
	204	right: 8px;
	205	top: 8px;
	206	transform: rotate(30deg);
	207	box-shadow: aliceblue;
	208	}
06ee76	209
L	210	// #recent-posts>.recent-post-item:not(:first-child) {
	211	// margin-top: 1rem;
	212	// }
	213	#recent-posts>.recent-post-item {
	214	margin-top: 1rem;
	215	}
	216
	217	#recent-posts>.recent-post-item {
	218	display: -webkit-box;
	219	display: -moz-box;
	220	display: -webkit-flex;
	221	display: -ms-flexbox;
	222	display: box;
	223	display: flex;
	224	-webkit-box-orient: horizontal;
	225	-moz-box-orient: horizontal;
	226	-o-box-orient: horizontal;
	227	-webkit-flex-direction: row;
	228	-ms-flex-direction: row;
	229	flex-direction: row;
	230	-webkit-box-align: center;
	231	-moz-box-align: center;
	232	-o-box-align: center;
	233	-ms-flex-align: center;
	234	-webkit-align-items: center;
	235	align-items: center;
	236	border-radius: 12px 8px 8px 12px;
	237
	238	-webkit-transition: all .3s;
	239	-moz-transition: all .3s;
	240	-o-transition: all .3s;
	241	-ms-transition: all .3s;
	242	transition: all .3s;
	243
	244	background: @card-bg;
	245	-webkit-box-shadow: @card-box-shadow;
	246	box-shadow: @card-box-shadow;
	247
	248	}
	249
	250	.recent-post-item a {
	251	// color: #99a9bf;
	252	text-decoration: none;
	253	word-wrap: break-word;
	254	-webkit-transition: all .2s;
	255	-moz-transition: all .2s;
	256	-o-transition: all .2s;
	257	-ms-transition: all .2s;
	258	transition: all .2s;
	259	overflow-wrap: break-word;
	260	background-color: transparent;
	261	}
	262
	263	.recent-post-item {
	264	padding-left: calc(1.2rem * @ahzoo-proportion) !important;
	265	padding-right: calc(1.2rem * @ahzoo-proportion) !important;
	266	// font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
	267	line-height: 2;
	268
	269	img {
	270	max-width: 100%;
	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	border-style: none;
	277	}
	278	}
	279
	280	.recent-post-item * {
6d1057	281	//cursor: url(@cursorURL), auto !important;
06ee76	282	font-size: @global-font-size;
L	283	color: @font-color;
	284	}
	285
	286	* {
	287	tap-highlight-color: transparent;
	288	-webkit-tap-highlight-color: transparent;
	289	box-sizing: border-box;
	290	}
	291
	292	#recent-posts>.recent-post-item .post_cover {
dc66ec	293	// position: sticky;
I	294	position: inherit;
06ee76	295
dc66ec	296	width: 33%;
06ee76	297	opacity: .8;
L	298	padding: calc(1.2rem * @ahzoo-proportion) calc(0.2rem * @ahzoo-proportion);
	299	overflow: hidden;
	300	height: 100%;
	301	-webkit-mask-image: -webkit-radial-gradient(#fff, #000);
	302	}
	303
	304	#recent-posts>.recent-post-item .left_radius {
	305	border-radius: 8px 0 0 8px;
	306	}
	307
	308	#recent-posts>.recent-post-item .right_radius {
	309	-webkit-box-ordinal-group: 2;
	310	-moz-box-ordinal-group: 2;
	311	-o-box-ordinal-group: 2;
	312	-ms-flex-order: 2;
	313	-webkit-order: 2;
	314	order: 2;
	315	border-radius: 0 8px 8px 0;
	316	border-top-left-radius: 0px;
	317	border-top-right-radius: 8px;
	318	border-bottom-right-radius: 8px;
	319	border-bottom-left-radius: 0px;
	320	}
	321
	322	.block.left_radius {
	323	background: linear-gradient(to right, transparent, @card-bg 98%);
	324	position: absolute;
	325	width: 100%;
	326	height: calc(100% - 2.2rem * @ahzoo-proportion);
	327	z-index: 2;
	328	top: calc(1.1rem * @ahzoo-proportion);
	329	}
	330
	331	#recent-posts>.recent-post-item .post_cover img.post_bg {
	332	border-radius: 15px;
	333	width: 100%;
	334	height: 100%;
	335	-webkit-transition: all .6s;
	336	-moz-transition: all .6s;
	337	-o-transition: all .6s;
	338	-ms-transition: all .6s;
	339	transition: all .6s;
	340	object-fit: cover;
	341	}
	342
	343	.block.right_radius {
	344	background: linear-gradient(to left, transparent, @card-bg 98%);
	345	position: absolute;
	346	width: 100%;
	347	height: calc(100% - 2.2rem * @ahzoo-proportion);
	348	z-index: 2;
	349	top: calc(1.1rem * @ahzoo-proportion);
	350	}
	351
	352	#recent-posts>.recent-post-item>.recent-post-info {
	353	width: 77%;
	354	padding: 0px calc(1.2rem * @ahzoo-proportion);
	355	display: flex;
	356	flex-direction: column;
	357	overflow: hidden;
	358
	359	a {
	360	text-decoration: none;
	361	-webkit-transition: all .2s;
	362	-moz-transition: all .2s;
	363	-o-transition: all .2s;
	364	-ms-transition: all .2s;
	365	transition: all .2s;
	366	overflow-wrap: break-word;
	367	}
	368	}
	369
	370	#recent-posts>.recent-post-item>.recent-post-info>.article-title {
	371	order: 1;
	372	font-weight: 600;
	373	color: @title-clolr;
	374	font-size: 1.6em;
	375	margin-bottom: 0.3rem;
	376	line-height: 1.4;
	377	-webkit-transition: all .2s ease-in-out;
	378	-moz-transition: all .2s ease-in-out;
	379	-o-transition: all .2s ease-in-out;
	380	-ms-transition: all .2s ease-in-out;
	381	transition: all .2s ease-in-out;
	382
	383	display: -webkit-box;
	384	overflow: hidden;
	385	-webkit-box-orient: vertical;
	386	/* autoprefixer: off */
	387	-webkit-line-clamp: 2;
	388	/* autoprefixer: on */
	389	}
	390
	391
	392
	393	#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap {
	394	order: 3;
	395	color: #858585;
	396	font-size: 90%;
3a5d66	397	flex-wrap: wrap;
06ee76	398
L	399	.article-meta-label {
	400	padding-right: 0.2rem;
	401	}
	402	}
	403
	404	#recent-posts>.recent-post-item>.recent-post-info>.content {
	405	opacity: 0;
	406	line-height: .8;
	407	transition: all .25s;
	408	color: #999;
	409	margin-bottom: 19px;
	410	text-overflow: ellipsis;
	411	order: 2;
	412	margin: 0;
	413
	414	display: -webkit-box;
	415	overflow: hidden;
	416	-webkit-box-orient: vertical;
	417	/* autoprefixer: off */
	418	-webkit-line-clamp: 3;
	419	/* autoprefixer: on */
	420
	421	}
	422
	423	#recent-posts>.recent-post-item>.recent-post-info>.article-title:hover {
	424	color: #448aff;
	425	}
	426
	427
	428
	429	//div本体阴影
	430	#recent-posts>.recent-post-item:hover {
	431	-webkit-box-shadow: @card-hover-box-shadow;
	432	box-shadow: @card-hover-box-shadow;
	433	}
	434
	435	// 图片缩放
	436	#recent-posts>.recent-post-item:hover img.post_bg {
	437	-webkit-transform: scale(.9);
	438	-moz-transform: scale(.9);
	439	-o-transform: scale(.9);
	440	-ms-transform: scale(.9);
	441	transform: scale(.9);
	442	-webkit-box-shadow: @card-hover-box-shadow;
	443	box-shadow: @card-hover-box-shadow;
	444	}
	445
	446	//内容缩放内容显示
	447	#recent-posts>.recent-post-item:hover .recent-post-info .content {
	448	opacity: 1;
	449	line-height: 1.8;
	450	transition: all .25s;
	451	}
	452
	453	#recent-posts>.recent-post-item .post_cover img.post_bg:hover {
	454	transform: scale(.9);
	455	}
	456
	457	#recent-posts>.recent-post-item .post_cover img.post_bg:hover {
	458	-webkit-transform: scale(1.1);
	459	-moz-transform: scale(1.1);
	460	-o-transform: scale(1.1);
	461	-ms-transform: scale(1.1);
	462	transform: scale(1.1);
	463	}
	464
	465	@media screen and (max-width:768px) {
	466	#recent-posts .recent-post-item .recent-post-info .article-title {
	467	font-size: 1.32em !important;
	468	margin-bottom: 0 !important;
	469	}
	470	}
	471
	472	@media screen and (min-width: 769px) {
	473	#recent-posts>.recent-post-item>.recent-post-info>.content {
	474	opacity: 0;
	475	line-height: .8;
	476	transition: all .25s;
	477	color: #999;
	478	margin-bottom: 10px;
	479	display: -webkit-container;
	480	-webkit-line-clamp: 3;
	481	text-overflow: ellipsis;
	482	overflow: hidden;
	483	}
	484	}
	485
	486	@media screen and (max-width: 768px) {
	487	#recent-posts>.recent-post-item>.recent-post-info {
	488	width: 69%;
	489	font-size: 12px !important;
	490	margin: .7rem 0;
	491	}
	492	}
	493
	494	@media screen and (max-width: 768px) {
	495	#recent-posts>.recent-post-item>.recent-post-info>.content {
	496	opacity: 1;
	497	line-height: 1.7;
	498	color: #999;
	499	display: -webkit-container;
0dd41b	500	-webkit-line-clamp: 2;
06ee76	501	text-overflow: ellipsis;
L	502	overflow: hidden;
0dd41b	503	min-height: 20px;
06ee76	504	}
L	505	}
	506
	507	@media screen and (min-width: 769px) {
	508	#recent-posts>.recent-post-item {
	509	height: 15em;
	510	}
	511	}
	512
	513	@media screen and (max-width: 768px) {
	514	#recent-posts .recent-post-item {
	515	height: 12em !important;
	516	padding: 0;
	517	-webkit-flex-direction: row;
	518	-ms-flex-direction: row;
	519	flex-direction: row;
	520	}
	521	}
	522
	523	@media only screen and (max-width: 768px) {
	524	@ahzoo-proportion: 0.65;
	525	@global-font-size: 12px;
	526	}
	527	</style>