From 916b6bf89465f057532ad8469e4e0002fc361716 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Thu, 18 Aug 2022 16:24:30 +0800
Subject: [PATCH] 日志内页添加头图
---
src/components/mini/mdDetail.vue | 78 +++++++++++++++++++++++---
src/components/group/articleListScorll.vue | 2
src/components/group/tool.vue | 86 +++++++++++++++-------------
3 files changed, 116 insertions(+), 50 deletions(-)
diff --git a/src/components/group/articleListScorll.vue b/src/components/group/articleListScorll.vue
index c78c6e6..03308db 100644
--- a/src/components/group/articleListScorll.vue
+++ b/src/components/group/articleListScorll.vue
@@ -18,7 +18,7 @@
<a-row type="flex" justify="center">
<div style="position:fixed;bottom: 10px;">
<a-pagination @change="onChange" :showQuickJumper="true" :size="size" v-model="current"
- :defaultPageSize="defaultPageSize" :pageSize="pageSize" :total="total" />
+ :showLessItems="true" :defaultPageSize="defaultPageSize" :pageSize="pageSize" :total="total" />
</div>
</a-row>
diff --git a/src/components/group/tool.vue b/src/components/group/tool.vue
index 1e503fa..a0dc0dc 100644
--- a/src/components/group/tool.vue
+++ b/src/components/group/tool.vue
@@ -2,38 +2,49 @@
<a-affix :offset-top="600">
<div style="padding-left:5px;" class="myButton">
- <!-- <a-button @click="showDrawer1">
- 抽屉1
- </a-button> -->
- <!-- <a-button @click="showDrawer2">
- 抽屉2
- </a-button> -->
-
- <a-button @click="showMessage">
- <a-badge status="success">
- 消息
- </a-badge>
- <a-icon type="message" />
- </a-button>
- <a-button @click="showPreview">
- 预览
- <a-icon type="youtube" />
- </a-button>
- <a-button @click="showModal">
- 日志
- <a-icon type="plus-circle" />
- </a-button>
- <a-button @click="showScreen">
- {{screenModel}}
- <transition name="fade">
- <a-icon :type="iconType" />
- </transition>
- </a-button>
- <a-button @click="addLink" v-if="showHidenButton">
- 加链
- <a-icon type="smile" />
- </a-button>
+ <div>
+ <a-button v-if="!drawerStatus" @click="changeDrawerStatus">
+ 展开
+ <a-icon type="down" />
+ </a-button>
+ <a-button v-if="drawerStatus" @click="changeDrawerStatus">
+ 合上
+ <a-icon type="up" />
+ </a-button>
+ </div>
+ <div v-if="drawerStatus">
+ <a-button @click="()=>this.$router.back(-1)">
+ 后退
+ <a-icon type="left" />
+ </a-button>
+ <a-button @click="showPreview">
+ 预览
+ <a-icon type="youtube" />
+ </a-button>
+ <a-button @click="showScreen" v-if="!screen">
+ 拉伸
+ <a-icon type="arrows-alt" />
+ </a-button>
+ <a-button @click="showScreen" v-if="screen">
+ 缩小
+ <a-icon type="shrink" />
+ </a-button>
+ <a-button @click="showModal">
+ 日志
+ <a-icon type="plus-circle" />
+ </a-button>
+ <a-button @click="addLink" v-if="showHidenButton">
+ 加链
+ <a-icon type="smile" />
+ </a-button>
+ <a-button @click="showMessage">
+ <a-badge status="success">
+ <span>消息</span>
+ </a-badge>
+ <a-icon type="message" />
+ </a-button>
+ </div>
<!-- <a-button>
工具
<a-icon type="tool" style="margin-left: 0px;" />
@@ -48,10 +59,9 @@
export default {
data() {
return {
- iconType: "arrows-alt",
screen: false,
- screenModel: "拉伸",
showHidenButton: false,
+ drawerStatus: false
}
},
mounted() {
@@ -62,6 +72,9 @@
}
},
methods: {
+ changeDrawerStatus() {
+ this.drawerStatus = !this.drawerStatus;
+ },
addLink() {
this.$emit('addLink')
},
@@ -76,13 +89,6 @@
},
showScreen() {
this.$emit('showScreen')
- if (this.screen) {
- this.screenModel = "拉伸";
- this.iconType = "arrows-alt";
- } else {
- this.screenModel = "缩小";
- this.iconType = "shrink"
- }
this.screen = !this.screen;
}
},
diff --git a/src/components/mini/mdDetail.vue b/src/components/mini/mdDetail.vue
index 18f43f8..e9e1b54 100644
--- a/src/components/mini/mdDetail.vue
+++ b/src/components/mini/mdDetail.vue
@@ -1,9 +1,14 @@
<template>
<div class="article-meta">
- <div>
+ <!-- <div>
<a-button @click="()=>this.$router.back(-1)" style="position: absolute;">
<a-icon type="left" />
</a-button>
+ </div> -->
+
+ <div class="headertop filter-dot headertop-bar">
+ <figure class="centerbg" v-bind:style="{'background-image':'url('+this.coverURL+')'}">
+ </figure>
</div>
<div v-if="showMsg && !myLock">
@@ -50,7 +55,11 @@
</div>
</div>
- <div class="articleInfoMiniData">
+ <!-- <div class="articleInfoMiniData">
+ <div>
+ <a-icon type="calendar" class="samllPadding" />
+ <span>{{articelMeta.publishDate==null?'--':articelMeta.publishDate}}</span>
+ </div>
<div class="smallOption" @click="articleOptionHandle('dislike')">
<a-icon type="dislike" style="margin-top: 2px;" />
</div>
@@ -63,15 +72,12 @@
<span>{{articelMeta.likeCount==null?'0':articelMeta.likeCount}}</span>
</div>
<div>
- <!-- <a-icon type="folder-open" class="samllPadding" /> -->
<a-icon type="book" class="samllPadding" />
<span>{{articelMeta.articleTypeName==null?'--':articelMeta.articleTypeName}}</span>
</div>
- <div>
- <a-icon type="calendar" class="samllPadding" />
- <span>{{articelMeta.publishDate==null?'--':articelMeta.publishDate}}</span>
- </div>
- </div>
+ <a-icon type="folder-open" class="samllPadding" />
+ </div> -->
+
<div class="articleComment">
<comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" />
</div>
@@ -117,6 +123,7 @@
value: '',
disabled: false
},
+ coverURL: "http://t.inleft.com/share/media_photo/background.jpg"
}
},
created() {
@@ -185,6 +192,11 @@
this.isAllowedComment = res.data.isAllowedComment;
this.introduce = res.data.introduce;
this.articleFileType = res.data.articleFileType;
+ if (res.data.coverFileURL != null && res.data.coverFileURL != '') {
+ this.coverURL = res.data.coverFileURL;
+ } else {
+ this.coverURL = "http://t.inleft.com/share/media_photo/background.jpg";
+ }
this.articelMeta = res.data;
@@ -225,6 +237,54 @@
<style lang="less">
@import '../../assets/md.less';
+ .headertop {
+ position: relative;
+ overflow: hidden;
+ border-radius: 14px;
+ }
+
+ .centerbg {
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ background-repeat: no-repeat;
+ // background-attachment: fixed;
+ background-size: cover;
+ z-index: -1;
+ // background-image: url("http://t.inleft.com/blog//cover/这世界那么多人.jpg");
+ height: 222px;
+ background-size: 100% auto;
+ background-position: center;
+ }
+
+
+ .headertop::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 3;
+ background-attachment: fixed;
+ }
+
+ .headertop.filter-dot::before {
+ // background-image: url("https://blog-img-1258635493.cos.ap-chengdu.myqcloud.com/cdn/img/other/dot.gif");
+ // background-image: url("http://blog.inleft.com/photo/dot.gif");
+ }
+
+ // .headertop-bar::after {
+ // content: '';
+ // width: 150%;
+ // height: 4.375rem;
+ // background: linear-gradient(0deg, #fff, 84%, #ffffff4f);
+ // left: -25%;
+ // bottom: -2.875rem;
+ // border-radius: 100%;
+ // position: absolute;
+ // z-index: 4;
+ // }
.smallOption {
transition-function: ease-out;
@@ -247,7 +307,7 @@
.articleInfoMiniData {
user-select: none;
box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px #ffffff;
- padding: 10px 50px;
+ padding: 10px 23px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
--
Gitblit v1.9.1