red-future/36Wisdom
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 游戏化样式补全（进度点/角色卡/选项彩色边框/反馈动画），OptionVO 透出 audio

Browse Source
This commit is contained in:
admin
2026-08-13 15:11:39 +08:00
parent 55463a9cc9
commit 7f7cf49587
4 changed files with 41 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
biz/controller/level.go
+1
View File
@@ -70,6 +70,7 @@ func nodeVO(n *service.Node) dto.NodeVO {
TextPinyin: o.TextPinyin,
FeedbackPros: o.FeedbackPros,
FeedbackCons: o.FeedbackCons,
Audio: o.Audio,
Prop: elementVO(o.Prop),
})
}
biz/model/dto/level.go
+1
View File
@@ -24,6 +24,7 @@ type OptionVO struct {
TextPinyin string `json:"text_pinyin"`
FeedbackPros string `json:"feedback_pros"`
FeedbackCons string `json:"feedback_cons"`
Audio string `json:"audio"`
Prop *ElementVO `json:"prop"`
}
biz/service/level.go
+2
View File
@@ -57,6 +57,7 @@ type Option struct {
TextPinyin string
FeedbackPros string
FeedbackCons string
Audio string
Prop *Element
}
@@ -233,6 +234,7 @@ func buildNode(nodeRec gdb.Record, optionRecs []gdb.Record, elements map[int64]*
TextPinyin: o["text_pinyin"].String(),
FeedbackPros: o["feedback_pros"].String(),
FeedbackCons: o["feedback_cons"].String(),
Audio: o["audio"].String(),
Prop: elements[o["prop_id"].Int64()],
})
}
ui-src/src/pages/play/play.vue
+37 -10
View File
@@ -224,37 +224,64 @@ export default {
</script>
<style scoped>
.page { min-height: 100vh; display: flex; flex-direction: column; }
.page { min-height: 100vh; display: flex; flex-direction: column; background: #fdf6ec; }
.topbar { display: flex; align-items: center; padding: 24rpx 32rpx; padding-top: calc(24rpx + env(safe-area-inset-top)); }
.back { font-size: 56rpx; color: #ff6b35; width: 72rpx; height: 72rpx; display: flex; align-items: center; }
.top-title { flex: 1; text-align: center; font-size: 32rpx; font-weight: 700; color: #5b4636; }
.top-actions { display: flex; align-items: center; gap: 16rpx; }
.py-toggle { font-size: 24rpx; color: #ff6b35; background: #fff0e5; border-radius: 30rpx; padding: 8rpx 20rpx; }
.sound-toggle { font-size: 32rpx; background: #fff0e5; border-radius: 50%; width: 64rpx; height: 64rpx; display: flex; align-items: center; justify-content: center; }
.content { flex: 1; padding: 24rpx 32rpx 60rpx; }
.scene-card { padding: 32rpx; margin-bottom: 24rpx; }
.scene-head { display: flex; align-items: center; margin-bottom: 16rpx; }
.progress-dots { display: flex; justify-content: center; gap: 16rpx; margin-bottom: 24rpx; }
.dot { width: 20rpx; height: 20rpx; border-radius: 50%; background: #e5d9c8; transition: all 0.3s; }
.dot.on { background: #ff9a3d; transform: scale(1.25); box-shadow: 0 0 0 6rpx rgba(255, 154, 61, 0.2); }
.scene-card { padding: 32rpx; margin-bottom: 24rpx; position: relative; overflow: hidden; }
.scene-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 24rpx; }
.scene-float { position: absolute; font-size: 44rpx; opacity: 0.85; animation: float-y 3.5s ease-in-out infinite; pointer-events: none; }
.scene-float.f1 { top: 16rpx; right: 28rpx; }
.scene-float.f2 { bottom: 20rpx; left: 24rpx; animation-delay: 1.2s; }
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14rpx); } }
.scene-head { display: flex; align-items: center; margin-bottom: 16rpx; position: relative; z-index: 1; }
.scene-emoji { font-size: 64rpx; margin-right: 20rpx; }
.scene-name { font-size: 32rpx; font-weight: 800; color: #5b4636; }
.scene-text { margin-bottom: 20rpx; }
.scene-speak { margin-top: 8rpx; }
.combo-badge { margin-left: auto; background: #ff6b35; color: #fff; font-weight: 800; border-radius: 30rpx; padding: 8rpx 24rpx; font-size: 28rpx; animation: combo-pop 0.4s ease; }
@keyframes combo-pop { 0% { transform: scale(0.4); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
.scene-text { margin-bottom: 20rpx; position: relative; z-index: 1; }
.scene-speak { margin-top: 8rpx; position: relative; z-index: 1; }
.node { padding: 48rpx 40rpx; }
.node-title { font-size: 38rpx; font-weight: 800; color: #ff6b35; margin-bottom: 24rpx; }
.character { display: flex; align-items: center; margin-bottom: 24rpx; }
.char-avatar { width: 72rpx; height: 72rpx; border-radius: 50%; color: #fff; font-size: 32rpx; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-right: 20rpx; }
.char-name { font-size: 28rpx; font-weight: 700; color: #7a6248; margin-right: 20rpx; }
.char-card { position: relative; margin-right: 20rpx; flex-shrink: 0; }
.char-img { width: 96rpx; height: 96rpx; border-radius: 50%; background: #f8f2e8; }
.char-avatar { width: 96rpx; height: 96rpx; border-radius: 50%; color: #fff; font-size: 40rpx; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.char-mood { position: absolute; right: -8rpx; bottom: -8rpx; font-size: 36rpx; background: #fff; border-radius: 50%; width: 48rpx; height: 48rpx; display: flex; align-items: center; justify-content: center; box-shadow: 0 2rpx 8rpx rgba(91, 70, 54, 0.2); animation: mood-pop 0.3s ease; }
@keyframes mood-pop { 0% { transform: scale(0.4); } 100% { transform: scale(1); } }
.char-info { display: flex; flex-direction: column; gap: 8rpx; }
.char-name { font-size: 30rpx; font-weight: 700; color: #7a6248; }
.node-content { font-size: 32rpx; line-height: 1.9; color: #5b4636; margin-bottom: 24rpx; }
.node-speak { margin-bottom: 32rpx; }
.options { display: flex; flex-direction: column; gap: 20rpx; }
.option { display: flex; align-items: center; background: #f8f2e8; border: 4rpx solid transparent; border-radius: 24rpx; padding: 26rpx 28rpx; }
.option { display: flex; align-items: center; background: #f8f2e8; border: 6rpx solid transparent; border-radius: 24rpx; padding: 26rpx 28rpx; }
.option.disabled { opacity: 0.6; }
.option:active { border-color: #ff9a3d; }
.option.c1 { border-color: #ff9a3d; }
.option.c2 { border-color: #4ecdc4; }
.option.c3 { border-color: #6c8cff; }
.option.c4 { border-color: #a58cff; }
.option:active { transform: scale(0.98); }
.option-mark { width: 56rpx; height: 56rpx; border-radius: 50%; background: #ff9a3d; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-right: 24rpx; flex-shrink: 0; }
.option-text { font-size: 30rpx; font-weight: 600; color: #5b4636; }
.option-icon { width: 88rpx; height: 88rpx; background: #fff7ec; border-radius: 20rpx; display: flex; align-items: center; justify-content: center; margin-right: 20rpx; flex-shrink: 0; }
.option-icon-img { width: 64rpx; height: 64rpx; }
.option-icon-emoji { font-size: 48rpx; }
.option-text { font-size: 30rpx; font-weight: 600; color: #5b4636; flex: 1; }
.soon { padding: 40rpx; text-align: center; color: #a08c74; background: #f8f2e8; }
.mask { position: fixed; inset: 0; background: rgba(91, 70, 54, 0.5); display: flex; align-items: center; justify-content: center; z-index: 10; }
.feedback { width: 82%; padding: 48rpx 40rpx; }
.fb-title { font-size: 26rpx; color: #a08c74; margin-bottom: 16rpx; }
.fb-option { font-size: 34rpx; font-weight: 800; color: #ff6b35; margin-bottom: 24rpx; }
.fb-line { font-size: 28rpx; line-height: 1.7; border-radius: 16rpx; padding: 16rpx 24rpx; margin-bottom: 16rpx; }
.fb-in { opacity: 0; animation: fb-in 0.4s ease forwards; }
.fb-in.d2 { animation-delay: 0.2s; }
@keyframes fb-in { from { opacity: 0; transform: translateY(16rpx); } to { opacity: 1; transform: translateY(0); } }
.fb-pros { background: #e8f7f3; color: #1fa98f; }
.fb-cons { background: #fff0e5; color: #e07b39; }
.fb-mark { font-weight: 800; margin-right: 8rpx; }