<div class="Player">
    <div class="Player_background-color">
        <div class="Player_slider">
            <audio ref="audio" :src=``></audio>
            <input ref="audioInput" type="range">
        </div>
        <div class="Player_time">
            <span>{{duration.startTime2}}</span>
            <span>{{duration.endTime2}}</span>
        </div>
        <div class="Player_button">
            <div>
                <img alt="上一首" src="" @click="">
            </div>
            <div>
　　　　　　　　　　//click 方法点击切换switchImg的值，来切换图片  //playAudio 点击判断播放
                <img alt="播放" src="" v-show="switchImg" @click="clickImg(),playAudio()">
                <img alt="暂停" src="" v-show="!switchImg" @click="clickImg(),playAudio()">
            </div>
            <div>
                <img alt="下一首" src="" @click="">
            </div>
        </div>
    </div>
</div>

<style>
    .Player {
        width: 100vw;
        padding: 0 30px 0 30px;
        touch-action: none;
        touch-action: pan-y;
    }

    .Player_background-color {
        background-color: rgb(242, 242, 242);
    }

    .Player_slider {
        padding: 27px 10px 0 10px;
    }

    .Player_slider input {
        width: 100%;
    }

    .Player_time {
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        padding: 0px 10px 0 10px;
        color: rgb(166, 124, 82);
    }

    .Player_button {
        padding: 0px 10px 20px 10px;
        display: flex;
        justify-content: center;
    }

    .Player_button img {
        width: 50%;
    }

    .Player_button div {
        display: flex;
        justify-content: center;
    }

    /* range控件 */
    input[type=range] {
        display: block;
        position: relative;
        width: 100%;
        margin: 8px 0;
        background: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
        background: -webkit-linear-gradient(rgb(140, 98, 57), rgb(140, 98, 57)) no-repeat rgb(207, 173, 136);
    }

    /*range中心圆点*/
    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        height: 16px;
        width: 16px;
        border-radius: 100%;
        background-color: rgb(166, 124, 82);
        cursor: pointer;
        margin-top: -6px;
        -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    }

    /*range轨道*/
    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 4px;
        border-radius: 4px;
        cursor: pointer;
    }
</style>