src/components/mini/box3-archive.vue

@@ -1,27 +1,27 @@
<template>
   <div class="blog-container archive">
      <span class="blog-pigeonhole">
         <router-link to="/tagTime?type=1">
         <router-link :to="{name:'tagTime'}">
            归档信息
         </router-link>
      </span>
      <div class="blog-scroll ">
         <div v-for="yearData in myData">
            <router-link to="/tagTime?type=2">
      <div class="blog-scroll" v-bind:class="{miniHeight:showLess,maxHeight:!showLess}">
         <div v-for="(yearData,index) in myData" class="fade" v-if="index < 2 || !showLess">
            <router-link :to="{name:'tagTime',query:{year:yearData.year}}">
               <p class="blog-pigeonhole-p">{{yearData.year}}年</p>
            </router-link>
            <div class="blog-pigeonhole-list">

               <div class="blog-pigeonhole-item" v-for="item in yearData.list">
                  <router-link to="/tagTime?type=3">
                  <router-link :to="{name:'tagTime',
                     query:{year:yearData.year,month:item.month}}">
                     <span>{{item.month}}月</span>
                  </router-link>
                  <span>{{item.count}}篇</span>

               </div>
            </div>
         </div>
      </div>
      <div @click="()=>showLess=!showLess" v-if="myData.length>2 && showLess">...</div>
   </div>

</template>
@@ -30,7 +30,9 @@
   import {
      archive
   } from '../../api/blogStatistics.js'

   export default {

      beforeMount() {
         archive({}).then((res) => {
            this.myData = res.data;
@@ -38,52 +40,8 @@
      },
      data() {
         return {
            "myData": [
               // {
               //    "year": "2022",
               //    "list": [{
               //          "month": "12",
               //          "count": 10
               //       },
               //       {
               //          "month": "10",
               //          "count": 11
               //       },
               //       {
               //          "month": "9",
               //          "count": 9
               //       }
               //    ]
               // },
               // {
               //    "year": "2021",
               //    "list": [{
               //          "month": "12",
               //          "count": 8
               //       },
               //       {
               //          "month": "10",
               //          "count": 7
               //       },
               //       {
               //          "month": "7",
               //          "count": 4
               //       },
               //       {
               //          "month": "6",
               //          "count": 3
               //       },
               //       {
               //          "month": "5",
               //          "count": 2
               //       },
               //       {
               //          "month": "4",
               //          "count": 1
               //       }
               //    ]
               // }
            ],
            showLess: true,
            "myData": [],
         }
      }
   }
@@ -92,11 +50,24 @@
</script>

<style lang="less">
   .blog-scroll {
      transition: all ease-in-out 0.8s;
   }

   .miniHeight {
      max-height: 150px;
   }

   .maxHeight {
      max-height: 800px;
   }

   /*归档部分*/
   .archive {
      a {
         color: black;
      }

   }

   .blog-pigeonhole {
@@ -109,7 +80,7 @@
      line-height: 20px;
      border-radius: 6px 6px 6px 6px;
      /*background-color: #edf0f3;*/
      margin-left: 3%;
      margin-left: 5%;
      margin-bottom: 3%;
      opacity: 0.7;
   }
@@ -130,7 +101,7 @@
      /*让弹性盒元素在必要的时候拆行：*/
      align-content: flex-start;
      -webkit-align-content: flex-start;

      transition: all 1 ease;
   }

   .blog-pigeonhole-item {