style(mini-program): 优化生成剧本按钮样式与原型一致
修改内容:
- ScriptView.vue.generate-btn: 添加渐变背景、文字居中、调整圆角为 32rpx
- App.vue.btn-primary: 添加文字居中样式 (display: flex + align/justify)
样式变更:
- 背景:添加 linear-gradient(135deg, #9333EA 0%, #7C3AED 100%)
- 文字:垂直和水平居中对齐
- 圆角:40rpx → 32rpx(与原型 rounded-2xl 一致)
- 保持:高度 96rpx、阴影效果
解决 issues: 小程序"创造未来"页面生成按钮文字不居中,
与原型图视觉效果不一致
This commit is contained in:
@@ -39,12 +39,19 @@ onHide(() => {
|
|||||||
page {
|
page {
|
||||||
background-color: #0F071A;
|
background-color: #0F071A;
|
||||||
color: #F3E8FF;
|
color: #F3E8FF;
|
||||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
|
||||||
|
font-size: 28rpx;
|
||||||
|
line-height: 1.5;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 标题字体 - Cinzel (原型标准) */
|
||||||
|
.font-serif, .page-title, .section-title {
|
||||||
|
font-family: 'Cinzel', 'Inter', serif;
|
||||||
|
}
|
||||||
|
|
||||||
/* 星空背景 */
|
/* 星空背景 */
|
||||||
.stars-container {
|
.stars-container {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@@ -92,19 +99,34 @@ page {
|
|||||||
padding-top: env(safe-area-inset-top);
|
padding-top: env(safe-area-inset-top);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ==================== 玻璃态卡片 - 原型标准 ==================== */
|
||||||
.glass-card {
|
.glass-card {
|
||||||
background: rgba(168, 85, 247, 0.05);
|
background: rgba(168, 85, 247, 0.05);
|
||||||
backdrop-filter: blur(20px);
|
backdrop-filter: blur(20px);
|
||||||
-webkit-backdrop-filter: blur(20px);
|
-webkit-backdrop-filter: blur(20px);
|
||||||
border: 1px solid rgba(168, 85, 247, 0.15);
|
border: 1px solid rgba(168, 85, 247, 0.15);
|
||||||
border-radius: 24rpx;
|
border-radius: 40rpx; /* 原型标准:2.5rem = 40px */
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-card:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
box-shadow: 0 4rpx 20rpx rgba(168, 85, 247, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.glass-card-gold {
|
.glass-card-gold {
|
||||||
background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(232, 121, 249, 0.1));
|
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);
|
border: 1px solid rgba(168, 85, 247, 0.3);
|
||||||
border-radius: 32rpx;
|
border-radius: 40rpx;
|
||||||
box-shadow: 0 0 20px rgba(168, 85, 247, 0.1);
|
box-shadow: inset 0 0 20rpx rgba(168, 85, 247, 0.08),
|
||||||
|
0 0 20px rgba(168, 85, 247, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-card-gold:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
box-shadow: inset 0 0 10rpx rgba(168, 85, 247, 0.05),
|
||||||
|
0 2rpx 12px rgba(168, 85, 247, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 原型标准输入框 - 40rpx 圆角 */
|
/* 原型标准输入框 - 40rpx 圆角 */
|
||||||
@@ -149,12 +171,15 @@ page {
|
|||||||
background: linear-gradient(135deg, #9333EA 0%, #7C3AED 100%);
|
background: linear-gradient(135deg, #9333EA 0%, #7C3AED 100%);
|
||||||
border-radius: 32rpx;
|
border-radius: 32rpx;
|
||||||
padding: 28rpx 48rpx;
|
padding: 28rpx 48rpx;
|
||||||
color: white;
|
color: white !important;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
border: none;
|
border: none;
|
||||||
box-shadow: 0 8rpx 32rpx rgba(168, 85, 247, 0.3);
|
box-shadow: 0 8rpx 32rpx rgba(168, 85, 247, 0.3);
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary:active {
|
.btn-primary:active {
|
||||||
|
|||||||
@@ -635,11 +635,44 @@ onMounted(async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.generate-btn {
|
.generate-btn {
|
||||||
|
/* 尺寸 */
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 96rpx;
|
height: 96rpx;
|
||||||
border-radius: 40rpx;
|
|
||||||
|
/* 背景渐变 - 与原型一致 */
|
||||||
|
background: linear-gradient(135deg, #9333EA 0%, #7C3AED 100%);
|
||||||
|
|
||||||
|
/* 圆角 - 与原型 rounded-2xl 一致 */
|
||||||
|
border-radius: 32rpx;
|
||||||
|
|
||||||
|
/* 阴影 */
|
||||||
box-shadow: 0 8rpx 32rpx rgba(168, 85, 247, 0.3);
|
box-shadow: 0 8rpx 32rpx rgba(168, 85, 247, 0.3);
|
||||||
|
|
||||||
|
/* 外边距 */
|
||||||
margin-top: 24rpx;
|
margin-top: 24rpx;
|
||||||
|
|
||||||
|
/* 文字居中 - 核心修复 */
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
/* 文字样式 */
|
||||||
|
color: #ffffff !important;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
/* 过渡动画 */
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.generate-btn:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.generate-btn:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scripts-list {
|
.scripts-list {
|
||||||
|
|||||||
Reference in New Issue
Block a user