| | |
| | | <template> |
| | | <div> |
| | | <MyModal ref="myModal"></MyModal> |
| | | <MyPreviewModal ref="MyPreviewModal"></MyPreviewModal> |
| | | |
| | | <div class="blog-drawer"> |
| | | <a-drawer placement="left" :closable="false" :visible="visible1" :getContainer="'body'" |
| | |
| | | <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" @showScreen="showScreen"></tool> |
| | | <tool @showModal="showModal" @showPreview="showPreview" @showDrawer1="showDrawer1" |
| | | @showScreen="showScreen"></tool> |
| | | </a-col> |
| | | </a-row> |
| | | </div> |
| | |
| | | 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 { |
| | | |
| | |
| | | articleListScorll, |
| | | tool, |
| | | MyModal, |
| | | MyPreviewModal, |
| | | }, |
| | | methods: { |
| | | showScreen() { |
| | |
| | | showModal() { |
| | | this.$refs.myModal.showModal(); |
| | | }, |
| | | showPreview() { |
| | | this.$refs.MyPreviewModal.showModal(); |
| | | }, |
| | | afterVisibleChange(val) {}, |
| | | showDrawer1() { |
| | | this.visible1 = true; |
| | |
| | | colMini: { |
| | | xs: 1, |
| | | sm: 1, |
| | | md: 1, |
| | | md: 0, |
| | | lg: 0, |
| | | xl: 0, |
| | | xxl: 0 |
| | |
| | | src: url("https://unpkg.zhimg.com/fontawepro@latest/fonts/hytmr55.woff") format("truetype"); |
| | | } |
| | | |
| | | span,p,a,body,h1,h2,h3,h4,h5,h6,code { |
| | | span, |
| | | p, |
| | | a, |
| | | body, |
| | | h1, |
| | | h2, |
| | | h3, |
| | | h4, |
| | | h5, |
| | | h6, |
| | | code { |
| | | font-family: HYTangMeiRen !important; |
| | | } |
| | | |
| | |
| | | |
| | | .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; |
| | | } |
| | | |
| | | /*左边部分*/ |