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