.page-container{.pgs{背景颜色：#D8D4D1;文本对齐：居中；位置：相对；高度：2px；底部边距：10px；：绝对；顶部：-2.5px；左：0；宽度：7px；高度：7px；边界半径：50%；背景色：#B03F28；z-索引：1；}.play-icon{宽度：45px;高度：45px；右边距：15px；}音频{显示：块；高度：0；}.audio-box{背景：#F5F5F5；边框：1px实心#D8D4D1；边界半径：5px；宽度：100%；填充：15px12px；框大小：边框框；}.audio-name{字体大小：15px；颜色：#252120；底部边距：15px；溢出：隐藏；//超出的文本隐藏text-overflow:ellipsis;//使用省略号显示溢出空白：nowrap;//溢出时不换行}.control-row{display:flex;对齐项目：flex-end；}.row-right{flex-grow:100;}.time-row{位置：相对；颜色：#B0AFAD；字体大小：12px；底部边距：3px；}.audio-time{位置：绝对；右：0；}}前言刚开始看到UI设计稿的时候，内心是很抗拒的。我觉得用原来的音频风格就够了，也不是特别难看。毕竟给的时间不多，自定义样式在逻辑上需要改。我在网上搜索了合适的插件，但没有看到令人兴奋的插件。终于硬着头皮自己写了。参考了一篇博客，非常感谢这位博主，逻辑可以用。但是原博客用的jquery，我自己用的是vue，而且我的页面可能不止一个音频，而且设计稿和原博客有很大的不同，所以花了不少心思改了代码。参考链接：Audio（音频）自定义样式及控制操作面板vue版本：2.6.12这里是按照我的设计稿做的。如果你的设计稿和我的不一样，只需要改一下css部分和html，js还是可以直接套用的。着急的话，可以直接跳到最后阅读完整代码，复制后不出意外就可以使用了。你只需要将播放按钮的图片换成你自己的图片，然后添加可用的音频链接即可。HTML代码：{{item.audio_name}}
