MoeNovaClient/pages/my/myStar.scss

.star-container {
	width: 100%;
	min-height: 100vh;
	background-color: #f5f5f5;
	
	.loading-area {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: rgba(255,255,255,0.9);
		
		.loading-wrapper {
			width: 400rpx;
			height: 400rpx;
			position: relative;
			
			.center-circle {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 100rpx;
				height: 100rpx;
				margin: -50rpx 0 0 -50rpx;
				background: #1E90FF;
				border-radius: 50%;
				animation: rotate 2s linear infinite;
				
				&::after {
					content: '';
					position: absolute;
					top: 8rpx;
					left: 8rpx;
					right: 8rpx;
					bottom: 8rpx;
					background: #fff;
					border-radius: 50%;
					opacity: 0.3;
				}
			}
			
			.orbit-balls {
				width: 100%;
				height: 100%;
				position: absolute;
				animation: rotate 2s linear infinite;
				
				.ball {
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0;
					top: 0;
					
					.ball-item {
						position: absolute;
						width: 20rpx;
						height: 20rpx;
						background: var(--color);
						border-radius: 50%;
						top: 0;
						left: 50%;
						margin-left: -10rpx;
						animation: moveBall 3s ease-in infinite;
						animation-delay: var(--delay);
					}
				}
			}
		}
		
		.loading-text {
			margin-top: 40rpx;
			font-size: 28rpx;
			color: #666;
		}
	}
	
	.star-content {
		width: 100%;
		padding: 20rpx;
	}
	
	.gender-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
		
		.popup-content {
			width: 600rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 40rpx;
			
			.popup-title {
				font-size: 36rpx;
				color: #333;
				text-align: center;
				font-weight: 500;
				margin-bottom: 40rpx;
			}
			
			.gender-cards {
				display: flex;
				justify-content: space-between;
				margin-bottom: 40rpx;
				
				.gender-card {
					width: 240rpx;
					height: 280rpx;
					border-radius: 16rpx;
					border: 2rpx solid #EEEEEE;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;
					transition: all 0.3s;
					
					image {
						width: 160rpx;
						height: 160rpx;
						margin-bottom: 20rpx;
					}
					
					text {
						font-size: 28rpx;
						color: #333;
					}
					
					.check-icon {
						position: absolute;
						top: 16rpx;
						right: 16rpx;
						width: 40rpx;
						height: 40rpx;
					}
					
					&.selected {
						border-color: #1E90FF;
						background: rgba(30, 144, 255, 0.05);
					}
				}
			}
			
			.confirm-btn {
				height: 88rpx;
				background: #9C27B0;
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;
				font-size: 32rpx;
				font-weight: 500;
				
				&:active {
					opacity: 0.8;
				}
			}
		}
	}
	
	.character-page {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		position: relative;
		
		.character-container {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 40rpx;
			margin-bottom: 120rpx; // 为底部按钮留出空间
			
			.character-image {
				width: 100%;
				height: 800rpx; // 调整角色图片高度
				object-fit: contain;
			}
		}
		
		.bottom-button {
			position: fixed;
			bottom: 40rpx;
			left: 40rpx;
			right: 40rpx;
			height: 98rpx;
			background: #333333;
			border-radius: 49rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: 500;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
			transition: all 0.2s ease;
			
			&:active {
				opacity: 0.95;
				transform: scale(0.98);
			}
		}
	}
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(-360deg);
	}
}

@keyframes moveBall {
	0% {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
	98% {
		transform: translateY(180rpx) scale(0.1);
		opacity: 0.2;
	}
	99% {
		transform: translateY(180rpx) scale(0.01);
		opacity: 0;
	}
	100% {
		transform: translateY(0) scale(1);
		opacity: 0;
	}
}

.form-page {
	width: 100%;
	min-height: 100vh;
	background-color: #ffffff;
	padding: 30rpx;
	box-sizing: border-box;
	
	.form-group {
		margin-bottom: 40rpx;
		
		.label {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;
			font-size: 28rpx;
			color: #333;
			
			.required {
				color: #ff4d4f;
				margin-right: 8rpx;
				
				&.error {
					animation: shake 0.5s ease-in-out;
				}
			}
		}
		
		.input {
			width: 100%;
			height: 88rpx;
			background: #f5f5f5;
			border-radius: 12rpx;
			padding: 0 24rpx;
			font-size: 28rpx;
			
			&.error {
				border: 2rpx solid #ff4d4f;
			}
		}
		
		.gender-options {
			display: flex;
			gap: 20rpx;
			
			.gender-option {
				flex: 1;
				height: 80rpx;
				background: #f5f5f5;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #666;
				transition: all 0.3s;
				
				&.selected {
					background: #333;
					color: #fff;
				}
			}
		}
		
		.textarea-container {
			position: relative;
			
			.textarea {
				width: 100%;
				height: 240rpx;
				background: #f5f5f5;
				border-radius: 12rpx;
				padding: 24rpx;
				font-size: 28rpx;
				
				&.error {
					border: 2rpx solid #ff4d4f;
				}
			}
			
			.word-count {
				position: absolute;
				right: 24rpx;
				bottom: 24rpx;
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.tags-scroll {
			width: 100%;
			white-space: nowrap;
			
			.tags-container {
				display: inline-flex;
				padding: 20rpx 0;
				gap: 20rpx;
				
				.tag {
					padding: 16rpx 32rpx;
					background: #f5f5f5;
					border-radius: 32rpx;
					font-size: 26rpx;
					color: #666;
					transition: all 0.3s;
					
					&.selected {
						background: #333;
						color: #fff;
					}
				}
			}
		}
	}
	
	.submit-button {
		position: fixed;
		bottom: 40rpx;
		left: 40rpx;
		right: 40rpx;
		height: 98rpx;
		background: #333333;
		border-radius: 49rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 500;
		transition: all 0.2s ease;
		
		&:active {
			opacity: 0.95;
			transform: scale(0.98);
		}
	}
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-5rpx); }
	75% { transform: translateX(5rpx); }
}

.character-info {
	width: 100%;
	min-height: 100vh;
	background-color: #ffffff;
	position: relative;
	padding-bottom: 120rpx;
	
	.info-container {
		padding: 30rpx;
		
		.character-portrait {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 40rpx;
			
			.portrait-image {
				width: 100%;
				height: 600rpx;
				object-fit: contain;
			}
			
			.character-name {
				font-size: 40rpx;
				font-weight: 600;
				color: #333;
				margin-top: 20rpx;
			}
		}
		
		.info-section {
			background: #f8f8f8;
			border-radius: 20rpx;
			padding: 30rpx;
			
			.section-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333;
				margin-bottom: 20rpx;
				position: relative;
				padding-left: 20rpx;
				
				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 6rpx;
					height: 28rpx;
					background: #9C27B0;
					border-radius: 3rpx;
				}
			}
			
			.description-box {
				background: #ffffff;
				border-radius: 16rpx;
				padding: 24rpx;
				margin-bottom: 30rpx;
				
				.description-text {
					font-size: 28rpx;
					color: #666;
					line-height: 1.6;
				}
			}
			
			.tags-box {
				display: flex;
				flex-wrap: wrap;
				gap: 16rpx;
				
				.tag-item {
					padding: 12rpx 24rpx;
					background: #f0f0f0;
					border-radius: 28rpx;
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}
	
	.join-button {
		position: fixed;
		bottom: 40rpx;
		left: 40rpx;
		right: 40rpx;
		height: 98rpx;
		background: linear-gradient(to right, #9C27B0, #7B1FA2);
		border-radius: 49rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 500;
		box-shadow: 0 4rpx 12rpx rgba(156, 39, 176, 0.3);
		transition: all 0.2s ease;
		
		&:active {
			transform: scale(0.98);
			opacity: 0.95;
		}
	}
}