blog/blog-facade.git

lijh

2022-01-13 ad2b70777b866a9f4848a89fd0e343f991f8a604

commit \| author \| age
ad2b70	1	<template>
L	2	<div class="blog-container">
	3	<span class="blog-pigeonhole">归档信息</span>
	4	<div class="blog-scroll ">
	5	<div class="">
	6	<p class="blog-pigeonhole-p">2020</p>
	7	<div class="blog-pigeonhole-list">
	8
	9	<div class="blog-pigeonhole-item" v-for="item in list2020">
	10	<a href="#">
	11	<span>{{item.month}}月</span>
	12	<span>{{item.count}}篇</span>
	13	</a>
	14	</div>
	15	</div>
	16	</div>
	17	<div>
	18	<p class="blog-pigeonhole-p">2019</p>
	19	<div class="blog-pigeonhole-list">
	20
	21	<div class="blog-pigeonhole-item" v-for="item in list2019">
	22	<a href="#">
	23	<span>{{item.month}}月</span>
	24	<span>{{item.count}}篇</span>
	25	</a>
	26	</div>
	27	</div>
	28	</div>
	29	<div>
	30	<p class="blog-pigeonhole-p">2019</p>
	31	<div class="blog-pigeonhole-list">
	32
	33	<div class="blog-pigeonhole-item" v-for="item in list2019">
	34	<a href="#">
	35	<span>{{item.month}}月</span>
	36	<span>{{item.count}}篇</span>
	37	</a>
	38	</div>
	39	</div>
	40	</div>
	41	</div>
	42	</div>
	43
	44	</template>
	45
	46	<script>
	47	export default {
	48	data() {
	49	return {
	50	list2019: [{
	51	month: "12",
	52	count: 10
	53	}, {
	54	month: "10",
	55	count: 11
	56	}, {
	57	month: "9",
	58	count: 9
	59	}],
	60	list2020: [{
	61	month: "12",
	62	count: 8
	63	}, {
	64	month: "10",
	65	count: 7
	66	}, {
	67	month: "9",
	68	count: 6
	69	}, {
	70	month: "8",
	71	count: 5
	72	}, {
	73	month: "7",
	74	count: 4
	75	}, {
	76	month: "6",
	77	count: 3
	78	}, {
	79	month: "5",
	80	count: 2
	81	}, {
	82	month: "4",
	83	count: 1
	84	}]
	85	}
	86	}
	87	}
	88	</script>
	89
	90	</script>
	91
	92	<style lang="less">
	93	/归档部分/
	94
	95	.blog-pigeonhole {
	96	font-size: 15px;
	97	}
	98
	99	.blog-pigeonhole-p {
	100	width: 20%;
	101	text-align: center;
	102	line-height: 20px;
	103	border-radius: 6px 6px 6px 6px;
	104	/background-color: #edf0f3;/
	105	margin-left: 3%;
	106	margin-bottom: 3%;
	107	opacity: 0.7;
	108	}
	109
	110	.blog-pigeonhole-list {
	111	line-height: 1.6;
	112	padding-left: 3%;
	113	padding-right: 3%;
	114	/display: flex; !弹性盒子!/
	115	/justify-content: flex-end; !在弹性盒对象的 <div> 元素中的各项周围留有空白：!/
	116
	117	display: flex;
	118	display: -webkit-flex;
	119	-webkit-justify-content: flex-start;
	120	justify-content: flex-start;
	121
	122	flex-wrap: wrap;
	123	/让弹性盒元素在必要的时候拆行：/
	124	align-content: flex-start;
	125	-webkit-align-content: flex-start;
	126
	127	}
	128
	129	.blog-pigeonhole-item {
	130	min-width: 22%;
	131	margin-left: 1.5%;
	132	margin-right: 1.5%;
	133	margin-bottom: 5%;
	134
	135	a span:first-child {
	136	height: 22px;
	137	background-color: #edf0f3;
	138	border-radius: 6px 6px 0 0;
	139	opacity: .8;
	140	color: #999aaa;
	141	line-height: 22px;
	142	margin-bottom: 1px;
	143	text-align: center;
	144	}
	145
	146	a span:last-child {
	147	height: 22px;
	148	background-color: #f6f8fa;
	149	border-radius: 0 0 6px 6px;
	150	color: #555666;
	151	line-height: 20px;
	152	font-weight: 600;
	153	text-align: center;
	154	}
	155
	156	span {
	157	display: block;
	158	}
	159	}
	160	</style>