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;