inleft
2022-02-20 28d46dfc072a13859a5c0bc4901645b77022c7c3
commit | author | age
ad2b70 1 <template>
41b36f 2     <div class="blog-container  ">
ad2b70 3         <span class="blog-pigeonhole">分类</span>
L 4         <div class="blog-scroll ">
5             <div class="blog-log-list">
6                 <div class="blog-log-item" v-for="item in list1">
aab811 7                     <router-link to='/main1'>
63af45 8                         <span>{{item.typeName}}</span>
56a4b8 9                     </router-link>
I 10
63af45 11                     <span>{{item.count==null?'--':item.count}}</span>
ad2b70 12                 </div>
L 13             </div>
14             <div class="blog-log-list">
15                 <div class="blog-log-item" v-for="item in list2">
56a4b8 16                     <router-link to="/box1">
63af45 17                         <span>{{item.typeName}}</span>
56a4b8 18                     </router-link>
63af45 19                     <span>{{item.count==null?'--':item.count}}</span>
56a4b8 20
ad2b70 21                 </div>
L 22             </div>
23         </div>
24     </div>
25
26 </template>
27
28 <script>
63af45 29     import {
I 30         queryBlogArticleType
31     } from '../../api/blogArticleType.js'
ad2b70 32     export default {
63af45 33         beforeMount() {
I 34             queryBlogArticleType({}).then((res) => {
35                  this.list1=res.data.slice(0,3)
36                  this.list2=res.data.slice(4)
37             })
38         },
ad2b70 39         data() {
L 40             return {
63af45 41                 list1:[],
I 42                 list2:[],
43                 // list1: [{
44                 //     name: "日志",
45                 //     count: 10
46                 // }, {
47                 //     name: "分类",
48                 //     count: 12
49                 // }, {
50                 //     name: "标签",
51                 //     count: 14
52                 // }],
53                 // list2: [{
54                 //     name: "Tag",
55                 //     count: 133
56                 // }, {
57                 //     name: "专题",
58                 //     count: 10
59                 // }, {
60                 //     name: "偏好",
61                 //     count: 12
62                 // }, {
63                 //     name: "星标",
64                 //     count: 14
65                 // },{
66                 //     name: "Tag",
67                 //     count: 133
68                 // }, {
69                 //     name: "专题",
70                 //     count: 10
71                 // }, {
72                 //     name: "偏好",
73                 //     count: 12
74                 // }, {
75                 //     name: "星标",
76                 //     count: 14
77                 // },{
78                 //     name: "Tag",
79                 //     count: 133
80                 // }, {
81                 //     name: "专题",
82                 //     count: 10
83                 // }, {
84                 //     name: "偏好",
85                 //     count: 12
86                 // }, {
87                 //     name: "星标",
88                 //     count: 14
89                 // },{
90                 //     name: "Tag",
91                 //     count: 133
92                 // }, {
93                 //     name: "专题",
94                 //     count: 10
95                 // }, {
96                 //     name: "偏好",
97                 //     count: 12
98                 // }, {
99                 //     name: "星标",
100                 //     count: 14
101                 // }]
ad2b70 102             }
L 103         }
104     }
105 </script>
106
107 </script>
108
109 <style lang="less">
110     /*日志部分*/
111     .blog-log-list {
112         line-height: 1.6;
113         padding-left: 3%;
114         padding-right: 3%;
115
116         flex-wrap: wrap;
117         /*让弹性盒元素在必要的时候拆行:*/
118         display: -webkit-flex;
119         display: flex;
120         -webkit-justify-content: center;
121         justify-content: center;
122     }
123
124     .blog-log-item {
125         border-left: 2px solid rgba(222, 229, 231, .45);
126         width: 23%;
127         margin-bottom: 10px;
128
129         :first-child {
130             border-left: none;
131         }
132
d629d9 133         a {
L 134             color: black;
135         }
136
56a4b8 137         .link span:first-child {
ad2b70 138             color: #999;
L 139         }
140
56a4b8 141         .link span:last-child {
ad2b70 142             font-weight: 600;
L 143             font-size: 15px;
144         }
145
146         span {
147             display: block;
148         }
149     }
150 </style>