891 lines
23 KiB
Vue
891 lines
23 KiB
Vue
<template>
|
||
<view class="singleplay">
|
||
<!-- 顶部功能区 -->
|
||
<view class="top-functions">
|
||
<view class="function-btn" @click="addPlayer">
|
||
<image src="/static/add.png" class="btn-icon" mode="aspectFill"></image>
|
||
<text>添加玩家</text>
|
||
</view>
|
||
<view class="function-btn" @click="transferScorer">
|
||
<image src="/static/transfer.png" class="btn-icon" mode="aspectFill"></image>
|
||
<text>转让计分员</text>
|
||
</view>
|
||
<view class="switch-group">
|
||
<text>语音播报</text>
|
||
<switch :checked="voiceBroadcast" @change="voiceBroadcast = $event.detail.value" color="#007aff" />
|
||
</view>
|
||
<view class="switch-group">
|
||
<text>台板</text>
|
||
<switch :checked="tableMode" @change="tableMode = $event.detail.value" color="#007aff" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 对局记录区域 -->
|
||
<view class="game-record">
|
||
<view class="record-title">
|
||
对局记录
|
||
<text class="hint">点击对局分数进行修改</text>
|
||
</view>
|
||
|
||
<!-- 用户信息区域 -->
|
||
<view class="user-section">
|
||
<text class="user-hint">点击自己头像编辑用户头像和昵称~</text>
|
||
<view class="user-info" @click="editUserInfo">
|
||
<image class="user-avatar" :src="currentUser.avatar" mode="aspectFill"></image>
|
||
<view class="user-details">
|
||
<view class="user-name">
|
||
{{ currentUser.name }}
|
||
<text class="self-tag">自己</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 玩家列表 -->
|
||
<view class="players-section">
|
||
<view class="section-header">
|
||
<text class="header-title">玩家</text>
|
||
<text class="player-count">({{ players.length }}位)</text>
|
||
</view>
|
||
|
||
<!-- 玩家表格（表头在左侧） -->
|
||
<view class="players-table-container vertical">
|
||
<view class="players-table vertical">
|
||
<!-- 表头行 -->
|
||
<view class="table-row header-row">
|
||
<!-- 固定表头：玩家 -->
|
||
<view class="header-cell player-column">玩家</view>
|
||
<!-- 每个玩家作为一列 -->
|
||
<view v-for="(player, index) in displayPlayers" :key="player.id" class="data-cell">
|
||
<view class="player-info">
|
||
<image :src="player.avatar" mode="aspectFill"></image>
|
||
<text>{{ player.name }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 总分行 -->
|
||
<view class="table-row">
|
||
<view class="header-cell score-column">总分</view>
|
||
<view v-for="(player, index) in displayPlayers" :key="player.id" class="data-cell score-display" >
|
||
{{ player.score }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 每局分数行 -->
|
||
<view v-for="(round, roundIndex) in rounds" :key="round" class="table-row">
|
||
<view class="header-cell score-column">第{{ round }}局</view>
|
||
<view @click="editScore(index)" v-for="(player, playerIndex) in displayPlayers" :key="player.id" class="data-cell score-display">
|
||
{{ player.roundScores[roundIndex] || 0 }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!--
|
||
<view>
|
||
<button @click="postscore">提交分数</button>
|
||
<input v-model="score.value.playerId" type="number" placeholder="输入分数" :src="score.value.playerId">
|
||
</view> -->
|
||
|
||
<!-- 底部操作按钮 -->
|
||
<view class="bottom-buttons">
|
||
<button class="start-btn" type="primary" @click="startScoring">开局计分</button>
|
||
<button class="settle-btn" type="default" @click="settleRoom">结算房间</button>
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted, onUnmounted, toRaw } from 'vue'
|
||
import { GET,POST } from '../../../utils/request'
|
||
import { BASE_URL } from '../../../utils/CommonValues.js';
|
||
const res=ref(null)
|
||
// const score=ref(
|
||
// playerId: currentUser.id
|
||
// )
|
||
|
||
const getuserinfo =()=>{
|
||
GET('/score/info/list',null,).then(res=>{
|
||
console.log('获取用户信息成功:', res.data)
|
||
|
||
// 检查API返回数据结构
|
||
if(res.data && res.data.code === 200 && Array.isArray(res.data.rows)) {
|
||
const userList = res.data.rows;
|
||
|
||
// 清空现有的玩家列表（保留自己）
|
||
const selfPlayer = players.value.find(p => p.id === 'self');
|
||
players.value = selfPlayer ? [selfPlayer] : [];
|
||
|
||
// 将API返回的用户信息添加到玩家列表
|
||
userList.forEach(user => {
|
||
if(user.nickName) {
|
||
// 处理头像URL：如果是相对路径则与BASE_URL拼接
|
||
let avatarUrl = user.avatars;
|
||
if (avatarUrl) {
|
||
// 检查是否是相对路径（以/开头）
|
||
if (avatarUrl.startsWith('/')) {
|
||
avatarUrl = `${BASE_URL}${avatarUrl}`;
|
||
} else if (!avatarUrl.startsWith('http://') && !avatarUrl.startsWith('https://')) {
|
||
// 不是绝对URL也不是以/开头的相对路径，拼接完整路径
|
||
avatarUrl = `${BASE_URL}/${avatarUrl}`;
|
||
}
|
||
} else {
|
||
// 如果没有头像则使用默认头像
|
||
avatarUrl = '/static/avatar14.png';
|
||
}
|
||
|
||
const newPlayer = {
|
||
id: `player_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
|
||
name: user.nickName, // 使用API返回的nickName作为玩家名称
|
||
avatar: avatarUrl, // 使用处理后的头像URL
|
||
score: 0,
|
||
roundScores: []
|
||
};
|
||
players.value.push(newPlayer);
|
||
}
|
||
});
|
||
|
||
console.log('玩家列表更新完成:', players.value);
|
||
uni.showToast({
|
||
title: `成功添加${userList.length}位玩家`,
|
||
icon: 'success'
|
||
});
|
||
} else {
|
||
console.error('API返回数据结构异常:', res.data);
|
||
uni.showToast({
|
||
title: '获取玩家信息失败，数据结构异常',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
}).catch(err=>{
|
||
console.error('获取用户信息失败:', err);
|
||
// 使用request.js中提供的友好错误信息
|
||
const errorMsg = err.userFriendlyMsg || '获取玩家信息失败';
|
||
uni.showToast({
|
||
title: errorMsg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
})
|
||
}
|
||
|
||
// const postscore = () => {
|
||
// POST('/a/post',score.value).then(r=>{
|
||
// console.log('提交分数成功:', r.data,)
|
||
// console.log(score.value)
|
||
// res.value=r.data
|
||
// }).catch(err=>{
|
||
// console.error('提交分数失败:', err);
|
||
// })
|
||
// }
|
||
// 状态管理
|
||
const voiceBroadcast = ref(false)
|
||
const tableMode = ref(false)
|
||
const roomId = ref('')
|
||
// 当前用户信息 - 从本地存储获取
|
||
const storedUserInfo = uni.getStorageSync('userInfo');
|
||
const currentUser = ref({
|
||
id: 'self',
|
||
name: storedUserInfo?.name||'玩家50920' ,
|
||
avatar: storedUserInfo?.avatar ||'/static/logo.png' })
|
||
|
||
// 局数信息
|
||
const rounds = ref([]) // 存储每局信息，每个元素是局数编号
|
||
|
||
// 玩家列表（初始包含自己）
|
||
const players = ref([
|
||
{
|
||
id: 'self',
|
||
name: currentUser.value.name ||'玩家50920',
|
||
avatar: currentUser.value.avatar||'/static/logo.png',
|
||
score: 0,
|
||
roundScores: [] // 存储每局的分数
|
||
}
|
||
])
|
||
|
||
// 台板玩家对象
|
||
const tablePlayer = {
|
||
id: 'table',
|
||
name: '台板',
|
||
avatar: '/static/robot.png',
|
||
score: 0,
|
||
roundScores: [] // 存储每局的分数
|
||
}
|
||
|
||
// 计算属性：动态返回包含或不包含台板玩家的列表
|
||
const displayPlayers = computed(() => {
|
||
if (tableMode.value) {
|
||
// 检查台板玩家是否已存在，避免重复添加
|
||
const hasTablePlayer = players.value.some(player => player.id === 'table')
|
||
if (hasTablePlayer) {
|
||
return players.value
|
||
}
|
||
// 添加台板玩家
|
||
return [...players.value, tablePlayer]
|
||
} else {
|
||
// 移除台板玩家
|
||
return players.value.filter(player => player.id !== 'table')
|
||
}
|
||
})
|
||
|
||
// 添加玩家
|
||
const addPlayer = () => {
|
||
console.log('添加玩家')
|
||
|
||
// 生成默认玩家名
|
||
const defaultPlayerName = '请输入玩家名称'
|
||
|
||
// 弹出对话框让用户输入玩家名称
|
||
uni.showModal({
|
||
title: '添加玩家',
|
||
editable: true,
|
||
placeholderText: defaultPlayerName,
|
||
// #ifdef MP-WEIXIN
|
||
confirmText: '添加',
|
||
cancelText: '取消',
|
||
autofocus: true, // 微信小程序下自动聚焦输入框
|
||
// #endif
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// 获取用户输入的名称，如果为空则使用默认名称
|
||
const playerName = res.content && res.content.trim() !== '' ? res.content.trim() : defaultPlayerName
|
||
|
||
// 创建新玩家
|
||
const newPlayer = {
|
||
id: `player_${Date.now()}`,
|
||
name: playerName,
|
||
avatar: '/static/avatar14.png',
|
||
score: 0,
|
||
roundScores: [] // 存储每局的分数
|
||
}
|
||
|
||
// 添加到玩家列表
|
||
players.value.push(newPlayer)
|
||
|
||
// 语音提示或普通提示（如果开启）
|
||
if (voiceBroadcast.value) {
|
||
uni.showToast({
|
||
title: `已添加玩家 ${newPlayer.name}`,
|
||
icon: 'none'
|
||
})
|
||
// 这里可以添加语音播报逻辑
|
||
} else {
|
||
uni.showToast({
|
||
title: `已添加玩家 ${newPlayer.name}`,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.error('添加玩家失败:', err)
|
||
}
|
||
})
|
||
}
|
||
|
||
// 转让计分员
|
||
const transferScorer = () => {
|
||
console.log('转让计分员')
|
||
|
||
// 显示提示对话框
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '房间内暂无扫码或分享加入房间的玩家，无法转让计分员。',
|
||
showCancel: false,
|
||
// #ifdef MP-WEIXIN
|
||
confirmText: '确定',
|
||
// #endif
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
console.log('用户确认提示')
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.error('显示提示失败:', err)
|
||
}
|
||
})
|
||
}
|
||
|
||
// 编辑用户信息 - 跳转到change页面
|
||
const editUserInfo = () => {
|
||
console.log('跳转到用户信息编辑页面')
|
||
|
||
// 跳转到change页面，并传递当前用户信息
|
||
uni.navigateTo({
|
||
url: `/pages/index/singleplay/change?userData=${encodeURIComponent(JSON.stringify(currentUser.value))}`
|
||
})
|
||
}
|
||
|
||
// 更新用户数据 - 从change页面返回时调用
|
||
const updateUserData = (updatedUser) => {
|
||
console.log('更新用户数据', updatedUser)
|
||
|
||
// 更新当前用户信息
|
||
currentUser.value = { ...updatedUser }
|
||
|
||
// 更新玩家列表中的用户信息
|
||
const selfPlayerIndex = players.value.findIndex(p => p.id === 'self')
|
||
if (selfPlayerIndex !== -1) {
|
||
players.value[selfPlayerIndex] = {
|
||
...players.value[selfPlayerIndex],
|
||
name: updatedUser.name,
|
||
avatar: updatedUser.avatar
|
||
}
|
||
}
|
||
|
||
// 将更新后的用户信息保存到本地存储
|
||
uni.setStorageSync('userInfo', updatedUser)
|
||
uni.setStorageSync('currentUserInfo', updatedUser)
|
||
}
|
||
|
||
// 编辑分数 - 点击分数时调用
|
||
const editScore = (playerIndex) => {
|
||
console.log('编辑分数，玩家索引:', playerIndex)
|
||
|
||
// 获取当前选中的玩家
|
||
const selectedPlayer = displayPlayers.value[playerIndex]
|
||
|
||
// 检查是否有局数记录
|
||
if (rounds.value.length === 0) {
|
||
uni.showToast({
|
||
title: '暂无局数记录，无法编辑分数',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
// 获取当前局数
|
||
const currentRound = rounds.value.length
|
||
|
||
// 准备要传递的玩家数据
|
||
const playersToPass = [...displayPlayers.value]
|
||
|
||
// 保存到临时存储，用于页面间数据传递
|
||
uni.setStorageSync('currentPlayers', JSON.stringify(playersToPass))
|
||
// 保存当前局数
|
||
uni.setStorageSync('currentRound', currentRound)
|
||
// 保存选中的玩家索引
|
||
uni.setStorageSync('selectedPlayerIndex', playerIndex)
|
||
|
||
// 跳转到计分页面进行分数编辑
|
||
uni.navigateTo({
|
||
url: '/pages/index/singleplay/scoring'
|
||
})
|
||
}
|
||
|
||
|
||
// 开局计分
|
||
const startScoring = () => {
|
||
console.log('开局计分')
|
||
|
||
// 检查是否有足够的玩家（至少需要2个玩家才能开始计分）
|
||
if (displayPlayers.value.length < 2) {
|
||
uni.showToast({
|
||
title: '玩家数不超过两个人时无法点击进行开始计分',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
// 新增一局
|
||
const newRound = rounds.value.length + 1
|
||
rounds.value.push(newRound)
|
||
|
||
// 准备要传递的玩家数据
|
||
const playersToPass = [...displayPlayers.value]
|
||
|
||
// 保存到临时存储，用于页面间数据传递
|
||
uni.setStorageSync('currentPlayers', JSON.stringify(playersToPass))
|
||
// 保存当前局数
|
||
uni.setStorageSync('currentRound', newRound)
|
||
|
||
// 跳转到计分页面
|
||
uni.navigateTo({
|
||
url: '/pages/index/singleplay/scoring'
|
||
})
|
||
}
|
||
|
||
// 结算房间
|
||
const settleRoom = () => {
|
||
console.log('结算房间')
|
||
|
||
// 显示结算结果，使用displayPlayers确保包含台板玩家
|
||
let result = '结算结果:\n'
|
||
displayPlayers.value.forEach(player => {
|
||
result += `${player.name}: ${player.score}分\n`
|
||
})
|
||
|
||
uni.showModal({
|
||
title: '结算',
|
||
content: result,
|
||
confirmText: '保存记录',
|
||
cancelText: '关闭',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// 这里可以保存记录到数据库
|
||
uni.showToast({
|
||
title: '记录已保存',
|
||
icon: 'success'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// 生命周期
|
||
onMounted(() => {
|
||
console.log('单人模式页面加载完成')
|
||
// 可以在这里初始化数据或加载用户信息
|
||
getuserinfo();
|
||
|
||
// 生成随机房间号（4位数字）
|
||
roomId.value = Math.floor(1000 + Math.random() * 9000).toString()
|
||
|
||
// 动态设置导航栏标题
|
||
uni.setNavigationBarTitle({
|
||
title: `单人 - ${roomId.value}号房间`
|
||
})
|
||
|
||
// 监听页面返回事件，用于接收从计分页面传回的更新后的分数
|
||
const updateListener = () => {
|
||
// 尝试获取更新后的玩家数据
|
||
const updatedPlayers = uni.getStorageSync('updatedPlayers')
|
||
if (updatedPlayers) {
|
||
try {
|
||
const parsedPlayers = JSON.parse(updatedPlayers)
|
||
console.log('收到更新的玩家数据:', parsedPlayers)
|
||
|
||
// 获取当前局数
|
||
const currentRound = uni.getStorageSync('currentRound') || 1
|
||
const roundIndex = currentRound - 1
|
||
|
||
// 更新玩家列表中的分数
|
||
parsedPlayers.forEach(updatedPlayer => {
|
||
// 查找对应的玩家
|
||
const playerIndex = players.value.findIndex(p => p.id === updatedPlayer.id)
|
||
if (playerIndex !== -1) {
|
||
// 更新普通玩家当前局的分数
|
||
// 确保roundScores数组有足够的空间
|
||
if (players.value[playerIndex].roundScores.length <= roundIndex) {
|
||
players.value[playerIndex].roundScores.length = roundIndex + 1
|
||
}
|
||
// 保存当前局的分数
|
||
players.value[playerIndex].roundScores[roundIndex] = updatedPlayer.score
|
||
// 计算总分：所有局分数的总和
|
||
players.value[playerIndex].score = players.value[playerIndex].roundScores.reduce((sum, score) => sum + (score || 0), 0)
|
||
} else if (updatedPlayer.id === 'table') {
|
||
// 更新台板玩家当前局的分数
|
||
// 确保roundScores数组有足够的空间
|
||
if (tablePlayer.roundScores.length <= roundIndex) {
|
||
tablePlayer.roundScores.length = roundIndex + 1
|
||
}
|
||
// 保存当前局的分数
|
||
tablePlayer.roundScores[roundIndex] = updatedPlayer.score
|
||
// 计算总分：所有局分数的总和
|
||
tablePlayer.score = tablePlayer.roundScores.reduce((sum, score) => sum + (score || 0), 0)
|
||
}
|
||
})
|
||
|
||
// 清除临时存储的数据
|
||
uni.removeStorageSync('updatedPlayers')
|
||
} catch (error) {
|
||
console.error('解析更新的玩家数据失败:', error)
|
||
}
|
||
}
|
||
}
|
||
|
||
// 监听页面显示事件
|
||
uni.$on('updatePlayers', updateListener)
|
||
|
||
// 监听用户数据更新事件（来自change页面）
|
||
const userDataListener = (updatedUser) => {
|
||
updateUserData(updatedUser)
|
||
}
|
||
uni.$on('userDataUpdated', userDataListener)
|
||
|
||
// 监听页面显示生命周期
|
||
uni.onShow(() => {
|
||
updateListener()
|
||
|
||
// 从本地存储获取最新的用户信息
|
||
try {
|
||
const storedUserInfo = uni.getStorageSync('userInfo');
|
||
if (storedUserInfo) {
|
||
console.log('从本地存储加载用户信息:', storedUserInfo);
|
||
// 更新当前用户信息
|
||
currentUser.value = { ...storedUserInfo };
|
||
|
||
// 更新玩家列表中的用户信息
|
||
const selfPlayerIndex = players.value.findIndex(p => p.id === 'self');
|
||
if (selfPlayerIndex !== -1) {
|
||
players.value[selfPlayerIndex] = {
|
||
...players.value[selfPlayerIndex],
|
||
name: storedUserInfo.name,
|
||
avatar: storedUserInfo.avatar
|
||
};
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('从本地存储获取用户信息失败:', error);
|
||
}
|
||
})
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
// 移除事件监听器
|
||
uni.$off('updatePlayers');
|
||
uni.$off('userDataUpdated');
|
||
})
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.singleplay {
|
||
width: 750rpx;
|
||
margin: 0;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
background-color: #f8f8f8;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
/* #ifdef MP-WEIXIN */
|
||
user-select: none;
|
||
/* #endif */
|
||
}
|
||
|
||
/* 顶部功能区 */
|
||
.top-functions {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
//padding: 10rpx 15rpx;
|
||
margin-bottom: 20rpx;
|
||
box-sizing: border-box;
|
||
overflow-x: auto;
|
||
|
||
.function-btn {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 5rpx;
|
||
padding: 8rpx 8rpx;
|
||
background-color: #fff;
|
||
border-radius: 10rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||
margin: 0 8rpx;
|
||
transition: all 0.3s ease;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
|
||
// 图标样式
|
||
.btn-icon {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
// 文本样式
|
||
text {
|
||
font-size: 22rpx;
|
||
color: #333;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
// 微信小程序特有点击反馈
|
||
/* #ifdef MP-WEIXIN */
|
||
&:active {
|
||
opacity: 0.8;
|
||
transform: scale(0.95);
|
||
}
|
||
/* #endif */
|
||
}
|
||
|
||
.switch-group {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 6rpx;
|
||
margin: 0 8rpx;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
|
||
text {
|
||
font-size: 22rpx;
|
||
color: #333;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
switch {
|
||
transform: scale(0.75);
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 对局记录区域 */
|
||
.game-record {
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx;
|
||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||
margin-bottom: 30rpx;
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding-bottom: 20rpx;
|
||
}
|
||
|
||
.record-title {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 10rpx;
|
||
|
||
.hint {
|
||
font-size: 24rpx;
|
||
font-weight: normal;
|
||
color: #666;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
|
||
/* 用户信息区域 */
|
||
.user-section {
|
||
margin-bottom: 20rpx;
|
||
|
||
.user-hint {
|
||
font-size: 24rpx;
|
||
color: #fa5d5d;
|
||
margin-bottom: 15rpx;
|
||
display: block;
|
||
}
|
||
|
||
.user-info {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 15rpx;
|
||
padding: 10rpx;
|
||
border-radius: 10rpx;
|
||
background-color: #f0f8ff;
|
||
|
||
.user-avatar {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.user-details {
|
||
.user-name {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
|
||
.self-tag {
|
||
background-color: #007aff;
|
||
color: #fff;
|
||
font-size: 20rpx;
|
||
padding: 2rpx 10rpx;
|
||
border-radius: 10rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 玩家列表区域 */
|
||
.players-section {
|
||
.section-header {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 15rpx;
|
||
|
||
.header-title {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
}
|
||
|
||
.player-count {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 玩家表格容器 - 实现横向滚动 */
|
||
.players-table-container {
|
||
overflow-x: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
border-radius: 10rpx;
|
||
border: 1rpx solid #e0e0e0;
|
||
}
|
||
|
||
/* 垂直表格容器 - 实现垂直滚动和横向滑动 */
|
||
.players-table-container.vertical {
|
||
overflow-y: auto;
|
||
overflow-x: auto;
|
||
max-height: 500rpx;
|
||
-webkit-overflow-scrolling: touch; /* 优化移动端滚动体验 */
|
||
}
|
||
|
||
/* 玩家表格 */
|
||
.players-table {
|
||
min-width: 100%;
|
||
overflow: visible;
|
||
}
|
||
|
||
/* 垂直表格样式 */
|
||
.players-table.vertical {
|
||
.table-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
border-bottom: 1rpx solid #e0e0e0;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
.header-row {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.header-cell {
|
||
width: 150rpx;
|
||
flex-shrink: 0;
|
||
padding: 15rpx;
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
border-right: 1rpx solid #e0e0e0;
|
||
background-color: #f5f5f5;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.player-column {
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.score-column {
|
||
text-align: center;
|
||
}
|
||
|
||
.data-cell {
|
||
min-width: 120rpx;
|
||
flex-shrink: 0;
|
||
padding: 15rpx;
|
||
border-right: 1rpx solid #e0e0e0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
/* 最后一列不需要右边框 */
|
||
&:last-child {
|
||
border-right: none;
|
||
}
|
||
}
|
||
|
||
.player-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
width: 100%;
|
||
|
||
image {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
text {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
text-align: center;
|
||
word-break: break-word;
|
||
}
|
||
}
|
||
|
||
.score-display {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #007aff;
|
||
|
||
&:active {
|
||
background-color: #f0f8ff;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 底部操作按钮 */
|
||
.bottom-buttons {
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 20rpx;
|
||
position: sticky;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 20rpx;
|
||
background-color: #fff;
|
||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||
/* #ifdef MP-WEIXIN */
|
||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||
/* #endif */
|
||
|
||
.start-btn,
|
||
.settle-btn {
|
||
flex: 1;
|
||
height: 90rpx;
|
||
font-size: 32rpx;
|
||
line-height: 90rpx;
|
||
margin: 0;
|
||
}
|
||
|
||
.start-btn {
|
||
background-color: #007aff;
|
||
}
|
||
|
||
.settle-btn {
|
||
border: 1rpx solid #007aff;
|
||
color: #007aff;
|
||
}
|
||
}
|
||
|
||
/* 适配不同屏幕尺寸 */
|
||
@media screen and (max-width: 375px) {
|
||
.singleplay {
|
||
padding: 15rpx;
|
||
}
|
||
|
||
.top-functions {
|
||
gap: 8rpx;
|
||
|
||
.function-btn {
|
||
padding: 1rpx 1rpx;
|
||
|
||
text {
|
||
font-size: 22rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |