blog/blog-facade.git

inleft

2022-08-30 271ca6cb0ee2ff0a789bf74d1821e7891a7043bb

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