src/components/swichLabel/main1-show.vue

@@ -1,10 +1,11 @@
<template>
   <div>
      <MyModal ref="myModal"></MyModal>
      <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=270
            :after-visible-change="afterVisibleChange" @close="onClose1" :zIndex="90" :width=300
            :bodyStyle="{padding:'0px'}"
            :wrapStyle="{padding:'0px',top:'60px !important','height':'calc(100% - 60px) !important'}">
            <boxLeft></boxLeft>
@@ -15,26 +16,30 @@
      <div class="blog-main">

         <a-row>
            <a-col v-bind="colApiLeft">
               <boxLeft></boxLeft>
               <boxRight></boxRight>
            </a-col>
            <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':'30px'}">
                  <a-affix :offset-top="550">
                     <a-button @click="showDrawer1">
                        抽屉1
               <a-col v-bind="colMini" :style="{'position':'absolute','right':'5px'}">
                  <a-affix :offset-top="600">
                     <a-button @click="showDrawer1" style="padding:0px 10px">
                        <a-icon type="left-circle" />
                     </a-button>
                  </a-affix>
               </a-col>

               <router-view class="fade"></router-view>
               <keep-alive>
                  <router-view class="fade"></router-view>
               </keep-alive>
            </a-col>

            <a-col v-bind="colApiRight" ref="myDrawer">
               <!-- <boxRight></boxRight> -->
               <tool @showModal="showModal" @showDrawer1="showDrawer1"></tool>
               <tool @showModal="showModal" @showPreview="showPreview" @showDrawer1="showDrawer1"
                  @showScreen="showScreen"></tool>
            </a-col>
         </a-row>
      </div>
@@ -43,26 +48,48 @@
</template>

<script>
   import tempFriendBox from "../group/tempFriendBox.vue"
   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"

   export default {

      components: {
         tempFriendBox,
         boxLeft,
         boxRight,
         articleListScorll,
         tool,
         MyModal,
         MyPreviewModal,
      },
      methods: {
         showScreen() {
            if (this.screen) {
               //缩小
               this.colApiLeft.xxl.span = 0;
               this.colApiLeft.xxl.offset = 0;

               this.colApiMain.xxl.span = 17;
               this.colApiMain.xxl.offset = 4;
            } else {
               //放大
               this.colApiLeft.xxl.span = 4;
               this.colApiLeft.xxl.offset = 3;

               this.colApiMain.xxl.span = 11;
               this.colApiMain.xxl.offset = 2;
            }
            this.screen = !this.screen;

         },
         showModal() {
            this.$refs.myModal.showModal();
         },
         showPreview() {
            this.$refs.MyPreviewModal.showModal();
         },
         afterVisibleChange(val) {},
         showDrawer1() {
@@ -75,12 +102,13 @@
      },
      data() {
         return {
            screen: true,
            visible1: false,
            visible2: false,
            colMini: {
               xs: 1,
               sm: 1,
               md: 1,
               md: 0,
               lg: 0,
               xl: 0,
               xxl: 0
@@ -135,18 +163,38 @@
                  offset: 2,
               },
            }

         }
      }
   }
</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;
      background-color: white;
      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 {
@@ -156,14 +204,19 @@

   .blog-main {
      margin-top: 80px;
      padding-left: 5%;
      padding-right: 5%;
      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;
   }

   /*左边部分*/
@@ -213,7 +266,7 @@
      text-align: center;
      padding-top: 20px;
      padding-bottom: 20px;
      max-height: 300px;
      // max-height: 300px;
      /*margin-top: 10px;*/
      /*min-height: 200px;*/

@@ -223,7 +276,7 @@

      padding-top: 10px;
      padding-bottom: 20px;
      overflow: hidden;
      // 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);
@@ -236,6 +289,8 @@
      -moz-transition: all .6s;
      -o-transition: all .6s;
      -ms-transition: all .6s;
      transition: height 2s;

   }

   //div本体阴影
@@ -251,10 +306,11 @@

   .blog-scroll {
      padding-top: 10px;
      max-height: 200px;

      overflow-x: hidden;
      overflow-y: overlay;
      overflow-y: hidden;

      transition: height 1s;

   }