From 620f759cfe9fa42fa9667b2ec63d7d00944e4af0 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Wed, 02 Mar 2022 12:49:35 +0800
Subject: [PATCH] 评论列表样式调整
---
src/components/swichLabel/main1-show.vue | 76 ++++++++++++++++++++++++++++---------
1 files changed, 57 insertions(+), 19 deletions(-)
diff --git a/src/components/swichLabel/main1-show.vue b/src/components/swichLabel/main1-show.vue
index af389a3..d88d368 100644
--- a/src/components/swichLabel/main1-show.vue
+++ b/src/components/swichLabel/main1-show.vue
@@ -1,6 +1,7 @@
<template>
<div>
<MyModal ref="myModal"></MyModal>
+ <MyPreviewModal ref="MyPreviewModal"></MyPreviewModal>
<div class="blog-drawer">
<a-drawer placement="left" :closable="false" :visible="visible1" :getContainer="'body'"
@@ -15,26 +16,30 @@
<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
+ <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>
-
- <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" @showScreen="showScreen"></tool>
+ <tool @showModal="showModal" @showPreview="showPreview" @showDrawer1="showDrawer1"
+ @showScreen="showScreen"></tool>
</a-col>
</a-row>
</div>
@@ -48,6 +53,7 @@
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 {
@@ -57,6 +63,7 @@
articleListScorll,
tool,
MyModal,
+ MyPreviewModal,
},
methods: {
showScreen() {
@@ -81,6 +88,9 @@
showModal() {
this.$refs.myModal.showModal();
},
+ showPreview() {
+ this.$refs.MyPreviewModal.showModal();
+ },
afterVisibleChange(val) {},
showDrawer1() {
this.visible1 = true;
@@ -98,7 +108,7 @@
colMini: {
xs: 1,
sm: 1,
- md: 1,
+ md: 0,
lg: 0,
xl: 0,
xxl: 0
@@ -159,6 +169,26 @@
</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;
@@ -174,14 +204,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;
}
/*左边部分*/
@@ -231,7 +266,7 @@
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
- max-height: 300px;
+ // max-height: 300px;
/*margin-top: 10px;*/
/*min-height: 200px;*/
@@ -241,7 +276,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);
@@ -254,6 +289,8 @@
-moz-transition: all .6s;
-o-transition: all .6s;
-ms-transition: all .6s;
+ transition: height 2s;
+
}
//div本体阴影
@@ -269,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