blog的前端代码
view | history | commit | commitdiff
lijh
2022-01-13 ad2b70777b866a9f4848a89fd0e343f991f8a604
commit | author | age
d3f921 1 <template>
I 2     <div id="components-layout-basic">
3         <a-layout>
ad2b70 4             <a-layout-header>
L 5                 <tag-Header></tag-Header>
6             </a-layout-header>
d3f921 7             <a-layout>
ad2b70 8                 <router-view class="fade"></router-view>
d3f921 9             </a-layout>
ad2b70 10             <a-layout-footer>
L 11                 <div>
12                     <p>备案号:
13                         <a href="http://www.miitbeian.gov.cn/" target="_blank">粤ICP备19000592号-1</a>
14                     </p>
15                 </div>
16             </a-layout-footer>
d3f921 17         </a-layout>
I 18     </div>
19 </template>
20
21 <script>
ad2b70 22     import tagHeader from "./tag-header.vue"
d3f921 23     export default {
I 24         components: {
ad2b70 25             tagHeader
d3f921 26         },
I 27         data() {
28             return {
29
30             }
31         }
ad2b70 32
d3f921 33     }
I 34 </script>
35
36 <style lang="less">
37     #components-layout-basic {
38         width: 100%;
39         margin: 0;
40         padding: 0;
41
ad2b70 42         .ant-layout {}
L 43
44         .ant-layout-header {
45             background-color: #001529;
d3f921 46         }
I 47
48         .ant-layout-footer {
ad2b70 49             background-color: #edf1f299;
L 50             padding: 0px;
51
52             p {
53                 margin: auto;
54                 color: #757575;
55             }
56
57             a {
58                 opacity: 0.8;
59                 color: #757575;
60             }
d3f921 61         }
I 62
63         .ant-layout-sider {
64             background: #3ba0e9;
65             color: #fff;
66             line-height: 120px;
67         }
68
69         .ant-col,
70         .ant-layout-content {
71             height: 100%;
72         }
73
74
75     }
76
77
78     .h1,
79     .h2,
80     .h3,
81     .h4,
82     .h5,
83     .h6,
84     h1,
85     h2,
86     h3,
87     h4,
88     h5,
89     h6 {
90         font-weight: 400;
91     }
92
93     span,
94     p {
95         font-size: 17px;
96         letter-spacing: 0.8px;
ad2b70 97         line-height: 22px;
L 98     }
99
100     .fade {
101         -webkit-animation-name: "fade";
102         -webkit-animation-duration: 2s;
103         -webkit-animation-iteration-count: 1;
d3f921 104     }
I 105
106     .fadeInLeft {
107         -webkit-animation-name: "fadeInLeft";
108         -webkit-animation-duration: 1s;
109         -webkit-animation-iteration-count: 1;
110     }
111
112     .fadeInRight {
113         -webkit-animation-name: "fadeInRight";
114         -webkit-animation-duration: 1s;
115         -webkit-animation-iteration-count: 1;
116     }
117
118
119     // 动画
120     @-webkit-keyframes fadeInLeft {
121         0% {
122             opacity: 0;
123             -webkit-transform: translateX(-120px);
124         }
125
126         100% {
127             opacity: 1;
128             -webkit-transform: translateX(0);
129         }
130     }
131
132     @keyframes fadeInLeft {
133         0% {
134             opacity: 0;
135             transform: translateX(-120px);
136         }
137
138         100% {
139             opacity: 1;
140             transform: translateX(0);
141         }
142     }
143
144     @-webkit-keyframes fadeInRight {
145         0% {
146             opacity: 0;
147             -webkit-transform: translateX(120px);
148         }
149
150         100% {
151             opacity: 1;
152             -webkit-transform: translateX(0);
153         }
154     }
155
156     @keyframes fadeInRight {
157         0% {
158             opacity: 0;
159             transform: translateX(120px);
160         }
161
162         100% {
163             opacity: 1;
164             transform: translateX(0);
165         }
166     }
167
168     @-webkit-keyframes fade {
169         0% {
170             opacity: 0;
171         }
172
173         100% {
174             opacity: 1;
175         }
176     }
177
178     @keyframes fade {
179         0% {
180             opacity: 0;
181         }
182
183         100% {
184             opacity: 1;
185         }
186     }
187 </style>