src/components/mini/box3-archive.vue

@@ -1,80 +1,47 @@
<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>

<script>
   import {
      archive
   } from '../../api/blogStatistics.js'

   export default {

      beforeMount() {
         archive({}).then((res) => {
            this.myData = res.data;
         })
      },
      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": [],
         }
      }
   }
@@ -83,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 {
@@ -100,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;
   }
@@ -121,7 +101,7 @@
      /*让弹性盒元素在必要的时候拆行：*/
      align-content: flex-start;
      -webkit-align-content: flex-start;

      transition: all 1 ease;
   }

   .blog-pigeonhole-item {