| | |
| | | <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 class="countMeta" |
| | | v-if="articleFileType==fileType.fileTypeMarkDown_1|| articleFileType==fileType.fileTypeHtml_2"> |
| | | <div style="display: flex;justify-content: space-between;padding: 0px 10px;"> |
| | | <div style="display: flex;align-items: center;"> <span>发布时间:{{articelMeta.publishDate}}</span></div> |
| | | <div style="display: inline-grid;"> |
| | | <span style="text-align: end;">字数:{{wordCount}}</span> |
| | | <span>预计耗时:{{Math.floor(wordCount/500)}}~{{Math.ceil(wordCount/300)}}分钟</span> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="mySecret" v-if="myLock"> |
| | |
| | | </div> |
| | | |
| | | <div v-else> |
| | | |
| | | <div v-if="articleFileType==fileType.fileTypeTalking_9"> |
| | | <div class="markdown-body articleTitle"> |
| | | <h4>{{articelMeta.title}}</h4> |
| | | |
| | | <div class="introduceSamll" v-if="introduce.length==0"> |
| | | <div class="introduceSamll" v-if="introduce==null||introduce.length==0"> |
| | | <p>空荡荡的..我好像忘记写点什么了OωO</p> |
| | | </div> |
| | | <div class="introduce" v-else> |
| | |
| | | <div class="markdown-body articleTitle"> |
| | | <h4>{{articelMeta.title}}</h4> |
| | | </div> |
| | | <div class="playBox"> |
| | | <div class="playBox" |
| | | v-bind:class="{disabledPointer:articelMeta.videoUrlList==null||articelMeta.videoUrlList==0}"> |
| | | <videoPlayBox ref="videoPlayBox" :showTar="true"></videoPlayBox> |
| | | </div> |
| | | <div class="introduceSamll" v-if="articelMeta.videoUrlList==null||articelMeta.videoUrlList==0"> |
| | | <p>该视频资源仍未上传</p> |
| | | </div> |
| | | <div class="introduce"> |
| | | <pre style="white-space: pre-line;padding: 10px;max-width: 100%;"> |
| | | {{introduce}} |
| | | </pre> |
| | | </div> |
| | | |
| | | </div> |
| | | |
| | | <div class="introduce" v-else-if="articleFileType==fileType.fileTypePictures_5"> |
| | | <div class="markdown-body articleTitle"> |
| | | <h4>{{articelMeta.title}}</h4> |
| | | </div> |
| | | <div class="myPicture" @click="showPicture(articelMeta.pictureUrlList)"> |
| | | <div> |
| | | <img :src="articelMeta.pictureUrlList[0]" :key="articelMeta.id" alt="" loading="lazy" |
| | | :onerror="img404"> |
| | | |
| | | <div> |
| | | <div class="introduceSamll" |
| | | v-if="articelMeta.pictureUrlList==null ||articelMeta.pictureUrlList.length==0"> |
| | | <p>空荡荡的..好像忘记传图了</p> |
| | | </div> |
| | | <div style="text-align: center;">图组数量:{{articelMeta.pictureUrlList.length}}</div> |
| | | <div class="myPicture" @click="showPicture(articelMeta.pictureUrlList)" v-else> |
| | | <div> |
| | | <img :src="articelMeta.pictureUrlList[0]" :key="articelMeta.id" alt="" loading="lazy" |
| | | :onerror="img404"> |
| | | </div> |
| | | <div style="text-align: center;">图组数量:{{articelMeta.pictureUrlList.length}}</div> |
| | | </div> |
| | | </div> |
| | | <div class="introduce"> |
| | | <div class="introduce" v-if="introduce!=null && introduce.length>0"> |
| | | <pre style="white-space: pre-line;padding: 10px;max-width: 100%;"> |
| | | {{introduce}} |
| | | </pre> |
| | |
| | | <div class="articleTitle"> |
| | | <h4>{{articelMeta.title}}</h4> |
| | | </div> |
| | | <vue-markdown :source="source"></vue-markdown> |
| | | <vue-markdown :source="source" v-if="source== null || source.length>0"></vue-markdown> |
| | | |
| | | <div class="introduceSamll" v-else-if="introduce==null || introduce.length==0"> |
| | | <p>空荡荡的..我好像忘记写点什么了OωO</p> |
| | | </div> |
| | | |
| | | <div class="introduce" v-else> |
| | | <pre style="white-space: pre-line;padding: 10px;max-width: 100%;"> |
| | | {{introduce}} |
| | | </pre> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | |
| | | <div class="jumpURL" v-if="articelMeta.jumpURL"> |
| | | 外链:<a target="_blank" :href="articelMeta.jumpURL" :title="articelMeta.jumpURL">{{articelMeta.jumpURL}}</a> |
| | | </div> |
| | | |
| | | |
| | | <div class="articleInfoMiniData"> |
| | | |
| | | <div class="myTitleDeal"> |
| | |
| | | disabled: false |
| | | }, |
| | | videoData: { |
| | | img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg", |
| | | pic: "", |
| | | url: "", |
| | | type: "normal", |
| | | title: "", |
| | |
| | | }, |
| | | options: optionsConfig, |
| | | img404: myConstant.img404, |
| | | |
| | | wordCount: 0 |
| | | } |
| | | }, |
| | | created() { |
| | | this.articleId = this.$route.query.id; |
| | | this.articleFileType = this.$route.query.articleFileType; |
| | | this.typeId = this.$route.query.typeId; |
| | | |
| | | |
| | | }, |
| | | watch: { |
| | | '$route'(to, from) { |
| | |
| | | }, |
| | | }, |
| | | methods: { |
| | | getWordCount() { |
| | | var iTotal = 0; |
| | | var c; |
| | | for (var i = 0; i < this.source.length; i++) { |
| | | c = this.source.charAt(i); |
| | | //基本汉字 |
| | | if (c.match(/[\u4e00-\u9fa5]/)) { |
| | | iTotal++; |
| | | } |
| | | //基本汉字补充 |
| | | else if (c.match(/[\u9FA6-\u9fcb]/)) { |
| | | iTotal++; |
| | | } |
| | | } |
| | | this.wordCount = iTotal; |
| | | }, |
| | | articleOptionHandle(type) { |
| | | this.$message.info(type) |
| | | }, |
| | |
| | | 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.coverURL = myConstant.defaultBG; |
| | | } |
| | | |
| | | this.articelMeta = res.data; |
| | |
| | | this.source = res.data; |
| | | }).catch(() => [ |
| | | this.$message.error("获取文件好像失败了..", 3) |
| | | ]) |
| | | ]).finally(() => { |
| | | setTimeout(() => { |
| | | _this.getWordCount(); |
| | | }, 500); |
| | | }) |
| | | } |
| | | } else if (res.data.articleFileType == this.fileType.fileTypeVideo_3) { |
| | | if (res.data.videoUrlList == null || res.data.videoUrlList.length < 1) { |
| | |
| | | } else { |
| | | this.videoData.url = res.data.videoUrlList[0]; |
| | | |
| | | this.videoData.img = res.data.coverFileURL; |
| | | this.videoData.pic = res.data.coverFileURL; |
| | | this.videoData.title = res.data.title; |
| | | this.videoData.introduce = res.data.introduce; |
| | | this.videoData.id = res.data.id; |
| | | if (this.lastArticleId != this.articleId) { |
| | | console.log(111); |
| | | let tempParam = JSON.parse(JSON.stringify(this.videoData)) |
| | | |
| | | _this.$nextTick(function() { |
| | |
| | | <style lang="less"> |
| | | @import '../../assets/md.less'; |
| | | |
| | | .disabledPointer { |
| | | position: relative; |
| | | pointer-events: none; |
| | | filter: blur(0.9px) brightness(.8); |
| | | } |
| | | |
| | | .disabledPointer:before { |
| | | content: "\ec2a"; |
| | | z-index: 2; |
| | | font-size: 4rem; |
| | | font-family: 'iconfont'; |
| | | position: absolute; |
| | | top: 50%; |
| | | left: 50%; |
| | | transform: translate(-50%, -50%); |
| | | } |
| | | |
| | | .articleTitle { |
| | | h4 { |
| | | margin: 0px 0px 20px 0px; |
| | | margin: 0px 0px 10px 0px; |
| | | -webkit-line-clamp: 1; |
| | | } |
| | | |
| | | text-align: center; |
| | | width: 100%; |
| | | |
| | | } |
| | | |
| | | .myPicture { |
| | | display: grid; |
| | | width: 50%; |
| | | max-width: 70%; |
| | | margin: 0px auto; |
| | | padding: 20px 0px 0px 0px; |
| | | |
| | | img { |
| | |
| | | transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); |
| | | border-radius: 16px; |
| | | } |
| | | } |
| | | |
| | | .countMeta { |
| | | position: absolute; |
| | | bottom: 0px; |
| | | width: 100%; |
| | | background: #f0f2f5; |
| | | opacity: 0.6; |
| | | } |
| | | |
| | | .headertop { |
| | |
| | | max-width: 120px; |
| | | } |
| | | } |
| | | |
| | | .countMeta { |
| | | bottom: 10px; |
| | | } |
| | | } |
| | | </style> |