From af029bdfb645bd2b75fbab687c1a5f45b428d801 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Thu, 11 Aug 2022 18:53:48 +0800
Subject: [PATCH] 优化上传逻辑,月台添加mini播放弹窗
---
src/components/swichLabel/main1-home.vue | 139 ++++++++++++++--------------------------------
1 files changed, 42 insertions(+), 97 deletions(-)
diff --git a/src/components/swichLabel/main1-home.vue b/src/components/swichLabel/main1-home.vue
index d88d368..8666551 100644
--- a/src/components/swichLabel/main1-home.vue
+++ b/src/components/swichLabel/main1-home.vue
@@ -1,19 +1,20 @@
<template>
<div>
- <MyModal ref="myModal"></MyModal>
- <MyPreviewModal ref="MyPreviewModal"></MyPreviewModal>
+ <MyModal ref="myModal" />
+ <MyPreviewModal ref="MyPreviewModal" />
+ <MyMessage ref="MyMessage" />
<div class="blog-drawer">
- <a-drawer placement="left" :closable="false" :visible="visible1" :getContainer="'body'"
- :after-visible-change="afterVisibleChange" @close="onClose1" :zIndex="90" :width=300
+ <a-drawer placement="left" :closable="false" :visible="visibleDrawer" :getContainer="'body'"
+ :after-visible-change="afterVisibleChange" @close="onCloseDrawer" :zIndex="90" :width="300"
:bodyStyle="{padding:'0px'}"
:wrapStyle="{padding:'0px',top:'60px !important','height':'calc(100% - 60px) !important'}">
- <boxLeft></boxLeft>
+ <boxLeft @click="closeDrawer()"></boxLeft>
<boxRight></boxRight>
</a-drawer>
</div>
- <div class="blog-main">
+ <div class="blog-main ">
<a-row>
<keep-alive>
@@ -23,23 +24,25 @@
</a-col>
</keep-alive>
- <a-col v-bind="colApiMain ">
+ <a-col v-bind="colApiMain">
<a-col v-bind="colMini" :style="{'position':'absolute','right':'5px'}">
- <a-affix :offset-top="600">
- <a-button @click="showDrawer1" style="padding:0px 10px">
+ <a-affix :offset-top="550">
+ <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>
- <router-view class="fade"></router-view>
+ <router-view></router-view>
</keep-alive>
</a-col>
- <a-col v-bind="colApiRight" ref="myDrawer">
- <!-- <boxRight></boxRight> -->
- <tool @showModal="showModal" @showPreview="showPreview" @showDrawer1="showDrawer1"
- @showScreen="showScreen"></tool>
+ <a-col v-bind="colApiRight">
+ <tool @showModal="showModal" @showPreview="showPreview" @showScreen="showScreen"
+ @showMessage="showMessage" />
</a-col>
</a-row>
</div>
@@ -50,40 +53,35 @@
<script>
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"
import MyPreviewModal from "../group/MyPreviewModal.vue"
+ import MyMessage from "../group/MyMessage.vue"
+
+ import screenConfig from "../../config/screenConfig.js"
export default {
components: {
boxLeft,
boxRight,
- articleListScorll,
tool,
MyModal,
MyPreviewModal,
+ MyMessage,
},
methods: {
showScreen() {
- if (this.screen) {
+ if (this.scale) {
//缩小
- this.colApiLeft.xxl.span = 0;
- this.colApiLeft.xxl.offset = 0;
-
- this.colApiMain.xxl.span = 17;
- this.colApiMain.xxl.offset = 4;
+ this.colApiLeft = screenConfig.colApiLeftScale;
+ this.colApiMain = screenConfig.colApiMainScale;
} else {
//放大
- this.colApiLeft.xxl.span = 4;
- this.colApiLeft.xxl.offset = 3;
-
- this.colApiMain.xxl.span = 11;
- this.colApiMain.xxl.offset = 2;
+ this.colApiLeft = screenConfig.colApiLeft;
+ this.colApiMain = screenConfig.colApiMain;
}
- this.screen = !this.screen;
-
+ this.scale = !this.scale;
},
showModal() {
this.$refs.myModal.showModal();
@@ -91,78 +89,25 @@
showPreview() {
this.$refs.MyPreviewModal.showModal();
},
+ showMessage() {
+ this.$refs.MyMessage.showModal();
+ },
afterVisibleChange(val) {},
- showDrawer1() {
- this.visible1 = true;
+ showDrawer() {
+ this.visibleDrawer = true;
},
- onClose1() {
- this.visible1 = false;
+ onCloseDrawer() {
+ this.visibleDrawer = false;
},
-
},
data() {
return {
- screen: true,
- visible1: false,
- visible2: false,
- colMini: {
- xs: 1,
- sm: 1,
- md: 0,
- lg: 0,
- xl: 0,
- xxl: 0
- },
- colApiLeft: {
- xs: 0,
- sm: 0,
- 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: 1,
- xl: 1,
- xxl: 1,
- },
- colApiMain: {
- xs: 24,
- sm: {
- span: 20,
- offset: 2,
- },
- md: {
- span: 15,
- offset: 1,
- },
- lg: {
- span: 13,
- offset: 2,
- },
- xl: {
- span: 13,
- offset: 2,
- },
- xxl: {
- span: 11,
- offset: 2,
- },
- }
+ scale: true,
+ visibleDrawer: false,
+ colMini: screenConfig.colMini,
+ colApiLeft: screenConfig.colApiLeft,
+ colApiRight: screenConfig.colApiRight,
+ colApiMain: screenConfig.colApiMain
}
}
}
@@ -172,7 +117,7 @@
@font-face {
font-family: 'HYTangMeiRen';
// font-display: swap;
- src: url("https://unpkg.zhimg.com/fontawepro@latest/fonts/hytmr55.woff") format("truetype");
+ src: url("http://t.inleft.com/share/z%E5%AD%97%E4%BD%93%E5%BA%93/hytmr55%E6%B1%89%E4%BB%AA%E5%94%90%E7%BE%8E%E4%BA%BA%E5%AD%97%E4%BD%93.woff") format("truetype");
}
span,
@@ -203,6 +148,7 @@
.blog-main {
+ min-height: 860px;
margin-top: 80px;
padding-left: 3%;
padding-right: 3%;
@@ -312,7 +258,6 @@
transition: height 1s;
}
-
.blog-scroll:hover::-webkit-scrollbar {
display: block;
--
Gitblit v1.9.1