From b505f3648a10dd998ae9fe7a6edb1bf125d7d6a6 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Fri, 21 Jan 2022 01:51:33 +0800
Subject: [PATCH] 主页结构调整
---
src/components/swichLabel/main1-show.vue | 141 +++++++++++++---------------------------------
1 files changed, 41 insertions(+), 100 deletions(-)
diff --git a/src/components/swichLabel/main1-show.vue b/src/components/swichLabel/main1-show.vue
index d9ab8d2..4e0c085 100644
--- a/src/components/swichLabel/main1-show.vue
+++ b/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);
--
Gitblit v1.9.1