From f9c38ed1b72fc96b96c1d3ffdcc1a66b03bd3b73 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Fri, 21 Jan 2022 18:03:07 +0800
Subject: [PATCH] 布局修改,小工具添加,mock数据接入,接口模拟请求
---
src/components/mini/box-friend.vue | 225 +++++++++++++++++++++++++++++++++-----------------------
1 files changed, 132 insertions(+), 93 deletions(-)
diff --git a/src/components/mini/box-friend.vue b/src/components/mini/box-friend.vue
index 74aa7e3..a5a5805 100644
--- a/src/components/mini/box-friend.vue
+++ b/src/components/mini/box-friend.vue
@@ -1,8 +1,10 @@
<template>
- <div style="display: flex;" class="link-box">
- <div v-for="temp in [1,2,1,1,1,1]">
+ <div class="myFriend">
+ <h1>朋友们</h1>
+ <hr>
+ <div class="link-box">
<!-- <a href="#" target="_blank" class="no-underline"> -->
- <a href="#" 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>
@@ -24,89 +26,116 @@
<style lang="less">
.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 0px;
+
+ 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: 4.375rem 2.1875rem 2.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;
+ 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 +150,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(120% / 5 - 1.875rem);
+ width: calc(120% / 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(130% / 4 - 1.875rem);
+ width: calc(130% / 4 - 1.875rem);
}
}
@@ -154,4 +184,13 @@
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);
+ }
+ }
</style>
--
Gitblit v1.9.1