inleft
2022-08-12 0dd41bd8cee430d3a948b89c664cb511c400993c
新增链接添加按钮,优化Dplayer播放
2 files added
15 files modified
5 files deleted
1260 ■■■■■ changed files
es_index.txt 180 ●●●●● patch | view | raw | blame | history
src/api/blogLink.js 22 ●●●●● patch | view | raw | blame | history
src/assets/baby.htm 29 ●●●●● patch | view | raw | blame | history
src/assets/es.md 482 ●●●●● patch | view | raw | blame | history
src/assets/mowenwei.jpg patch | view | raw | blame | history
src/assets/shijie.htm 12 ●●●●● patch | view | raw | blame | history
src/components/group/MyLink.vue 73 ●●●●● patch | view | raw | blame | history
src/components/group/MyMessage.vue 2 ●●● patch | view | raw | blame | history
src/components/group/MyVideo.vue 7 ●●●●● patch | view | raw | blame | history
src/components/group/articleListScorll.vue 5 ●●●● patch | view | raw | blame | history
src/components/group/tool.vue 2 ●●● patch | view | raw | blame | history
src/components/layouts/baseLayout.vue 33 ●●●●● patch | view | raw | blame | history
src/components/mini/box-17-linkAdd.vue 127 ●●●●● patch | view | raw | blame | history
src/components/mini/box-new-article.vue 3 ●●●● patch | view | raw | blame | history
src/components/mini/box10-add.vue 15 ●●●● patch | view | raw | blame | history
src/components/mini/box13-reply.vue 6 ●●●●● patch | view | raw | blame | history
src/components/mini/box15-videoPlayBox.vue 202 ●●●● patch | view | raw | blame | history
src/components/mini/box16-videoDetail.vue 26 ●●●● patch | view | raw | blame | history
src/components/mini/box5-article.vue 4 ●●●● patch | view | raw | blame | history
src/components/mini/box8-panal.vue 2 ●●● patch | view | raw | blame | history
src/components/mini/mdDetail.vue 1 ●●●● patch | view | raw | blame | history
src/components/swichLabel/main1-home.vue 27 ●●●● patch | view | raw | blame | history
es_index.txt
File was deleted
src/api/blogLink.js
@@ -20,3 +20,25 @@
        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',
    })
}
src/assets/baby.htm
File was deleted
src/assets/es.md
File was deleted
src/assets/mowenwei.jpg
Binary files differ
src/assets/shijie.htm
File was deleted
src/components/group/MyLink.vue
New file
@@ -0,0 +1,73 @@
<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>
src/components/group/MyMessage.vue
@@ -81,7 +81,7 @@
        },
        beforeMount() {},
        mounted() {
            this.loadData()
            this.loadMore()
        },
        methods: {
            loadMore() {
src/components/group/MyVideo.vue
@@ -1,11 +1,10 @@
<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>
@@ -49,7 +48,9 @@
            handleCancel(e) {
                this.visible = false;
            },
            afterClose() {
                this.$emit("closeMyVideo")
            }
        },
    }
</script>
src/components/group/articleListScorll.vue
@@ -27,13 +27,10 @@
<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 {
@@ -55,7 +52,7 @@
                total: 1,
                pageSize: 6,
                current: 1,
                defaultPageSize: 10
                defaultPageSize: 10,
            };
        },
        created() {
src/components/group/tool.vue
@@ -63,7 +63,7 @@
        },
        methods: {
            addLink() {
                this.$message.info("添加友链中..")
                this.$emit('addLink')
            },
            showMessage() {
                this.$emit('showMessage')
src/components/layouts/baseLayout.vue
@@ -12,11 +12,12 @@
        <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>
@@ -28,6 +29,8 @@
</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"
@@ -42,22 +45,28 @@
        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);
                }
            },
            // 下载文件
src/components/mini/box-17-linkAdd.vue
New file
@@ -0,0 +1,127 @@
<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>
src/components/mini/box-new-article.vue
@@ -485,9 +485,10 @@
            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;
        }
    }
src/components/mini/box10-add.vue
@@ -187,6 +187,7 @@
    } from '../../api/blogArticleType.js'
    import myConstant from "../../config/myConstant.js"
    import md5 from 'js-md5';
    export default {
        beforeMount() {
@@ -259,7 +260,7 @@
                    ],
                    secret: [{
                        required: true,
                        message: '不正经的人..',
                        message: '好像这里错了..',
                        trigger: 'blur'
                    }],
                    common: [{
@@ -293,6 +294,11 @@
            },
            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);
@@ -306,6 +312,11 @@
            },
            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);
@@ -360,7 +371,7 @@
                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('上传成功')
src/components/mini/box13-reply.vue
@@ -18,10 +18,8 @@
                </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>
src/components/mini/box15-videoPlayBox.vue
@@ -1,48 +1,25 @@
<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>
@@ -54,16 +31,37 @@
    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",
@@ -74,55 +72,51 @@
                // 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
                // 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()
@@ -132,58 +126,56 @@
                        }
                    }
                })
            }
            },
        }
    }
</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>
src/components/mini/box16-videoDetail.vue
@@ -3,7 +3,7 @@
        <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">
@@ -57,17 +57,25 @@
                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() {
@@ -81,7 +89,7 @@
                    id: this.articleId,
                    authWord: this.secret == "" ? null : md5(this.secret)
                }).then((res) => {
                    this.myLock = true;
                    this.myLock = !this.myLock;
                    if (res.code != 200) {
@@ -104,6 +112,10 @@
                    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")) {
@@ -112,7 +124,7 @@
                        this.videoData.type = "normal";
                    }
                    this.myLock = false;
                    this.myLock = !this.myLock;
                    if (this.lastArticleId != this.articleId) {
                        _this.$refs.videoPlayBox.changePlay(this.videoData)
                    }
src/components/mini/box5-article.vue
@@ -56,11 +56,11 @@
</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 歌词",
src/components/mini/box8-panal.vue
@@ -5,7 +5,7 @@
                <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">
src/components/mini/mdDetail.vue
@@ -243,6 +243,7 @@
    }
    .mySecretSamll {
        padding: 30px 10px 10px;
        height: 115px;
        display: flex;
        flex-direction: column;
src/components/swichLabel/main1-home.vue
@@ -2,7 +2,8 @@
    <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'"
@@ -14,7 +15,7 @@
            </a-drawer>
        </div>
        <div class="blog-main ">
        <div class="blog-main">
            <a-row>
                <keep-alive>
@@ -42,7 +43,7 @@
                <a-col v-bind="colApiRight">
                    <tool @showModal="showModal" @showPreview="showPreview" @showScreen="showScreen"
                        @showMessage="showMessage" />
                        @showMessage="showMessage" @addLink="addLink" />
                </a-col>
            </a-row>
        </div>
@@ -57,6 +58,7 @@
    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"
@@ -69,6 +71,7 @@
            MyModal,
            MyPreviewModal,
            MyMessage,
            MyLink,
        },
        methods: {
            showScreen() {
@@ -83,6 +86,12 @@
                }
                this.scale = !this.scale;
            },
            addLink() {
                this.openLinkAdd = true
                this.$nextTick(function() {
                    this.$refs.MyLink.showModal();
                })
            },
            showModal() {
                this.$refs.myModal.showModal();
            },
@@ -90,7 +99,10 @@
                this.$refs.MyPreviewModal.showModal();
            },
            showMessage() {
                this.$refs.MyMessage.showModal();
                this.openMessage = true
                this.$nextTick(function() {
                    this.$refs.MyMessage.showModal();
                })
            },
            afterVisibleChange(val) {},
            showDrawer() {
@@ -107,9 +119,12 @@
                colMini: screenConfig.colMini,
                colApiLeft: screenConfig.colApiLeft,
                colApiRight: screenConfig.colApiRight,
                colApiMain: screenConfig.colApiMain
                colApiMain: screenConfig.colApiMain,
                openLinkAdd: false,
                openMessage: false,
            }
        }
        },
    }
</script>