blog/blog-facade.git

inleft

2022-08-02 3a5d6662fbeb80426d9708a5d4684bdd5c1f072f

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