<template>
|
<div id="components-layout-basic">
|
<a-layout>
|
<a-layout-header>Header</a-layout-header>
|
<a-layout>
|
<div class="blog-main">
|
<a-row>
|
<a-col v-bind="colApiLeft">
|
<boxLeft></boxLeft>
|
</a-col>
|
<a-col v-bind="colApiMain ">
|
<box5></box5>
|
<box5></box5>
|
<a-pagination v-model="current" :total="50" show-less-items />
|
</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 box5 from "./box5.vue"
|
export default {
|
components: {
|
boxLeft,
|
boxRight,
|
box5
|
},
|
|
data() {
|
return {
|
current: 2,
|
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">
|
#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 {
|
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-main {
|
padding-left: 5%;
|
padding-right: 5%;
|
}
|
|
|
|
/*左右两边的盒子容器*/
|
.blog-cell {
|
opacity: 0.8;
|
padding: 0px 25px 10px;
|
}
|
|
/*左边部分*/
|
.blog-left-side {
|
position: sticky;
|
// top: 80px;
|
padding-left: 2%;
|
/*padding-right: 2%;*/
|
z-index: 100;
|
}
|
|
/*中间部分*/
|
.blog-body {
|
padding-top: 10px;
|
/*padding-left: 3%;*/
|
/*padding-right: 3%;*/
|
}
|
|
/*右边部分*/
|
.blog-right-side {
|
position: sticky;
|
top: -19%;
|
padding-top: 10px;
|
/*padding-left: 2%;*/
|
/*padding-right: 2%;*/
|
z-index: 100;
|
}
|
|
div .blog-right-side-meta div {
|
padding-left: 6%;
|
padding-right: 6%;
|
margin-bottom: 3%;
|
}
|
|
|
/*---------------------
|
| 核心盒子构成start |
|
------- ---------------*/
|
.blog-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: 300px;
|
/*margin-top: 10px;*/
|
/*min-height: 200px;*/
|
|
// overflow-x: hidden;
|
// overflow-y: overlay;
|
// display: block;
|
|
padding-top: 10px;
|
padding-bottom: 20px;
|
overflow: hidden;
|
|
|
}
|
|
.show-line {
|
border-top: 1px solid #999;
|
}
|
|
.blog-scroll {
|
padding-top: 10px;
|
max-height: 200px;
|
|
overflow-x: hidden;
|
overflow-y: overlay;
|
}
|
|
|
.blog-scroll:hover::-webkit-scrollbar {
|
display: block;
|
}
|
|
.blog-scroll:hover::-webkit-scrollbar {
|
display: block;
|
}
|
|
.blog-scroll::-webkit-scrollbar {
|
width: 5px;
|
display: none;
|
}
|
|
.blog-scroll::-webkit-scrollbar-thumb {
|
background-color: rgba(153, 154, 170, 0.3);
|
border-radius: 2px;
|
}
|
|
/*margin滚动条上偏移*/
|
.blog-scroll::-webkit-scrollbar-track {
|
margin-top: 5px;
|
margin-bottom: 5px;
|
}
|
|
|
// 动画
|
@-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>
|
