blog/blog-facade.git

inleft

2022-08-16 f07ea7f9ce1e213addb9df00aec053945e909d3f

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