From 916b6bf89465f057532ad8469e4e0002fc361716 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Thu, 18 Aug 2022 16:24:30 +0800 Subject: [PATCH] 日志内页添加头图 --- src/components/mini/box-friend.vue | 71 +++++++++++++++++++++++------------ 1 files changed, 46 insertions(+), 25 deletions(-) diff --git a/src/components/mini/box-friend.vue b/src/components/mini/box-friend.vue index c570349..33fdc88 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=\"http://t.inleft.com/share/media_photo/404.png\"", list: [] } } @@ -44,9 +45,16 @@ </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; + padding: 10px 30px 20px; h1 { margin: .67em 0; @@ -63,14 +71,15 @@ padding: 0; height: .125rem; border: none; - background: #bcbfc3 repeating-linear-gradient(-45deg, #fff, #fff 0.25rem, transparent 0.25rem, transparent 0.5rem); + // background: #bcbfc3 repeating-linear-gradient(-45deg, #fff, #fff 0.25rem, transparent 0.25rem, transparent 0.5rem); + background: #fff repeating-linear-gradient(-45deg, #fff, #fff 0.25rem, transparent 0.25rem, transparent 0.5rem); } } .link-box { - padding: 4.375rem 2.1875rem 2.1875rem; + padding: 3.375rem 2.1875rem 0.1875rem; overflow: hidden; - margin: -3.125rem; + margin: -3.125rem -3.125rem 0; display: flex; flex-direction: row; flex-wrap: wrap; @@ -183,24 +192,31 @@ @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 - 4rem); + width: calc(100% / 5 - 4rem); } } - @media screen and (max-width: 1599px) and (min-width: 768px) { + @media screen and (max-width: 1599px) and (min-width: 1439px) { .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% / 3 - 8rem); + width: calc(100% / 3 - 8rem); + } + } + @media screen and (max-width: 1438px) and (min-width: 791px) { + .link-box a { + margin: 0 0.9375rem 3.75rem; + width: -webkit-calc(100% / 4 - 2.3rem); + width: calc(100% / 4 - 2.3rem); } } - @media screen and (max-width: 767px) and (min-width: 501px) { + @media screen and (max-width: 790px) and (min-width: 501px) { .link-box a { margin: 0 0.9375rem 3.75rem; - width: -webkit-calc(100% / 3 - 1.875rem); - width: calc(100% / 3 - 1.875rem); + width: -webkit-calc(100% / 3 - 2.3rem); + width: calc(100% / 3 - 2.3rem); } } @@ -208,8 +224,13 @@ @media screen and (max-width: 500px) and (min-width: 319px) { .link-box a { margin: 0 0.75rem 1.5rem; - width: -webkit-calc(50% - 1.5rem); - width: calc(50% - 1.5rem); + width: -webkit-calc(100% / 3 - 1.5rem); + width: calc(100% / 3 - 1.5rem); + } + + .blog-main { + padding-left: 3%; + padding-right: 3%; } } </style> -- Gitblit v1.9.1