From c23efbe2832d1a9eecd4ef5d20d984661b24dd22 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Tue, 22 Feb 2022 01:21:52 +0800
Subject: [PATCH] 文章添加补充

---
 src/components/mini/box-friend.vue |   38 +++++++++++++++++++++++---------------
 1 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/components/mini/box-friend.vue b/src/components/mini/box-friend.vue
index c570349..841503b 100644
--- a/src/components/mini/box-friend.vue
+++ b/src/components/mini/box-friend.vue
@@ -3,18 +3,19 @@
 		<div v-for="temp in list">
 			<h1>{{temp.groupName}}</h1>
 			<hr>
-			<div class="link-box"  >
+			<div class="link-box">
 				<!-- <a href="#" target="_blank" class="no-underline"> -->
+
 				<a :href="listTemp.url" target="_blank" class="no-underline" v-for="listTemp in temp.linkVoList">
-					<div class="thumb">
-						<img width="200" height="200" 
-						 :src="listTemp.avatar" :onerror="img404" 
-							:alt="listTemp.name">
-					</div>
-					<div class="content">
-						<p class="title">
-							{{listTemp.name}}
-						</p>
+					<div class="myFlex">
+						<div class="thumb">
+							<img width="200" height="200" :src="listTemp.avatar" :onerror="img404" :alt="listTemp.name">
+						</div>
+						<div class="content">
+							<p class="title">
+								{{listTemp.name}}
+							</p>
+						</div>
 					</div>
 				</a>
 			</div>
@@ -34,7 +35,7 @@
 		},
 		data() {
 			return {
-				img404:"this.onerror='';this.src=\"https://blog.zeruns.tech/tx.jpg\"",
+				img404: "this.onerror='';this.src=\"https://blog.zeruns.tech/tx.jpg\"",
 				list: []
 			}
 		}
@@ -44,6 +45,13 @@
 </script>
 
 <style lang="less">
+	.myFlex {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+	}
+
 	.myFriend {
 		box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
 		padding: 10px 30px 0px;
@@ -183,16 +191,16 @@
 	@media screen and (min-width: 1600px) {
 		.link-box a {
 			margin: 0 0.9375rem 3.75rem;
-			width: -webkit-calc(120% / 5 - 1.875rem);
-			width: calc(120% / 5 - 1.875rem);
+			width: -webkit-calc(100% / 5 - 1.875rem);
+			width: calc(100% / 5 - 1.875rem);
 		}
 	}
 
 	@media screen and (max-width: 1599px) and (min-width: 768px) {
 		.link-box a {
 			margin: 0 0.9375rem 3.75rem;
-			width: -webkit-calc(130% / 4 - 1.875rem);
-			width: calc(130% / 4 - 1.875rem);
+			width: -webkit-calc(100% / 4 - 1.875rem);
+			width: calc(100% / 4 - 1.875rem);
 		}
 	}
 

--
Gitblit v1.9.1