| src/assets/md.less | ●●●●● patch | view | raw | blame | history | |
| src/components/group/MyMessage.vue | ●●●●● patch | view | raw | blame | history | |
| src/components/mini/box10-add.vue | ●●●●● patch | view | raw | blame | history | |
| src/components/mini/box12-comment.vue | ●●●●● patch | view | raw | blame | history | |
| src/components/mini/box14-video.vue | ●●●●● patch | view | raw | blame | history | |
| src/components/mini/box15-videoPlayBox.vue | ●●●●● patch | view | raw | blame | history | |
| src/components/mini/box16-videoDetail.vue | ●●●●● patch | view | raw | blame | history | |
| src/components/mini/mdDetail.vue | ●●●●● patch | view | raw | blame | history | |
| src/components/mini/tagInfo.vue | ●●●●● patch | view | raw | blame | history | |
| src/config/myConstant.js | ●●●●● patch | view | raw | blame | history |
src/assets/md.less
@@ -81,6 +81,7 @@ color: #0099ff; margin: 0; padding: 0; word-wrap: break-word; vertical-align: baseline; } a:hover { src/components/group/MyMessage.vue
@@ -159,6 +159,7 @@ * { max-width: 100% !important; } } .myComment { @@ -172,4 +173,10 @@ height: 2rem; } } .myComment:hover { // background: #d0d7dc; background: #f5f8fa; border-radius: 14px; } </style> src/components/mini/box10-add.vue
@@ -70,7 +70,7 @@ <a-select-option value="3"> 视频 </a-select-option> <a-select-option value="3"> <a-select-option value="4"> 音频 </a-select-option> <a-select-option value="5"> src/components/mini/box12-comment.vue
@@ -270,6 +270,8 @@ justify-content: flex-end; } .commentList { a { color: black; @@ -306,9 +308,14 @@ } .commentGroup { border-top: 1px solid #e5e9ef; margin-bottom: 5px; padding-bottom: 0px; border-bottom: 1px solid #e5e9ef; } .commentGroup:hover { background: #e5e9ef; border-radius: 14px; border-bottom:none } .ant-comment-content-detail { @@ -319,5 +326,9 @@ margin-bottom: 0px; } } } </style> src/components/mini/box14-video.vue
@@ -16,7 +16,8 @@ <div class="entry-post"> <div class="entry-header"> <h5 class="entry-title"> <router-link :to="{path:'videoDetail',query:{id:item.id}}" :title="item.title"> <router-link :title="item.title" :to="{path:'videoDetail',query:{id:item.id}}"> {{item.title}} </router-link> <!-- {{item.title}} --> @@ -29,7 +30,10 @@ <div class="post-categories"> <span class="tag vcard"> <a-icon type="customer-service" /> <a href="#" rel="category tag"> {{item.articleTypeName}}</a> <router-link :title="item.articleTypeName" :to="{path:'articleList',query:{typeId:item.articleTypeId}}"> {{item.articleTypeName}} </router-link> </span> <!-- <span class="tag-list"> <a href="#" rel="tag">影评</a> @@ -248,7 +252,7 @@ border: 1px solid rgba(255, 255, 255, .75); opacity: 0; height: 70%; transition: all .5s; transition: all .3s; z-index: 2; color: white; border-radius: @--border-radius; src/components/mini/box15-videoPlayBox.vue
@@ -3,7 +3,7 @@ <div v-if="!this.$attrs.showTar"> 正在播放: <span> {{playingVideoData.title}} </span> </div> <div class="myVideo fade"> <div class="myVideo fade" v-bind:class="{disabledPointer:disabledPointer}"> <div id="videoPlay" ref="myVdeoPlay"></div> </div> <div style="border-radius: 0 0 4px 4px;" v-if="!this.$attrs.showTar"> @@ -55,6 +55,7 @@ export default { data() { return { disabledPointer: false, dp: null, playHistory: [], playRecordIds: [], @@ -64,7 +65,7 @@ currentTime: 0, duration: 0, playingVideoData: { img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg", pic: "http://t.inleft.com/share/media_photo/idea_beijing.jpg", url: "", type: "normal", title: "", @@ -79,7 +80,7 @@ var _this = this; //调整音量 _this.$message.success("模块加载完成,请注意音量是否合适..") //_this.$message.success("模块加载完成,请注意音量是否合适..") this.dp.volume(this.volumeInit, true, false); @@ -101,6 +102,13 @@ this.dp.on('volumechange', function() { _this.volumeInit = _this.dp.video.volume; }); this.dp.on('loadedmetadata', function() { _this.duration = _this.dp.video.duration; }); this.dp.on('error', function() { _this.duration = 0 _this.disabledPointer = true }); }, methods: { @@ -120,6 +128,7 @@ }, //切换视频源 swichPlay(videoId) { if (this.swichLock) { this.$message.info("切换太快啦,缓一缓..", 5) return @@ -163,14 +172,13 @@ this.$message.error("无效资源..") return } if (videoData.url != null && videoData.urlL != "" && videoData.url.endsWith("m3u8")) { videoData.type = "customHls"; } else { videoData.type = "normal"; } //重要!!防止hls类型视频在切换后不停在后台缓存 if (this.hls != null) { this.hls.destroy(); @@ -180,12 +188,16 @@ this.playingVideoData = videoData this.disabledPointer = false; this.isPlaying = false; //重要!!防止hls类型视频在切换后不停在后台缓存 if (videoData.type == "customHls") { this.hls = new Hls(); } this.dp.notice("播放器加载完成..", 3) this.dp.switchVideo(this.playingVideoData) @@ -232,7 +244,18 @@ if (_this.hls != null) { _this.hls.loadSource(video.src) _this.hls.attachMedia(video) // 监听Hls.Events.ERROR事件， // DNS解析、下载超时，都会触发manifestLoadError错误 _this.hls.on(Hls.Events.ERROR, function(eventName, data) { // 埋点上报，可以追踪data.details // track() _this.$message.error("hls加载异常", 5) console.log(eventName); console.log(data); }) } } } } @@ -292,7 +315,7 @@ height: 180px; background-color: #565656; border-radius: 10px; margin: 20px 0px; margin: 20px auto; display: grid; }
@@ -166,17 +166,19 @@ if (res.data.videoUrlList == null || res.data.videoUrlList.length < 1) { this.$notification.error({ message: '该日志还没有上传视频资源..', message: '此视频还没有上传资源..', placement: 'bottomRight' }); this.videoData.url = ""; } else { this.videoData.url = res.data.videoUrlList[0]; } this.isAllowedComment = res.data.isAllowedComment; this.introduce = res.data.introduce; 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; @@ -193,7 +195,6 @@ } </script> <style lang="less"> .boxMain { user-select: none; grid-template-columns: repeat(2, 1fr); src/components/mini/mdDetail.vue
@@ -47,26 +47,38 @@ <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"> <pre style="white-space: pre-line;padding: 10px;max-width: 100%;"> @@ -79,7 +91,17 @@ <div class="articleTitle"> <h4>{{articelMeta.title}}</h4> </div> <vue-markdown :source="source"></vue-markdown> <vue-markdown :source="source" v-if="source.length>0"></vue-markdown> <div class="introduceSamll" v-else-if="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> @@ -109,7 +131,7 @@ <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"> @@ -198,7 +220,7 @@ disabled: false }, videoData: { img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg", pic: "", url: "", type: "normal", title: "", @@ -213,8 +235,6 @@ this.articleId = this.$route.query.id; this.articleFileType = this.$route.query.articleFileType; this.typeId = this.$route.query.typeId; }, watch: { '$route'(to, from) { @@ -287,7 +307,7 @@ 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; @@ -312,12 +332,11 @@ } 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() { @@ -356,20 +375,36 @@ <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 { src/components/mini/tagInfo.vue
@@ -5,7 +5,7 @@ <a-page-header title="关于我的一些..小故事" style="padding: 10px 0px 20px 0px;" @back="() => this.$router.go(-1)" /> <a-timeline pending="..."> <p slot="pendingDot" style="font-size: 18px;" /> <a-timeline-item color=""> <a-timeline-item color="" style="margin-left: 10px;"> <!-- <a-icon slot="dot" type="form" style="font-size: 18px;" /> --> <a-icon type="message" slot="dot" style="font-size: 18px;" /> <br> @@ -16,11 +16,10 @@ <li> 爱音乐,也爱看番 </li> <li> B界的白嫖怪</li> <li> PC单机的 <!-- <span class="myTip">伪</span> --><span class="myTip" style="text-decoration:line-through">硬核</span>玩家 <!-- <span class="myTip">伪</span> --> <span class="myTip" style="text-decoration:line-through">硬核</span>玩家 </li> <li> <img src="http://t.inleft.com/share/media_photo/xm.jpg" style="width: 50px;border-radius: 20px;" /> 我的小老弟&御用暖床袋 @@ -29,13 +28,12 @@ <span style="font-size: 10px;color: #999">(小乖)</span> </li> <br> <!-- <li> touch: inleft#qq.com</li><span style="font-size: 10px;color: #999">替换#为@</span> --> </ul> </p> </a-timeline-item> <!-- </a-timeline> <!-- 寻找天堂这部作品更引起了我的共鸣 这个时间点之前,瞰哥还有另一个神作,去月球,我也很喜欢这个 讲的是一个十分感人的爱情故事 @@ -44,117 +42,129 @@ 因而<<to the moon>> 这首曲子也在我的曲库里 --> <br> <h3 class="layui-timeline-title">那些对我而言,有意义的时刻..</h3> <br> <a-timeline-item color=""> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3 class="layui-timeline-title">2022-08-11</h3> <p>更新:优化了视频模块,现在可以在 <router-link :to="{path:'/platform'}">「月 台」</router-link>看到新发布的视频啦 </p> <p class="myTip">谱子??谱子还没想好放哪里..</p> </a-timeline-item> <a-timeline-item color=""> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3 class="layui-timeline-title">2022-07-29</h3> <span> <router-link to="/comment">优化更新:记住到访的朋友</router-link> <p class="myTip">你的名字.</p> </span> <p>更新:近期更新日志添加小红点提示</p> <p>更新:碎碎念类型日志优化提示</p> <p>新增:拉取最近几条互动记录</p> <p>新增:外链类型日志 for <span class="myTip">浅浅子</span> </p> </a-timeline-item> <a-timeline-item color=""> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3 class="layui-timeline-title">2022-03-03</h3> <span> <router-link to="/comment">碎碎念</router-link> </span> <p class="myTip">虽然没啥用,可万一有人想给我留言呢☺☺️</p> </a-timeline-item> <a-timeline-item color=""> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3 class="layui-timeline-title">2022-02-22</h3> <span style="text-decoration:line-through">全新的</span><span>vue系列+spring全家桶搭建的blog部署上线</span> <p class="myTip">(终于是赶在这个全是2的日子前把旧站有用的数据迁移了过来)</p> </a-timeline-item> <h3 style="text-align: center;">那些对我而言,有意义的时刻..</h3> <br> <a-tabs defaultActiveKey="1" :tabBarStyle="{'display': 'flex','justify-content': 'center'}"> <a-tab-pane key="1" tab="编年史"> <a-timeline> <a-timeline-item color="" style="margin-left: 10px;"> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px; " /> <p>2022-02-22</p> <span style="text-decoration:line-through">全新的</span><span>vue系列+spring全家桶搭建的blog部署上线</span> <p class="myTip">(终于是赶在这个全是2的日子前把旧站有用的数据迁移了过来)</p> </a-timeline-item> <a-timeline-item color=""> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3 class="layui-timeline-title">2022-01-11</h3> <p>3号机计划开始,新的blog代码提交的第一行</p> </a-timeline-item> <a-timeline-item color="" style="margin-left: 10px;"> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3>2022-01-11</h3> <p>3号机计划开始,新的blog代码提交的第一行</p> </a-timeline-item> <a-timeline-item color=""> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3 class="layui-timeline-title">2022-01-06</h3> <p>迁移1号机上的svn,启用3号机下的gitblit</p> </a-timeline-item> <a-timeline-item color="" style="margin-left: 10px;"> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3>2022-01-06</h3> <p>迁移1号机上的svn,启用3号机下的gitblit</p> </a-timeline-item> <a-timeline-item color=""> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3 class="layui-timeline-title">2022-01-04</h3> <p>迁移1号机的文件仓库到3号机</p> </a-timeline-item> <a-timeline-item color="" style="margin-left: 10px;"> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3>2022-01-04</h3> <p>迁移1号机的文件仓库到3号机</p> </a-timeline-item> <a-timeline-item color=""> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3 class="layui-timeline-title">2021-11-23</h3> <p>完成技术选型,抛弃笨重的jeecg,就决定是你了<a href="https://xiaonuo.vip" target="_blank">xiaonuo</a></p> </a-timeline-item> <a-timeline-item color="" style="margin-left: 10px;"> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3>2021-11-23</h3> <p>完成技术选型,抛弃笨重的jeecg,就决定是你了<a href="https://xiaonuo.vip" target="_blank">xiaonuo</a></p> </a-timeline-item> <a-timeline-item color=""> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3 class="layui-timeline-title">2021-11-11</h3> <p>被告知腾讯双11活动背刺,3号机计划启动</p> </a-timeline-item> <a-timeline-item color="" style="margin-left: 10px;"> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3>2021-11-11</h3> <p>被告知腾讯双11活动背刺,3号机计划启动</p> </a-timeline-item> <a-timeline-item color=""> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3 class="layui-timeline-title">2021-10-13</h3> <p>layui官网正式关闭..</p> </a-timeline-item> <a-timeline-item color="" style="margin-left: 10px;"> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3>2021-10-13</h3> <p>layui官网正式关闭..</p> </a-timeline-item> <a-timeline-item color=""> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3 class="layui-timeline-title">2021-07-30</h3> <p>腾讯2号机续费,暂时旅居在typecho下</p> </a-timeline-item> <a-timeline-item color="" style="margin-left: 10px;"> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3>2021-07-30</h3> <p>腾讯2号机续费,暂时旅居在typecho下</p> </a-timeline-item> <a-timeline-item color=""> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3 class="layui-timeline-title">2020-05-27</h3> <span>扬帆,起航,layui第一版blog单页 面世</span> <span class="myTip">(咕了,没有后文..)</span> </a-timeline-item> <a-timeline-item color="" style="margin-left: 10px;"> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3>2020-05-27</h3> <span>扬帆,起航,layui第一版blog单页 面世</span> <span class="myTip">(咕了,没有后文..)</span> </a-timeline-item> <a-timeline-item color=""> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3 class="layui-timeline-title">2019-01-02</h3> <span>域名备案完成</span> </a-timeline-item> <a-timeline-item color="" style="margin-left: 10px;"> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3>2019-01-02</h3> <span>域名备案完成</span> </a-timeline-item> <a-timeline-item color=""> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3 class="layui-timeline-title">2018-12-21</h3> <span>拿下域名:inleft.com</span> <p>阿里云初代机 启动</p> </a-timeline-item> <!-- <a-timeline-item color=""> <a-icon slot="dot" type="align-left" style="font-size: 18px;" /> <br><em>爱她所爱,思她所思,为她承担伤痛</em> <br>度过苦难 无论贫寒,无论卑贱或富贵 <br>无论身处乱世还是神所不顾 我都愿为她拔剑而战 <br>为她收起翅膀 <br>不离不弃,直至永远 </a-timeline-item> --> </a-timeline> <a-timeline-item color="" style="margin-left: 10px;"> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3>2018-12-21</h3> <span>拿下域名:inleft.com</span> <p>阿里云初代机 启动</p> </a-timeline-item> </a-timeline> <!-- <a-timeline-item color="" style="margin-left: 10px;"> <a-icon slot="dot" type="align-left" style="font-size: 18px;" /> <br><em>爱她所爱,思她所思,为她承担伤痛</em> <br>度过苦难 无论贫寒,无论卑贱或富贵 <br>无论身处乱世还是神所不顾 我都愿为她拔剑而战 <br>为她收起翅膀 <br>不离不弃,直至永远 </a-timeline-item> --> </a-tab-pane> <a-tab-pane key="2" tab="更新记录"> <a-timeline> <a-timeline-item color="" style="margin-left: 10px;"> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px; " /> <h3>2022-08-25</h3> <p>更新:拓展了数据库字段,日志可以支持更加丰富的媒体类型了</p> </a-timeline-item> <a-timeline-item color="" style="margin-left: 10px;"> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3>2022-08-11</h3> <p>更新:优化了视频模块,现在可以在 <router-link :to="{path:'/platform'}">「月 台」</router-link>看到新发布的视频啦 </p> <p class="myTip">谱子??谱子还没想好放哪里..</p> </a-timeline-item> <a-timeline-item color="" style="margin-left: 10px;"> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3>2022-07-29</h3> <span> <router-link to="/comment">优化更新:记住到访的朋友</router-link> <p class="myTip">你的名字.</p> </span> <p>更新:近期更新日志添加小红点提示</p> <p>更新:碎碎念类型日志优化提示</p> <p>新增:拉取最近几条互动记录</p> <p>新增:外链类型日志 for <span class="myTip">浅浅子</span> </p> </a-timeline-item> <a-timeline-item color="" style="margin-left: 10px;"> <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" /> <h3>2022-03-03</h3> <span> <router-link to="/comment">碎碎念</router-link> </span> <p class="myTip">虽然没啥用,可万一有人想给我留言呢☺☺️</p> </a-timeline-item> </a-timeline> </a-tab-pane> </a-tabs> </div> </template> src/config/myConstant.js
@@ -4,6 +4,7 @@ visitorDataKey: "visitorData.inleft.com", userName: "inleft", img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/idea_beijing.jpg\"", defaultBG:"http://t.inleft.com/share/media_photo/background.jpg", fileType: { fileTypeMarkDown_1: 1, fileTypeHtml_2: 2,
