| | |
| | | <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="visibleDrawer" :getContainer="'body'" |
| | |
| | | |
| | | <a-col v-bind="colApiMain"> |
| | | <a-col v-bind="colMini" :style="{'position':'absolute','right':'5px'}"> |
| | | <a-affix :offset-top="550"> |
| | | <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> |
| | | <transition name="fade"> |
| | | <router-view></router-view> |
| | | </transition> |
| | | <router-view></router-view> |
| | | </keep-alive> |
| | | </a-col> |
| | | |
| | | <a-col v-bind="colApiRight"> |
| | | <tool @showModal="showModal" @showPreview="showPreview" @showScreen="showScreen" /> |
| | | <tool @showModal="showModal" @showPreview="showPreview" @showScreen="showScreen" |
| | | @showMessage="showMessage" @addLink="addLink" /> |
| | | </a-col> |
| | | </a-row> |
| | | </div> |
| | |
| | | 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" |
| | | |
| | |
| | | tool, |
| | | MyModal, |
| | | MyPreviewModal, |
| | | MyMessage, |
| | | MyLink, |
| | | }, |
| | | methods: { |
| | | showScreen() { |
| | |
| | | } |
| | | this.scale = !this.scale; |
| | | }, |
| | | addLink() { |
| | | this.openLinkAdd = true |
| | | this.$nextTick(function() { |
| | | this.$refs.MyLink.showModal(); |
| | | }) |
| | | }, |
| | | showModal() { |
| | | this.$refs.myModal.showModal(); |
| | | }, |
| | | showPreview() { |
| | | this.$refs.MyPreviewModal.showModal(); |
| | | }, |
| | | showMessage() { |
| | | this.openMessage = true |
| | | this.$nextTick(function() { |
| | | this.$refs.MyMessage.showModal(); |
| | | }) |
| | | }, |
| | | afterVisibleChange(val) {}, |
| | | showDrawer() { |
| | |
| | | colMini: screenConfig.colMini, |
| | | colApiLeft: screenConfig.colApiLeft, |
| | | colApiRight: screenConfig.colApiRight, |
| | | colApiMain: screenConfig.colApiMain |
| | | colApiMain: screenConfig.colApiMain, |
| | | openLinkAdd: false, |
| | | openMessage: false, |
| | | } |
| | | } |
| | | }, |
| | | |
| | | } |
| | | </script> |
| | | |
| | |
| | | |
| | | |
| | | .blog-main { |
| | | min-height: 860px; |
| | | margin-top: 80px; |
| | | padding-left: 3%; |
| | | padding-right: 3%; |