src/components/swichLabel/main1-show.vue

@@ -1,61 +1,40 @@
<template>
   <div>
      <MyModal ref="myModal"></MyModal>

      <div class="blog-drawer">
         <a-drawer placement="left" :closable="false" :visible="visible1" :getContainer="'body'"
            :after-visible-change="afterVisibleChange" @close="onClose1" :zIndex="90" :width=270
            :bodyStyle="{padding:'0px'}" :wrapStyle="{padding:'0px',top:'60px'}">
            :bodyStyle="{padding:'0px'}"
            :wrapStyle="{padding:'0px',top:'60px !important','height':'calc(100% - 60px) !important'}">
            <boxLeft></boxLeft>
         </a-drawer>

         <a-drawer placement="right" :closable="false" :visible="visible2" :getContainer="'body'"
            :after-visible-change="afterVisibleChange" @close="onClose2" :zIndex="90" :width=270
            :bodyStyle="{padding:'0px'}" :wrapStyle="{padding:'0px',top:'60px'}">
            <boxRight></boxRight>
         </a-drawer>
         <a-row>
            <a-col v-bind="colApiLeft">
               <div class="myModal">
                  <a-modal v-model="visible" title="日志添加" on-ok="handleOk">
                     <template slot="footer">
                        <a-button key="reset" @click="reset" type="danger">
                           擦掉重来
                        </a-button>
                        <a-button key="back" @click="handleCancel">
                           歇会
                        </a-button>
                        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
                           完事<span style="font-size: 10px;">儿</span>..
                        </a-button>
                     </template>
                     <box10 ref="modalBox"></box10>
                  </a-modal>
               </div>
            </a-col>
         </a-row>
      </div>

      <div class="blog-main">

         <a-row>
            <a-col v-bind="colApiLeft">
               <boxLeft></boxLeft>
               <boxRight></boxRight>
            </a-col>
            <a-col v-bind="colApiMain ">

               <a-button @click="showDrawer1">
                  小抽屉1
               </a-button>
               <a-button @click="showDrawer2">
                  小抽屉2
               </a-button>
               <a-button @click="showModal">
                  日志
                  <a-icon type="plus-circle" style="margin-left: 0px;" />
               </a-button>
               <tempFriendBox></tempFriendBox>
            <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-button>
                  </a-affix>
               </a-col>

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

            <a-col v-bind="colApiRight" ref="myDrawer">
               <boxRight></boxRight>
               <!-- <boxRight></boxRight> -->
               <tool @showModal="showModal" @showDrawer1="showDrawer1"></tool>
            </a-col>
         </a-row>
      </div>
@@ -65,75 +44,47 @@

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

   export default {

      components: {
         tempFriendBox,
         box10,
         boxLeft,
         boxRight,
         articleListScorll,
         tool,
         MyModal,
      },
      methods: {
         getCalendarContainer(trigger) {
            return this.$refs.myModal;
         },
         showModal() {
            this.visible = true;
         },
         handleOk(e) {
            console.log(this.$refs.modalBox.form);
            var res = this.$refs.modalBox.$refs.myForm.validate(valid => {
               if (valid) {
                  this.$message.info("校验通过")
               } else {
                  this.$message.info("校验失败")
                  return false;
               }
            });


            if (!res) return;

            this.$message.info("提交表单")

            this.loading = true;
            setTimeout(() => {
               this.visible = false;
               this.loading = false;
            }, 3000);
         },
         reset(e) {
            var res = this.$refs.modalBox.$refs.myForm.resetFields()
         },
         handleCancel(e) {
            this.visible = false;
            this.$refs.myModal.showModal();
         },
         afterVisibleChange(val) {},
         showDrawer1() {
            this.visible1 = true;
         },
         showDrawer2() {
            this.visible2 = true;
         },
         onClose1() {
            this.visible1 = false;
         },
         onClose2() {
            this.visible2 = false;
         },

      },
      data() {
         return {
            loading: false,
            visible: false,
            visible1: false,
            visible2: false,
            colMini: {
               xs: 1,
               sm: 1,
               md: 1,
               lg: 0,
               xl: 0,
               xxl: 0
            },
            colApiLeft: {
               xs: 0,
               sm: 0,
@@ -157,15 +108,9 @@
               xs: 0,
               sm: 0,
               md: 0,
               lg: 0,
               xl: {
                  span: 5,
                  offset: 1,
               },
               xxl: {
                  span: 4,
                  offset: 1,
               },
               lg: 1,
               xl: 1,
               xxl: 1,
            },
            colApiMain: {
               xs: 24,
@@ -174,7 +119,7 @@
                  offset: 2,
               },
               md: {
                  span: 14,
                  span: 15,
                  offset: 1,
               },
               lg: {
@@ -182,12 +127,12 @@
                  offset: 2,
               },
               xl: {
                  span: 9,
                  offset: 1,
                  span: 13,
                  offset: 2,
               },
               xxl: {
                  span: 8,
                  offset: 1,
                  span: 11,
                  offset: 2,
               },
            }

@@ -208,10 +153,6 @@
      min-height: 780px;
   }

   .article-detail {
      max-height: 750px;
      overflow: overlay;
   }

   .blog-main {
      margin-top: 80px;
@@ -284,7 +225,7 @@
      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);