first save
This commit is contained in:
333
scoring/pages/compute/compute.vue
Normal file
333
scoring/pages/compute/compute.vue
Normal file
@@ -0,0 +1,333 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 顶部表头 -->
|
||||
<view class="table-header">
|
||||
<view class="header-player">玩家</view>
|
||||
<view class="header-result">胜负</view>
|
||||
<view class="header-score">得分</view>
|
||||
</view>
|
||||
|
||||
<!-- 玩家信息区域 -->
|
||||
<view class="player-row">
|
||||
<view class="player-info">
|
||||
<view class="player-avatar">
|
||||
<!-- 兔子头像 SVG -->
|
||||
<svg width="30" height="30" viewBox="0 0 30 30">
|
||||
<ellipse cx="15" cy="20" rx="9" ry="6" fill="#ffffff"/>
|
||||
<circle cx="15" cy="12" r="7" fill="#ffffff"/>
|
||||
<ellipse cx="12" cy="8" rx="2" ry="4" fill="#ffffff"/>
|
||||
<ellipse cx="18" cy="8" rx="2" ry="4" fill="#ffffff"/>
|
||||
<ellipse cx="12" cy="8" rx="1" ry="3" fill="#ffb6c1"/>
|
||||
<ellipse cx="18" cy="8" rx="1" ry="3" fill="#ffb6c1"/>
|
||||
<circle cx="13" cy="12" r="1" fill="#333333"/>
|
||||
<circle cx="17" cy="12" r="1" fill="#333333"/>
|
||||
<circle cx="15" cy="14" r="0.8" fill="#ff69b4"/>
|
||||
<path d="M14,16 Q15,17 16,16" stroke="#ff69b4" stroke-width="0.5" fill="none"/>
|
||||
<circle cx="11" cy="13" r="1.5" fill="#ffb6c1" opacity="0.6"/>
|
||||
<circle cx="19" cy="13" r="1.5" fill="#ffb6c1" opacity="0.6"/>
|
||||
<rect x="10" cy="19" width="10" height="4" fill="#4169e1" rx="1"/>
|
||||
<circle cx="20" cy="21" r="2" fill="#ffd700"/>
|
||||
</svg>
|
||||
</view>
|
||||
<text class="player-name">玩家59306</text>
|
||||
</view>
|
||||
|
||||
<view class="result-buttons">
|
||||
<view
|
||||
class="result-btn"
|
||||
:class="{ active: result === 'win' }"
|
||||
@tap="setResult('win')"
|
||||
>胜</view>
|
||||
<view
|
||||
class="result-btn"
|
||||
:class="{ active: result === 'lose' }"
|
||||
@tap="setResult('lose')"
|
||||
>负</view>
|
||||
</view>
|
||||
|
||||
<view class="score-display">
|
||||
<text class="score-value">{{ score }}</text>
|
||||
<button class="sum-btn" @tap="sumScore">Σ 合分</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 固定在底部的数字键盘 -->
|
||||
<view class="keyboard">
|
||||
<view
|
||||
v-for="key in keys"
|
||||
:key="key.value"
|
||||
class="key"
|
||||
:class="{
|
||||
'operator': key.type === 'operator',
|
||||
'minus': key.value === '-',
|
||||
'submit-key': key.type === 'submit'
|
||||
}"
|
||||
@tap="pressKey(key.value, key.type)"
|
||||
>{{ key.display }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const result = ref('win');
|
||||
const score = ref('0');
|
||||
|
||||
// 键盘布局 - 提交按钮在0的左侧
|
||||
const keys = [
|
||||
{ value: '1', display: '1', type: 'number' },
|
||||
{ value: '2', display: '2', type: 'number' },
|
||||
{ value: '3', display: '3', type: 'number' },
|
||||
{ value: '+', display: '+', type: 'operator' },
|
||||
{ value: '×', display: '×', type: 'delete' },
|
||||
{ value: '4', display: '4', type: 'number' },
|
||||
{ value: '5', display: '5', type: 'number' },
|
||||
{ value: '6', display: '6', type: 'number' },
|
||||
{ value: '-', display: '-', type: 'operator' },
|
||||
{ value: '√', display: '√', type: 'operator' },
|
||||
{ value: '7', display: '7', type: 'number' },
|
||||
{ value: '8', display: '8', type: 'number' },
|
||||
{ value: '9', display: '9', type: 'number' },
|
||||
{ value: 'submit', display: '提交', type: 'submit' }, // 提交按钮在0的左侧
|
||||
{ value: '0', display: '0', type: 'number' }
|
||||
];
|
||||
|
||||
const setResult = (res) => {
|
||||
result.value = res;
|
||||
};
|
||||
|
||||
const pressKey = (key, type) => {
|
||||
if (type === 'submit') {
|
||||
// 提交分数
|
||||
if (score.value !== '0') {
|
||||
uni.showToast({
|
||||
title: `分数 ${score.value} 已提交`,
|
||||
icon: 'success'
|
||||
});
|
||||
|
||||
// 实际应用中，这里应该调用API提交分数
|
||||
console.log('提交分数:', score.value);
|
||||
|
||||
// 重置分数
|
||||
setTimeout(() => {
|
||||
score.value = '0';
|
||||
}, 1500);
|
||||
}
|
||||
} else if (key === '×') {
|
||||
// 删除最后一个字符
|
||||
if (score.value.length > 1) {
|
||||
score.value = score.value.slice(0, -1);
|
||||
} else {
|
||||
score.value = '0';
|
||||
}
|
||||
} else if (key === '√') {
|
||||
// 计算平方根
|
||||
try {
|
||||
const result = Math.sqrt(parseFloat(score.value));
|
||||
score.value = result.toString();
|
||||
} catch (error) {
|
||||
score.value = '错误';
|
||||
setTimeout(() => {
|
||||
score.value = '0';
|
||||
}, 1000);
|
||||
}
|
||||
} else {
|
||||
// 添加数字或运算符
|
||||
if (score.value === '0') {
|
||||
score.value = key;
|
||||
} else {
|
||||
score.value += key;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const sumScore = () => {
|
||||
uni.showToast({
|
||||
title: '合分功能需要与后端API交互',
|
||||
icon: 'none'
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
padding-bottom: 240rpx; /* 为底部键盘留出空间 */
|
||||
}
|
||||
|
||||
/* 顶部表头 */
|
||||
.table-header {
|
||||
display: flex;
|
||||
background-color: white;
|
||||
padding: 30rpx 40rpx;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.header-player {
|
||||
flex: 1;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.header-result {
|
||||
width: 200rpx;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-score {
|
||||
width: 200rpx;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 玩家信息区域 */
|
||||
.player-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx 40rpx;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.player-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.player-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 16rpx;
|
||||
background-color: #1e3a8a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.player-name {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.result-buttons {
|
||||
width: 200rpx;
|
||||
display: flex;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 8rpx;
|
||||
padding: 4rpx;
|
||||
}
|
||||
|
||||
.result-btn {
|
||||
flex: 1;
|
||||
padding: 12rpx 0;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.result-btn.active {
|
||||
background-color: #6a5acd;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.score-display {
|
||||
width: 200rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.score-value {
|
||||
font-size: 36rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sum-btn {
|
||||
background-color: #6a5acd;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8rpx;
|
||||
padding: 12rpx 20rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
/* 固定在底部的数字键盘 */
|
||||
.keyboard {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 1px;
|
||||
background-color: #e0e0e0;
|
||||
padding: 1px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: 750rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.key {
|
||||
background-color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 120rpx;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.key:active {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.operator {
|
||||
color: #6a5acd;
|
||||
}
|
||||
|
||||
.minus {
|
||||
color: #ff4757;
|
||||
}
|
||||
|
||||
.submit-key {
|
||||
background-color: #8a2be2;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 调整键盘布局，使提交按钮在0的左侧 */
|
||||
.keyboard {
|
||||
grid-template-areas:
|
||||
"num1 num2 num3 plus delete"
|
||||
"num4 num5 num6 minus sqrt"
|
||||
"num7 num8 num9 submit num0";
|
||||
}
|
||||
|
||||
.key:nth-child(1) { grid-area: num1; }
|
||||
.key:nth-child(2) { grid-area: num2; }
|
||||
.key:nth-child(3) { grid-area: num3; }
|
||||
.key:nth-child(4) { grid-area: plus; }
|
||||
.key:nth-child(5) { grid-area: delete; }
|
||||
.key:nth-child(6) { grid-area: num4; }
|
||||
.key:nth-child(7) { grid-area: num5; }
|
||||
.key:nth-child(8) { grid-area: num6; }
|
||||
.key:nth-child(9) { grid-area: minus; }
|
||||
.key:nth-child(10) { grid-area: sqrt; }
|
||||
.key:nth-child(11) { grid-area: num7; }
|
||||
.key:nth-child(12) { grid-area: num8; }
|
||||
.key:nth-child(13) { grid-area: num9; }
|
||||
.key:nth-child(14) { grid-area: submit; }
|
||||
.key:nth-child(15) { grid-area: num0; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user