From 80476fae71f08bf4408c7509eff254031a4eeac6 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Wed, 24 Aug 2022 18:47:09 +0800
Subject: [PATCH] 路由修正,常量提取
---
src/components/swichLabel/main1-home.vue | 172 +++++++++++++++++++--------------------------------------
1 files changed, 57 insertions(+), 115 deletions(-)
diff --git a/src/components/swichLabel/main1-home.vue b/src/components/swichLabel/main1-home.vue
index d88d368..cd9c380 100644
--- a/src/components/swichLabel/main1-home.vue
+++ b/src/components/swichLabel/main1-home.vue
@@ -1,14 +1,16 @@
<template>
<div>
- <MyModal ref="myModal"></MyModal>
- <MyPreviewModal ref="MyPreviewModal"></MyPreviewModal>
+ <MyModal ref="myModal" />
+ <MyPreviewModal ref="MyPreviewModal" />
+ <MyMessage ref="MyMessage" v-if="openMessage" />
+ <MyLink ref="MyLink" v-if="openLinkAdd" />
<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,23 +25,25 @@
</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-affix :offset-top="500">
+ <a-button @click="showDrawer" style="padding:0px 10px">
<a-icon type="left-circle" />
+ </a-button>
+ <a-button @click="showMessage" style="margin-top:10px;padding:0px 10px">
+ <a-icon type="message" />
</a-button>
</a-affix>
</a-col>
<keep-alive>
- <router-view class="fade"></router-view>
+ <router-view></router-view>
</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"
+ @showMessage="showMessage" @addLink="addLink" />
</a-col>
</a-row>
</div>
@@ -50,40 +54,43 @@
<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 MyMessage from "../group/MyMessage.vue"
+ import MyLink from "../group/MyLink.vue"
+
+ import screenConfig from "../../config/screenConfig.js"
export default {
components: {
boxLeft,
boxRight,
- articleListScorll,
tool,
MyModal,
MyPreviewModal,
+ MyMessage,
+ MyLink,
},
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;
+ },
+ addLink() {
+ this.openLinkAdd = true
+ this.$nextTick(function() {
+ this.$refs.MyLink.showModal();
+ })
},
showModal() {
this.$refs.myModal.showModal();
@@ -91,103 +98,38 @@
showPreview() {
this.$refs.MyPreviewModal.showModal();
},
+ showMessage() {
+ this.openMessage = true
+ this.$nextTick(function() {
+ this.$refs.MyMessage.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,
+ openLinkAdd: false,
+ openMessage: false,
}
- }
+ },
+
}
</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;
@@ -203,6 +145,7 @@
.blog-main {
+ min-height: 860px;
margin-top: 80px;
padding-left: 3%;
padding-right: 3%;
@@ -312,7 +255,6 @@
transition: height 1s;
}
-
.blog-scroll:hover::-webkit-scrollbar {
display: block;
--
Gitblit v1.9.1