From 38a800ff006e7d90342ceb53ad547a8aaa2bd4d5 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Wed, 24 Aug 2022 03:42:28 +0800 Subject: [PATCH] 月台新增图库标签 --- src/components/mini/mdDetail.vue | 206 +++++++++++++++++++++------------------------------ 1 files changed, 84 insertions(+), 122 deletions(-) diff --git a/src/components/mini/mdDetail.vue b/src/components/mini/mdDetail.vue index e9e1b54..73ac63e 100644 --- a/src/components/mini/mdDetail.vue +++ b/src/components/mini/mdDetail.vue @@ -6,7 +6,7 @@ </a-button> </div> --> - <div class="headertop filter-dot headertop-bar"> + <div class="headertop filter-dot headertop-bar " v-if="coverURL.length>0"> <figure class="centerbg" v-bind:style="{'background-image':'url('+this.coverURL+')'}"> </figure> </div> @@ -49,12 +49,13 @@ {{introduce}} </pre> </div> - - <div class="markdown-body article-detail" v-else> + <div v-viewer.static class="markdown-body article-detail" v-else> + <div class="articleTitle"> + <h4>{{articelMeta.title}}</h4> + </div> <vue-markdown :source="source"></vue-markdown> </div> </div> - <!-- <div class="articleInfoMiniData"> <div> <a-icon type="calendar" class="samllPadding" /> @@ -78,12 +79,40 @@ <a-icon type="folder-open" class="samllPadding" /> </div> --> + <div class="articleInfoMiniData"> + <div class="myTitleDeal"> + <a-icon type="left" /> + <a-tooltip placement="bottomLeft" :title="'上一篇: '+articelMeta.previousRecord.title" + v-if="articelMeta.previousRecord !=null"> + <router-link + :to="{path:'/mdDetail',query:{id:articelMeta.previousRecord.id,articleFileType:articleFileType,typeId:typeId}}" + class="article-title"> + {{articelMeta.previousRecord.title}} + </router-link> + </a-tooltip> + <span v-else class="myTip">到顶啦..</span> + </div> + <div style="display: -webkit-box;"> + <div class="myTitleDeal"> + <a-tooltip placement="bottomLeft" :title="'下一篇: '+articelMeta.nextRecord.title" + v-if="articelMeta.nextRecord !=null"> + <router-link + :to="{path:'/mdDetail',query:{id:articelMeta.nextRecord.id,articleFileType:articleFileType,typeId:typeId}}" + class="article-title"> + {{articelMeta.nextRecord.title}} + </router-link> + </a-tooltip> + <span v-else class="myTip">到底啦..</span> + </div> + <a-icon type="right" /> + </div> + </div> + <div class="articleComment"> <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" /> </div> </div> - </template> <script> @@ -106,11 +135,12 @@ data() { return { myConstant: myConstant, - articelMeta: "", + articelMeta: '', isAllowedComment: 1, introduce: "", articleId: "", articleFileType: myConstant.fileTypeMarkDown, + typeId: null, source: "", showMsg: false, myLock: false, @@ -123,18 +153,20 @@ value: '', disabled: false }, - coverURL: "http://t.inleft.com/share/media_photo/background.jpg" + coverURL: "" } }, created() { this.articleId = this.$route.query.id; this.articleFileType = this.$route.query.articleFileType; + this.typeId = this.$route.query.typeId; }, watch: { '$route'(to, from) { if ("mdDetail" === to.name) { this.articleId = this.$route.query.id; this.articleFileType = this.$route.query.articleFileType; + this.typeId = this.$route.query.typeId; } }, articleId: function(newValue, oldValue) { @@ -162,7 +194,9 @@ queryBlogArticleDetail({ id: this.articleId, - authWord: this.secret == "" ? null : md5(this.secret) + authWord: this.secret == "" ? null : md5(this.secret), + typeId: this.typeId, + fileType: this.articleFileType }).then((res) => { this.showMsg = true; this.myLock = false; @@ -202,12 +236,15 @@ if (res.data.articleFileType == myConstant.fileTypeMarkDown || res.data.articleFileType == myConstant.fileTypeHtml) { - - this.$axios - .get(res.data.articleFileURL) - .then((res) => { - this.source = res.data; - }) + if (res.data.articleFileURL != null && res.data.articleFileURL != '') { + this.$axios + .get(res.data.articleFileURL) + .then((res) => { + this.source = res.data; + }).catch(() => [ + this.$message.error("获取文件好像失败了..", 3) + ]) + } } //获取日志资源文件 @@ -236,6 +273,16 @@ <style lang="less"> @import '../../assets/md.less'; + + .articleTitle { + h4{ + margin: 0px 0px 20px 0px; + -webkit-line-clamp: 1; + } + text-align: center; + width: 100%; + + } .headertop { position: relative; @@ -308,9 +355,25 @@ user-select: none; box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px #ffffff; padding: 10px 23px; + margin: 20px 0px; display: flex; justify-content: space-between; flex-wrap: wrap; + + + a { + color: black; + } + + .myTitleDeal { + max-width: 300px; + -webkit-line-clamp: 1; + text-overflow: ellipsis; + overflow: hidden; + word-wrap: break-word; + white-space: nowrap; + word-break: break-all; + } } .mySecret { @@ -341,113 +404,12 @@ -8px -8px 18px #ffffff; } - /* #test{ - padding-left: 25%; - padding-right: 25%; - } */ - /* h3 { - margin: 40px 0 0; + + @media screen and (max-width:768px) { + .articleInfoMiniData { + .myTitleDeal { + max-width: 120px; + } + } } - - ul { - list-style-type: none; - padding: 0; - } - - li { - display: inline-block; - margin: 0 10px; - } - - a { - color: #42b983; - } - - */ - - - /* 自己也可以再调整调整 (贡献一版 我们调整的一版样式) */ - /* .markdown-body { - padding: 20px; - min-width: 200px; - max-width: 900px; - font-size: 12px; - - h2 { - font-size: 18px; - margin: 1em 0 15px; - padding-top: 0.8em; - padding-bottom: 0.8em; - } - - h3 { - font-size: 14px; - margin: 22px 0 16px; - } - - h4 { - font-size: 13px; - margin: 20px 0 16px; - } - - h5 { - font-size: 12px; - margin: 16px 0 16px; - font-weight: 700; - } - - p { - font-size: 12px; - line-height: 24px; - color: #666666; - margin-top: 0px; - margin: 8px 0; - margin: 14px 0 14px; - } - - pre { - background-color: #eee; - margin-bottom: 8px; - margin-top: 8px; - margin: 12px 0 12px; - } - - blockquote { - margin-bottom: 8px; - margin-top: 8px; - margin: 14px 0 14px; - background-color: #eee; - padding: 16px 16px; - } - - tr { - background-color: #f5f5f5; - } - - code { - background-color: #eee; - } - - ul, - ol, - li { - list-style: unset; - font-size: 12px; - line-height: 20px; - color: #666666; - margin-top: 0px; - margin: 8px 0; - } - - blockquote { - border-color: #48b6e2; - } - - table { - display: table; - width: 100%; - max-width: 100%; - margin-bottom: 20px; - } - } */ </style> -- Gitblit v1.9.1