.flex { display: flex; } .audioPlayer { width: 100%; height: 400rpx; margin-bottom: 30rpx; box-sizing: border-box; padding: 20rpx 30rpx; } .player { width: 100%; height: 100%; position: relative; } .audioBack { width: 100%; height: 100%; } .audioControls { width: 100%; height: 80rpx; background: black; opacity: 0.8; position: absolute; bottom: 0; color: white; font-size: 6pt; line-height: 80rpx; text-align: center; } .audioControls .bottom { width: 60rpx; height: 100%; } .audioControls .bottom image { margin-top: 30%; margin-left: 30%; width: 40rpx; height: 40rpx; } .audioControls .slider { width: 520rpx; height: 100%; } .slider slider { width: 95%; margin-left: 4%; margin-right: 0; } .audioControls .time { width: 120rpx; height: 100%; } /* 音频end */ .mod_voice { /* width: 100%; */ /* min-height: 100rpx; */ background-color: white; margin:10px 10rpx; } .mod_p { width: 100%; height: 70rpx; display: flex; line-height: 50rpx; } .mod_p image { width: 30rpx; height: 30rpx; margin-left: 10rpx; margin-right: 10rpx; } .mod_g image { width: 92rpx; height: 40rpx; } .mod_g { border: 2rpx #ddd solid; height: 96rpx; border-bottom: 0rpx; border-right: 0rpx; border-left: 0rpx; display: flex; flex-flow: row; } .mod_border { border: 2rpx #ddd solid; } .ad_audio1 { background-size: cover; width: 100%; height: 80rpx; } .time { width: 20%; height: 96rpx; line-height:80rpx; color:#999; font-size:36rpx; margin-left:16rpx; } .slider { width: 68%; } /* --------------------语音 */ .btn { margin-top: 15rpx; } .audio { margin-left: 65rpx; } .o1 { background-color: red; width: 100%; padding: 20rpx; } .ad { display: flex; width: 100%; /* background-color: white; */ text-align: left; margin-top: 10rpx; padding: 0 10rpx; margin-bottom:20rpx; } .ad_tp { width: 80rpx; height: 80rpx; /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); */ } .ad_tp image { width: 100%; height: 100%; position:relative; left:0rpx; } .ad_audio { background-size: cover; width: 100%; height: 80rpx; } .tt { width: 356rpx; height: 81rpx; background: url(https://mshopimg.yolipai.net/miniapp/images/voice_left.png) no-repeat; background-size: cover; margin-left: 10rpx; } .tt image { width: 36rpx; height: 45rpx; margin-left: 28rpx; margin-top: 19rpx; } .ad_tp { /* background-color: white; */ } .ad2 { width: 100%; /* background-color: white; */ text-align: right; margin-top: -10rpx; margin-bottom: 30rpx; } .ad_tp2 { width: 80rpx; height: 80rpx; /* box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); */ float: right; margin-right: 20rpx; } .ad_tp2 image { width: 100%; height: 100%; display: inline-block; position:relative; top:2rpx; left:0rpx; } .ad_audio2 { display: inline-block; background-size: cover; height: 80rpx; } .tt2 { width: 356rpx; height: 80rpx; background: url(https://mshopimg.yolipai.net/miniapp/images/voice_right.png) no-repeat; background-size: cover; margin-right: 10rpx; display: inline-block; } .tt2 image { width: 36rpx; height: 45rpx; margin-left: 28rpx; margin-top: 19rpx; /* display: inline-block; */ } .ad_tp2 { /* background-color: white; */ display: inline-block; }