diff --git a/pages/make/index.vue b/pages/make/index.vue index c192fde..f7726c8 100644 --- a/pages/make/index.vue +++ b/pages/make/index.vue @@ -489,7 +489,19 @@ - 选择祝福场景 + + 选择祝福场景 + 挑选一个场景,开启专属祝福 + + + + + + - - + + {{ scene.name }} @@ -930,38 +946,44 @@ const scenes = [ { name: "节日祝福", value: "holiday", - icon: "calendar-filled", + icon: "notification-filled", color: "#FF3B30", + bgColor: "#FFF5F5", }, { name: "生日纪念", value: "birthday", - icon: "gift-filled", + icon: "calendar-filled", color: "#FF9500", + bgColor: "#FFF8E5", }, { name: "每日问候", value: "daily", - icon: "notification-filled", + icon: "star-filled", color: "#FFCC00", + bgColor: "#FFFBE6", }, { name: "情绪表达", value: "emotion", icon: "heart-filled", - color: "#AF52DE", + color: "#FF2D55", + bgColor: "#FFF0F5", }, { name: "人际关系", value: "relationship", - icon: "contact-filled", - color: "#5856D6", + icon: "gift-filled", + color: "#FF5E3A", + bgColor: "#FFF2F0", }, { name: "职场祝福", value: "workplace", - icon: "vip-filled", - color: "#007AFF", + icon: "shop-filled", + color: "#8B572A", + bgColor: "#F9F0E6", }, ]; @@ -2515,33 +2537,77 @@ function drawRoundRect(ctx, x, y, w, h, r, color) { .scene-popup { width: 600rpx; background: #fff; - border-radius: 30rpx; - padding: 40rpx; + border-radius: 40rpx; + padding: 50rpx 40rpx; display: flex; flex-direction: column; align-items: center; + border: 4rpx solid #f8e71c; /* 金色边框 */ + box-shadow: 0 0 40rpx rgba(248, 231, 28, 0.2); +} + +.scene-header { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 40rpx; } .scene-title { - font-size: 36rpx; + font-size: 44rpx; font-weight: bold; - color: #333; - margin-bottom: 40rpx; + color: #d0021b; /* 深红色 */ + margin-bottom: 12rpx; +} + +.scene-subtitle { + font-size: 24rpx; + color: #999; + margin-bottom: 30rpx; +} + +.scene-divider { + display: flex; + align-items: center; + width: 100%; + justify-content: center; + gap: 20rpx; +} + +.scene-divider .line { + width: 100rpx; + height: 2rpx; + background: linear-gradient( + 90deg, + rgba(230, 184, 0, 0), + rgba(230, 184, 0, 0.5), + rgba(230, 184, 0, 0) + ); } .scene-grid { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(2, 1fr); gap: 30rpx; width: 100%; - margin-bottom: 40rpx; + margin-bottom: 50rpx; } .scene-item { display: flex; flex-direction: column; align-items: center; - gap: 16rpx; + gap: 20rpx; + background: #fff; + padding: 40rpx 0; + border-radius: 24rpx; + box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06); + transition: all 0.2s; +} + +.scene-item:active { + transform: scale(0.98); + box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04); } .scene-icon-box { @@ -2551,17 +2617,19 @@ function drawRoundRect(ctx, x, y, w, h, r, color) { display: flex; align-items: center; justify-content: center; - box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1); + margin-bottom: 8rpx; } .scene-name { - font-size: 26rpx; - color: #666; + font-size: 30rpx; + color: #333; + font-weight: 600; } .skip-btn { - font-size: 28rpx; - color: #999; + font-size: 26rpx; + color: #bbb; padding: 20rpx; + text-decoration: underline; }