我的音乐模块优化啊

 src/components/group/MyMessage.vue

@@ -74,7 +74,7 @@
                visible: false,
                loading: false,
                pageNo: 1,
                pageSize: 5,
                pageSize: 4,
                showButton: true,
                refresh: false,
            }
@@ -91,7 +91,7 @@
            reload() {
                this.$message.info("重新拉取信息..")
                this.pageNo = 1;
                this.pageSize = 5;
                this.pageSize = 4;
                this.showButton = true;
                this.dataList = [];
                setTimeout(() => {
@@ -143,12 +143,6 @@

    }

    .myhiden {
        display: -webkit-container;
        -webkit-line-clamp: 3;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    a {
        color: black;

 src/components/group/MyVideo.vue

New file
@@ -0,0 +1,41 @@
<template>
    <div class="myModal">
        <a-modal v-model="visible" title="" :footer="null" :mask="false" :maskClosable="false" :placement="placement"
            :bodyStyle="{'overflow':'overlay','maxHeight': '550px'}">
            <div>11</div>

        </a-modal>
    </div>

</template>

<script>
    import {
        history
    } from '../../api/blogArticleComment.js'

    export default {
        data() {
            return {
                visible: false,
                placement: "bottom"
            }
        },
        beforeMount() {},
        methods: {
            showModal() {
                this.visible = true;
            },
            handleCancel(e) {
                this.visible = false;
            },

        },
    }
</script>
<style scoped>

    a {
        color: black;
    }
</style>

 src/components/layouts/baseLayout.vue

@@ -6,12 +6,13 @@
        </a-layout-header>

        <keep-alive>
            <router-view></router-view>
            <router-view @showMyVideo="showMyVideo"></router-view>
        </keep-alive>
		

        <a-layout-footer>
            <AplayerBox />
            <tagFooter />
            <MyVideo ref="MyVideo"  />
        </a-layout-footer>

        <a-back-top>
@@ -25,11 +26,13 @@
    import tagHeader from "../fixed/header.vue"
    import tagFooter from "../fixed/footer.vue"
    import AplayerBox from "../mini/Aplayer.vue"
    import MyVideo from "../group/MyVideo.vue"
    export default {
        components: {
            tagHeader,
            tagFooter,
            AplayerBox,
            MyVideo,
        },
        data() {
            return {
@@ -37,7 +40,9 @@
            }
        },
        methods: {

            showMyVideo() {
                this.$refs.MyVideo.showModal();
            },
            // 下载文件
            down: function() {
                console.log(111);

 src/components/mini/Aplayer.vue

@@ -1,8 +1,8 @@
<template>
    <div class="fade">
        <!-- <a-col v-bind="colMain">
        </a-col> -->
        <a-col v-bind="colMain">
            <aplayer :audio="audio" :autoplay="autoplay" fixed style="z-index: 10;" :volume="0.1" :preload="preload" />
        </a-col>

        <!-- <a-modal ref="musicModal" title="" :dialog-style="{ top: '10px' }" :mask="false"
        :maskClosable="false"    :visible="modal1Visible" @ok="() => setModal1Visible(false)" @cancel="() => setModal1Visible(false)">
@@ -26,7 +26,7 @@
                    xl: 1,
                    xxl: 1
                },
                autoplay:false,
                autoplay: false,
                modal1Visible: true,
                secondsToGo: 5,
                preload: "none",

 src/components/mini/box14-video2.vue

New file
@@ -0,0 +1,263 @@
<template>
    <div class="gridClass">
        <div class="entry-preview">
            <div class="thumbnail_box" @click="showMyVideo()">
                <div class="thumbnail">
                    <img src="http://t.inleft.com/share/media_photo/faye_video.png" alt="" loading="lazy">
                </div>
            </div>
            <div class="entry-post">
                <div class="entry-header">
                    <h5 class="entry-title">
                        <a href="https://www.thyuu.com/word/note/49306" rel="bookmark">翻奏·Faye's Theme</a>
                    </h5>
                    <div class="post_content">
                        出自高瞰/的独立游戏(寻找天堂)
                        <br>
                        时间:2020.02某个不眠的深夜
                        <br>
                        音源/录像: es110的内置录音/mi 9的普通摄像
                        <br>
                        剪辑:pr(其实就贴了一张图,一镜到底)
                    </div>
                </div>
                <div class="entry-meta">
                    <div class="post-categories">
                        <span class="tag vcard">
                            <a href="https://www.thyuu.com/category/word/note" rel="category tag">随心杂记</a>
                        </span>
                        <span class="tag-list">
                            <a href="https://www.thyuu.com/tag/%e5%bd%b1%e8%af%84" rel="tag">影评</a>
                            <a href="https://www.thyuu.com/tag/%e7%94%b5%e5%bd%b1" rel="tag">电影</a>
                            <a href="https://www.thyuu.com/tag/%e8%9c%98%e8%9b%9b%e4%be%a0" rel="tag">蜘蛛侠</a>
                        </span>
                    </div>
                    <div class="post-on">
                        <span class="entry-date">
                            <a href="https://www.thyuu.com/word/note/49306" title="22:13" rel="bookmark">
                                <time datetime="2022-03-22T22:13:02+08:00">5月前</time>
                            </a>
                        </span>
                    </div>
                </div>
            </div>

        </div>

        <div class="entry-preview">
            <div class="thumbnail_box">
                <div class="thumbnail ">
                    <img src="http://t.inleft.com/share/media_photo/background.jpg" alt="" loading="lazy">
                </div>
            </div>
        </div>
        <div class="entry-preview ">
            <div class="thumbnail_box ">
                <div class="thumbnail ">
                    <img src="http://t.inleft.com/share/media_photo/cat.png" alt="" loading="lazy">
                </div>
            </div>
        </div>
        <div class="entry-preview ">
            <div class="thumbnail_box">
                <div class="thumbnail ">
                    <img src="http://t.inleft.com/share/media_photo/faye_video.png" alt="" loading="lazy">
                </div>
            </div>
        </div>
        <div class="entry-preview ">
            <div class="thumbnail_box">
                <div class="thumbnail ">
                    <img src="http://t.inleft.com/share/media_photo/faye_video.png" alt="" loading="lazy">
                </div>
            </div>
        </div>

    </div>
</template>
<script>
    export default {
        methods: {
            showMyVideo() {
                console.log(22);
                this.$emit('showMyVideo')
            }
        }
    }
</script>
<style lang="less">
    @--border-radius: 16px;
    @--s-background: 16px;
    @--animation-mo: margin 1s cubic-bezier(0.62, 0.21, 0.25, 1) 1 backwards, opacity .75s cubic-bezier(0.62, 0.21, 0.25, 1) 1 backwards;

    @font-face {
        font-family: "iconfont";
        /* Project id 2762112 */
        src: url('http://t.inleft.com/share/z%E5%AD%97%E4%BD%93%E5%BA%93/iconfont.woff2') format('woff2');
    }

    .gridClass {
        grid-template-columns: repeat(4, 1fr);
        display: grid;
        clear: both;
        gap: 2rem;
        // background-color: #666;

        a {
            color: #555;
        }

        .item1 {
            grid-column-start: 1;
            grid-column-end: 3;
        }

        .entry-preview {
            border-radius: @--border-radius;
            background: @--s-background, white;
            animation: @--animation-mo;
            transition: all .5s;
            box-shadow: 0 5px 30px 0 rgba(0, 0, 0, .05);
            // background-color: red;

            display: flex;
        }

        .thumbnail_box {
            width: 50%;
            min-width: 50%;
            left: 0;

            .thumbnail {
                position: relative;
                width: 100%;
                height: 100%;
                border-radius: @--border-radius;
                overflow: hidden;
                background: rgba(0, 0, 0, .05);

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transform: scale(1.1);
                    transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
                    border-radius: @--border-radius;
                }
            }
        }

        header {
            display: block;
        }

        .entry-title,
        .post_content {
            margin: 0 0 .5rem 0;
        }

        h5 {
            font-size: 1.05rem;
        }

        .entry-meta,
        .post_content {
            opacity: .6;
        }

        .entry-preview .entry-meta {
            display: flex;
            justify-content: space-between;
            font-size: .5rem;
            padding: .5rem 0 0 0;
            flex-wrap: wrap;
        }

        .vcard {
            margin: 0 1em 0 0;
        }

        .entry-post {
            padding: 1rem;
            transition: all .5s;
            // height: 100%;
            // padding: calc(70% + 1rem) 1rem 1rem 1rem;
            // display: flex;
            // flex-direction: column;
            // justify-content: space-between;
        }

        .tag-list a {
            margin: 0 .5em 0 0;
            font-size: 14px;
        }
    }

    .thumbnail_box:hover .thumbnail img {
        transform: scale(1) translate3d(0, 0, 0);
        filter: blur(10px) brightness(.8);
    }

    .thumbnail_box:hover .thumbnail:after {
        width: 100%;
        height: 100%;
        opacity: 1;
    }

    .thumbnail:before {
        content: "\ec2a";
        opacity: .1;
        font-size: 3rem;
    }

    .thumbnail:after {
        width: 70%;
        border: 1px solid rgba(255, 255, 255, .75);
        opacity: 0;
        height: 70%;
        transition: all .5s;
        z-index: 2;
        color: white;
        border-radius: @--border-radius;
        content: "\e627";
        font-size: 1rem;
        text-shadow: 0 1px 5px rgb(0 0 0 / 30%);
    }

    .thumbnail:before,
    .thumbnail:after {
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: 'iconfont';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
    }

    @media screen and (max-width:1024px) {
        .gridClass {
            grid-row-gap: 2rem;
            grid-column-gap: 0rem;
            grid-template-columns: repeat(1, 1fr);

            .entry-preview {
                display: block;
            }

            .thumbnail_box {
                min-width: 100%;
            }
        }


    }

    @media screen and (min-width:1025px) {
        .gridClass {
            grid-template-columns: repeat(2, 1fr);
        }
    }
</style>

 src/components/swichLabel/main2-music-search.vue

@@ -7,7 +7,7 @@
            <a-col v-bind="colApiMain" class="holdHeight">
                <!-- <box8></box8> -->
                <!-- <boxLeft></boxLeft> -->
                <myVideo></myVideo>
                <myVideo v-on="$listeners"></myVideo>
            </a-col>

        </a-row>
@@ -19,7 +19,7 @@
    import box8 from "../mini/box8-panal.vue"
    import myVideo from "../mini/box14-video.vue"
    import boxLeft from "../group/boxLeft.vue"
	

    export default {
        components: {
            box7,
@@ -34,8 +34,8 @@
                colApiLeft: {
                    xs: 24,
                    sm: {
                        span: 10,
                        offset: 1,
                        span: 14,
                        offset: 5,
                    },
                    md: {
                        span: 14,
@@ -57,28 +57,28 @@

                colApiMain: {
                    xs: {
                        span: 23,
                        offset: 1,
                        span: 24,
                        offset: 0,
                    },
                    sm: {
                        span: 22,
                        offset: 2,
                        offset: 1,
                    },
                    md: {
                        span: 19,
                        offset: 5,
                        span: 22,
                        offset: 1,
                    },
                    lg: {
                        span: 22,
                        offset: 2,
                        offset: 1,
                    },
                    xl: {
                        span: 15,
                        offset: 2,
                        span: 16,
                        offset: 1,
                    },
                    xxl: {
                        span: 15,
                        offset: 2,
                        span: 16,
                        offset: 1,
                    },
                }
            }
@@ -86,5 +86,5 @@
    }
</script>

<style >
<style>
</style>