From 81c155e7e00b83f06e6486a8d904428a44b8b275 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Wed, 23 Feb 2022 16:47:10 +0800 Subject: [PATCH] 评论页添加,修改站点默认logo --- src/components/mini/box-friend.vue | 65 +++++++++++++++++++++++--------- 1 files changed, 46 insertions(+), 19 deletions(-) diff --git a/src/components/mini/box-friend.vue b/src/components/mini/box-friend.vue index a5a5805..841503b 100644 --- a/src/components/mini/box-friend.vue +++ b/src/components/mini/box-friend.vue @@ -1,30 +1,57 @@ <template> <div class="myFriend"> - <h1>朋友们</h1> - <hr> - <div class="link-box"> - <!-- <a href="#" target="_blank" class="no-underline"> --> - <a href="#" class="no-underline" v-for="temp in [1,2,1,1,1,1,1,1,1]"> - <div class="thumb"> - <img width="200" height="200" src="https://cdn.jsdelivr.net/gh/Musenxi/CDN/长野.jpg" alt="长野 の BLOG"> - </div> - <div class="content"> - <p class="title"> - 长野 の BLOG - </p> - </div> - </a> + <div v-for="temp in list"> + <h1>{{temp.groupName}}</h1> + <hr> + <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="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> </div> </div> </template> <script> - export default {} + import { + queryBlogLinkGroup + } from '../../api/blogLink.js' + export default { + created() { + queryBlogLinkGroup().then((res) => { + this.list = res.data; + }) + }, + data() { + return { + img404: "this.onerror='';this.src=\"https://blog.zeruns.tech/tx.jpg\"", + list: [] + } + } + } </script> </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; @@ -164,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