| | |
| | | class="OwO-textarea" /> |
| | | </a-form-item> |
| | | <span class="myTip fadeIn" v-if="showTip">现在你可以发送表情啦</span> |
| | | <div ref="container" class="OwO fadeIn" v-show="init || visitorContent.length>0"></div> |
| | | <div ref="container" class="OwO fadeIn" v-show="init"></div> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | watch: { |
| | | visitorContent: function(newValue, oldValue) { |
| | | if (newValue.length > 0) { |
| | | this.init = true; |
| | | this.initOwO(); |
| | | if (!this.showTip) { |
| | | if (!this.init) { |
| | | this.showTip = true; |
| | | setTimeout(() => { |
| | | this.showTip = false; |
| | | }, 5000); |
| | | } |
| | | this.init = true; |
| | | this.initOwO(); |
| | | } |
| | | this.$emit("update:content", newValue) |
| | | }, |
| | | }, |
| | | methods: { |
| | | |
| | | |
| | | initOwO() { |
| | | var OwO_demo = new OwO({ |
| | | logo: 'OωO表情', |
| | |
| | | |
| | | img { |
| | | margin-bottom: 0.2rem; |
| | | min-height: 5rem; |
| | | height: 2em; |
| | | height: 2rem; |
| | | } |
| | | } |
| | | </style> |
| | |
| | | </div> |
| | | |
| | | <div v-for="(temp,index) in data"> |
| | | <newArticle v-bind="temp" :index="index"></newArticle> |
| | | <newArticle v-bind="temp" :index="index" :typeId="typeId"></newArticle> |
| | | <!-- <box5 v-bind="temp"></box5> --> |
| | | </div> |
| | | |
| | |
| | | <div class="miniTag" v-if="isTop==1">置顶</div> |
| | | <div class="post_cover left_radius" v-if="index%2==0"> |
| | | |
| | | <router-link :to="{path:'videoDetail',query:{id:id,articleFileType:articleFileType}}" :title="title" |
| | | <router-link :to="{path:'videoDetail',query:{id:id,articleFileType:articleFileType,typeId:typeId}}" :title="title" |
| | | v-if="articleFileType==myConstant.fileTypeVideo"> |
| | | <div class="block left_radius"></div> |
| | | <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title"> |
| | |
| | | <div class="block left_radius"></div> |
| | | <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title"> |
| | | </a> --> |
| | | <router-link :to="{path:'/mdDetail',query:{id:id,articleFileType:articleFileType}}" :title="title" |
| | | <router-link :to="{path:'/mdDetail',query:{id:id,articleFileType:articleFileType,typeId:typeId}}" :title="title" |
| | | v-else> |
| | | <div class="block left_radius"></div> |
| | | <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title"> |
| | |
| | | </div> |
| | | |
| | | <div class="post_cover right_radius" v-else> |
| | | <router-link :to="{path:'videoDetail',query:{id:id,articleFileType:articleFileType}}" :title="title" |
| | | <router-link :to="{path:'videoDetail',query:{id:id,articleFileType:articleFileType,typeId:typeId}}" :title="title" |
| | | v-if="articleFileType==myConstant.fileTypeVideo"> |
| | | <div class="block left_radius"></div> |
| | | <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title"> |
| | |
| | | <div class="block left_radius"></div> |
| | | <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title"> |
| | | </a> --> |
| | | <router-link :to="{path:'/mdDetail',query:{id:id,articleFileType:articleFileType}}" :title="title" |
| | | <router-link :to="{path:'/mdDetail',query:{id:id,articleFileType:articleFileType,typeId:typeId}}" :title="title" |
| | | v-else> |
| | | <div class="block right_radius"></div> |
| | | <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title"> |
| | |
| | | |
| | | <div class="recent-post-info"> |
| | | |
| | | <router-link :to="{path:'/videoDetail',query:{id:id,articleFileType:articleFileType}}" |
| | | <router-link :to="{path:'/videoDetail',query:{id:id,articleFileType:articleFileType,typeId:typeId}}" |
| | | class="article-title" v-if="articleFileType==myConstant.fileTypeVideo"> |
| | | <a-icon type="lock" style="color:rgba(0,0,0,.25)" v-if="authStatus==3" /> |
| | | <a-icon type="stop" style="color:rgba(0,0,0,.25)" v-if="authStatus==2" /> |
| | |
| | | <a-badge :count="1" dot v-if="isAnyUpdate==1" title="最近有更新"></a-badge> |
| | | </router-link> |
| | | |
| | | <router-link :to="{path:'/mdDetail',query:{id:id,articleFileType:articleFileType}}" |
| | | <router-link :to="{path:'/mdDetail',query:{id:id,articleFileType:articleFileType,typeId:typeId}}" |
| | | class="article-title" v-else> |
| | | <a-icon type="lock" style="color:rgba(0,0,0,.25)" v-if="authStatus==3" /> |
| | | <a-icon type="stop" style="color:rgba(0,0,0,.25)" v-if="authStatus==2" /> |
| | |
| | | "index": { |
| | | default: 0, |
| | | }, |
| | | "typeId": { |
| | | default: "", |
| | | }, |
| | | "id": { |
| | | default: 0, |
| | | }, |
| | |
| | | <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> |
| | |
| | | data() { |
| | | return { |
| | | myConstant: myConstant, |
| | | articelMeta: "", |
| | | articelMeta: '', |
| | | isAllowedComment: 1, |
| | | introduce: "", |
| | | articleId: "", |
| | | articleFileType: myConstant.fileTypeMarkDown, |
| | | typeId: null, |
| | | source: "", |
| | | showMsg: false, |
| | | myLock: false, |
| | |
| | | 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) { |
| | |
| | | |
| | | 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; |
| | |
| | | |
| | | if (res.data.articleFileType == myConstant.fileTypeMarkDown || |
| | | res.data.articleFileType == myConstant.fileTypeHtml) { |
| | | |
| | | this.$axios |
| | | .get(res.data.articleFileURL) |
| | | .then((res) => { |
| | | this.source = res.data; |
| | | }).catch(()=>[ |
| | | this.$message.error("获取文件好像失败了..",3) |
| | | ]) |
| | | 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) |
| | | ]) |
| | | } |
| | | } |
| | | |
| | | //获取日志资源文件 |
| | |
| | | |
| | | <style lang="less"> |
| | | @import '../../assets/md.less'; |
| | | |
| | | |
| | | .headertop { |
| | | position: relative; |
| | |
| | | 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 { |
| | |
| | | -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> |