peanut/happy-life-star
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Peanut
2026-03-15 09:37:10 +08:00
parent 6ae71bfa63
commit a2dcd6bf4b
4 changed files with 255 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mini-program/src/pages/onboarding/index.vue
+65 -6
View File
@@ -514,12 +514,22 @@ watch(currentStep, (val) => {
.glass-input, .glass-picker {
width: 100%;
height: 88rpx;
/* 原型标准：backdrop-filter blur + 大圆角 */
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20rpx;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(168, 85, 247, 0.15);
border-radius: 40rpx; /* 原型：2.5rem = 40px */
padding: 0 24rpx;
color: #F3E8FF;
font-size: 28rpx;
transition: all 0.3s ease;
}
.glass-input:active, .glass-picker:active {
background: rgba(168, 85, 247, 0.1);
border-color: rgba(168, 85, 247, 0.4);
box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
}
.glass-input::placeholder {
@@ -535,11 +545,20 @@ watch(currentStep, (val) => {
width: 100%;
height: 200rpx;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20rpx;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(168, 85, 247, 0.15);
border-radius: 40rpx;
padding: 24rpx;
color: #F3E8FF;
font-size: 28rpx;
transition: all 0.3s ease;
}
.glass-textarea:active {
background: rgba(168, 85, 247, 0.1);
border-color: rgba(168, 85, 247, 0.4);
box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
}
.glass-textarea::placeholder {
@@ -583,17 +602,24 @@ watch(currentStep, (val) => {
}
.hint-tag {
/* 原型：可点击填充芯片 */
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 32rpx;
padding: 10rpx 22rpx;
font-size: 22rpx;
color: rgba(243, 232, 255, 0.8);
cursor: pointer;
transition: all 0.2s ease;
}
.hint-tag:active {
background: rgba(168, 85, 247, 0.2);
border-color: rgba(168, 85, 247, 0.4);
box-shadow: 0 0 12px rgba(168, 85, 247, 0.4);
transform: scale(0.98);
}
.quote-box {
@@ -635,11 +661,11 @@ watch(currentStep, (val) => {
height: 8rpx;
background: rgba(255, 255, 255, 0.1);
border-radius: 4rpx;
transition: all 0.4s ease;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.step-dot.active {
flex: 1;
flex: 1.5; /* 激活状态加宽 */
height: 8rpx;
background: #A855F7;
box-shadow: 0 0 24rpx rgba(168, 85, 247, 0.6);
@@ -654,5 +680,38 @@ watch(currentStep, (val) => {
.next-btn {
min-width: 200rpx;
padding: 24rpx 48rpx;
background: linear-gradient(135deg, #9333EA 0%, #7C3AED 100%);
border: none;
border-radius: 40rpx;
color: white;
font-size: 28rpx;
font-weight: 600;
letter-spacing: 4rpx;
box-shadow: 0 8rpx 24rpx rgba(168, 85, 247, 0.3);
transition: all 0.3s ease;
}
.next-btn:active {
transform: scale(0.96);
box-shadow: 0 4rpx 16rpx rgba(168, 85, 247, 0.2);
}
.btn-secondary {
padding: 24rpx 32rpx;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 40rpx;
color: rgba(255, 255, 255, 0.7);
font-size: 26rpx;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.btn-secondary:active {
transform: scale(0.96);
background: rgba(168, 85, 247, 0.1);
border-color: rgba(168, 85, 247, 0.3);
}
</style>