From 74344a2ec388b78fe906a22c31f8fdb77fc60b12 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Fri, 04 Mar 2022 15:55:59 +0800
Subject: [PATCH] 404页面优化,页面响应式变化适配
---
src/components/swichLabel/main1-home.vue | 116 ++++++++++++---------------------------------------------
1 files changed, 25 insertions(+), 91 deletions(-)
diff --git a/src/components/swichLabel/main1-home.vue b/src/components/swichLabel/main1-home.vue
index d88d368..ae58261 100644
--- a/src/components/swichLabel/main1-home.vue
+++ b/src/components/swichLabel/main1-home.vue
@@ -4,11 +4,11 @@
<MyPreviewModal ref="MyPreviewModal"></MyPreviewModal>
<div class="blog-drawer">
- <a-drawer placement="left" :closable="false" :visible="visible1" :getContainer="'body'"
- :after-visible-change="afterVisibleChange" @close="onClose1" :zIndex="90" :width=300
+ <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></boxLeft>
+ <boxLeft @click="closeDrawer()"></boxLeft>
<boxRight></boxRight>
</a-drawer>
</div>
@@ -23,10 +23,10 @@
</a-col>
</keep-alive>
- <a-col v-bind="colApiMain ">
+ <a-col v-bind="colApiMain">
<a-col v-bind="colMini" :style="{'position':'absolute','right':'5px'}">
<a-affix :offset-top="600">
- <a-button @click="showDrawer1" style="padding:0px 10px">
+ <a-button @click="showDrawer" style="padding:0px 10px">
<a-icon type="left-circle" />
</a-button>
</a-affix>
@@ -36,10 +36,8 @@
</keep-alive>
</a-col>
- <a-col v-bind="colApiRight" ref="myDrawer">
- <!-- <boxRight></boxRight> -->
- <tool @showModal="showModal" @showPreview="showPreview" @showDrawer1="showDrawer1"
- @showScreen="showScreen"></tool>
+ <a-col v-bind="colApiRight">
+ <tool @showModal="showModal" @showPreview="showPreview" @showScreen="showScreen" />
</a-col>
</a-row>
</div>
@@ -50,40 +48,33 @@
<script>
import boxLeft from "../group/boxLeft.vue"
import boxRight from "../group/boxRight.vue"
- import articleListScorll from "../group/articleListScorll.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,
- articleListScorll,
tool,
MyModal,
MyPreviewModal,
},
methods: {
showScreen() {
- if (this.screen) {
+ if (this.scale) {
//缩小
- this.colApiLeft.xxl.span = 0;
- this.colApiLeft.xxl.offset = 0;
-
- this.colApiMain.xxl.span = 17;
- this.colApiMain.xxl.offset = 4;
+ this.colApiLeft = screenConfig.colApiLeftScale;
+ this.colApiMain = screenConfig.colApiMainScale;
} else {
//放大
- this.colApiLeft.xxl.span = 4;
- this.colApiLeft.xxl.offset = 3;
-
- this.colApiMain.xxl.span = 11;
- this.colApiMain.xxl.offset = 2;
+ this.colApiLeft = screenConfig.colApiLeft;
+ this.colApiMain = screenConfig.colApiMain;
}
- this.screen = !this.screen;
-
+ this.scale = !this.scale;
},
showModal() {
this.$refs.myModal.showModal();
@@ -92,77 +83,21 @@
this.$refs.MyPreviewModal.showModal();
},
afterVisibleChange(val) {},
- showDrawer1() {
- this.visible1 = true;
+ showDrawer() {
+ this.visibleDrawer = true;
},
- onClose1() {
- this.visible1 = false;
+ onCloseDrawer() {
+ this.visibleDrawer = false;
},
-
},
data() {
return {
- screen: true,
- visible1: false,
- visible2: false,
- colMini: {
- xs: 1,
- sm: 1,
- md: 0,
- lg: 0,
- xl: 0,
- xxl: 0
- },
- colApiLeft: {
- xs: 0,
- sm: 0,
- md: {
- span: 8,
- },
- lg: {
- span: 7,
- offset: 1,
- },
- xl: {
- span: 5,
- offset: 2,
- },
- xxl: {
- span: 4,
- offset: 3,
- },
- },
- colApiRight: {
- xs: 0,
- sm: 0,
- md: 0,
- lg: 1,
- xl: 1,
- xxl: 1,
- },
- colApiMain: {
- xs: 24,
- sm: {
- span: 20,
- offset: 2,
- },
- md: {
- span: 15,
- offset: 1,
- },
- lg: {
- span: 13,
- offset: 2,
- },
- xl: {
- span: 13,
- offset: 2,
- },
- xxl: {
- span: 11,
- offset: 2,
- },
- }
+ scale: true,
+ visibleDrawer: false,
+ colMini: screenConfig.colMini,
+ colApiLeft: screenConfig.colApiLeft,
+ colApiRight: screenConfig.colApiRight,
+ colApiMain: screenConfig.colApiMain
}
}
}
@@ -312,7 +247,6 @@
transition: height 1s;
}
-
.blog-scroll:hover::-webkit-scrollbar {
display: block;
--
Gitblit v1.9.1