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 | 236 ++++++++++++++++++++++++++++++----------------------------
1 files changed, 121 insertions(+), 115 deletions(-)
diff --git a/src/components/swichLabel/main1-show.vue b/src/components/swichLabel/main1-show.vue
index 1da01f3..ffdb735 100644
--- a/src/components/swichLabel/main1-show.vue
+++ b/src/components/swichLabel/main1-show.vue
@@ -1,58 +1,43 @@
<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'}">
+ :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>
- </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="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>
- </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>
- <!-- <tempFormCheck></tempFormCheck> -->
- <router-view class="fade"></router-view>
+ <div class="blog-main">
+
+ <a-row>
+ <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">
+ more
+ </a-button>
+ </a-affix>
+ </a-col>
+ <keep-alive>
+ <router-view class="fade"></router-view>
+ </keep-alive>
</a-col>
<a-col v-bind="colApiRight" ref="myDrawer">
- <boxRight></boxRight>
+ <!-- <boxRight></boxRight> -->
+ <tool @showModal="showModal" @showDrawer1="showDrawer1" @showScreen="showScreen"></tool>
</a-col>
</a-row>
</div>
@@ -61,77 +46,66 @@
</template>
<script>
- import tempFormCheck from "../group/tempFormCheck.vue"
- import box10 from "../mini/box10-add.vue"
import boxLeft from "../group/boxLeft.vue"
import boxRight from "../group/boxRight.vue"
- import articleList from "../group/articleList.vue"
import articleListScorll from "../group/articleListScorll.vue"
+ import tool from "../group/tool.vue"
+ import MyModal from "../group/MyModal.vue"
export default {
components: {
- tempFormCheck,
- box10,
boxLeft,
boxRight,
- articleList,
articleListScorll,
-
-
+ tool,
+ MyModal,
},
methods: {
- getCalendarContainer(trigger) {
- return this.$refs.myModal;
+ 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.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);
- },
- 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,
+ screen: true,
visible1: false,
visible2: false,
+ colMini: {
+ xs: 1,
+ sm: 1,
+ md: 1,
+ lg: 0,
+ xl: 0,
+ xxl: 0
+ },
colApiLeft: {
xs: 0,
sm: 0,
@@ -155,15 +129,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,
@@ -172,7 +140,7 @@
offset: 2,
},
md: {
- span: 14,
+ span: 15,
offset: 1,
},
lg: {
@@ -180,36 +148,52 @@
offset: 2,
},
xl: {
- span: 9,
- offset: 1,
+ span: 13,
+ offset: 2,
},
xxl: {
- span: 8,
- offset: 1,
+ span: 11,
+ 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 {
min-height: 780px;
}
- .article-detail {
- max-height: 750px;
- overflow: overlay;
- }
.blog-main {
margin-top: 80px;
@@ -254,11 +238,14 @@
}
+ @card-box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px rgba(255, 255, 255, 1);
+
/*---------------------
| 核心盒子构成start |
------- ---------------*/
.blog-container {
border-radius: 15px;
+ // background-color: #f5f8fa;
background-color: white;
line-height: 1.4;
@@ -267,7 +254,7 @@
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
- max-height: 300px;
+ // max-height: 300px;
/*margin-top: 10px;*/
/*min-height: 200px;*/
@@ -277,10 +264,28 @@
padding-top: 10px;
padding-bottom: 20px;
- overflow: hidden;
- -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);
- // box-shadow: 1px 1px 1px 2px #00000059
+ // 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);
+
+ box-shadow: @card-box-shadow;
+ -webkit-box-shadow: @card-box-shadow;
+ transition: all .4s;
+ -webkit-transition: all .6s;
+ -moz-transition: all .6s;
+ -o-transition: all .6s;
+ -ms-transition: all .6s;
+ transition: height 2s;
+
+ }
+
+ //div本体阴影
+ .blog-container:hover {
+ transition: all .25s;
+ -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8), inset 9px 9px 15px rgba(0, 0, 0, 0.1), inset -9px -9px 15px rgba(255, 255, 255, 1);
+ box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8), inset 9px 9px 15px rgba(0, 0, 0, 0.1), inset -9px -9px 15px rgba(255, 255, 255, 1);
}
.show-line {
@@ -289,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