From 41b36f013d4103ffc59fd58feb6b6177ee5b04f7 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Sat, 15 Jan 2022 21:06:24 +0800
Subject: [PATCH] 组件 模块分离
---
src/components/swichLabel/main1-show.vue | 140 +++++++++++++++++++++++++++++-----------------
1 files changed, 89 insertions(+), 51 deletions(-)
diff --git a/src/components/layouts/main1-show.vue b/src/components/swichLabel/main1-show.vue
similarity index 61%
rename from src/components/layouts/main1-show.vue
rename to src/components/swichLabel/main1-show.vue
index c2f86b3..b53280b 100644
--- a/src/components/layouts/main1-show.vue
+++ b/src/components/swichLabel/main1-show.vue
@@ -1,47 +1,59 @@
<template>
- <div class="blog-main">
- <a-row>
- <a-col v-bind="colApiLeft">
+ <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
+ :bodyStyle="{padding:'0px'}" :wrapStyle="{padding:'0px',top:'60px'}">
<boxLeft></boxLeft>
- <a-drawer placement="left" :closable="false" :visible="visible1"
- :after-visible-change="afterVisibleChange" @close="onClose1">
- <boxLeft></boxLeft>
- </a-drawer>
- </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-col>
- <a-col v-bind="colApiRight" ref="myDrawer">
- <boxRight></boxRight>
+ </a-drawer>
- <a-drawer placement="right" :closable="false" :visible="visible2"
- :after-visible-change="afterVisibleChange" @close="onClose2">
+ <a-drawer placement="right" :closable="false" :visible="visible2" :getContainer="'body'"
+ :after-visible-change="afterVisibleChange" @close="onClose2" :zIndex="10" :width=270
+ :bodyStyle="{padding:'0px'}" :wrapStyle="{padding:'0px',top:'60px'}">
+ <boxRight></boxRight>
+ </a-drawer>
+ </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-col>
+
+ <a-col v-bind="colApiRight" ref="myDrawer">
<boxRight></boxRight>
- </a-drawer>
- </a-col>
- </a-row>
+ </a-col>
+ </a-row>
+ </div>
+
</div>
</template>
<script>
- import boxLeft from "./boxLeft.vue"
- import boxRight from "./boxRight.vue"
- import box6 from "./box6-articleList.vue"
+ import boxLeft from "../group/boxLeft.vue"
+ import boxRight from "../group/boxRight.vue"
+ import articleList from "../group/articleList.vue"
+
export default {
+
components: {
boxLeft,
boxRight,
- box6
+ articleList
},
methods: {
- afterVisibleChange(val) {
- },
+ afterVisibleChange(val) {},
showDrawer1() {
this.visible1 = true;
},
@@ -55,40 +67,67 @@
this.visible2 = false;
},
},
-
data() {
return {
visible1: false,
visible2: false,
- sliderApi: {
- collapsible: true, //是否可收起
-
- collapsedWidth: 0 //收缩宽度，设置为 0 会出现特殊 trigger
- },
colApiLeft: {
xs: 0,
sm: 0,
- md: 0,
- lg: 8,
- xl: 8,
- xxl: 6,
+ md: {
+ span: 8,
+ },
+ lg: {
+ span: 7,
+ offset: 1,
+ },
+ xl: {
+ span: 5,
+ offset: 2,
+ },
+ xxl: {
+ span: 4,
+ offset: 3,
+ },
},
colApiRight: {
xs: 0,
sm: 0,
md: 0,
lg: 0,
- xl: 0,
- xxl: 4,
+ xl: {
+ span: 5,
+ offset: 1,
+ },
+ xxl: {
+ span: 4,
+ offset: 1,
+ },
},
colApiMain: {
xs: 24,
- sm: 24,
- md: 24,
- lg: 14,
- xl: 14,
- xxl: 14,
+ sm: {
+ span: 20,
+ offset: 2,
+ },
+ md: {
+ span: 14,
+ offset: 1,
+ },
+ lg: {
+ span: 13,
+ offset: 2,
+ },
+ xl: {
+ span: 9,
+ offset: 1,
+ },
+ xxl: {
+ span: 8,
+ offset: 1,
+ },
}
+
}
}
}
@@ -96,6 +135,7 @@
<style lang="less">
.swichTag {
+ min-height: 750px;
padding: 30px 30px 10px;
background-color: white;
border-radius: 15px;
@@ -107,9 +147,9 @@
}
.blog-main {
+ margin-top: 80px;
padding-left: 5%;
padding-right: 5%;
- padding-top: 80px;
}
/*左右两边的盒子容器*/
@@ -122,9 +162,8 @@
.blog-left-side {
position: sticky;
// top: 80px;
- padding-left: 2%;
+ // padding-left: 2%;
/*padding-right: 2%;*/
- z-index: 100;
}
/*中间部分*/
@@ -141,7 +180,6 @@
padding-top: 10px;
/*padding-left: 2%;*/
/*padding-right: 2%;*/
- z-index: 100;
}
div .blog-right-side-meta div {
--
Gitblit v1.9.1