inleft
2022-01-14 56a4b88b16b5f86a2a697018a3e2546d3abf73e3
commit | author | age
ad2b70 1 <template>
L 2     <div class="blog-container ">
3         <span class="blog-pigeonhole">分类</span>
4         <div class="blog-scroll ">
5             <div class="blog-log-list">
6                 <div class="blog-log-item" v-for="item in list1">
56a4b8 7                     <router-link to="/main1">
ad2b70 8                         <span>{{item.name}}</span>
56a4b8 9                     </router-link>
I 10
11                     <span>{{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">
ad2b70 17                         <span>{{item.name}}</span>
56a4b8 18                     </router-link>
I 19                     <span>{{item.count}}</span>
20
ad2b70 21                 </div>
L 22             </div>
23             <div class="blog-log-list">
24                 <div class="blog-log-item" v-for="item in list2">
56a4b8 25                     <router-link to="/box1">
ad2b70 26                         <span>{{item.name}}</span>
56a4b8 27                     </router-link>
I 28                     <span>{{item.count}}</span>
ad2b70 29                 </div>
L 30             </div>
31         </div>
32     </div>
33
34 </template>
35
36 <script>
37     export default {
38         data() {
39             return {
40                 list1: [{
41                     name: "日志",
42                     count: 10
43                 }, {
44                     name: "分类",
45                     count: 12
46                 }, {
47                     name: "标签",
48                     count: 14
49                 }],
50                 list2: [{
51                     name: "Tag",
52                     count: 133
53                 }, {
54                     name: "专题",
55                     count: 10
56                 }, {
57                     name: "偏好",
58                     count: 12
59                 }, {
60                     name: "星标",
61                     count: 14
62                 }]
63             }
64         }
65     }
66 </script>
67
68 </script>
69
70 <style lang="less">
71     /*日志部分*/
72     .blog-log-list {
73         line-height: 1.6;
74         padding-left: 3%;
75         padding-right: 3%;
76
77         flex-wrap: wrap;
78         /*让弹性盒元素在必要的时候拆行:*/
79         display: -webkit-flex;
80         display: flex;
81         -webkit-justify-content: center;
82         justify-content: center;
83     }
84
85     .blog-log-item {
86         border-left: 2px solid rgba(222, 229, 231, .45);
87         width: 23%;
88         margin-bottom: 10px;
89
90         :first-child {
91             border-left: none;
92         }
93
56a4b8 94         .link span:first-child {
ad2b70 95             color: #999;
L 96         }
97
56a4b8 98         .link span:last-child {
ad2b70 99             font-weight: 600;
L 100             font-size: 15px;
101         }
102
103         span {
104             display: block;
105         }
106     }
107 </style>