From 944ca64b2650470a2b0616c43f83e6e88123a7b2 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Tue, 02 Aug 2022 18:00:03 +0800
Subject: [PATCH] 补充日志内页提示内容
---
src/components/mini/box-friend.vue | 279 +++++++++++++++++++++++++++++++++++--------------------
1 files changed, 175 insertions(+), 104 deletions(-)
diff --git a/src/components/mini/box-friend.vue b/src/components/mini/box-friend.vue
index 74aa7e3..1fe4cca 100644
--- a/src/components/mini/box-friend.vue
+++ b/src/components/mini/box-friend.vue
@@ -1,112 +1,168 @@
<template>
- <div style="display: flex;" class="link-box">
- <div v-for="temp in [1,2,1,1,1,1]">
- <!-- <a href="#" target="_blank" class="no-underline"> -->
- <a href="#" class="no-underline">
- <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 class="myFriend">
+ <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 {
- a {
- padding: 10px;
+ 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 20px;
+
+ h1 {
+ margin: .67em 0;
+ padding-bottom: .3rem;
+ font-size: 1.8em;
+ line-height: 1.2;
+ position: relative;
+ font-weight: bold;
+ }
+
+ hr {
+ overflow: hidden;
+ margin: 1rem 0;
+ padding: 0;
+ height: .125rem;
+ border: none;
+ background: #bcbfc3 repeating-linear-gradient(-45deg, #fff, #fff 0.25rem, transparent 0.25rem, transparent 0.5rem);
}
}
- .link-box a {
- width: 33.75rem;
- background: #fff;
- float: left;
- margin: 0 0 4.375rem;
- color: #2E2E2E;
- text-decoration: none;
- border-bottom: none;
- border-radius: .25rem;
+ .link-box {
+ padding: 3.375rem 2.1875rem 0.1875rem;
overflow: hidden;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- // -moz-box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1);
- -webkit-box-shadow: 0 3px.0625rem 0.0625rem #0000001a;
- -moz-box-shadow: 0 3px 0.0625rem #0000001a;
- box-shadow: 0 3px 0.0625rem #0000001a;
- -webkit-transform: translate3d(0, 0, 0);
- -moz-transform: translate3d(0, 0, 0);
- -ms-transform: translate3d(0, 0, 0);
- -o-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- -webkit-transition: .3s;
- -moz-transition: .3s;
- -ms-transition: .3s;
- -o-transition: .3s;
- transition: .3s;
+ margin: -3.125rem -3.125rem 0;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+
+ a {
+ width: 33.75rem;
+ background: #fff;
+ float: left;
+ margin: 0 0 4.375rem;
+ color: #2E2E2E;
+ text-decoration: none;
+ border-bottom: none;
+ border-radius: .25rem;
+ overflow: hidden;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ // -moz-box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0 3px.0625rem 0.0625rem #0000001a;
+ -moz-box-shadow: 0 3px 0.0625rem #0000001a;
+ box-shadow: 0 3px 0.0625rem #0000001a;
+ -webkit-transform: translate3d(0, 0, 0);
+ -moz-transform: translate3d(0, 0, 0);
+ -ms-transform: translate3d(0, 0, 0);
+ -o-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ -webkit-transition: .3s;
+ -moz-transition: .3s;
+ -ms-transition: .3s;
+ -o-transition: .3s;
+ transition: .3s;
+
+ .content {
+ text-align: center;
+ background-color: #fff;
+
+ .title {
+ text-align: center;
+ padding: 1rem .25rem;
+ font-weight: 500;
+ color: #333;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin: 0;
+ }
+ }
+ }
+
+ .thumb {
+ font-size: 0;
+ overflow: hidden;
+ background-color: #fff;
+ margin: 0;
+ border-top-left-radius: .25rem;
+ border-top-right-radius: .25rem;
+
+ img {
+ width: 100%;
+ height: auto;
+ position: relative;
+ margin: 0;
+ padding: 0;
+ -webkit-transition: .4s;
+ -moz-transition: .4s;
+ -ms-transition: .4s;
+ -o-transition: .4s;
+ transition: .4s;
+ }
+ }
}
- .link-box a:hover:after {
- left: 0;
- width: 100%;
- -webkit-transition: width 350ms;
- -moz-transition: width 350ms;
- -ms-transition: width 350ms;
- -o-transition: width 350ms;
- transition: width 350ms;
- }
+ // .link-box a:hover:after {
+ // left: 0;
+ // width: 100%;
+ // -webkit-transition: width 350ms;
+ // -moz-transition: width 350ms;
+ // -ms-transition: width 350ms;
+ // -o-transition: width 350ms;
+ // transition: width 350ms;
+ // }
- .link-box a .thumb {
- font-size: 0;
- overflow: hidden;
- background-color: #fff;
- margin: 0;
- border-top-left-radius: .25rem;
- border-top-right-radius: .25rem;
- }
-
- .link-box a .thumb img {
- width: 100%;
- height: auto;
- position: relative;
- margin: 0;
- padding: 0;
- -webkit-transition: .4s;
- -moz-transition: .4s;
- -ms-transition: .4s;
- -o-transition: .4s;
- transition: .4s;
- }
-
- .link-box a .content {
- text-align: center;
- background-color: #fff;
- }
-
- .link-box a .content .title {
- text-align: center;
- padding: 1rem .25rem;
- font-weight: 500;
- color: #333;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- margin: 0;
- }
.link-box a:hover,
.link-box a:active {
@@ -121,29 +177,30 @@
-moz-transform: none;
}
+ @media screen and (max-width: 710px) and (min-width: 319px) {
+ .link-box {
+ padding: 4.375rem 3.125rem 3.125rem;
+ margin: -3.125rem;
+ }
+
+ .myFriend {
+ padding: 10px 15px 0px;
+ }
+ }
+
@media screen and (min-width: 1600px) {
.link-box a {
margin: 0 0.9375rem 3.75rem;
- width: -webkit-calc(500% / 5 - 1.875rem);
- width: calc(500% / 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(150% / 4 - 1.875rem);
- width: calc(150% / 4 - 1.875rem);
- }
- }
-
-
-
- @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% / 4 - 1.875rem);
+ width: calc(100% / 4 - 1.875rem);
}
}
@@ -154,4 +211,18 @@
width: calc(100% / 3 - 1.875rem);
}
}
+
+
+ @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);
+ }
+
+ .blog-main {
+ padding-left: 3%;
+ padding-right: 3%;
+ }
+ }
</style>
--
Gitblit v1.9.1