NewZkgj/components/yz-audio/index.scss

@mixin textoverflow() {
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}
@keyframes rowup {
	0% {
		-webkit-transform: translate(-50%, -50%) rotate(0deg);
		transform-origin: center center;
	}

	100% {
		-webkit-transform: translate(-50%, -50%) rotate(360deg);
		transform-origin: center center;
	}
}
.imt-audio{
	position:relative;
	width: 100%;
	display: flex;
	box-sizing: border-box;
	background: #fff;
	overflow: hidden;
	
	.top {
		width: 140rpx;
		position: relative;
	}

	.audio-wrapper {
		display: flex;
		flex-direction: column; 
		flex: 1;
		color: #fff;
		margin-left: 20rpx;
	}
	.slidebox {
		display: flex;
		justify-content: space-between;
		width: 96%;
	}
	/deep/ .uni-slider-tap-area {
		padding: 0;
	}
	/deep/ .uni-slider-wrapper {
		min-height: 0;
	}
	/deep/ .uni-slider-handle-wrapper {
		height: 6px;
	}
	.audio-slider {
		padding-top: 10rpx;
		margin-left: 150rpx;
		position: absolute;
		bottom: 40rpx;		
		width: 75vw;
		left: 0;
		padding: 0;
	}
	

	// .cover {
	// 	width: 120rpx;
	// 	height: 120rpx;
	// 	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
	// 	position: absolute;
	// 	top: 50%;
	// 	left: 50%;
	// 	transform: translate(-50%, -50%);
	// 	animation-fill-mode: forwards;
	// 	-webkit-animation-fill-mode: forwards;
	// }

	.play {
		width: 48rpx;
		height: 48rpx;
		z-index: 99;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 50%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		&.loading{
			width: 48rpx;
			height: 48rpx;
			animation: rotating_theme3 2s linear infinite;
		}
	}
}

@keyframes rotating {
	0% {
		  transform: rotateZ(0deg)
	}
	100% {
		  transform: rotateZ(360deg)
	}
}
@keyframes rotating_theme3 {
	0% {
		  transform: translate(-50%, -50%) rotateZ(0deg)
	}
	100% {
		  transform: translate(-50%, -50%) rotateZ(360deg)
	}
}

.hItem
{
	margin-left: 16rpx;
}

.extrButton
{
	font-size: 36rpx;
}