src/components/mini/box-friend.vue

@@ -35,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: []
         }
      }
@@ -54,7 +54,7 @@

   .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;
@@ -76,9 +76,9 @@
   }

   .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;
@@ -191,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);
      }
   }

@@ -219,5 +219,10 @@
         width: -webkit-calc(50% - 1.5rem);
         width: calc(50% - 1.5rem);
      }

      .blog-main {
         padding-left: 3%;
         padding-right: 3%;
      }
   }
</style>