From 28d46dfc072a13859a5c0bc4901645b77022c7c3 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Sun, 20 Feb 2022 01:25:51 +0800
Subject: [PATCH] 文章主体添加密码授权逻辑
---
src/components/swichLabel/main1-show.vue | 80 +++++++++++++++++++++++++++++++---------
1 files changed, 62 insertions(+), 18 deletions(-)
diff --git a/src/components/swichLabel/main1-show.vue b/src/components/swichLabel/main1-show.vue
index 4e0c085..ffdb735 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 {
@@ -213,7 +254,7 @@
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
- max-height: 300px;
+ // max-height: 300px;
/*margin-top: 10px;*/
/*min-height: 200px;*/
@@ -223,7 +264,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 +277,8 @@
-moz-transition: all .6s;
-o-transition: all .6s;
-ms-transition: all .6s;
+ transition: height 2s;
+
}
//div本体阴影
@@ -251,10 +294,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