src/components/mini/box2-class.vue

@@ -1,18 +1,19 @@
<template>
   <div class="blog-container  ">
      <span class="blog-pigeonhole">
         <router-link :to="{path:'/articleList'}">
         <!-- <router-link :to="{path:'/articleList'}">
            分类
         </router-link>
         </router-link> -->
         分类
      </span>
      <div class="blog-scroll ">
         <div class="blog-log-list">
            <div class="blog-log-item" v-for="item in list1">
            <div class="blog-log-item" v-for="(item,index) in list1">
               <router-link :to="{path:'/articleList',query:{typeId:item.id}}">
                  <span>{{item.typeName}}</span>
               </router-link>

               <span>{{item.count==null?'--':item.count}}</span>
               <span>{{item.count==null?'--':item.count+'篇'}}</span>
            </div>
         </div>
         <div class="blog-log-list">
@@ -20,7 +21,7 @@
               <router-link :to="{path:'/articleList',query:{typeId:item.id}}">
                  <span>{{item.typeName}}</span>
               </router-link>
               <span>{{item.count==null?'--':item.count}}</span>
               <span>{{item.count==null?'--':item.count+'篇'}}</span>

            </div>
         </div>
@@ -35,74 +36,17 @@
   } from '../../api/blogArticleType.js'
   export default {
      beforeMount() {
         //this.$message.info('loading', 0.3);
         queryBlogArticleType({}).then((res) => {
            this.list1 = res.data.slice(0, 3)
            this.list2 = res.data.slice(4)
            if (res.data.length >= 3)
               this.list2 = res.data.slice(3)
         })
      },
      data() {
         return {
            list1: [],
            list2: [],
            // list1: [{
            //    name: "日志",
            //    count: 10
            // }, {
            //    name: "分类",
            //    count: 12
            // }, {
            //    name: "标签",
            //    count: 14
            // }],
            // list2: [{
            //    name: "Tag",
            //    count: 133
            // }, {
            //    name: "专题",
            //    count: 10
            // }, {
            //    name: "偏好",
            //    count: 12
            // }, {
            //    name: "星标",
            //    count: 14
            // },{
            //    name: "Tag",
            //    count: 133
            // }, {
            //    name: "专题",
            //    count: 10
            // }, {
            //    name: "偏好",
            //    count: 12
            // }, {
            //    name: "星标",
            //    count: 14
            // },{
            //    name: "Tag",
            //    count: 133
            // }, {
            //    name: "专题",
            //    count: 10
            // }, {
            //    name: "偏好",
            //    count: 12
            // }, {
            //    name: "星标",
            //    count: 14
            // },{
            //    name: "Tag",
            //    count: 133
            // }, {
            //    name: "专题",
            //    count: 10
            // }, {
            //    name: "偏好",
            //    count: 12
            // }, {
            //    name: "星标",
            //    count: 14
            // }]
         }
      }
   }
@@ -120,7 +64,7 @@
   /*日志部分*/
   .blog-log-list {
      line-height: 1.6;
      padding-left: 3%;
      // padding-left: 3%;
      padding-right: 3%;

      flex-wrap: wrap;
@@ -155,6 +99,12 @@

      span {
         display: block;
         font-size:15px;
      }
   }
</style>
<style lang="less" scoped>
   a:hover::after {
      left: -50%;
   }
</style>