From ec97e05d923dc7a343b16ddd5134f1dff8071051 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Tue, 01 Mar 2022 18:53:37 +0800
Subject: [PATCH] 评论页实现
---
src/components/swichLabel/main1-show.vue | 202 ++++++++++++++++++++++++++++++++++---------------
1 files changed, 139 insertions(+), 63 deletions(-)
diff --git a/src/components/swichLabel/main1-show.vue b/src/components/swichLabel/main1-show.vue
index f20b673..d88d368 100644
--- a/src/components/swichLabel/main1-show.vue
+++ b/src/components/swichLabel/main1-show.vue
@@ -1,39 +1,45 @@
<template>
<div>
+ <MyModal ref="myModal"></MyModal>
+ <MyPreviewModal ref="MyPreviewModal"></MyPreviewModal>
+
<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>
</div>
+
<div class="blog-main">
-
-
+
<a-row>
- <a-col v-bind="colApiLeft">
- <boxLeft></boxLeft>
- </a-col>
+ <keep-alive>
+ <a-col v-bind="colApiLeft">
+ <boxLeft></boxLeft>
+ <boxRight></boxRight>
+ </a-col>
+ </keep-alive>
+
<a-col v-bind="colApiMain ">
-
- <a-button @click="showDrawer1">
- 小抽屉1
- </a-button>
- <a-button @click="showDrawer2">
- 小抽屉2
- </a-button>
- <articleListScorll/>
- <!-- <router-view class="fade"></router-view> -->
+ <a-col v-bind="colMini" :style="{'position':'absolute','right':'5px'}">
+ <a-affix :offset-top="600">
+ <a-button @click="showDrawer1" style="padding:0px 10px">
+ <a-icon type="left-circle" />
+ </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" @showPreview="showPreview" @showDrawer1="showDrawer1"
+ @showScreen="showScreen"></tool>
</a-col>
</a-row>
</div>
@@ -44,37 +50,69 @@
<script>
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"
+ import MyPreviewModal from "../group/MyPreviewModal.vue"
export default {
components: {
boxLeft,
boxRight,
- articleList,
articleListScorll,
-
+ tool,
+ MyModal,
+ MyPreviewModal,
},
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();
+ },
+ showPreview() {
+ this.$refs.MyPreviewModal.showModal();
+ },
afterVisibleChange(val) {},
showDrawer1() {
this.visible1 = true;
},
- showDrawer2() {
- this.visible2 = true;
- },
onClose1() {
this.visible1 = false;
},
- onClose2() {
- this.visible2 = 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,
@@ -98,15 +136,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,
@@ -115,7 +147,7 @@
offset: 2,
},
md: {
- span: 14,
+ span: 15,
offset: 1,
},
lg: {
@@ -123,46 +155,68 @@
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{
+
+ .holdHeight {
min-height: 780px;
}
- .article-detail {
- max-height: 750px;
- overflow: overlay;
- }
.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;
}
/*左边部分*/
@@ -196,11 +250,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;
@@ -209,7 +266,7 @@
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
- max-height: 300px;
+ // max-height: 300px;
/*margin-top: 10px;*/
/*min-height: 200px;*/
@@ -219,10 +276,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 {
@@ -231,10 +306,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