blog/blog-facade.git

inleft

2022-08-24 80476fae71f08bf4408c7509eff254031a4eeac6

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