<template>
|
<div id="components-layout-basic">
|
<a-layout>
|
<a-layout-header>
|
<tag-Header></tag-Header>
|
</a-layout-header>
|
<a-layout>
|
<router-view class="fade"></router-view>
|
</a-layout>
|
<a-layout-footer>
|
<div>
|
<p>备案号:
|
<a href="http://www.miitbeian.gov.cn/" target="_blank">粤ICP备19000592号-1</a>
|
</p>
|
</div>
|
</a-layout-footer>
|
</a-layout>
|
</div>
|
</template>
|
|
<script>
|
import tagHeader from "./tag-header.vue"
|
export default {
|
components: {
|
tagHeader
|
},
|
data() {
|
return {
|
|
}
|
}
|
|
}
|
</script>
|
|
<style lang="less">
|
#components-layout-basic {
|
width: 100%;
|
margin: 0;
|
padding: 0;
|
|
.ant-layout {}
|
|
.ant-layout-header {
|
background-color: #001529;
|
}
|
|
.ant-layout-footer {
|
background-color: #edf1f299;
|
padding: 0px;
|
|
p {
|
margin: auto;
|
color: #757575;
|
}
|
|
a {
|
opacity: 0.8;
|
color: #757575;
|
}
|
}
|
|
.ant-layout-sider {
|
background: #3ba0e9;
|
color: #fff;
|
line-height: 120px;
|
}
|
|
.ant-col,
|
.ant-layout-content {
|
height: 100%;
|
}
|
|
|
}
|
|
|
.h1,
|
.h2,
|
.h3,
|
.h4,
|
.h5,
|
.h6,
|
h1,
|
h2,
|
h3,
|
h4,
|
h5,
|
h6 {
|
font-weight: 400;
|
}
|
|
span,
|
p {
|
font-size: 17px;
|
letter-spacing: 0.8px;
|
line-height: 22px;
|
}
|
|
.fade {
|
-webkit-animation-name: "fade";
|
-webkit-animation-duration: 2s;
|
-webkit-animation-iteration-count: 1;
|
}
|
|
.fadeInLeft {
|
-webkit-animation-name: "fadeInLeft";
|
-webkit-animation-duration: 1s;
|
-webkit-animation-iteration-count: 1;
|
}
|
|
.fadeInRight {
|
-webkit-animation-name: "fadeInRight";
|
-webkit-animation-duration: 1s;
|
-webkit-animation-iteration-count: 1;
|
}
|
|
|
// 动画
|
@-webkit-keyframes fadeInLeft {
|
0% {
|
opacity: 0;
|
-webkit-transform: translateX(-120px);
|
}
|
|
100% {
|
opacity: 1;
|
-webkit-transform: translateX(0);
|
}
|
}
|
|
@keyframes fadeInLeft {
|
0% {
|
opacity: 0;
|
transform: translateX(-120px);
|
}
|
|
100% {
|
opacity: 1;
|
transform: translateX(0);
|
}
|
}
|
|
@-webkit-keyframes fadeInRight {
|
0% {
|
opacity: 0;
|
-webkit-transform: translateX(120px);
|
}
|
|
100% {
|
opacity: 1;
|
-webkit-transform: translateX(0);
|
}
|
}
|
|
@keyframes fadeInRight {
|
0% {
|
opacity: 0;
|
transform: translateX(120px);
|
}
|
|
100% {
|
opacity: 1;
|
transform: translateX(0);
|
}
|
}
|
|
@-webkit-keyframes fade {
|
0% {
|
opacity: 0;
|
}
|
|
100% {
|
opacity: 1;
|
}
|
}
|
|
@keyframes fade {
|
0% {
|
opacity: 0;
|
}
|
|
100% {
|
opacity: 1;
|
}
|
}
|
</style>
|
