From 93768186ca58acd0fc0b6963d0e017979c087631 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Tue, 23 Aug 2022 02:09:58 +0800
Subject: [PATCH] 上下篇日志提示加入
---
src/components/mini/box-friend.vue | 100 +++++++++++++++++++++++++++++++++++--------------
1 files changed, 71 insertions(+), 29 deletions(-)
diff --git a/src/components/mini/box-friend.vue b/src/components/mini/box-friend.vue
index a5a5805..47ecd44 100644
--- a/src/components/mini/box-friend.vue
+++ b/src/components/mini/box-friend.vue
@@ -1,33 +1,61 @@
<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-if="list.length==0" class="mySecret"> 空空如也..</div>
+ <div v-for="temp in list" v-else>
+ <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=\"http://t.inleft.com/share/media_photo/404.png\"",
+ 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;
+ padding: 10px 30px 20px;
h1 {
margin: .67em 0;
@@ -44,14 +72,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;
@@ -164,24 +193,32 @@
@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: 767px) and (min-width: 501px) {
+ @media screen and (max-width: 1438px) and (min-width: 791px) {
.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% / 4 - 2.3rem);
+ width: calc(100% / 4 - 2.3rem);
+ }
+ }
+
+ @media screen and (max-width: 790px) and (min-width: 501px) {
+ .link-box a {
+ margin: 0 0.9375rem 3.75rem;
+ width: -webkit-calc(100% / 3 - 2.3rem);
+ width: calc(100% / 3 - 2.3rem);
}
}
@@ -189,8 +226,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