From 2f9d3c2392db9094af5ac6ea50b017140421f059 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Fri, 25 Feb 2022 18:35:59 +0800
Subject: [PATCH] 评论页页面拟定
---
src/components/swichLabel/main1-show.vue | 89 ++++++++++++++++++++++++++++++++++----------
1 files changed, 69 insertions(+), 20 deletions(-)
diff --git a/src/components/swichLabel/main1-show.vue b/src/components/swichLabel/main1-show.vue
index 4e0c085..361d166 100644
--- a/src/components/swichLabel/main1-show.vue
+++ b/src/components/swichLabel/main1-show.vue
@@ -4,7 +4,7 @@
<div class="blog-drawer">
<a-drawer placement="left" :closable="false" :visible="visible1" :getContainer="'body'"
- :after-visible-change="afterVisibleChange" @close="onClose1" :zIndex="90" :width=270
+ :after-visible-change="afterVisibleChange" @close="onClose1" :zIndex="90" :width=300
:bodyStyle="{padding:'0px'}"
:wrapStyle="{padding:'0px',top:'60px !important','height':'calc(100% - 60px) !important'}">
<boxLeft></boxLeft>
@@ -15,26 +15,29 @@
<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
+ more
</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"></tool>
+ <tool @showModal="showModal" @showDrawer1="showDrawer1" @showScreen="showScreen"></tool>
</a-col>
</a-row>
</div>
@@ -43,7 +46,6 @@
</template>
<script>
- import tempFriendBox from "../group/tempFriendBox.vue"
import boxLeft from "../group/boxLeft.vue"
import boxRight from "../group/boxRight.vue"
import articleListScorll from "../group/articleListScorll.vue"
@@ -53,7 +55,6 @@
export default {
components: {
- tempFriendBox,
boxLeft,
boxRight,
articleListScorll,
@@ -61,6 +62,25 @@
MyModal,
},
methods: {
+ showScreen() {
+ if (this.screen) {
+ //缩小
+ this.colApiLeft.xxl.span = 0;
+ this.colApiLeft.xxl.offset = 0;
+
+ this.colApiMain.xxl.span = 17;
+ this.colApiMain.xxl.offset = 4;
+ } else {
+ //放大
+ this.colApiLeft.xxl.span = 4;
+ this.colApiLeft.xxl.offset = 3;
+
+ this.colApiMain.xxl.span = 11;
+ this.colApiMain.xxl.offset = 2;
+ }
+ this.screen = !this.screen;
+
+ },
showModal() {
this.$refs.myModal.showModal();
},
@@ -75,6 +95,7 @@
},
data() {
return {
+ screen: true,
visible1: false,
visible2: false,
colMini: {
@@ -135,18 +156,38 @@
offset: 2,
},
}
-
}
}
}
</script>
<style lang="less">
+ @font-face {
+ font-family: 'HYTangMeiRen';
+ // font-display: swap;
+ src: url("https://unpkg.zhimg.com/fontawepro@latest/fonts/hytmr55.woff") format("truetype");
+ }
+
+ span,
+ p,
+ a,
+ body,
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ code {
+ font-family: HYTangMeiRen !important;
+ }
+
.swichTag {
min-height: 750px;
padding: 30px 30px 10px;
- background-color: white;
border-radius: 15px;
+ box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
+ padding: 20px 30px 0px;
}
.holdHeight {
@@ -156,14 +197,19 @@
.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;
}
/*左边部分*/
@@ -213,7 +259,7 @@
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
- max-height: 300px;
+ // max-height: 300px;
/*margin-top: 10px;*/
/*min-height: 200px;*/
@@ -223,7 +269,7 @@
padding-top: 10px;
padding-bottom: 20px;
- overflow: hidden;
+ // 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);
@@ -236,6 +282,8 @@
-moz-transition: all .6s;
-o-transition: all .6s;
-ms-transition: all .6s;
+ transition: height 2s;
+
}
//div本体阴影
@@ -251,10 +299,11 @@
.blog-scroll {
padding-top: 10px;
- max-height: 200px;
-
overflow-x: hidden;
- overflow-y: overlay;
+ overflow-y: hidden;
+
+ transition: height 1s;
+
}
--
Gitblit v1.9.1