blog/blog-facade.git

inleft

2022-02-14 83fb3746908461d30e73471e7c7cbbd486e001b8

commit \| author \| age
06ee76	1	<template>
f9c38e	2	<div class="myFriend">
I	3	<h1>朋友们</h1>
	4	<hr>
	5	<div class="link-box">
06ee76	6	<!-- <a href="#" target="_blank" class="no-underline"> -->
f9c38e	7	<a href="#" class="no-underline" v-for="temp in [1,2,1,1,1,1,1,1,1]">
06ee76	8	<div class="thumb">
L	9	<img width="200" height="200" src="https://cdn.jsdelivr.net/gh/Musenxi/CDN/长野.jpg" alt="长野の BLOG">
	10	</div>
	11	<div class="content">
	12	<p class="title">
	13	长野の BLOG
	14	</p>
	15	</div>
	16	</a>
	17	</div>
	18	</div>
	19	</template>
	20
	21	<script>
	22	export default {}
	23	</script>
	24
	25	</script>
	26
	27	<style lang="less">
	28	.myFriend {
f9c38e	29	box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
I	30	padding: 10px 30px 0px;
	31
	32	h1 {
	33	margin: .67em 0;
	34	padding-bottom: .3rem;
	35	font-size: 1.8em;
	36	line-height: 1.2;
	37	position: relative;
	38	font-weight: bold;
	39	}
	40
	41	hr {
	42	overflow: hidden;
	43	margin: 1rem 0;
	44	padding: 0;
	45	height: .125rem;
	46	border: none;
	47	background: #bcbfc3 repeating-linear-gradient(-45deg, #fff, #fff 0.25rem, transparent 0.25rem, transparent 0.5rem);
06ee76	48	}
L	49	}
	50
f9c38e	51	.link-box {
I	52	padding: 4.375rem 2.1875rem 2.1875rem;
06ee76	53	overflow: hidden;
f9c38e	54	margin: -3.125rem;
I	55	display: flex;
	56	flex-direction: row;
	57	flex-wrap: wrap;
	58
	59	a {
	60	width: 33.75rem;
	61	background: #fff;
	62	float: left;
	63	margin: 0 0 4.375rem;
	64	color: #2E2E2E;
	65	text-decoration: none;
	66	border-bottom: none;
	67	border-radius: .25rem;
	68	overflow: hidden;
	69	-webkit-touch-callout: none;
	70	-webkit-user-select: none;
	71	-moz-user-select: none;
	72	-ms-user-select: none;
	73	user-select: none;
	74	// -moz-box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1);
	75	-webkit-box-shadow: 0 3px.0625rem 0.0625rem #0000001a;
	76	-moz-box-shadow: 0 3px 0.0625rem #0000001a;
	77	box-shadow: 0 3px 0.0625rem #0000001a;
	78	-webkit-transform: translate3d(0, 0, 0);
	79	-moz-transform: translate3d(0, 0, 0);
	80	-ms-transform: translate3d(0, 0, 0);
	81	-o-transform: translate3d(0, 0, 0);
	82	transform: translate3d(0, 0, 0);
	83	-webkit-transition: .3s;
	84	-moz-transition: .3s;
	85	-ms-transition: .3s;
	86	-o-transition: .3s;
	87	transition: .3s;
	88
	89	.content {
	90	text-align: center;
	91	background-color: #fff;
	92
	93	.title {
	94	text-align: center;
	95	padding: 1rem .25rem;
	96	font-weight: 500;
	97	color: #333;
	98	white-space: nowrap;
	99	overflow: hidden;
	100	text-overflow: ellipsis;
	101	margin: 0;
	102	}
	103	}
	104	}
	105
	106	.thumb {
	107	font-size: 0;
	108	overflow: hidden;
	109	background-color: #fff;
	110	margin: 0;
	111	border-top-left-radius: .25rem;
	112	border-top-right-radius: .25rem;
	113
	114	img {
	115	width: 100%;
	116	height: auto;
	117	position: relative;
	118	margin: 0;
	119	padding: 0;
	120	-webkit-transition: .4s;
	121	-moz-transition: .4s;
	122	-ms-transition: .4s;
	123	-o-transition: .4s;
	124	transition: .4s;
	125	}
	126	}
06ee76	127	}
L	128
f9c38e	129	// .link-box a:hover:after {
I	130	// left: 0;
	131	// width: 100%;
	132	// -webkit-transition: width 350ms;
	133	// -moz-transition: width 350ms;
	134	// -ms-transition: width 350ms;
	135	// -o-transition: width 350ms;
	136	// transition: width 350ms;
	137	// }
06ee76	138
L	139
	140	.link-box a:hover,
	141	.link-box a:active {
	142	-webkit-box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
	143	-moz-box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
	144	box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
	145	-webkit-transform: translateY(-0.25rem);
	146	-moz-transform: translateY(-0.25rem);
	147	-ms-transform: translateY(-0.25rem);
	148	-o-transform: translateY(-0.25rem);
	149	transform: translateY(-0.25rem);
	150	-moz-transform: none;
	151	}
	152
f9c38e	153	@media screen and (max-width: 710px) and (min-width: 319px) {
I	154	.link-box {
	155	padding: 4.375rem 3.125rem 3.125rem;
	156	margin: -3.125rem;
	157	}
	158
	159	.myFriend {
	160	padding: 10px 15px 0px;
	161	}
	162	}
	163
06ee76	164	@media screen and (min-width: 1600px) {
L	165	.link-box a {
	166	margin: 0 0.9375rem 3.75rem;
f9c38e	167	width: -webkit-calc(120% / 5 - 1.875rem);
I	168	width: calc(120% / 5 - 1.875rem);
06ee76	169	}
L	170	}
	171
	172	@media screen and (max-width: 1599px) and (min-width: 768px) {
	173	.link-box a {
	174	margin: 0 0.9375rem 3.75rem;
f9c38e	175	width: -webkit-calc(130% / 4 - 1.875rem);
I	176	width: calc(130% / 4 - 1.875rem);
06ee76	177	}
L	178	}
	179
	180	@media screen and (max-width: 767px) and (min-width: 501px) {
	181	.link-box a {
	182	margin: 0 0.9375rem 3.75rem;
	183	width: -webkit-calc(100% / 3 - 1.875rem);
	184	width: calc(100% / 3 - 1.875rem);
	185	}
	186	}
f9c38e	187
I	188
	189	@media screen and (max-width: 500px) and (min-width: 319px) {
	190	.link-box a {
	191	margin: 0 0.75rem 1.5rem;
	192	width: -webkit-calc(50% - 1.5rem);
	193	width: calc(50% - 1.5rem);
	194	}
	195	}
06ee76	196	</style>