macaoApplets_new/components/audio-play/audio-play.wxss

/* components/audio-play.wxss */
.audio {
  position: relative;
  display:inline-block;
  font-size: 0;
  width:220rpx;
  height: 220rpx;
  border-radius: 6rpx;
}
.audio .bg-img {
  width: 100%;
  height: 100%;
}
.audio .icon-img {
  width:80rpx;
  height:80rpx;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

.audio .free-MusicProgress {
  position: absolute;
  width: 100%;
  height: 52rpx;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}
.audio .free-MusicProgress .before-progress {
  width:50%;
  height:8rpx;
  background: rgba(255,255,255,0.3);
  border-radius: 6rpx;
  margin-right: 16rpx;
  position: relative;
}
.audio .free-MusicProgress .progress {
  background: #38A2D7;
  height:100%;
  overflow: hidden;
  border-radius: 6rpx;
  position: absolute;
  left: 0;
  top: 0;
}


.audio .free-MusicProgress .durationTime {
  width: 20%;
  font-size: 20rpx;
  color: rgba(255,255,255,0.67);
}

.title{
  font-size: 24rpx;
  text-align: center;
  margin-top: 10rpx;
  width: 100%;
  display: inline-block;
}