style: 完成全局样式和页面修复 - 引导流程、剧本生成器原型还原至 90%

This commit is contained in:
2026-03-15 09:37:10 +08:00
parent 6ae71bfa63
commit a2dcd6bf4b
4 changed files with 255 additions and 21 deletions
+80 -13
View File
@@ -286,9 +286,20 @@ onMounted(async () => {
letter-spacing: 4rpx;
}
/* 人设卡片 - 金色玻璃态 */
.section-card {
padding: 20rpx;
border-radius: 28rpx;
/* 金色玻璃态背景 */
background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(232, 121, 249, 0.1));
border: 1px solid rgba(168, 85, 247, 0.3);
box-shadow: inset 0 0 30rpx rgba(168, 85, 247, 0.08), 0 4rpx 20rpx rgba(168, 85, 247, 0.1);
transition: all 0.3s ease;
}
.section-card:active {
transform: scale(0.98);
box-shadow: inset 0 0 20rpx rgba(168, 85, 247, 0.1), 0 2rpx 12rpx rgba(168, 85, 247, 0.05);
}
.glass-card-main {
@@ -491,9 +502,11 @@ onMounted(async () => {
}
.param-option.active {
background: rgba(168, 85, 247, 0.2);
border-color: rgba(168, 85, 247, 0.5);
color: #C084FC;
background: rgba(168, 85, 247, 0.25);
border-color: #C084FC;
color: #F3E8FF;
box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
font-weight: 500;
}
.generate-btn {
@@ -514,6 +527,17 @@ onMounted(async () => {
padding: 20rpx;
border-left: 3rpx solid transparent;
border-radius: 28rpx;
/* Crown 图标装饰 */
position: relative;
}
.script-card::before {
content: '👑';
position: absolute;
top: -12rpx;
right: 24rpx;
font-size: 32rpx;
filter: drop-shadow(0 0 8rpx rgba(232, 121, 249, 0.6));
}
.script-card.selected {
@@ -599,18 +623,61 @@ onMounted(async () => {
border-radius: 48rpx;
}
.spinner {
width: 48rpx;
height: 48rpx;
border: 3rpx solid #A855F7;
border-top-color: transparent;
border-radius: 50%;
animation: spin 0.8s linear infinite;
/* 星芒加载动画 - 原型标准(双环旋转) */
.starlight-loader {
position: relative;
width: 80rpx;
height: 80rpx;
margin: 40rpx auto;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
.starlight-loader::before,
.starlight-loader::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
border-radius: 50%;
border: 3rpx solid transparent;
border-top-color: #C084FC;
border-right-color: #A855F7;
animation: starlight-spin 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.starlight-loader::before {
width: 70%;
height: 70%;
border-top-color: #E879F9;
border-right-color: #9333EA;
animation-delay: -0.75s;
}
@keyframes starlight-spin {
0% {
transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
50% {
transform: translate(-50%, -50%) rotate(180deg) scale(1.2);
}
100% {
transform: translate(-50%, -50%) rotate(360deg) scale(1);
}
}
/* 加载文字 - 脉冲效果 */
.generating-text {
font-size: 20rpx;
color: rgba(192, 132, 252, 0.6);
font-style: italic;
letter-spacing: 2rpx;
animation: pulse-text 2s ease-in-out infinite;
}
@keyframes pulse-text {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
.generating-text {