blog/blog-facade.git

inleft

2022-08-05 2795bef55b825acd0065d991e835c5f616ec4724

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