MoeNovaClient/pages/makedetail/makeDetail.scss

// 导入FontAwesome
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

page {
	background-color: #ffffff;
	width: 100%;
	color: #333;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.page {
	background-color: #ffffff;
	width: 100%;
}

/* 自定义导航栏样式 */
.custom-navbar {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 90rpx;
	padding: 0 20rpx;
	padding-top: var(--status-bar-height);
	background-color: #ffffff;
	position: sticky;
	top: 0;
	z-index: 100;
	
	.navbar-left {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.fa-angle-left {
			font-size: 48rpx;
			color: #333;
		}
	}
	
	.navbar-center {
		flex: 1;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-left: 10rpx;
		
		.navbar-title {
			display: flex;
			align-items: center;
			
			.navbar-avatar {
				width: 50rpx;
				height: 50rpx;
				border-radius: 25rpx;
				margin-right: 10rpx;
			}
			
			.navbar-text {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-right: 10rpx;
			}
			
			.navbar-badge {
				font-size: 22rpx;
				color: #f0ad4e;
				background-color: rgba(240, 173, 78, 0.1);
				padding: 2rpx 10rpx;
				border-radius: 10rpx;
				border: 1rpx solid #f0ad4e;
			}
		}
	}
	
	.navbar-right {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		
		.fa-ellipsis-h {
			font-size: 36rpx;
			color: #333;
		}
	}
}

.header {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	width: 750rpx;height: 320rpx;
	padding-top: calc(var(--status-bar-height) + 0rpx);
	.left {
		display: flex;flex-direction: row;width:200rpx;height:120rpx;
		justify-content: center;
		padding-left:50rpx;
		image {
			width:124rpx;height:40rpx;
		}
	}
}
.thread {
	height: 20rpx;
}
.thread2 {
	height: 60rpx;
}
.topUser {
	width:750rpx;
	height:750rpx;
	position: relative;
	overflow: hidden;
	.home_image{
		width: 100%;
		height: 100%;
		transition: transform 0.3s ease;
		
		&:active {
			transform: scale(1.05);
		}
	}
	.image-indicator {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
	}
	.list {
		position: absolute;
		bottom: 20rpx;
		width:100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: flex-end;
		padding: 0 20rpx;
		overflow-x: auto;
		
		&::-webkit-scrollbar {
			display: none;
		}
		
		.img {
			width:84rpx;height:84rpx;margin: 0 10rpx;
			transition: all 0.3s ease;
			image {
				width:84rpx;height:84rpx;border-radius: 16rpx;border: solid 4rpx #fff;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
			}
		}
		.active {
			width:136rpx;height:136rpx;
			image {
				width:136rpx;height:136rpx;border-radius: 24rpx;border: solid 4rpx #fff;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
			}
		}
	}
}
.body {
	width:750rpx;margin-top:-60rpx;
	border-radius: 40rpx 40rpx 0 0;padding-top:30rpx;
	display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;
	box-shadow: 0 -10rpx 20rpx rgba(0, 0, 0, 0.05);
	position: relative;
	z-index: 10;
	.article-header {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 40rpx 50rpx 20rpx;
		width: 100%;
		box-sizing: border-box;
		
		.title {
			font-size: 40rpx;
			font-weight: bold;
			color: #222;
			margin-bottom: 20rpx;
			line-height: 1.4;
		}
		
		.meta-info {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			color: #999;
			font-size: 26rpx;
			
			.meta-item {
				display: flex;
				align-items: center;
				margin-right: 30rpx;
				margin-bottom: 10rpx;
				
				.meta-text {
					margin-left: 8rpx;
				}
			}
		}
	}
	.divider {
		height: 1rpx;
		background-color: #eee;
		width: 650rpx;
		margin: 10rpx auto 30rpx;
	}
	.article-content {
		padding: 0 50rpx 40rpx;
		width: 100%;
		box-sizing: border-box;
		
		.content {
			font-size: 32rpx;
			color: #333;
			line-height: 1.8;
			text-align: justify;
		}
	}
	.article-footer {
		width: 100%;
		padding: 20rpx 0;
		border-top: 1rpx solid #f0f0f0;
		
		.action-bar {
			display: flex;
			justify-content: space-around;
			align-items: center;
			
			.action-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 20rpx 0;
				
				.fa {
					font-size: 40rpx;
					color: #666;
					margin-bottom: 10rpx;
					
					&.liked {
						color: #ff5151;
					}
				}
				
				.action-text {
					font-size: 24rpx;
					color: #666;
				}
				
				&:active {
					opacity: 0.7;
				}
			}
		}
	}
}

/* 底部漂浮栏样式 */
.floating-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	padding: 20rpx 30rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	z-index: 100;
	
	.floating-bar-content {
	  display: flex;
	  align-items: center;
	  
	  .add-note-btn {
		flex: 1;
		height: 80rpx;
		background-color: #f5f5f5;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 20rpx;
		max-width: 160rpx;
		
		text {
		  font-size: 28rpx;
		  color: #666;
		}
		
		&:active {
		  background-color: #e5e5e5;
		}
	  }
	  
	  .publish-btn {
		flex: 3;
		height: 80rpx;
		background: linear-gradient(90deg, #8a2be2, #9932cc);
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		
		text {
		  font-size: 30rpx;
		  color: #fff;
		  font-weight: 500;
		}
		
		&:active {
		  opacity: 0.9;
		}
	  }
	}
  }
  
  /* 弹窗样式 */
  .popup-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 998;
  }
  
  .note-popup {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	border-radius: 30rpx 30rpx 0 0;
	z-index: 999;
	overflow: hidden;
	animation: slideUp 0.3s ease;
	
	.popup-header {
	  padding: 30rpx;
	  text-align: center;
	  border-bottom: 1rpx solid #f0f0f0;
	  
	  .popup-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	  }
	}
	
	.popup-content {
	  padding: 30rpx;
	  
	  .note-textarea {
		width: 100%;
		height: 300rpx;
		background-color: #f8f8f8;
		border-radius: 16rpx;
		padding: 20rpx;
		font-size: 28rpx;
		color: #333;
		box-sizing: border-box;
	  }
	  
	  .word-count {
		text-align: right;
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	  }
	}
	
	.popup-footer {
	  display: flex;
	  border-top: 1rpx solid #f0f0f0;
	  
	  .cancel-btn, .confirm-btn {
		flex: 1;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		
		text {
		  font-size: 30rpx;
		}
	  }
	  
	  .cancel-btn {
		background-color: #f5f5f5;
		
		text {
		  color: #666;
		}
		
		&:active {
		  background-color: #e5e5e5;
		}
	  }
	  
	  .confirm-btn {
		background-color: #8a2be2;
		
		text {
		  color: #fff;
		}
		
		&:active {
		  background-color: #7a1bd2;
		}
	  }
	}
  }
  
  @keyframes slideUp {
	from {
	  transform: translateY(100%);
	}
	to {
	  transform: translateY(0);
	}
  }
	/* 添加新样式 */
	.lyrics-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.4);
		padding: 30rpx;
		
		.lyrics-text {
			color: #fff;
			font-size: 36rpx;
			text-align: center;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
			font-weight: 500;
			line-height: 1.6;
		}
	}
	
	.play-button {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 120rpx;
		height: 120rpx;
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10;
		
		.fa {
			color: #fff;
			font-size: 60rpx;
		}
		
		&:active {
			background-color: rgba(0, 0, 0, 0.8);
			transform: translate(-50%, -50%) scale(0.95);
		}
	}
	
	.creation-details {
		margin-top: 30rpx;
		
		.detail-item {
			margin-bottom: 20rpx;
			
			.detail-label {
				font-size: 28rpx;
				color: #666;
				margin-right: 10rpx;
			}
			
			.detail-value {
				font-size: 28rpx;
				color: #333;
			}
		}
	}
	
	.status-info {
		margin-top: 40rpx;
		
		.queue-info {
			.queue-text {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 10rpx;
			}
			
			.progress-bar {
				height: 16rpx;
				background-color: #f0f0f0;
				border-radius: 8rpx;
				overflow: hidden;
				
				.progress-fill {
					height: 100%;
					background: linear-gradient(90deg, #2979ff, #36d6ff);
					border-radius: 8rpx;
				}
			}
		}
	}
	
	.error-message {
		margin-top: 30rpx;
		padding: 20rpx;
		background-color: #fff5f5;
		border-radius: 12rpx;
		border-left: 8rpx solid #ff5151;
		
		.error-text {
			font-size: 28rpx;
			color: #ff5151;
		}
	}