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>