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