| | |
| | | <div> |
| | | <div class="blog-drawer"> |
| | | <a-drawer placement="left" :closable="false" :visible="visible1" :getContainer="'body'" |
| | | :after-visible-change="afterVisibleChange" @close="onClose1" :zIndex="10" :width=270 |
| | | :after-visible-change="afterVisibleChange" @close="onClose1" :zIndex="90" :width=270 |
| | | :bodyStyle="{padding:'0px'}" :wrapStyle="{padding:'0px',top:'60px'}"> |
| | | <boxLeft></boxLeft> |
| | | </a-drawer> |
| | | |
| | | <a-drawer placement="right" :closable="false" :visible="visible2" :getContainer="'body'" |
| | | :after-visible-change="afterVisibleChange" @close="onClose2" :zIndex="10" :width=270 |
| | | :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> |
| | | </a-col> |
| | | <a-col v-bind="colApiMain "> |
| | | |
| | | |
| | | <a-button @click="showDrawer1"> |
| | | 小抽屉1 |
| | | </a-button> |
| | | <a-button @click="showDrawer2"> |
| | | 小抽屉2 |
| | | </a-button> |
| | | <router-view></router-view> |
| | | <a-button @click="showModal"> |
| | | 日志 |
| | | <a-icon type="plus-circle" style="margin-left: 0px;" /> |
| | | </a-button> |
| | | <tempFriendBox></tempFriendBox> |
| | | <tempBoxActicle></tempBoxActicle> |
| | | <router-view class="fade"></router-view> |
| | | </a-col> |
| | | |
| | | |
| | | <a-col v-bind="colApiRight" ref="myDrawer"> |
| | | <boxRight></boxRight> |
| | | </a-col> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import tempFriendBox from "../group/tempFriendBox.vue" |
| | | import tempBoxActicle from "../group/tempBoxActicle.vue" |
| | | import tempFormCheck from "../group/tempFormCheck.vue" |
| | | import box10 from "../mini/box10-add.vue" |
| | | import boxLeft from "../group/boxLeft.vue" |
| | | import boxRight from "../group/boxRight.vue" |
| | | import articleList from "../group/articleList.vue" |
| | | import articleListScorll from "../group/articleListScorll.vue" |
| | | |
| | | export default { |
| | | |
| | | components: { |
| | | tempFriendBox, |
| | | tempBoxActicle, |
| | | tempFormCheck, |
| | | box10, |
| | | boxLeft, |
| | | boxRight, |
| | | articleList |
| | | articleList, |
| | | articleListScorll, |
| | | |
| | | |
| | | }, |
| | | 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; |
| | | }, |
| | | afterVisibleChange(val) {}, |
| | | showDrawer1() { |
| | | this.visible1 = true; |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | loading: false, |
| | | visible: false, |
| | | visible1: false, |
| | | visible2: false, |
| | | colApiLeft: { |
| | |
| | | border-radius: 15px; |
| | | } |
| | | |
| | | .holdHeight { |
| | | min-height: 780px; |
| | | } |
| | | |
| | | .article-detail { |
| | | max-height: 750px; |
| | | overflow: overlay; |
| | |
| | | /*左右两边的盒子容器*/ |
| | | .blog-cell { |
| | | opacity: 0.8; |
| | | padding: 0px 25px 10px; |
| | | padding: 0px 14px 10px; |
| | | } |
| | | |
| | | /*左边部分*/ |