inleft
2022-08-11 859ec7a60a9a1f30c898dbf1ae05c50dccfc40e5
commit | author | age
ad2b70 1 <template>
41b36f 2     <div class="blog-container  ">
4b854c 3         <span class="blog-pigeonhole">
I 4             <router-link :to="{path:'/articleList'}">
5                 分类
6             </router-link>
7         </span>
ad2b70 8         <div class="blog-scroll ">
L 9             <div class="blog-log-list">
10                 <div class="blog-log-item" v-for="item in list1">
4b854c 11                     <router-link :to="{path:'/articleList',query:{typeId:item.id}}">
63af45 12                         <span>{{item.typeName}}</span>
56a4b8 13                     </router-link>
I 14
63f511 15                     <span>{{item.count==null?'--':item.count+'篇'}}</span>
ad2b70 16                 </div>
L 17             </div>
18             <div class="blog-log-list">
19                 <div class="blog-log-item" v-for="item in list2">
4b854c 20                     <router-link :to="{path:'/articleList',query:{typeId:item.id}}">
63af45 21                         <span>{{item.typeName}}</span>
56a4b8 22                     </router-link>
63f511 23                     <span>{{item.count==null?'--':item.count+'篇'}}</span>
56a4b8 24
ad2b70 25                 </div>
L 26             </div>
27         </div>
28     </div>
29
30 </template>
31
32 <script>
63af45 33     import {
I 34         queryBlogArticleType
35     } from '../../api/blogArticleType.js'
ad2b70 36     export default {
63af45 37         beforeMount() {
2795be 38             //this.$message.info('loading', 0.3);
63af45 39             queryBlogArticleType({}).then((res) => {
4b854c 40                 this.list1 = res.data.slice(0, 3)
81c155 41                 if (res.data.length >= 3)
I 42                     this.list2 = res.data.slice(3)
63af45 43             })
I 44         },
ad2b70 45         data() {
L 46             return {
4b854c 47                 list1: [],
I 48                 list2: [],
ad2b70 49             }
L 50         }
51     }
52 </script>
53
54 </script>
55
56 <style lang="less">
4b854c 57     .blog-pigeonhole {
I 58         a {
59             color: black;
60         }
61     }
62
ad2b70 63     /*日志部分*/
L 64     .blog-log-list {
65         line-height: 1.6;
66         padding-left: 3%;
67         padding-right: 3%;
68
69         flex-wrap: wrap;
70         /*让弹性盒元素在必要的时候拆行:*/
71         display: -webkit-flex;
72         display: flex;
73         -webkit-justify-content: center;
74         justify-content: center;
75     }
76
77     .blog-log-item {
78         border-left: 2px solid rgba(222, 229, 231, .45);
79         width: 23%;
80         margin-bottom: 10px;
81
82         :first-child {
83             border-left: none;
84         }
85
d629d9 86         a {
L 87             color: black;
88         }
89
56a4b8 90         .link span:first-child {
ad2b70 91             color: #999;
L 92         }
93
56a4b8 94         .link span:last-child {
ad2b70 95             font-weight: 600;
L 96             font-size: 15px;
97         }
98
99         span {
100             display: block;
101         }
102     }
103 </style>