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>