333 lines
7.7 KiB
Vue
333 lines
7.7 KiB
Vue
<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> |