<template>
|
<div id="components-layout-basic">
|
<a-layout>
|
<a-layout-header>Header</a-layout-header>
|
<a-layout>
|
<div class="blog-main">
|
<a-row type="flex" justify="space-around" align="middle">
|
<a-col v-bind="colApiLeft">
|
<boxLeft></boxLeft>
|
</a-col>
|
<a-col v-bind="colApiMain">
|
<box1></box1>
|
</a-col>
|
<a-col v-bind="colApiRight">
|
<boxRight></boxRight>
|
</a-col>
|
</a-row>
|
</div>
|
<!-- <a-layout-sider v-bind="sliderApi">Sider</a-layout-sider>
|
<a-layout-content>Content</a-layout-content>
|
<a-layout-sider v-bind="sliderApi">Sider</a-layout-sider> -->
|
</a-layout>
|
<a-layout-footer>Footer</a-layout-footer>
|
</a-layout>
|
</div>
|
</template>
|
|
<script>
|
import boxLeft from "./boxLeft.vue"
|
import boxRight from "./boxRight.vue"
|
import box1 from "./box1.vue"
|
export default {
|
components: {
|
boxLeft,
|
boxRight,
|
box1
|
},
|
data() {
|
return {
|
sliderApi: {
|
collapsible: true, //是否可收起
|
|
collapsedWidth: 0 //收缩宽度，设置为 0 会出现特殊 trigger
|
},
|
colApiLeft: {
|
xs: 0,
|
sm: 0,
|
md: 0,
|
lg: 8,
|
xl: 8,
|
xxl: 6,
|
},
|
colApiRight: {
|
xs: 0,
|
sm: 0,
|
md: 0,
|
lg: 0,
|
xl: 0,
|
xxl: 4,
|
},
|
colApiMain: {
|
xs: 24,
|
sm: 24,
|
md: 24,
|
lg: 14,
|
xl: 14,
|
xxl: 14,
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.blog-main {
|
padding-left: 5%;
|
padding-right: 5%;
|
}
|
|
#components-layout-basic {
|
text-align: center;
|
height: 100%;
|
width: 100%;
|
margin: 0;
|
padding: 0;
|
|
.ant-layout-header,
|
.ant-layout-footer {
|
background: #7dbcea;
|
color: #fff;
|
}
|
|
.ant-layout-footer {
|
line-height: 1.5;
|
}
|
|
.ant-layout-sider {
|
background: #3ba0e9;
|
color: #fff;
|
line-height: 120px;
|
}
|
|
.ant-col,
|
.ant-layout-content {
|
// background: rgba(16, 142, 233, 1);
|
// color: #fff;
|
line-height: 120px;
|
height: 100%;
|
}
|
|
>.ant-layout {
|
width: 100%;
|
min-height: 100%;
|
}
|
|
>.ant-layout:last-child {
|
margin: 0;
|
}
|
}
|
|
|
.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: 30px;
|
}
|
|
.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;
|
}
|
|
/*左右两边的盒子容器*/
|
.blog-cell-main-container {
|
opacity: 0.8;
|
padding: 0px 25px 10px;
|
}
|
|
/*左边部分*/
|
.blog-left-side-portion {
|
position: sticky;
|
top: 80px;
|
padding-left: 2%;
|
/*padding-right: 2%;*/
|
z-index: 100;
|
}
|
|
|
/*---------------------
|
| 核心盒子构成start |
|
------- ---------------*/
|
.blog-left-side-scroll-portion,
|
.blog-right-side-container {
|
border-radius: 15px;
|
background-color: white;
|
|
line-height: 1.4;
|
white-space: nowrap;
|
/*规定段落中的文本不进行换行：*/
|
text-align: center;
|
padding-top: 20px;
|
padding-bottom: 20px;
|
max-height: 200px;
|
/*margin-top: 10px;*/
|
/*min-height: 200px;*/
|
|
overflow-x: hidden;
|
overflow-y: auto;
|
display: block;
|
}
|
|
|
/*预留滚动条的宽度*/
|
.blog-left-side-scroll-portion,
|
.blog-right-side-scroll-portion {
|
padding-right: 5px;
|
}
|
|
/*预留滚动条的宽度 缩减*/
|
.blog-left-side-scroll-portion:hover,
|
.blog-right-side-scroll-portion:hover {
|
padding-right: 0px;
|
}
|
|
.blog-left-side-scroll-portion:hover::-webkit-scrollbar {
|
display: block;
|
}
|
|
.blog-right-side-scroll-portion:hover::-webkit-scrollbar {
|
display: block;
|
}
|
|
.blog-left-side-scroll-portion::-webkit-scrollbar,
|
.blog-right-side-scroll-portion::-webkit-scrollbar {
|
width: 5px;
|
display: none;
|
}
|
|
.blog-left-side-scroll-portion::-webkit-scrollbar-thumb,
|
.blog-right-side-scroll-portion::-webkit-scrollbar-thumb {
|
background-color: rgba(153, 154, 170, 0.3);
|
border-radius: 2px;
|
}
|
|
/*margin滚动条上偏移*/
|
.blog-left-side-scroll-portion::-webkit-scrollbar-track,
|
.layui-layer-content::-webkit-scrollbar-track {
|
margin-top: 20px;
|
margin-bottom: 20px;
|
}
|
|
|
// 动画
|
@-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>
|
