MeetMateApp/components/hqs-popup/player.scss

.qs-con {
    background-color: #fff;
    z-index: 99999;width:750rpx;height: 100vh;
	display: flex;flex-direction: column;justify-content: flex-start;align-items: center;
	.blankHei {
		// height:calc(100vh - 100rpx);
	}
	.status_bar {
		height:20rpx;
	}
	.topBody {
		position: absolute;top:0rpx;width:750rpx;height:501rpx;z-index: 0;
		background: url("../../static/my_topbg.png");background-size: 100% 100%;
	}
	.play_header {
		width:750rpx;height:260rpx;z-index: 10;
		.bar {
			position: absolute;top:var(--status-bar-height);padding:20rpx 30rpx;
			width:750rpx;display: flex;flex-direction: row;justify-content: space-between;align-items: center;
			image {
				width:50rpx;
			}
			.downline {
				width:650rpx;height:30rpx;margin-top: -50rpx;color:#fff;font-size: 38rpx;text-align: center;
			}
			.right {
				width:50rpx;
				image {
					margin-left: 0rpx;
				}
			}
		}
	}
	.yuanjiao {
		width:750rpx;height:180rpx;border-radius: 50rpx 50rpx 0 0;background-color: #fff;z-index: 10;margin-top: -90rpx;
	}
	.contBody {
		width:750rpx;margin-top: -80rpx;z-index: 20;background-color: #fff;display: flex;flex-direction: column;justify-content: center;align-items: center;
		.img {
			border:solid 8rpx $title;border-radius: 300rpx;padding:8rpx;
			.iconPlay {
				width:360rpx;border-radius: 210rpx;border: solid 4rpx #fff;
				transform-origin: center;animation: rotate 9s linear infinite;
			}
			.iconStop {
				width:360rpx;border-radius: 210rpx;border: solid 4rpx #fff;
			}
		}
		.title {
			color:#333;padding: 30rpx 0;font-size: 36rpx;height:200rpx;display: flex;justify-content: center;
		}
	}
	.playSlider {
		width:690rpx;height:60rpx;margin:10rpx auto;
	}
	.playSlider2 {
		width:620rpx;display: flex;flex-direction: row;justify-content: space-between;align-items: center;
		color:#959595;
	}
	.control {
		width:750rpx;display: flex;flex-direction: row;justify-content: space-around;padding:60rpx 20rpx;align-items: center;
		.icon {
			width:40rpx;
		}
		.iconP {
			width:120rpx;
		}
		.play {
			image {
				width:180rpx;
			}
		}
		.loop {
			position: relative;
			.num {
				position: absolute;left:0rpx;width:40rpx;height:40rpx;text-align: center;line-height: 40rpx;color:#333;font-size: 18rpx;
			}
		}
	}
	.control2 {
		width:450rpx;display: flex;flex-direction: row;justify-content: space-around;padding:36rpx 20rpx;align-items: center;
		background-color: #fff;border-radius: 100rpx;
		image {
			width:50rpx;
		}
		.line {
			width:2rpx;height:50rpx;background-color: $bodyColor;
		}
	}
}
.slow-rotate {
  border-radius: 50%;
}
.slow-rotate:hover{
  animation-play-state: paused;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.pop_time {
	position: fixed;bottom: 0;width:750rpx;border-radius: 38rpx 38rpx 0 0;background-color: #FFF4EF;padding-bottom: 30rpx;
	display: flex;flex-direction: column;justify-content: flex-start;align-items: center;z-index: 99999;
	.close {
		position: absolute;right:20rpx;top:20rpx;
		image {
			width:32rpx;
		}
	}
	.title {
		color:$title;font-size: 32rpx;width:100%;padding:20rpx;
	}
	.list {
		display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;
		.item {
			width:180rpx;height:90rpx;background-color: #FFF4EF;border-radius: 20rpx;padding-left: 20rpx;
			text-align: center;display: flex;align-items: center;justify-content: center;
			text {
				background-color: #ffa5004a;width:160rpx;height:60rpx;display: block;border-radius: 50rpx;color:$title;line-height: 60rpx;
			}
		}
		.active {
			text {
				background-color: #ffa500;color:#fff;
			}
		}
	}
}
.bgAlpha {
	position: fixed;bottom: 0;width:750rpx;height:100vh;background-color: #00000080;z-index: 99999;
}
.pop_story_list {
	width:100vh;height:100vh;background-color: #00000080;z-index: 999992;position: fixed;top:0;left:0;
	.content {
		display: flex;position: relative;margin-left: 0rpx;bottom:0rpx;flex-direction: column;top:50vh;left:0;z-index: 9999999;
		width:750rpx;height:50vh;background-color: #fff;border-radius: 30rpx 30rpx 0 0;padding-bottom: 180rpx;
		.close {
			width:40rpx;position: absolute;right:36rpx;top:36rpx;
		}
		.title {
			color:#333;font-size: 32rpx;font-weight:bold;width:100%;text-align: left;height:100rpx;line-height: 100rpx;
			padding-top: 8rpx;
		}
		.story_list2 {
			display: flex;flex-direction: column;
			.item {
				width: 690rpx;height:174rpx;display:flex;flex-direction: row;justify-content: center;margin-left: 30rpx;margin-top: 20rpx;
				background-color: #fff;padding:15rpx;position: relative;
				border-bottom: solid 1px #cbcbcb80;
				.imgR {
					width:144rpx;height:144rpx;display: flex;justify-content: center;align-items: center;position: relative;
					.icon {
						width:124rpx;height:124rpx;border-radius: 8rpx;
					}
					.play {
						position: absolute;left:0rpx;top:0;display: flex;flex-direction: row;justify-content: center;align-items: center;
						width:144rpx;height:144rpx;
						image {
							width:120rpx;
						}
					}
				}
				.right {
					width:546rpx;padding:6rpx;padding-left: 30rpx;display: flex;flex-direction: column;
					.title1 {
						width:462rpx;color:#252525;font-size: 32rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
					}
					.desc {
						color:#999999;font-size: 22rpx;padding-bottom: 20rpx;
					}
					.stat {
						display: flex;flex-direction: row;justify-content: flex-start;align-items: center;color:#999999;
						image {
							width:28rpx;margin-right: 8rpx;
						}
						.line {
							width:100rpx;
						}
						.stat1 {
							display: flex;flex-direction: row;justify-content: flex-start;align-items: center;color:#999999;
							flex: 1;
						}
					}
				}
				.replay {
					position: absolute;top:20rpx;right:20rpx;
					background-color: #FF8300;color:#fff;border-radius: 30rpx;padding:2rpx 12rpx;font-size: 22rpx;
				}
			}
		}
	}
}
.pop_share {
	width:100vh;height:100vh;background-color: #00000080;z-index: 999992;position: fixed;top:0;
	.content {
		display: flex;position: relative;margin-left: 30rpx;top:30vh;flex-direction: column;
		width:690rpx;height:460rpx;background-color: $bodyColor;border-radius: 60rpx;
		.close {
			width:40rpx;position: absolute;right:36rpx;top:36rpx;
		}
		.title {
			color:$title;font-size: 38rpx;font-weight:bold;width:100%;text-align: center;height:200rpx;line-height: 200rpx;
		}
		.iconList {
			display: flex;flex-direction: row;color:$title;
			.item {
				flex:1;display: flex;flex-direction: column;align-items: center;justify-content: center;
				.icon {width:100rpx;margin-bottom: 20rpx;}
			}
		}
	}
}