src/components/mini/box-friend.vue

@@ -1,6 +1,7 @@
<template>
   <div class="myFriend">
      <div v-for="temp in list">
      <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">
@@ -35,7 +36,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: []
         }
      }
@@ -71,7 +72,8 @@
         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);
      }
   }

@@ -191,24 +193,32 @@
   @media screen and (min-width: 1600px) {
      .link-box a {
         margin: 0 0.9375rem 3.75rem;
         width: -webkit-calc(100% / 5 - 1.875rem);
         width: calc(100% / 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(100% / 4 - 1.875rem);
         width: calc(100% / 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);
      }
   }

@@ -216,8 +226,8 @@
   @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 {