<template>
|
<div>
|
<MyModal ref="myModal"></MyModal>
|
<MyPreviewModal ref="MyPreviewModal"></MyPreviewModal>
|
|
<div class="blog-drawer">
|
<a-drawer placement="left" :closable="false" :visible="visibleDrawer" :getContainer="'body'"
|
:after-visible-change="afterVisibleChange" @close="onCloseDrawer" :zIndex="90" :width="300"
|
:bodyStyle="{padding:'0px'}"
|
:wrapStyle="{padding:'0px',top:'60px !important','height':'calc(100% - 60px) !important'}">
|
<boxLeft @click="closeDrawer()"></boxLeft>
|
<boxRight></boxRight>
|
</a-drawer>
|
</div>
|
|
<div class="blog-main">
|
|
<a-row>
|
<keep-alive>
|
<a-col v-bind="colApiLeft">
|
<boxLeft></boxLeft>
|
<boxRight></boxRight>
|
</a-col>
|
</keep-alive>
|
|
<a-col v-bind="colApiMain">
|
<a-col v-bind="colMini" :style="{'position':'absolute','right':'5px'}">
|
<a-affix :offset-top="550">
|
<a-button @click="showDrawer" style="padding:0px 10px">
|
<a-icon type="left-circle" />
|
</a-button>
|
</a-affix>
|
</a-col>
|
<keep-alive>
|
<transition name="fade">
|
<router-view></router-view>
|
</transition>
|
</keep-alive>
|
</a-col>
|
|
<a-col v-bind="colApiRight">
|
<tool @showModal="showModal" @showPreview="showPreview" @showScreen="showScreen" />
|
</a-col>
|
</a-row>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import boxLeft from "../group/boxLeft.vue"
|
import boxRight from "../group/boxRight.vue"
|
import tool from "../group/tool.vue"
|
import MyModal from "../group/MyModal.vue"
|
import MyPreviewModal from "../group/MyPreviewModal.vue"
|
|
import screenConfig from "../../config/screenConfig.js"
|
|
export default {
|
|
components: {
|
boxLeft,
|
boxRight,
|
tool,
|
MyModal,
|
MyPreviewModal,
|
},
|
methods: {
|
showScreen() {
|
if (this.scale) {
|
//缩小
|
this.colApiLeft = screenConfig.colApiLeftScale;
|
this.colApiMain = screenConfig.colApiMainScale;
|
} else {
|
//放大
|
this.colApiLeft = screenConfig.colApiLeft;
|
this.colApiMain = screenConfig.colApiMain;
|
}
|
this.scale = !this.scale;
|
},
|
showModal() {
|
this.$refs.myModal.showModal();
|
},
|
showPreview() {
|
this.$refs.MyPreviewModal.showModal();
|
},
|
afterVisibleChange(val) {},
|
showDrawer() {
|
this.visibleDrawer = true;
|
},
|
onCloseDrawer() {
|
this.visibleDrawer = false;
|
},
|
},
|
data() {
|
return {
|
scale: true,
|
visibleDrawer: false,
|
colMini: screenConfig.colMini,
|
colApiLeft: screenConfig.colApiLeft,
|
colApiRight: screenConfig.colApiRight,
|
colApiMain: screenConfig.colApiMain
|
}
|
}
|
}
|
</script>
|
|
<style lang="less">
|
@font-face {
|
font-family: 'HYTangMeiRen';
|
// font-display: swap;
|
src: url("https://unpkg.zhimg.com/fontawepro@latest/fonts/hytmr55.woff") format("truetype");
|
}
|
|
span,
|
p,
|
a,
|
body,
|
h1,
|
h2,
|
h3,
|
h4,
|
h5,
|
h6,
|
code {
|
font-family: HYTangMeiRen !important;
|
}
|
|
.swichTag {
|
min-height: 750px;
|
padding: 30px 30px 10px;
|
border-radius: 15px;
|
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
|
padding: 20px 30px 0px;
|
}
|
|
.holdHeight {
|
min-height: 780px;
|
}
|
|
|
.blog-main {
|
margin-top: 80px;
|
padding-left: 3%;
|
padding-right: 3%;
|
}
|
|
/*左右两边的盒子容器*/
|
.blog-cell {
|
opacity: 0.8;
|
padding: 0px 14px 10px;
|
-moz-user-select: none;
|
-webkit-user-select: none;
|
-ms-user-select: none;
|
-khtml-user-select: none;
|
user-select: none;
|
}
|
|
/*左边部分*/
|
.blog-left-side {
|
position: sticky;
|
// top: 80px;
|
// padding-left: 2%;
|
/*padding-right: 2%;*/
|
}
|
|
/*中间部分*/
|
.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%;*/
|
}
|
|
div .blog-right-side-meta div {
|
padding-left: 6%;
|
padding-right: 6%;
|
margin-bottom: 3%;
|
}
|
|
|
@card-box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px rgba(255, 255, 255, 1);
|
|
/*---------------------
|
| 核心盒子构成start |
|
------- ---------------*/
|
.blog-container {
|
border-radius: 15px;
|
// background-color: #f5f8fa;
|
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;
|
// box-shadow: 1px 1px 1px 2px #00000059;
|
|
// -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
|
// box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
|
|
box-shadow: @card-box-shadow;
|
-webkit-box-shadow: @card-box-shadow;
|
transition: all .4s;
|
-webkit-transition: all .6s;
|
-moz-transition: all .6s;
|
-o-transition: all .6s;
|
-ms-transition: all .6s;
|
transition: height 2s;
|
|
}
|
|
//div本体阴影
|
.blog-container:hover {
|
transition: all .25s;
|
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8), inset 9px 9px 15px rgba(0, 0, 0, 0.1), inset -9px -9px 15px rgba(255, 255, 255, 1);
|
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8), inset 9px 9px 15px rgba(0, 0, 0, 0.1), inset -9px -9px 15px rgba(255, 255, 255, 1);
|
}
|
|
.show-line {
|
border-top: 1px solid #999;
|
}
|
|
.blog-scroll {
|
padding-top: 10px;
|
overflow-x: hidden;
|
overflow-y: hidden;
|
|
transition: height 1s;
|
|
}
|
|
.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;
|
}
|
</style>
|
