From 32cdaf44cc6531b17cdf312518ea772e3f0ddf3c Mon Sep 17 00:00:00 2001 From: Joywayer Date: Wed, 4 Feb 2026 19:56:35 +0800 Subject: [PATCH] Optimize UI for unit converter and random draw, remove relative calculator page --- .../minipro/calculation/miniprogram/app.json | 1 - .../miniprogram/pages/index/index.ts | 6 - .../miniprogram/pages/index/index.wxml | 11 - .../pages/random-draw/random-draw.wxml | 34 ++- .../pages/random-draw/random-draw.wxss | 246 ++++++++++++------ .../miniprogram/pages/relative/relative.json | 4 - .../miniprogram/pages/relative/relative.ts | 152 ----------- .../miniprogram/pages/relative/relative.wxml | 19 -- .../miniprogram/pages/relative/relative.wxss | 64 ----- .../pages/unit-converter/unit-converter.wxml | 56 ++-- .../pages/unit-converter/unit-converter.wxss | 169 +++++++++--- 11 files changed, 352 insertions(+), 410 deletions(-) delete mode 100644 games/minipro/calculation/miniprogram/pages/relative/relative.json delete mode 100644 games/minipro/calculation/miniprogram/pages/relative/relative.ts delete mode 100644 games/minipro/calculation/miniprogram/pages/relative/relative.wxml delete mode 100644 games/minipro/calculation/miniprogram/pages/relative/relative.wxss diff --git a/games/minipro/calculation/miniprogram/app.json b/games/minipro/calculation/miniprogram/app.json index 22efb8c..b6629ec 100644 --- a/games/minipro/calculation/miniprogram/app.json +++ b/games/minipro/calculation/miniprogram/app.json @@ -4,7 +4,6 @@ "pages/profile/profile", "pages/calculator/calculator", "pages/unit-converter/unit-converter", - "pages/relative/relative", "pages/random-draw/random-draw", "pages/logs/logs", "pages/webview/webview" diff --git a/games/minipro/calculation/miniprogram/pages/index/index.ts b/games/minipro/calculation/miniprogram/pages/index/index.ts index 8462e98..2024a3a 100644 --- a/games/minipro/calculation/miniprogram/pages/index/index.ts +++ b/games/minipro/calculation/miniprogram/pages/index/index.ts @@ -64,12 +64,6 @@ Component({ }); }, - goToRelativeCalculator() { - wx.navigateTo({ - url: '/pages/relative/relative' - }); - }, - goToRandomDraw() { wx.navigateTo({ url: '/pages/random-draw/random-draw' diff --git a/games/minipro/calculation/miniprogram/pages/index/index.wxml b/games/minipro/calculation/miniprogram/pages/index/index.wxml index b3efbb4..63e0bb9 100644 --- a/games/minipro/calculation/miniprogram/pages/index/index.wxml +++ b/games/minipro/calculation/miniprogram/pages/index/index.wxml @@ -43,17 +43,6 @@ - - - - 👋 - - - 亲戚称呼 - 拜年神器 - - - diff --git a/games/minipro/calculation/miniprogram/pages/random-draw/random-draw.wxml b/games/minipro/calculation/miniprogram/pages/random-draw/random-draw.wxml index 6d63c31..e7b12ef 100644 --- a/games/minipro/calculation/miniprogram/pages/random-draw/random-draw.wxml +++ b/games/minipro/calculation/miniprogram/pages/random-draw/random-draw.wxml @@ -1,6 +1,7 @@ - 输入名字，看看今天谁是天选打工人 + 🎲 天选打工人 + 输入名字，看看今天谁去拿外卖 @@ -8,26 +9,31 @@ 添加 - - - - - {{item}} - × + + 候选名单 ({{names.length}}) + + + + + {{item}} + × + + + + 🍃 + 还没有候选人，快去添加吧~ - - - 还没有候选人，快去添加吧 - - + + + 🎉 天选之人 {{result || '?'}} - diff --git a/games/minipro/calculation/miniprogram/pages/random-draw/random-draw.wxss b/games/minipro/calculation/miniprogram/pages/random-draw/random-draw.wxss index 3bbcf40..6308054 100644 --- a/games/minipro/calculation/miniprogram/pages/random-draw/random-draw.wxss +++ b/games/minipro/calculation/miniprogram/pages/random-draw/random-draw.wxss @@ -1,6 +1,7 @@ page { - background-color: #f6f7f9; + background: linear-gradient(180deg, #fce4ec 0%, #f3e5f5 100%); height: 100%; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } .container { @@ -13,9 +14,20 @@ page { .header-tip { text-align: center; - margin-bottom: 20px; - color: #666; + margin-bottom: 24px; +} + +.title { + font-size: 24px; + font-weight: bold; + color: #880e4f; + margin-bottom: 4px; +} + +.subtitle { font-size: 14px; + color: #ad1457; + opacity: 0.7; } .input-area { @@ -23,133 +35,201 @@ page { margin-bottom: 20px; background: #fff; border-radius: 50px; - padding: 5px; - box-shadow: 0 2px 10px rgba(0,0,0,0.05); + padding: 6px; + box-shadow: 0 4px 12px rgba(173, 20, 87, 0.1); + border: 2px solid rgba(255,255,255,0.5); } .input { flex: 1; - height: 40px; + height: 44px; padding: 0 20px; font-size: 16px; + color: #333; } .btn-add { - width: 80px; - height: 40px; - line-height: 40px; + min-width: 80px; + height: 44px; + line-height: 44px; text-align: center; - background: #9c27b0; + background: linear-gradient(135deg, #ec407a, #d81b60); color: #fff; border-radius: 40px; - font-size: 14px; + font-size: 15px; font-weight: bold; + box-shadow: 0 4px 8px rgba(216, 27, 96, 0.3); + transition: opacity 0.2s; +} + +.btn-add:active { + opacity: 0.8; +} + +.list-container { + flex: 1; + display: flex; + flex-direction: column; + background: rgba(255, 255, 255, 0.6); + border-radius: 20px; + padding: 15px 15px 5px 15px; /* bottom padding smaller because scrollview */ + margin-bottom: 20px; + backdrop-filter: blur(10px); + min-height: 0; /* Important for flex child to scroll */ +} + +.list-header { + font-size: 14px; + color: #888; + margin-bottom: 10px; + padding-left: 5px; } .list-area { - flex: 1; - background: #fff; - border-radius: 12px; - padding: 10px; - margin-bottom: 20px; - box-shadow: 0 2px 10px rgba(0,0,0,0.05); - overflow: hidden; + flex: 1; + overflow: hidden; } .name-list { - display: flex; - flex-wrap: wrap; - gap: 10px; - padding: 10px; + display: flex; + flex-wrap: wrap; + align-content: flex-start; /* 防止换行后拉伸 */ + gap: 10px; + padding-bottom: 10px; } .name-item { - background: #f3e5f5; - color: #4a148c; - padding: 8px 16px; - border-radius: 20px; - font-size: 14px; - display: flex; - align-items: center; - position: relative; + padding: 8px 16px 8px 12px; + border-radius: 20px; + font-size: 14px; + display: flex; + align-items: center; + position: relative; + font-weight: 500; + box-shadow: 0 2px 5px rgba(0,0,0,0.05); + animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } +@keyframes popIn { + from { transform: scale(0.8); opacity: 0; } + to { transform: scale(1); opacity: 1; } +} + +/* 伪随机颜色，根据 .color-0 到 .color-4 */ +.color-0 { background: #e3f2fd; color: #1565c0; } +.color-1 { background: #e8f5e9; color: #2e7d32; } +.color-2 { background: #fff3e0; color: #ef6c00; } +.color-3 { background: #f3e5f5; color: #7b1fa2; } +.color-4 { background: #ffebee; color: #c62828; } + .name-text { - margin-right: 15px; + margin-right: 18px; /* 给关闭按钮留空间 */ } .btn-delete { - width: 20px; - height: 20px; - line-height: 18px; - text-align: center; - border-radius: 50%; - background: rgba(0,0,0,0.1); - color: #4a148c; - font-size: 16px; - position: absolute; - right: 5px; - top: 50%; - transform: translateY(-50%); + position: absolute; + right: 6px; + top: 50%; + transform: translateY(-50%); + width: 20px; + height: 20px; + line-height: 18px; + text-align: center; + border-radius: 50%; + background: rgba(0,0,0,0.08); + font-size: 16px; + font-weight: normal; +} +.btn-delete:active { + background: rgba(0,0,0,0.2); } +.color-0 .btn-delete { color: #1565c0; } +.color-1 .btn-delete { color: #2e7d32; } +.color-2 .btn-delete { color: #ef6c00; } +.color-3 .btn-delete { color: #7b1fa2; } +.color-4 .btn-delete { color: #c62828; } + .empty-tip { - width: 100%; - text-align: center; - color: #999; - padding-top: 50px; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + color: #999; + padding-top: 40px; +} + +.empty-icon { + font-size: 40px; + margin-bottom: 10px; + opacity: 0.5; } .result-area { - height: 200px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; + display: flex; + flex-direction: column; + align-items: center; + padding-bottom: 20px; } .result-box { - width: 120px; - height: 120px; - border-radius: 50%; - background: #fff; - display: flex; - justify-content: center; - align-items: center; - margin-bottom: 20px; - border: 5px solid #e1bee7; - box-shadow: 0 4px 15px rgba(156, 39, 176, 0.2); - transition: all 0.1s; + width: 100%; + background: #fff; + border-radius: 20px; + padding: 20px; + text-align: center; + margin-bottom: 20px; + box-shadow: 0 10px 30px rgba(0,0,0,0.1); + display: flex; + flex-direction: column; + justify-content: center; + min-height: 120px; + transition: transform 0.1s; } .result-box.rolling { - transform: scale(1.1); - border-color: #9c27b0; + transform: scale(0.98); + background: #fff8e1; +} + +.result-label { + font-size: 13px; + color: #999; + margin-bottom: 5px; + text-transform: uppercase; + letter-spacing: 1px; } .result-text { - font-size: 24px; - font-weight: bold; - color: #333; - /* Prevent long names from overflowing */ - max-width: 90%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + font-size: 32px; + font-weight: 800; + color: #333; + /* Prevent long names from overflowing */ + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } .btn-start { - width: 80% !important; - background: linear-gradient(135deg, #ab47bc 0%, #8e24aa 100%); - color: #fff; - border-radius: 30px; - padding: 12px 0; - font-size: 18px; - box-shadow: 0 4px 15px rgba(142, 36, 170, 0.4); + width: 100% !important; + background: linear-gradient(135deg, #7b1fa2 0%, #4a148c 100%); + color: #fff; + border-radius: 50px; + padding: 14px 0; + font-size: 18px; + font-weight: bold; + box-shadow: 0 8px 20px rgba(74, 20, 140, 0.4); + transition: all 0.2s; +} + +.btn-start-hover { + transform: translateY(2px); + box-shadow: 0 4px 10px rgba(74, 20, 140, 0.3); } .btn-start[disabled] { - opacity: 0.7; - background: #ccc; - box-shadow: none; + opacity: 0.6; + background: #9e9e9e; + box-shadow: none; + transform: none; } diff --git a/games/minipro/calculation/miniprogram/pages/relative/relative.json b/games/minipro/calculation/miniprogram/pages/relative/relative.json deleted file mode 100644 index 6f6e157..0000000 --- a/games/minipro/calculation/miniprogram/pages/relative/relative.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "usingComponents": {}, - "navigationBarTitleText": "亲戚称呼计算器" -} \ No newline at end of file diff --git a/games/minipro/calculation/miniprogram/pages/relative/relative.ts b/games/minipro/calculation/miniprogram/pages/relative/relative.ts deleted file mode 100644 index 459a19e..0000000 --- a/games/minipro/calculation/miniprogram/pages/relative/relative.ts +++ /dev/null @@ -1,152 +0,0 @@ - -/* Simplified Relationship Data */ -const relationships: Record = { - 'default': '我', - 'f': '父亲', - 'm': '母亲', - 'h': '丈夫', - 'w': '妻子', - 's': '儿子', - 'd': '女儿', - 'ob': '哥哥', - 'yb': '弟弟', - 'os': '姐姐', - 'ys': '妹妹', - - 'f,f': '爷爷', - 'f,m': '奶奶', - 'f,h': '爸爸', // redundancy - 'f,w': '妈妈', // redundancy - 'f,s': '兄弟', // Context dependent, usually brother or self - 'f,d': '姐妹', - 'f,ob': '伯父', - 'f,yb': '叔叔', - 'f,os': '姑妈', - 'f,ys': '姑姑', - - 'm,f': '姥爷', - 'm,m': '姥姥', - 'm,ob': '舅舅', - 'm,yb': '舅舅', - 'm,os': '姨妈', - 'm,ys': '姨妈', - - 'f,f,f': '太爷爷', - 'f,f,m': '太奶奶', - 'f,m,f': '太姥爷', - 'f,m,m': '太姥姥', - - 'h,f': '公公', - 'h,m': '婆婆', - 'w,f': '岳父', - 'w,m': '岳母', - - 'ob,w': '嫂子', - 'yb,w': '弟妹', - 'os,h': '姐夫', - 'ys,h': '妹夫', - - 'f,ob,w': '伯母', - 'f,yb,w': '婶婶', - 'f,os,h': '姑父', - 'f,ys,h': '姑父', - - 'm,ob,w': '舅妈', - 'm,yb,w': '舅妈', - 'm,os,h': '姨父', - 'm,ys,h': '姨父' -}; - -/* Reverse lookup or more complex logic could be added here */ - -Page({ - data: { - screenText: '我', // Display the chain: 父亲 的 母亲 - resultText: '', // Display the result: 奶奶 - currentChain: [] as string[], // Stores codes: ['f', 'm'] - gender: 1, // 1: Male, 0: Female (of the user) - - buttons: [ - { text: '父', id: 'f' }, - { text: '母', id: 'm' }, - { text: '夫', id: 'h' }, - { text: '妻', id: 'w' }, - { text: '儿', id: 's' }, - { text: '女', id: 'd' }, - { text: '兄', id: 'ob' }, - { text: '弟', id: 'yb' }, - { text: '姐', id: 'os' }, - { text: '妹', id: 'ys' } - ] - }, - - onLoad() { - - }, - - handleBtnClick(e: any) { - const id = e.currentTarget.dataset.id; - const text = e.currentTarget.dataset.text; - - const newChain = [...this.data.currentChain, id]; - const newScreenText = this.data.currentChain.length === 0 ? text : this.data.screenText + ' 的 ' + text; - - this.setData({ - currentChain: newChain, - screenText: newScreenText - }); - - this.calculate(newChain); - }, - - handleBack() { - if (this.data.currentChain.length === 0) return; - - const newChain = [...this.data.currentChain]; - newChain.pop(); - - let newScreenText = '我'; - if (newChain.length > 0) { - // Rebuild text - newScreenText = newChain.map(code => { - const btn = this.data.buttons.find(b => b.id === code); - return btn ? btn.text : ''; - }).join(' 的 '); - } - - this.setData({ - currentChain: newChain, - screenText: newScreenText - }); - - if (newChain.length > 0) { - this.calculate(newChain); - } else { - this.setData({ resultText: '' }); - } - }, - - handleClear() { - this.setData({ - currentChain: [], - screenText: '我', - resultText: '' - }); - }, - - calculate(chain: string[]) { - const key = chain.join(','); - const result = relationships[key]; - - if (result) { - this.setData({ resultText: result }); - } else { - this.setData({ resultText: '未知亲戚 / 关系太远' }); - } - }, - - switchGender() { - this.setData({ gender: this.data.gender === 1 ? 0 : 1 }); - // Might affect initial 'Me' context if we expand logic - } -}); diff --git a/games/minipro/calculation/miniprogram/pages/relative/relative.wxml b/games/minipro/calculation/miniprogram/pages/relative/relative.wxml deleted file mode 100644 index ceca2eb..0000000 --- a/games/minipro/calculation/miniprogram/pages/relative/relative.wxml +++ /dev/null @@ -1,19 +0,0 @@ - - - {{screenText}} - {{resultText}} - - - - - - - - - - - - - - - diff --git a/games/minipro/calculation/miniprogram/pages/relative/relative.wxss b/games/minipro/calculation/miniprogram/pages/relative/relative.wxss deleted file mode 100644 index 7afceb7..0000000 --- a/games/minipro/calculation/miniprogram/pages/relative/relative.wxss +++ /dev/null @@ -1,64 +0,0 @@ -.container { - display: flex; - flex-direction: column; - height: 100vh; - background-color: #f6f6f6; -} - -.display-area { - flex: 1; - background-color: #fff; - padding: 20px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-end; -} - -.chain-text { - font-size: 18px; - color: #666; - margin-bottom: 20px; - word-break: break-all; - text-align: right; -} - -.result-text { - font-size: 32px; - color: #333; - font-weight: bold; -} - -.control-area { - background-color: #e0e0e0; - padding: 10px; - padding-bottom: 40px; /* Safe area for some phones */ -} - -.action-bar { - display: flex; - justify-content: space-between; - margin-bottom: 10px; -} - -.action-btn { - background-color: #f8f8f8; - color: #f00; - width: 48%; -} - -.grid-keyboard { - display: grid; - grid-template-columns: repeat(5, 1fr); - gap: 10px; -} - -.key-btn { - background-color: #fff; - height: 60px; - line-height: 60px; - text-align: center; - font-size: 18px; - border-radius: 5px; - padding: 0; -} diff --git a/games/minipro/calculation/miniprogram/pages/unit-converter/unit-converter.wxml b/games/minipro/calculation/miniprogram/pages/unit-converter/unit-converter.wxml index 062f96f..3c705b5 100644 --- a/games/minipro/calculation/miniprogram/pages/unit-converter/unit-converter.wxml +++ b/games/minipro/calculation/miniprogram/pages/unit-converter/unit-converter.wxml @@ -1,31 +1,49 @@ - + + - - 当前分类：{{categories[categoryIndex]}} + + 当前换算 + {{categories[categoryIndex]}} + ▼ - - - - - - {{currentUnits[fromIndex].name}} - - + + + + 输入 + + + + + {{currentUnits[fromIndex].name}} ▼ + + + - = + + + ⇅ + - - {{outputValue}} - - - {{currentUnits[toIndex].name}} - - + + + 结果 + + {{outputValue || '0'}} + + + {{currentUnits[toIndex].name}} ▼ + + + + + + 点击单位或数字进行修改 + diff --git a/games/minipro/calculation/miniprogram/pages/unit-converter/unit-converter.wxss b/games/minipro/calculation/miniprogram/pages/unit-converter/unit-converter.wxss index ade1e7b..b5ab7d5 100644 --- a/games/minipro/calculation/miniprogram/pages/unit-converter/unit-converter.wxss +++ b/games/minipro/calculation/miniprogram/pages/unit-converter/unit-converter.wxss @@ -1,56 +1,151 @@ +page { + background-color: #f7f8fa; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; +} + .container { padding: 20px; + max-width: 600px; + margin: 0 auto; } -.section { - background: #f0f0f0; - border-radius: 8px; - margin-bottom: 20px; - padding: 10px; - text-align: center; +/* 顶部选择区 */ +.header-section { + margin-bottom: 24px; + display: flex; + justify-content: center; } -.picker { - font-size: 18px; +.category-picker { + background: #ffffff; + padding: 10px 24px; + border-radius: 50px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); + display: flex; + align-items: center; + gap: 10px; color: #333; } -.converter-box { +.category-picker .label { + font-size: 14px; + color: #888; +} + +.category-picker .value { + font-size: 18px; + font-weight: 600; + color: #007aff; +} + +.category-picker .arrow { + font-size: 12px; + color: #ccc; +} + +/* 核心转换卡片 */ +.converter-card { + background: #ffffff; + border-radius: 20px; + padding: 10px; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; - gap: 20px; } -.input-group { +.conversion-row { + padding: 20px; + position: relative; +} + +.input-row { + background-color: #fff; + border-radius: 16px 16px 4px 4px; +} + +.output-row { + background-color: #f9fbfd; /* 稍微不同的背景色区分输入输出 */ + border-radius: 4px 4px 16px 16px; +} + +.row-label { + font-size: 12px; + color: #999; + margin-bottom: 8px; + text-transform: uppercase; + letter-spacing: 1px; +} + +.row-content { + display: flex; + justify-content: space-between; + align-items: center; +} + +.value-input, .value-display { + flex: 1; + font-size: 32px; + font-weight: 500; + color: #333; + height: 48px; + line-height: 48px; + min-width: 0; /* 防止flex子项溢出 */ +} + +.value-display { + color: #007aff; /* 结果颜色高亮 */ +} + +/* 单位选择器 */ +.unit-selector { + margin-left: 15px; +} + +.unit-text { display: flex; align-items: center; - border: 1px solid #ddd; - border-radius: 8px; - padding: 10px; - background: #fff; -} - -.input-group input, .result-display { - flex: 1; - font-size: 24px; - height: 40px; - line-height: 40px; -} - -.result-display { - min-height: 40px; -} - -.unit-picker { - margin-left: 10px; - padding: 5px 10px; - background: #eee; - border-radius: 4px; + gap: 6px; + padding: 8px 16px; + background-color: #f0f2f5; + border-radius: 12px; font-size: 16px; + color: #444; + font-weight: 500; + transition: background-color 0.2s; } -.separator { - text-align: center; - font-size: 30px; - color: #999; +.unit-text:active { + background-color: #e1e4e8; +} + +.unit-arrow { + font-size: 10px; + color: #888; +} + +/* 分割线和图标 */ +.divider { + height: 1px; + background-color: #eee; + margin: 0 20px; + position: relative; + display: flex; + justify-content: center; + align-items: center; +} + +.icon-transfer { + position: absolute; + background: #fff; + color: #ccc; + font-size: 20px; + padding: 0 10px; + top: -14px; +} + +.tips { + text-align: center; + margin-top: 30px; + font-size: 13px; + color: #ccc; }