blog/blog-facade.git

lijh

2022-01-14 d629d9ee09eb91be19fd21f04f78a89f7d837c3a

commit \| author \| age
ad2b70	1	<template>
L	2	<div class="blog-article">
	3	<!-- <div class="index-post-img">
	4	<a href="#">
	5	<div class="item-thumb lazy"
	6	style="background-image: url(https://image.ishelo.com/usr/themes/handsome/assets/img/sj/5.jpg)">
	7	</div>
	8	</a>
	9	</div> -->
	10
	11	<div class="article-meta">
	12	<h2 class="article-title"><a href="#">陈奕迅-Body Song 歌词</a></h2>
	13	<div class="article-split-line"></div>
	14	<div class="article-summary blog-scroll">
	15	<p>Baby Song - 陈奕迅 (Eason Chan)</p>
	16	<p>词：岑宁儿</p>
	17	<p>曲：岑宁儿</p>
	18	<p>你的眼睛像颗水晶通透</p>
	19	<p>里面有一个无穷无尽的宇宙</p>
	20	<p>小小的你在你小小的梦里</p>
	21	<p>把我所有大大的事情都吹进风里</p>
	22	<p>我为我将对你撒的谎先跟你道歉</p>
	23	<p>当你发现黑白不是那么的分明</p>
	24	<p>世界不是那么的公平</p>
	25	<p>别太失望我讲的是个梦想</p>
	26	<p>不用太听我们的话</p>
	27	<p>不要让任何人告诉你</p>
	28	<p>你该怎样对待世界</p>
	29	<p>或它该怎对你</p>
	30	<p>要跟现在一样随心</p>
	31	<p>让你的眼睛和心依然纯净</p>
	32	<p>可惜世界不及你好</p>
	33	<p>原谅我们我们都还在找</p>
	34	<p>而时间它只负责流动</p>
	35	<p>不负责育你成长</p>
	36	<p>不过你只需要倾听</p>
	37	<p>倾听你的心</p>
	38	<p>你的眼睛像颗水晶通透</p>
	39	<p>里面有一个无穷无尽的宇宙</p>
	40	<p>小小的你在你小小的梦里</p>
	41	<p>把我所有大大的事情都吹进风里</p>
	42	<p>都吹进风里</p>
	43	<p>-</p>
	44	</div>
	45	<div class="article-split-line"></div>
	46	<div class="article-message-info ">
	47	<ul>
	48	<li>
	49	<a-icon type="read" />
	50	<!-- <a-icon type="eye" /> -->
	51	<span> 101</span>
	52	</li>
	53	<li>
	54	<a-icon type="like" />
	55	<span> 233</span>
	56
	57	</li>
	58	<li>
	59	<a-icon type="folder-open" />
	60	<span> 歌词</span>
	61	</li>
	62	<li>
	63	<a-icon type="clock-circle" />
	64	<span> 2020-05-26 18:00:00</span>
	65	</li>
	66	</ul>
	67	</div>
	68	<div class="article-split-line"></div>
	69	<div class="article-read-btn">
56a4b8	70	<router-link class="btn" to="/mdDetail">阅读全文 »</router-link>
ad2b70	71	</div>
L	72	</div>
	73
	74	</div>
	75
	76	</template>
	77
	78	<script>
	79	export default {
	80	props: {
	81	title: "",
	82	list: ""
	83	},
	84	data() {
	85	return {
	86
	87	}
	88	}
	89	}
	90	</script>
	91
	92	</script>
	93
	94	<style lang="less">
	95	/文章部分/
	96	.blog-article {
	97	margin-top: 10px;
	98	margin-bottom: 20px;
	99	border-radius: 15px;
	100	border: none;
	101	/box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);/
	102	}
	103
	104	.article-meta {
	105	padding: 30px 30px 10px;
	106	background-color: white;
	107	border-radius: 15px;
	108	}
	109
	110	.article-title {
	111	color: #555;
	112	font-size: 14px;
	113	line-height: 14px;
	114	padding-bottom: 15px;
	115	margin-top: 0 !important;
	116	display: block;
	117	overflow: hidden;
	118	white-space: nowrap;
	119	text-overflow: ellipsis;
	120	text-align: center;
d629d9	121
L	122	a {
	123	color: black;
	124	}
ad2b70	125	}
L	126
	127	.article-split-line {
	128	width: 100%;
	129	height: 2px;
	130	overflow: hidden;
	131	font-size: 0;
	132	margin-top: 8px;
	133	margin-bottom: 8px;
	134	border-color: rgba(237, 241, 242, .6);
	135
	136	border-bottom: 1px solid rgba(222, 229, 231, .45);
	137	display: block
	138	}
	139
	140	.article-message-info {
	141	text-align: center;
	142
	143	li {
	144	display: inline-block;
	145	padding-right: 5px;
	146	padding-left: 5px;
	147
	148	span {
	149	padding-left: 0px;
	150	}
	151	}
	152	}
	153
	154
	155	.article-summary {
	156	max-height: 200px;
	157	overflow: hidden;
	158
	159	p {
	160	line-height: 17px;
	161	font-size: 10px;
	162	}
	163	}
	164
	165	.article-summary p {
	166	text-align: center;
	167	}
	168
	169	.article-read-btn {
	170	text-align: center;
	171	display: block;
	172	}
	173
	174	.btn {
	175	display: inline-block;
	176	padding: 0 20px;
	177	color: #555;
	178	background: #fff;
	179	border: 2px solid #555;
	180	text-decoration: none;
	181	border-radius: 2px;
	182
	183	line-height: 2;
	184	font-size: 14px;
	185	overflow-wrap: break-word;
	186	word-wrap: break-word;
	187	cursor: pointer;
	188
	189	transition-property: background-color;
	190	transition-duration: .2s;
	191	transition-timing-function: ease-in-out;
	192	transition-delay: 0s;
	193	}
	194
	195	.btn:hover {
	196	background: #262a30;
	197	color: #fff;
	198	}
	199
	200	/文章图片部分/
	201	.item-thumb {
	202	min-height: 250px;
	203	position: relative;
	204	display: block;
	205	background-position: 50% 50%;
	206	background-size: cover;
	207	border-radius: 15px;
	208	}
	209
	210	.item-thumb {
	211	cursor: pointer;
	212	transition: all 0.6s;
	213	}
	214
	215	.item-thumb:hover {
	216	transform: scale(1.05);
	217	}
	218
	219	.item-thumb-small {
	220	cursor: pointer;
	221	transition: all 0.6s;
	222	}
	223
	224	.item-thumb-small:hover {
	225	transform: scale(1.05);
	226	}
	227	</style>