15 files modified
2 files added
5 files deleted
| | |
| | | params: parameter |
| | | }) |
| | | } |
| | | |
| | | |
| | | /** |
| | | *添加链接 |
| | | */ |
| | | export function addLink(data) { |
| | | return axios({ |
| | | url: '/outside/blogLink/add', |
| | | method: 'post', |
| | | data: data |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | *获取链接类型 |
| | | */ |
| | | export function getLinkType() { |
| | | return axios({ |
| | | url: '/outside/blogLink/getLinkType', |
| | | method: 'get', |
| | | }) |
| | | } |
New file |
| | |
| | | <template> |
| | | <div class="myModal"> |
| | | <a-modal v-model="visible" title="添加链接.." :bodyStyle="{'overflow':'overlay','maxHeight': '550px'}" |
| | | on-ok="handleOk"> |
| | | <template slot="footer"> |
| | | <a-button key="submit" type="primary" :loading="loading" @click="handleOk"> |
| | | ok |
| | | </a-button> |
| | | </template> |
| | | <LinkAdd ref="linkAddBox"></LinkAdd> |
| | | </a-modal> |
| | | </div> |
| | | |
| | | </template> |
| | | |
| | | <script> |
| | | import LinkAdd from "../mini/box-17-linkAdd.vue" |
| | | import { |
| | | addLink |
| | | } from '../../api/blogLink.js' |
| | | |
| | | export default { |
| | | components: { |
| | | LinkAdd |
| | | }, |
| | | data() { |
| | | return { |
| | | visible: false, |
| | | loading: false, |
| | | } |
| | | }, |
| | | methods: { |
| | | showModal() { |
| | | this.visible = true; |
| | | }, |
| | | handleCancel(e) { |
| | | this.visible = false; |
| | | }, |
| | | handleOk(e) { |
| | | console.log(this.$refs.linkAddBox.form); |
| | | var res; |
| | | this.$refs.linkAddBox.$refs.myForm.validate(valid => { |
| | | if (valid) { |
| | | this.$message.info("校验通过") |
| | | res = true; |
| | | } else { |
| | | this.$message.info("校验失败") |
| | | res = false; |
| | | } |
| | | }); |
| | | |
| | | if (!res) return; |
| | | this.$message.info("提交表单") |
| | | |
| | | let tempData = this.$refs.linkAddBox.form; |
| | | |
| | | |
| | | |
| | | console.log(tempData) |
| | | this.loading = true; |
| | | addLink(tempData).then((res) => { |
| | | this.$message.info("添加成功..") |
| | | this.visible = false; |
| | | this.loading = false; |
| | | }); |
| | | } |
| | | |
| | | }, |
| | | } |
| | | </script> |
| | | <style scoped> |
| | | |
| | | </style> |
| | |
| | | }, |
| | | beforeMount() {}, |
| | | mounted() { |
| | | this.loadData() |
| | | this.loadMore() |
| | | }, |
| | | methods: { |
| | | loadMore() { |
| | |
| | | <template> |
| | | <div class="myModal"> |
| | | <a-modal v-model="visible" title="视频盒子" :footer="null" :mask="false" :maskClosable="true" |
| | | :bodyStyle="{'overflow':'overlay','maxHeight': '750px'}"> |
| | | :bodyStyle="{'overflow':'overlay','maxHeight': '750px'}" :afterClose="afterClose"> |
| | | <videoDetail ref="videoDetail"></videoDetail> |
| | | </a-modal> |
| | | </div> |
| | | |
| | | </template> |
| | | |
| | | <script> |
| | |
| | | handleCancel(e) { |
| | | this.visible = false; |
| | | }, |
| | | |
| | | afterClose() { |
| | | this.$emit("closeMyVideo") |
| | | } |
| | | }, |
| | | } |
| | | </script> |
| | |
| | | <script> |
| | | import infiniteScroll from 'vue-infinite-scroll'; |
| | | import box5 from "../mini/box5-article.vue" |
| | | import babyActicle from '../../assets/baby.htm' |
| | | import newArticle from "../mini/box-new-article.vue" |
| | | import shijie from '../../assets/shijie.htm' |
| | | import { |
| | | queryBlogArticleList |
| | | } from '../../api/blogArticle.js' |
| | | |
| | | |
| | | |
| | | export default { |
| | |
| | | total: 1, |
| | | pageSize: 6, |
| | | current: 1, |
| | | defaultPageSize: 10 |
| | | defaultPageSize: 10, |
| | | }; |
| | | }, |
| | | created() { |
| | |
| | | }, |
| | | methods: { |
| | | addLink() { |
| | | this.$message.info("添加友链中..") |
| | | this.$emit('addLink') |
| | | }, |
| | | showMessage() { |
| | | this.$emit('showMessage') |
| | |
| | | <a-layout-footer> |
| | | <AplayerBox /> |
| | | <tagFooter /> |
| | | <MyVideo ref="MyVideo" /> |
| | | <a-button v-if="miniVideoPlayData!=null" class="fadeInRight" |
| | | style="position: fixed;right: 0px;bottom: 120px;" @click="showMyVideo(miniVideoPlayData)"> |
| | | 视频盒子 |
| | | <a-icon type="youtube" /> |
| | | <MyVideo ref="MyVideo" @closeMyVideo="closeMyVideo" /> |
| | | |
| | | <a-button v-if="miniVideoPlayData!=null && showMiniBox" class="fadeInRight" |
| | | style="position: fixed;right: 0px;bottom: 130px;" @click="showMyVideo(miniVideoPlayData)"> |
| | | {{miniBoxContent}} |
| | | <a-icon type="youtube" style="transform: scale(1.5);" /> |
| | | </a-button> |
| | | </a-layout-footer> |
| | | |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | // Dplayer Api地址 |
| | | // http://dplayer.js.org/ |
| | | import tagHeader from "../fixed/header.vue" |
| | | import tagFooter from "../fixed/footer.vue" |
| | | import AplayerBox from "../mini/Aplayer.vue" |
| | |
| | | data() { |
| | | return { |
| | | miniVideoPlayData: null, |
| | | showMiniBox: false |
| | | firstQuery: true, |
| | | showMiniBox: false, |
| | | miniBoxContent: "视频盒子", |
| | | } |
| | | }, |
| | | methods: { |
| | | showMyVideo(param) { |
| | | this.miniVideoPlayData = param; |
| | | console.log("开启mini盒子"); |
| | | |
| | | |
| | | this.$refs.MyVideo.showModal(param); |
| | | if (!this.showMiniBox) { |
| | | }, |
| | | closeMyVideo() { |
| | | if (this.firstQuery) { |
| | | this.firstQuery = !this.firstQuery; |
| | | this.showMiniBox = !this.showMiniBox; |
| | | this.$notification.info({ |
| | | message: '这里是盒子的最小化啦..', |
| | | message: '视频盒子最小化啦..', |
| | | placement: 'bottomRight', |
| | | }); |
| | | this.showMiniBox = true; |
| | | |
| | | setTimeout(() => { |
| | | this.miniBoxContent = ""; |
| | | }, 6000); |
| | | } |
| | | }, |
| | | // 下载文件 |
New file |
| | |
| | | <template> |
| | | <div> |
| | | <a-form-model ref="myForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules"> |
| | | |
| | | <a-form-model-item label="名称" prop="name"> |
| | | <a-input v-model="form.name" placeholder="链接名称"> |
| | | </a-input> |
| | | </a-form-model-item> |
| | | |
| | | <a-form-model-item label="链接地址" prop="url"> |
| | | <a-input v-model="form.url" placeholder="https:// or http://" /> |
| | | </a-form-model-item> |
| | | |
| | | <a-form-model-item label="分类" prop="linkType"> |
| | | <a-select v-model="form.linkType" mode="default" placeholder="链接类型" |
| | | :getPopupContainer="getCalendarContainer()"> |
| | | <a-select-option v-for="(item,index) in this.linkTypeList" :key="index" :value="item.linkTypeId"> |
| | | {{ item.groupName }} |
| | | </a-select-option> |
| | | </a-select> |
| | | </a-form-model-item> |
| | | |
| | | <a-form-model-item label="avatar" prop="avatar"> |
| | | <a-input v-model="form.avatar" placeholder="链接图片地址" /> |
| | | </a-form-model-item> |
| | | |
| | | <a-form-model-item label="remark" prop="remark"> |
| | | <a-input v-model="form.remark" placeholder="备注" /> |
| | | </a-form-model-item> |
| | | |
| | | <a-form-model-item label="权重"> |
| | | <a-slider v-model="form.topValue" :default-value="50" :step="5" |
| | | :getTooltipPopupContainer="getCalendarContainer()" /> |
| | | <span class="myTip"> |
| | | 越小越靠前 |
| | | </span> |
| | | </a-form-model-item> |
| | | |
| | | </a-form-model> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { |
| | | getLinkType |
| | | } from '../../api/blogLink.js' |
| | | |
| | | export default { |
| | | data() { |
| | | return { |
| | | form: { |
| | | name: '', |
| | | url: '', |
| | | avatar: '', |
| | | remark: '', |
| | | linkType: '', |
| | | topValue: 50, |
| | | isNewWindowOpen: 1 |
| | | }, |
| | | linkTypeList: [], |
| | | labelCol: { |
| | | span: 7 |
| | | }, |
| | | wrapperCol: { |
| | | span: 13 |
| | | }, |
| | | rules: { |
| | | name: [{ |
| | | required: true, |
| | | message: '名称不能为空', |
| | | trigger: 'blur' |
| | | }, |
| | | { |
| | | min: 1, |
| | | max: 50, |
| | | message: '字数限制1~50', |
| | | trigger: 'blur' |
| | | }, |
| | | ], |
| | | url: [{ |
| | | required: true, |
| | | message: 'URL不能为空', |
| | | trigger: 'blur' |
| | | }, |
| | | { |
| | | min: 1, |
| | | max: 200, |
| | | message: '字数限制1~200', |
| | | trigger: 'blur' |
| | | }, |
| | | { |
| | | trigger: 'blur', |
| | | pattern: /^((https|http)?:\/\/)[^\s]+/, |
| | | message: '仅支持 https | http' |
| | | } |
| | | ], |
| | | linkType: [{ |
| | | required: true, |
| | | message: '至少选一个分类', |
| | | trigger: 'blur' |
| | | }], |
| | | avatar: [{ |
| | | required: false, |
| | | }, { |
| | | trigger: 'blur', |
| | | pattern: /^((https|http)?:\/\/)[^\s]+/, |
| | | message: '仅支持 https | http' |
| | | }], |
| | | |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | | getCalendarContainer(trigger) { |
| | | return trigger => trigger.parentNode; |
| | | }, |
| | | }, |
| | | beforeMount() { |
| | | getLinkType({}).then((res) => { |
| | | this.linkTypeList = res.data; |
| | | }) |
| | | }, |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | </style> |
| | |
| | | line-height: 1.7; |
| | | color: #999; |
| | | display: -webkit-container; |
| | | -webkit-line-clamp: 3; |
| | | -webkit-line-clamp: 2; |
| | | text-overflow: ellipsis; |
| | | overflow: hidden; |
| | | min-height: 20px; |
| | | } |
| | | } |
| | | |
| | |
| | | } from '../../api/blogArticleType.js' |
| | | |
| | | import myConstant from "../../config/myConstant.js" |
| | | import md5 from 'js-md5'; |
| | | |
| | | export default { |
| | | beforeMount() { |
| | |
| | | ], |
| | | secret: [{ |
| | | required: true, |
| | | message: '不正经的人..', |
| | | message: '好像这里错了..', |
| | | trigger: 'blur' |
| | | }], |
| | | common: [{ |
| | |
| | | }, |
| | | beforeUploadCover(file, fileList) { |
| | | return new Promise((resolve, reject) => { |
| | | if (this.form.secret == null || this.form.secret == "") { |
| | | this.$message.error('需要正确的授权码'); |
| | | return reject(false); |
| | | } |
| | | |
| | | if (this.form.coverFileList.length >= 1) { |
| | | this.$message.error('这里最多上传一个文件'); |
| | | return reject(false); |
| | |
| | | }, |
| | | beforeUpload(file, fileList) { |
| | | return new Promise((resolve, reject) => { |
| | | if (this.form.secret == null || this.form.secret == "") { |
| | | this.$message.error('需要正确的口令..'); |
| | | return reject(false); |
| | | } |
| | | |
| | | if (this.form.blogFileList.length >= 1) { |
| | | this.$message.error('这里最多上传一个文件'); |
| | | return reject(false); |
| | |
| | | const formData = new FormData() |
| | | formData.append('file', option.file) |
| | | formData.append('fileType', option.data.fileType) |
| | | formData.append('authCode', this.form.secret) |
| | | formData.append('authCode', this.form.secret == "" ? "" : md5(this.form.secret)) |
| | | myFileInfoUpload(formData).then((res) => { |
| | | if (res.success) { |
| | | this.$message.success('上传成功') |
| | |
| | | </a-form-model-item> |
| | | <a-form-model-item label="认证" |
| | | v-show="form.nickName=='inleft'||form.nickName=='笔墨'||form.nickName=='阿墨'"> |
| | | <a-input-password v-model="form.authCode" autocomplete='new-password' type="password" |
| | | placeholder="我的授权码"> |
| | | <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" /> |
| | | </a-input-password> |
| | | <a-input v-model="form.authCode" autocomplete='new-password' type="password" placeholder="我的授权码"> |
| | | </a-input> |
| | | </a-form-model-item> |
| | | </a-form-model> |
| | | </div> |
| | |
| | | <template> |
| | | <div> |
| | | <div> |
| | | 正在播放: <span> {{defalutTitle}} </span> |
| | | </div> |
| | | <div class="myVideo"> |
| | | <div id="videoPlay" ref="test1" class="dplayer"></div> |
| | | <!-- <div class="mark" ></div> --> |
| | | <!-- 视频 --> |
| | | <div class="player-video-state"> |
| | | <span class="bp-svgicon"> |
| | | <svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" |
| | | xmlns:xlink="http://www.w3.org/1999/xlink"> |
| | | <defs> |
| | | <path id="pid-1-svgo-a" d="M0 0h80v80H0z"></path> |
| | | <path |
| | | d="M52.546 8.014a3.998 3.998 0 014.222 3.077c.104.446.093.808.039 1.138a2.74 2.74 0 01-.312.881c-.073.132-.16.254-.246.376l-.257.366-.521.73c-.7.969-1.415 1.926-2.154 2.866l-.015.02a240.945 240.945 0 015.986.341l1.643.123.822.066.41.034.206.018.103.008.115.012c1.266.116 2.516.45 3.677.975a11.663 11.663 0 013.166 2.114c.931.87 1.719 1.895 2.321 3.022a11.595 11.595 0 011.224 3.613c.03.157.046.316.068.474l.015.119.013.112.022.206.085.822.159 1.646c.1 1.098.19 2.198.27 3.298.315 4.4.463 8.829.36 13.255a166.489 166.489 0 01-.843 13.213c-.012.127-.034.297-.053.454a7.589 7.589 0 01-.072.475l-.04.237-.05.236a11.762 11.762 0 01-.74 2.287 11.755 11.755 0 01-5.118 5.57 11.705 11.705 0 01-3.623 1.263c-.158.024-.316.052-.475.072l-.477.053-.821.071-1.644.134c-1.096.086-2.192.16-3.288.23a260.08 260.08 0 01-6.578.325c-8.772.324-17.546.22-26.313-.302a242.458 242.458 0 01-3.287-.22l-1.643-.129-.822-.069-.41-.035-.206-.018c-.068-.006-.133-.01-.218-.02a11.566 11.566 0 01-3.7-.992 11.732 11.732 0 01-5.497-5.178 11.73 11.73 0 01-1.215-3.627c-.024-.158-.051-.316-.067-.475l-.026-.238-.013-.119-.01-.103-.07-.823-.132-1.648a190.637 190.637 0 01-.22-3.298c-.256-4.399-.358-8.817-.258-13.233.099-4.412.372-8.811.788-13.197a11.65 11.65 0 013.039-6.835 11.585 11.585 0 016.572-3.563c.157-.023.312-.051.47-.07l.47-.05.82-.07 1.643-.13a228.493 228.493 0 016.647-.405l-.041-.05a88.145 88.145 0 01-2.154-2.867l-.52-.73-.258-.366c-.086-.122-.173-.244-.246-.376a2.74 2.74 0 01-.312-.881 2.808 2.808 0 01.04-1.138 3.998 3.998 0 014.22-3.077 2.8 2.8 0 011.093.313c.294.155.538.347.742.568.102.11.19.23.28.35l.27.359.532.72a88.059 88.059 0 012.06 2.936 73.036 73.036 0 011.929 3.03c.187.313.373.628.556.945 2.724-.047 5.447-.056 8.17-.038.748.006 1.496.015 2.244.026.18-.313.364-.624.549-.934a73.281 73.281 0 011.93-3.03 88.737 88.737 0 012.059-2.935l.533-.72.268-.359c.09-.12.179-.24.281-.35a2.8 2.8 0 011.834-.881zM30.13 34.631a4 4 0 00-.418 1.42 91.157 91.157 0 00-.446 9.128c0 2.828.121 5.656.364 8.483l.11 1.212a4 4 0 005.858 3.143c2.82-1.498 5.55-3.033 8.193-4.606a177.41 177.41 0 005.896-3.666l1.434-.942a4 4 0 00.047-6.632 137.703 137.703 0 00-7.377-4.708 146.88 146.88 0 00-6.879-3.849l-1.4-.725a4 4 0 00-5.382 1.742z" |
| | | id="pid-1-svgo-d"></path> |
| | | <filter x="-15.4%" y="-16.3%" width="130.9%" height="132.5%" filterUnits="objectBoundingBox" |
| | | id="pid-1-svgo-c"> |
| | | <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> |
| | | <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"> |
| | | </feGaussianBlur> |
| | | <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" in="shadowBlurOuter1" |
| | | result="shadowMatrixOuter1"></feColorMatrix> |
| | | <feOffset in="SourceAlpha" result="shadowOffsetOuter2"></feOffset> |
| | | <feGaussianBlur stdDeviation="3.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"> |
| | | </feGaussianBlur> |
| | | <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" in="shadowBlurOuter2" |
| | | result="shadowMatrixOuter2"></feColorMatrix> |
| | | <feMerge> |
| | | <feMergeNode in="shadowMatrixOuter1"></feMergeNode> |
| | | <feMergeNode in="shadowMatrixOuter2"></feMergeNode> |
| | | </feMerge> |
| | | </filter> |
| | | </defs> |
| | | <g fill="none" fill-rule="evenodd" opacity=".8"> |
| | | <mask id="pid-1-svgo-b" fill="#fff"> |
| | | <use xlink:href="#pid-1-svgo-a"></use> |
| | | </mask> |
| | | <g mask="url(#pid-1-svgo-b)"> |
| | | <use fill="#000" filter="url(#pid-1-svgo-c)" xlink:href="#pid-1-svgo-d"></use> |
| | | <use fill="#FFF" xlink:href="#pid-1-svgo-d"></use> |
| | | </g> |
| | | </g> |
| | | </svg> |
| | | </span> |
| | | <div id="videoPlay" ref="myVdeoPlay"></div> |
| | | </div> |
| | | <div style="border-radius: 0 0 4px 4px;"> |
| | | <div style="padding: 10px 0px;"> |
| | | 音量 : |
| | | <a-slider v-model="volumeInit" :default-value="0.1" :step="0.1" :max="1" @change="changeVolume" /> |
| | | </div> |
| | | <a-collapse> |
| | | <!-- v-if="playHistory.length>1" --> |
| | | <a-collapse-panel key="playList" header="播放记录"> |
| | | <div class="playItem" v-for="(item,index) in playHistory"> |
| | | {{item.title}} |
| | | <a-icon v-if="index==0" type="youtube" class="playIcon" /> |
| | | </div> |
| | | </a-collapse-panel> |
| | | </a-collapse> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | defalutImg: "http://t.inleft.com/share/media_photo/idea_beijing.jpg", |
| | | defalutTitle: "", |
| | | dp: null, |
| | | video: {}, |
| | | firstLoad: true |
| | | firstLoad: true, |
| | | volumeInit: 0.1, |
| | | isPlaying: false, |
| | | playHistory: [], |
| | | playHistoryId: {}, |
| | | } |
| | | }, |
| | | mounted() { |
| | | //弹窗初始化后先不加载视频,等待手动播放 |
| | | this.init(); |
| | | }, |
| | | methods: { |
| | | myPlay() { |
| | | this.$message.info("start play..") |
| | | changeVolume(value) { |
| | | this.dp.volume(value, true, false); |
| | | }, |
| | | changePlay(videoData) { |
| | | console.log(111); |
| | | this.defalutTitle = videoData.title; |
| | | if (this.playHistoryId[videoData.id] != null) { |
| | | this.playHistory = this.playHistory.filter(item => item.id == videoData.id); |
| | | this.playHistory.unshift(videoData) |
| | | return |
| | | } else { |
| | | this.playHistoryId[videoData.id] = videoData; |
| | | this.playHistory.unshift(videoData) |
| | | } |
| | | |
| | | // this.video = { |
| | | // img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg", |
| | | // url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3", |
| | |
| | | |
| | | // 以下为隐藏一些作者的信息和视频播放源 如不需要可删除 |
| | | // document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单 |
| | | document.querySelector(".dplayer-mask").remove(); |
| | | document.querySelector(".dplayer-info-panel-item-url").remove(); //隐藏播放源 |
| | | let length = document.querySelectorAll(".dplayer-menu-item").length; |
| | | document.querySelectorAll(".dplayer-menu-item")[length - 1].remove(); // 去掉作者信息 |
| | | document.querySelectorAll(".dplayer-menu-item")[length - 2].remove(); // 去掉作者信息 |
| | | |
| | | |
| | | // document.querySelector(".dplayer-mask").remove(); |
| | | // document.querySelector(".dplayer-info-panel-item-url").remove(); //隐藏播放源 |
| | | // let length = document.querySelectorAll(".dplayer-menu-item").length; |
| | | // document.querySelectorAll(".dplayer-menu-item")[length - 1].remove(); // 去掉作者信息 |
| | | // document.querySelectorAll(".dplayer-menu-item")[length - 2].remove(); // 去掉作者信息 |
| | | }, |
| | | loadVideo(videoInfo) { |
| | | |
| | | }, |
| | | init() { |
| | | this.dp = new DPlayer({ |
| | | element: document.getElementById("videoPlay"), |
| | | //logo: "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左上角上打一个logo |
| | | // hotkey: true, // 是否支持热键,调节音量,播放,暂停等 |
| | | hotkey: true, // 是否支持热键,调节音量,播放,暂停等 |
| | | mutex: false, // 防止同时播放多个用户,在该用户开始播放时暂停其他用户 |
| | | theme: "#b7daff", // 风格颜色,例如播放条,音量条的颜色 |
| | | loop: false, // 是否自动循环 |
| | | lang: "zh-cn", // 语言,'en', 'zh-cn', 'zh-tw' |
| | | // screenshot: true, // 是否允许截图(按钮),点击可以自动将截图下载到本地 |
| | | preload: "auto", // 自动预加载 |
| | | volume: 0.1, // 初始化音量 |
| | | preload: "metadata", // 自动预加载 'none', 'metadata', 'auto' |
| | | volume: this.volumeInit, // 初始化音量 |
| | | playbackSpeed: [2, 1, 0.5], //可选的播放速度,可自定义 |
| | | contextmenu: [ |
| | | // 自定义上下文菜单 |
| | | //右键菜单 |
| | | { |
| | | text: "b站", |
| | | link: "https://www.bilibili.com" |
| | | }, |
| | | // { |
| | | // text: "选项二", |
| | | // click: player => { |
| | | // console.log(player); |
| | | // } |
| | | // } |
| | | |
| | | ], |
| | | |
| | | highlight: [ |
| | | //进度条上的自定义时间标记 |
| | | // 进度条时间点高亮 |
| | | { |
| | | text: "10M", |
| | | time: 60 |
| | | }, |
| | | { |
| | | text: "20M", |
| | | time: 120 |
| | | } |
| | | // { |
| | | // text: "10M", |
| | | // time: 60 |
| | | // }, |
| | | ], |
| | | video: { |
| | | pic: videoInfo.img, // 视频封面 |
| | | url: videoInfo.url, |
| | | type: videoInfo.type, |
| | | pic: this.defalutImg, // 视频封面 |
| | | // url: videoInfo.url, |
| | | // type: videoInfo.type, |
| | | customType: { |
| | | customHls: function(video, player) { |
| | | const hls = new Hls() |
| | |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | }, |
| | | } |
| | | |
| | | } |
| | | </script> |
| | | <style lang="less" scoped> |
| | | .playItem { |
| | | border: 1px solid #d9d9d9; |
| | | padding: 10px; |
| | | border-radius: 5px; |
| | | margin: 10px; |
| | | transition: all .5s; |
| | | position: relative; |
| | | } |
| | | |
| | | .playItem:hover { |
| | | transform: scale(1.1) translate3d(0, 0, 0); |
| | | } |
| | | |
| | | .playItem:active { |
| | | transform: scale(0.85); |
| | | } |
| | | |
| | | .playIcon { |
| | | transform: scale(1.3); |
| | | position: absolute; |
| | | top: 35%; |
| | | right: 10px; |
| | | } |
| | | |
| | | .myVideo { |
| | | position: relative; |
| | | // width: 220px; |
| | | // height: 140px; |
| | | width: 300px; |
| | | height: 180px; |
| | | background-color: #565656; |
| | | border-radius: 10px; |
| | | margin: 10px; |
| | | margin: 20px 0px; |
| | | display: flex; |
| | | |
| | | |
| | | } |
| | | |
| | | |
| | | .myVideo:hover { |
| | | .mark { |
| | | background-color: #000; |
| | | display: initial; |
| | | } |
| | | |
| | | .player-video-state { |
| | | // display: initial; |
| | | } |
| | | .myVideo /deep/ .dplayer-video { |
| | | height: auto; |
| | | // border-radius: 16px; |
| | | } |
| | | |
| | | |
| | | .dplayer { |
| | | width: 500px; |
| | | .myVideo /deep/ .dplayer { |
| | | border-radius: 5px; |
| | | } |
| | | |
| | | .mark { |
| | | opacity: 0.45; |
| | | width: 100%; |
| | | height: 100%; |
| | | position: absolute; |
| | | background-color: #000; |
| | | display: none; |
| | | } |
| | | |
| | | .player-video-state { |
| | | position: absolute; |
| | | left: 43%; |
| | | top: 35%; |
| | | width: 50px; |
| | | height: 50px; |
| | | display: none; |
| | | .myVideo /deep/ video { |
| | | object-fit: cover; |
| | | } |
| | | </style> |
| | |
| | | <div class="boxMain"> |
| | | <videoPlayBox ref="videoPlayBox"></videoPlayBox> |
| | | </div> |
| | | <div style="padding: 20px 20px 5px;" class="myShadow"> |
| | | <div style="padding: 20px 20px 5px;margin-bottom: 20px;" class="myShadow"> |
| | | <pre>{{introduce}}</pre> |
| | | </div> |
| | | <div class="articleComment"> |
| | |
| | | videoData: { |
| | | img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg", |
| | | url: "", |
| | | type: "normal" |
| | | type: "normal", |
| | | title: "", |
| | | id: "" |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | | showVideo(item) { |
| | | //防止重复加载 |
| | | this.lastArticleId = this.articleId; |
| | | this.articleId = item.id |
| | | this.isAllowedComment = item.isAllowedComment |
| | | this.introduce = item.introduce |
| | | this.loadData() |
| | | |
| | | if (this.articleId == this.lastArticleId) { |
| | | return |
| | | } |
| | | |
| | | this.isAllowedComment = item.isAllowedComment; |
| | | this.introduce = item.introduce; |
| | | this.loadData(); |
| | | }, |
| | | loadData() { |
| | | |
| | |
| | | id: this.articleId, |
| | | authWord: this.secret == "" ? null : md5(this.secret) |
| | | }).then((res) => { |
| | | this.myLock = true; |
| | | this.myLock = !this.myLock; |
| | | |
| | | if (res.code != 200) { |
| | | |
| | |
| | | this.isAllowedComment = res.data.isAllowedComment; |
| | | this.videoData.url = res.data.articleFileURL; |
| | | this.videoData.img = res.data.coverFileURL; |
| | | this.videoData.title = res.data.title; |
| | | this.videoData.id = res.data.id; |
| | | |
| | | |
| | | if (res.data.articleFileURL != null && |
| | | res.data.articleFileURL != "" && |
| | | res.data.articleFileURL.endsWith("m3u8")) { |
| | |
| | | this.videoData.type = "normal"; |
| | | } |
| | | |
| | | this.myLock = false; |
| | | this.myLock = !this.myLock; |
| | | if (this.lastArticleId != this.articleId) { |
| | | _this.$refs.videoPlayBox.changePlay(this.videoData) |
| | | } |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import babyActicle from '../../assets/baby.htm' |
| | | //import babyActicle from '../../assets/baby.htm' |
| | | export default { |
| | | props: { |
| | | source: { |
| | | default: babyActicle |
| | | default: '' |
| | | }, |
| | | "title": { |
| | | default:"陈奕迅-Body Song 歌词", |
| | |
| | | <div class="myCard" style="height: 200px;width: 220px; border-radius: 20px;"> |
| | | <a-card :hoverable="true" size="small"> |
| | | <template slot="cover"> |
| | | <img class="myCardCover" alt="example" src="../../assets/mowenwei.jpg" /> |
| | | <!-- <img class="myCardCover" alt="example" src="../../assets/mowenwei.jpg" /> --> |
| | | </template> |
| | | |
| | | <template slot="actions" class="ant-card-actions"> |
| | |
| | | } |
| | | |
| | | .mySecretSamll { |
| | | padding: 30px 10px 10px; |
| | | height: 115px; |
| | | display: flex; |
| | | flex-direction: column; |
| | |
| | | <div> |
| | | <MyModal ref="myModal" /> |
| | | <MyPreviewModal ref="MyPreviewModal" /> |
| | | <MyMessage ref="MyMessage" /> |
| | | <MyMessage ref="MyMessage" v-if="openMessage" /> |
| | | <MyLink ref="MyLink" v-if="openLinkAdd" /> |
| | | |
| | | <div class="blog-drawer"> |
| | | <a-drawer placement="left" :closable="false" :visible="visibleDrawer" :getContainer="'body'" |
| | |
| | | </a-drawer> |
| | | </div> |
| | | |
| | | <div class="blog-main "> |
| | | <div class="blog-main"> |
| | | |
| | | <a-row> |
| | | <keep-alive> |
| | |
| | | |
| | | <a-col v-bind="colApiRight"> |
| | | <tool @showModal="showModal" @showPreview="showPreview" @showScreen="showScreen" |
| | | @showMessage="showMessage" /> |
| | | @showMessage="showMessage" @addLink="addLink" /> |
| | | </a-col> |
| | | </a-row> |
| | | </div> |
| | |
| | | import MyModal from "../group/MyModal.vue" |
| | | import MyPreviewModal from "../group/MyPreviewModal.vue" |
| | | import MyMessage from "../group/MyMessage.vue" |
| | | import MyLink from "../group/MyLink.vue" |
| | | |
| | | import screenConfig from "../../config/screenConfig.js" |
| | | |
| | |
| | | MyModal, |
| | | MyPreviewModal, |
| | | MyMessage, |
| | | MyLink, |
| | | }, |
| | | methods: { |
| | | showScreen() { |
| | |
| | | } |
| | | this.scale = !this.scale; |
| | | }, |
| | | addLink() { |
| | | this.openLinkAdd = true |
| | | this.$nextTick(function() { |
| | | this.$refs.MyLink.showModal(); |
| | | }) |
| | | }, |
| | | showModal() { |
| | | this.$refs.myModal.showModal(); |
| | | }, |
| | |
| | | this.$refs.MyPreviewModal.showModal(); |
| | | }, |
| | | showMessage() { |
| | | this.$refs.MyMessage.showModal(); |
| | | this.openMessage = true |
| | | this.$nextTick(function() { |
| | | this.$refs.MyMessage.showModal(); |
| | | }) |
| | | }, |
| | | afterVisibleChange(val) {}, |
| | | showDrawer() { |
| | |
| | | colMini: screenConfig.colMini, |
| | | colApiLeft: screenConfig.colApiLeft, |
| | | colApiRight: screenConfig.colApiRight, |
| | | colApiMain: screenConfig.colApiMain |
| | | colApiMain: screenConfig.colApiMain, |
| | | openLinkAdd: false, |
| | | openMessage: false, |
| | | } |
| | | } |
| | | }, |
| | | |
| | | } |
| | | </script> |
| | | |