111

scoring/pages/single-room/index.vue

@@ -35,24 +35,83 @@
     <view class="record-section">
       <view class="record-title">对局记录</view>
       <view class="record-tip">点击对局分数进行修改</view>
-      <view class="record-tip">点击自己头像编辑用户头像和昵称~</view>
+      <view class="warning-tip">
+        本工具不涉及金钱，禁止用于非法行为！
+      </view>
     </view>
 
-    <!-- 玩家列表 -->
-    <view class="player-list">
-      <view class="player-item">
-        <view class="player-label">玩家 ({{ players.length }}位)</view>
-        <view class="player-info-container">
-          <view class="player-info" v-for="(player, index) in players" :key="player.id">
-            <image class="player-avatar" :src="player.avatar" mode="aspectFit"></image>
-            <text class="player-name">{{ player.name }}</text>
-            <view v-if="player.isSelf" class="self-tag">自己</view>
+    <!-- 玩家列表 - 添加滚动条功能 -->
+    <view class="player-list-container">
+      <!-- 水平滚动容器 -->
+      <scroll-view 
+        class="player-scroll-view" 
+        scroll-x="true" 
+        :scroll-left="scrollLeft"
+        @scroll="onScroll"
+        :show-scrollbar="false"
+        scroll-with-animation
+      >
+        <view class="player-list">
+          <!-- 玩家信息行 -->
+          <view class="player-row">
+            <view class="player-label">玩家 ({{ players.length }}位)</view>
+            <view class="player-columns">
+              <view class="player-column" v-for="(player, index) in players" :key="player.id">
+                <view class="player-info" @click="editUserInfo(player)">
+                  <image class="player-avatar" :src="player.avatar" mode="aspectFit"></image>
+                  <text class="player-name">{{ player.name }}</text>
+                  <view v-if="player.isSelf" class="self-tag">自己</view>
+                </view>
+              </view>
+            </view>
+          </view>
+          
+          <!-- 总分行 -->
+          <view class="player-row">
+            <view class="player-label">总分</view>
+            <view class="player-columns">
+              <view class="player-column" v-for="player in players" :key="player.id">
+                <view class="player-score">
+                  {{ formatScore(player.totalScore) }}
+                </view>
+              </view>
+            </view>
+          </view>
+          
+          <!-- 每局得分行 -->
+          <view class="player-row" v-for="(round, roundIndex) in gameRounds" :key="roundIndex">
+            <view class="player-label">第{{ roundIndex + 1 }}局</view>
+            <view class="player-columns">
+              <view class="player-column" v-for="player in players" :key="player.id">
+                <view class="round-score" @click="editRoundScore(roundIndex, player.id)">
+                  {{ formatScore(getPlayerRoundScore(roundIndex, player.id)) }}
+                </view>
+              </view>
+            </view>
           </view>
         </view>
-      </view>
-      <view class="player-item">
-        <view class="player-label">总分</view>
-        <view class="player-score">{{ totalScore }}</view>
+      </scroll-view>
+      
+      <!-- 自定义可拖动滚动条 -->
+      <view class="custom-scrollbar" v-if="showScrollIndicator">
+        <view 
+          class="scroll-track"
+          @touchstart="onTrackTouchStart"
+          @touchmove.prevent="onTrackTouchMove"
+          @touchend="onTrackTouchEnd"
+          :id="trackId"
+        >
+          <view 
+            class="scroll-thumb" 
+            :style="{ 
+              left: thumbPosition + '%', 
+              width: thumbWidth + '%' 
+            }"
+            @touchstart="onThumbTouchStart"
+            @touchmove.prevent="onThumbTouchMove"
+            @touchend="onThumbTouchEnd"
+          ></view>
+        </view>
       </view>
     </view>
 
@@ -62,7 +121,7 @@
       <button class="settle-btn" @click="openSettlePopup">结算房间</button>
     </view>
 
-    <!-- 添加玩家弹窗 -->
+   <!-- 添加玩家弹窗 -->
     <view v-if="showAddPlayerPopup" class="popup-mask" @click="closeAddPlayerPopup">
       <view class="popup-content" @click.stop>
         <view class="popup-header">
@@ -80,7 +139,7 @@
           
           <view class="popup-buttons">
             <button class="share-btn" @click="shareRoom">分享给好友邀请加入房间</button>
-            <button class="add-virtual-btn" @click="addVirtualPlayer">手动添加虚拟玩家</button>
+            <button class="add-virtual-btn" @click="openAddVirtualPlayerPopup">手动添加虚拟玩家</button>
           </view>
           
           <view class="popup-footer">
@@ -90,6 +149,31 @@
       </view>
     </view>
 
+    <!-- 添加虚拟玩家弹窗 -->
+    <view v-if="showAddVirtualPlayerPopup" class="popup-mask" @click="closeAddVirtualPlayerPopup">
+      <view class="add-virtual-popup-content" @click.stop>
+        <view class="add-virtual-popup-body">
+          <view class="add-virtual-title">添加玩家</view>
+          
+          <view class="name-input-section">
+            <input 
+              class="name-input" 
+              type="text" 
+              placeholder="请输入" 
+              v-model="virtualPlayerName"
+              maxlength="10"
+              focus
+            />
+          </view>
+          
+          <view class="add-virtual-popup-buttons">
+            <button class="cancel-btn" @click="closeAddVirtualPlayerPopup">取消</button>
+            <button class="confirm-btn" @click="confirmAddVirtualPlayer">确定</button>
+          </view>
+        </view>
+      </view>
+    </view>
+
     <!-- 结算房间弹窗 -->
     <view v-if="showSettlePopup" class="popup-mask" @click="closeSettlePopup">
       <view class="settle-popup-content" @click.stop>
@@ -125,12 +209,14 @@
         </view>
       </view>
     </view>
+
   </view>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
-
+import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
+import { getuser } from '@/api/room'
 // 房间数据
 const roomId = ref('15198520')
 const voiceEnabled = ref(false)
@@ -142,29 +228,342 @@ const players = ref([
     id: 1,
     name: '玩家80061',
     avatar: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.QQG4bvcAR3CJ0WeQULA9UQAAAA?w=275&h=211&c=8&rs=1&qlt=90&o=6&cb=ucfimgc1&dpr=1.5&pid=3.1&rm=2',
-    score: 0,
+    totalScore: 0,
     isSelf: true
   }
 ])
 
+// 游戏对局记录
+const gameRounds = ref([])
+
 // 弹窗显示状态
 const showAddPlayerPopup = ref(false)
+const showAddVirtualPlayerPopup = ref(false)
 const showSettlePopup = ref(false)
 const showTransferPopup = ref(false)
 const rateValue = ref('')
+const virtualPlayerName = ref('')
 
-// 计算总分 - 使用普通函数替代 computed
-const totalScore = ref(0)
+// 滚动条相关数据
+const scrollLeft = ref(0)
+const scrollWidth = ref(0)
+const scrollViewWidth = ref(0)
+const trackId = ref('scroll-track-' + Date.now())
 
-// 更新总分函数
-const updateTotalScore = () => {
-  totalScore.value = players.value.reduce((sum, player) => sum + player.score, 0)
+// 滚动条拖动状态
+const isDragging = ref(false)
+const dragStartX = ref(0)
+const dragStartScrollLeft = ref(0)
+const trackRect = ref({ left: 0, width: 0 })
+
+// 存储最后知道的用户信息，用于比较
+let lastUserInfo = null
+
+// 用于保存interval ID的ref
+const storageIntervalIds = ref(null)
+const userInfoIntervalIds = ref(null)
+
+// 计算属性：是否显示滚动条指示器
+const showScrollIndicator = computed(() => {
+  return scrollWidth.value > scrollViewWidth.value
+})
+
+// 计算属性：滚动条滑块宽度
+const thumbWidth = computed(() => {
+  if (scrollWidth.value === 0) return 100
+  const widthRatio = (scrollViewWidth.value / scrollWidth.value) * 100
+  return Math.max(20, Math.min(100, widthRatio)) // 最小宽度20%，最大100%
+})
+
+// 计算属性：滚动条滑块位置
+const thumbPosition = computed(() => {
+  if (scrollWidth.value === 0 || scrollWidth.value <= scrollViewWidth.value) return 0
+  const maxScroll = scrollWidth.value - scrollViewWidth.value
+  return (scrollLeft.value / maxScroll) * (100 - thumbWidth.value)
+})
+
+// 格式化分数显示
+const formatScore = (score) => {
+  if (score === 0) return '0'
+  return score > 0 ? `+${score}` : `${score}`
+}
+
+// 获取玩家在某一局的得分
+const getPlayerRoundScore = (roundIndex, playerId) => {
+  if (!gameRounds.value[roundIndex]) return 0
+  const playerScore = gameRounds.value[roundIndex].find(item => item.playerId === playerId)
+  return playerScore ? playerScore.score : 0
+}
+
+// 更新玩家总分
+const updateTotalScores = () => {
+  players.value.forEach(player => {
+    let total = 0
+    gameRounds.value.forEach(round => {
+      const roundScore = round.find(item => item.playerId === player.id)
+      if (roundScore) {
+        total += roundScore.score
+      }
+    })
+    player.totalScore = total
+  })
+}
+
+// 滚动事件处理
+const onScroll = (e) => {
+  scrollLeft.value = e.detail.scrollLeft
+}
+
+// 监听玩家数量变化，更新滚动区域
+watch(players, () => {
+  // 在下一个tick更新滚动区域尺寸
+  setTimeout(() => {
+    updateScrollDimensions()
+  }, 100)
+}, { deep: true })
+
+// 更新滚动区域尺寸
+const updateScrollDimensions = () => {
+  const query = uni.createSelectorQuery()
+  query.select('.player-scroll-view').boundingClientRect()
+  query.select('.player-list').boundingClientRect()
+  query.exec((res) => {
+    if (res[0] && res[1]) {
+      scrollViewWidth.value = res[0].width
+      scrollWidth.value = res[1].width
+    }
+  })
+}
+
+// 获取轨道位置信息
+const getTrackRect = () => {
+  return new Promise((resolve) => {
+    const query = uni.createSelectorQuery()
+    query.select('.custom-scrollbar .scroll-track').boundingClientRect()
+    query.exec((res) => {
+      if (res[0]) {
+        trackRect.value = {
+          left: res[0].left,
+          width: res[0].width
+        }
+        resolve(trackRect.value)
+      } else {
+        resolve(null)
+      }
+    })
+  })
+}
+
+// 滚动条滑块触摸开始
+const onThumbTouchStart = async (e) => {
+  isDragging.value = true
+  dragStartX.value = e.touches[0].clientX
+  dragStartScrollLeft.value = scrollLeft.value
+  
+  // 获取轨道位置信息
+  await getTrackRect()
+  
+  e.stopPropagation()
+}
+
+// 滚动条滑块触摸移动
+const onThumbTouchMove = (e) => {
+  if (!isDragging.value) return
+  
+  const deltaX = e.touches[0].clientX - dragStartX.value
+  const maxScroll = Math.max(0, scrollWidth.value - scrollViewWidth.value)
+  
+  if (maxScroll > 0 && trackRect.value.width > 0) {
+    const scrollPercent = deltaX / trackRect.value.width
+    const newScrollLeft = dragStartScrollLeft.value + (scrollPercent * maxScroll)
+    scrollLeft.value = Math.max(0, Math.min(maxScroll, newScrollLeft))
+  }
+  
+  e.stopPropagation()
+}
+
+// 滚动条滑块触摸结束
+const onThumbTouchEnd = (e) => {
+  isDragging.value = false
+  e.stopPropagation()
+}
+
+// 滚动条轨道触摸开始
+const onTrackTouchStart = async (e) => {
+  // 获取轨道位置信息
+  const rect = await getTrackRect()
+  if (!rect) return
+  
+  const clickX = e.touches[0].clientX - rect.left
+  const thumbWidthPx = (thumbWidth.value / 100) * rect.width
+  const thumbCenter = (thumbPosition.value / 100) * rect.width + thumbWidthPx / 2
+  
+  // 如果点击位置在滑块中心左侧，滚动到左侧
+  // 如果点击位置在滑块中心右侧，滚动到右侧
+  const maxScroll = Math.max(0, scrollWidth.value - scrollViewWidth.value)
+  
+  if (maxScroll > 0) {
+    if (clickX < thumbCenter) {
+      // 向左滚动一页
+      scrollLeft.value = Math.max(0, scrollLeft.value - scrollViewWidth.value * 0.8)
+    } else {
+      // 向右滚动一页
+      scrollLeft.value = Math.min(maxScroll, scrollLeft.value + scrollViewWidth.value * 0.8)
+    }
+  }
+}
+
+// 滚动条轨道触摸移动
+const onTrackTouchMove = (e) => {
+  // 轨道拖动可以用于快速跳转，但这里我们主要用滑块拖动
+  e.stopPropagation()
+}
+
+// 滚动条轨道触摸结束
+const onTrackTouchEnd = (e) => {
+  e.stopPropagation()
+}
+
+// 编辑用户信息
+const editUserInfo = (player) => {
+  if (player.isSelf) {
+    // 跳转到用户信息编辑页面
+    uni.navigateTo({
+      url: '/pages/edit-user-info/index'
+    })
+  } else {
+    // 如果是其他玩家，可以添加其他操作，比如查看玩家信息等
+    uni.showToast({
+      title: '只能编辑自己的信息',
+      icon: 'none'
+    })
+  }
+}
+
+// 加载用户信息 - 改进版
+const loadUserInfo = () => {
+  const savedUserInfo = uni.getStorageSync('userInfo')
+  if (savedUserInfo) {
+    // 强制更新自己的玩家信息
+    const selfPlayerIndex = players.value.findIndex(player => player.isSelf)
+    if (selfPlayerIndex !== -1) {
+      players.value[selfPlayerIndex].name = savedUserInfo.nickname
+      players.value[selfPlayerIndex].avatar = savedUserInfo.avatar
+      // 强制触发视图更新
+      players.value = [...players.value]
+    }
+  }
+}
+
+// 加载对局记录
+const loadGameRounds = () => {
+  const savedRounds = uni.getStorageSync('gameRounds')
+  if (savedRounds) {
+    gameRounds.value = savedRounds
+    updateTotalScores()
+  }
+}
+
+// 同步玩家信息
+const syncPlayerInfo = () => {
+  // 从本地存储获取最新的玩家信息
+  const savedPlayers = uni.getStorageSync('players')
+  if (savedPlayers && savedPlayers.length > 0) {
+    // 更新玩家基本信息，但保留当前的总分状态
+    players.value.forEach((player, index) => {
+      const savedPlayer = savedPlayers.find(p => p.id === player.id)
+      if (savedPlayer) {
+        // 只更新头像和名称，不更新总分
+        player.avatar = savedPlayer.avatar
+        player.name = savedPlayer.name
+      }
+    })
+  }
+}
+
+// 用户信息变化监听
+const setupUserInfoListener = () => {
+  lastUserInfo = uni.getStorageSync('userInfo')
+  
+  const intervalId = setInterval(() => {
+    const currentUserInfo = uni.getStorageSync('userInfo')
+    if (JSON.stringify(currentUserInfo) !== JSON.stringify(lastUserInfo)) {
+      console.log('检测到用户信息变化，自动更新')
+      lastUserInfo = currentUserInfo
+      loadUserInfo()
+      syncPlayerInfo()
+    }
+  }, 500)
+  
+  return intervalId
+}
+
+// 添加一个全局事件监听器来监听存储变化
+const setupStorageListener = () => {
+  // 监听存储变化，当 gameRounds 更新时重新加载数据
+  const intervalId = setInterval(() => {
+    const currentRounds = uni.getStorageSync('gameRounds') || []
+    if (JSON.stringify(currentRounds) !== JSON.stringify(gameRounds.value)) {
+      gameRounds.value = currentRounds
+      updateTotalScores()
+    }
+  }, 1000)
+  
+  return intervalId
 }
 
 // 组件挂载后初始化
 onMounted(() => {
   console.log('组件已挂载')
-  updateTotalScore()
+  loadGameRounds()
+  loadUserInfo()
+  
+  // 设置监听器并保存ID以便清理
+  const storageIntervalId = setupStorageListener()
+  const userInfoIntervalId = setupUserInfoListener()
+  
+  // 监听用户信息更新事件
+  uni.$on('userInfoUpdated', () => {
+    console.log('收到用户信息更新事件')
+    loadUserInfo()
+    syncPlayerInfo()
+  })
+  
+  // 保存interval ID以便清理
+  storageIntervalIds.value = storageIntervalId
+  userInfoIntervalIds.value = userInfoIntervalId
+  
+  // 初始化滚动区域尺寸
+  setTimeout(() => {
+    updateScrollDimensions()
+    getTrackRect() // 初始化轨道位置信息
+  }, 500)
+})
+
+// 页面显示时刷新
+onShow(() => {
+  console.log('页面显示，刷新数据')
+  loadGameRounds()
+  syncPlayerInfo()
+  loadUserInfo()
+  
+  // 更新滚动区域尺寸
+  setTimeout(() => {
+    updateScrollDimensions()
+    getTrackRect() // 更新轨道位置信息
+  }, 100)
+})
+
+// 在组件卸载时移除事件监听和定时器
+onUnmounted(() => {
+  uni.$off('userInfoUpdated')
+  
+  if (storageIntervalIds.value) {
+    clearInterval(storageIntervalIds.value)
+  }
+  if (userInfoIntervalIds.value) {
+    clearInterval(userInfoIntervalIds.value)
+  }
 })
 
 // 返回上一页
@@ -197,6 +596,50 @@ const closeAddPlayerPopup = () => {
   showAddPlayerPopup.value = false
 }
 
+// 打开添加虚拟玩家弹窗
+const openAddVirtualPlayerPopup = () => {
+  showAddVirtualPlayerPopup.value = true
+  virtualPlayerName.value = '' // 重置输入
+}
+
+// 关闭添加虚拟玩家弹窗
+const closeAddVirtualPlayerPopup = () => {
+  showAddVirtualPlayerPopup.value = false
+}
+
+// 确认添加虚拟玩家
+const confirmAddVirtualPlayer = () => {
+  if (!virtualPlayerName.value.trim()) {
+    uni.showToast({
+      title: '请输入玩家名称',
+      icon: 'none'
+    })
+    return
+  }
+
+  const newPlayer = {
+    id: Date.now(),
+    name: virtualPlayerName.value.trim(),
+    avatar: 'https://ts3.tc.mm.bing.net/th/id/OIP-C.0FQSOvu3OYJFe-h_sZKA6wHaNK?cb=ucfimg2ucfimg=1&rs=1&pid=ImgDetMain&o=7&rm=3',
+    totalScore: 0,
+    isSelf: false
+  }
+  
+  players.value.push(newPlayer)
+  
+  // 保存玩家数据到本地存储
+  uni.setStorageSync('players', players.value)
+  
+  // 关闭所有弹窗
+  closeAddVirtualPlayerPopup()
+  closeAddPlayerPopup()
+  
+  uni.showToast({
+    title: '已添加虚拟玩家',
+    icon: 'success'
+  })
+}
+
 // 打开结算弹窗
 const openSettlePopup = () => {
   showSettlePopup.value = true
@@ -229,7 +672,6 @@ const toggleBoard = (e) => {
     // 台板关闭时移除台板玩家
     removeBoardPlayer()
   }
-  updateTotalScore()
 }
 
 // 添加台板玩家
@@ -238,7 +680,7 @@ const addBoardPlayer = () => {
     id: Date.now(),
     name: '台板',
     avatar: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.32slU2a6Cq1Sxvd1GV_LvgHaDe?w=292&h=164&c=7&r=0&o=7&cb=ucfimgc2&dpr=1.5&pid=1.7&rm=3',
-    score: 0,
+    totalScore: 0,
     isSelf: false
   }
   
@@ -260,6 +702,9 @@ const confirmSettlement = () => {
     return
   }
   
+  // 保存玩家数据到本地存储，供结算页面使用
+  uni.setStorageSync('players', players.value)
+  
   // 关闭弹窗
   closeSettlePopup()
   
@@ -276,8 +721,40 @@ const toggleVoice = (e) => {
 
 // 开局计分
 const startScoring = () => {
+  // 将玩家数据传递到计分页面
   uni.navigateTo({
-    url: '/pages/scoring/index'
+    url: `/pages/scoring/index?players=${encodeURIComponent(JSON.stringify(players.value))}&round=${gameRounds.value.length + 1}`
+  })
+}
+
+// 编辑对局分数
+const editRoundScore = (roundIndex, playerId) => {
+  // 获取该局的所有玩家得分数据
+  const roundScores = gameRounds.value[roundIndex]
+  
+  if (!roundScores) {
+    uni.showToast({
+      title: '该局数据不存在',
+      icon: 'none'
+    })
+    return
+  }
+  
+  // 构建玩家数据，包含当前得分和胜负状态
+  const playersWithScores = players.value.map(player => {
+    const playerScore = roundScores.find(score => score.playerId === player.id)
+    const scoreValue = playerScore ? playerScore.score : 0
+    return {
+      ...player,
+      currentScore: Math.abs(scoreValue).toString(),
+      isWin: scoreValue >= 0,
+      finalScore: scoreValue
+    }
+  })
+  
+  // 跳转到计分页面，传递玩家数据、对局索引和编辑模式标识
+  uni.navigateTo({
+    url: `/pages/scoring/index?players=${encodeURIComponent(JSON.stringify(playersWithScores))}&round=${roundIndex + 1}&mode=edit&roundIndex=${roundIndex}`
   })
 }
 
@@ -291,26 +768,6 @@ const shareRoom = () => {
     icon: 'none'
   })
 }
-
-// 添加虚拟玩家
-const addVirtualPlayer = () => {
-  const newPlayer = {
-    id: Date.now(),
-    name: `玩家${Math.floor(Math.random() * 100000)}`,
-    avatar: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.Pbhgd_vCFFNQWXi7y-HynAAAAA?w=209&h=209&c=7&r=0&o=7&cb=ucfimgc2&dpr=1.5&pid=1.7&rm=3',
-    score: 0,
-    isSelf: false
-  }
-  
-  players.value.push(newPlayer)
-  updateTotalScore()
-  closeAddPlayerPopup()
-  
-  uni.showToast({
-    title: '已添加虚拟玩家',
-    icon: 'success'
-  })
-}
 </script>
 
 <style lang="less" scoped>
@@ -383,65 +840,159 @@ const addVirtualPlayer = () => {
     color: #666;
     margin-bottom: 10rpx;
   }
+
+  .warning-tip {
+    font-size: 26rpx;
+    color: #ff6b6b;
+    margin-bottom: 10rpx;
+  }
 }
 
-/* 玩家列表 */
-.player-list {
+/* 玩家列表容器 - 新增样式 */
+.player-list-container {
   padding: 0 30rpx 30rpx;
+  position: relative;
+}
 
-  .player-item {
+/* 滚动视图样式 */
+.player-scroll-view {
+  width: 100%;
+  white-space: nowrap;
+  
+  // 隐藏原生滚动条
+  ::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* 玩家列表 - 修改后的样式 */
+.player-list {
+  display: inline-block;
+  min-width: 100%;
+}
+
+.player-row {
+  display: flex;
+  padding: 20rpx 0;
+  border-bottom: 1rpx solid #eee;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  .player-label {
+    width: 120rpx;
+    font-size: 28rpx;
+    color: #000;
     display: flex;
-    padding: 20rpx 0;
-    border-bottom: 1rpx solid #eee;
+    align-items: center;
+    flex-shrink: 0;
+  }
 
-    &:last-child {
-      border-bottom: none;
+  .player-columns {
+    display: flex;
+    flex: 1;
+    justify-content: flex-start;
+  }
+
+  .player-column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 120rpx;
+    flex-shrink: 0;
+  }
+
+  .player-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    
+    // 添加点击效果
+    &:active {
+      opacity: 0.7;
     }
 
-    .player-label {
-      width: 120rpx;
-      font-size: 28rpx;
+    .player-avatar {
+      width: 80rpx;
+      height: 80rpx;
+      border-radius: 50%;
+      margin-bottom: 10rpx;
+    }
+
+    .player-name {
+      font-size: 24rpx;
       color: #000;
+      margin-bottom: 5rpx;
+      text-align: center;
+      max-width: 100rpx;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
-    .player-info-container {
-      display: flex;
-      flex-wrap: wrap;
-      flex: 1;
+    .self-tag {
+      background-color: #007aff;
+      color: #fff;
+      font-size: 20rpx;
+      padding: 2rpx 8rpx;
+      border-radius: 10rpx;
     }
+  }
 
-    .player-info {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin-right: 30rpx;
+  .player-score {
+    font-size: 36rpx;
+    color: #007aff;
+    font-weight: 600;
+    margin-top: 10rpx;
+  }
 
-      .player-avatar {
-        width: 80rpx;
-        height: 80rpx;
-        border-radius: 50%;
-        margin-bottom: 10rpx;
-      }
-
-      .player-name {
-        font-size: 24rpx;
-        color: #000;
-        margin-bottom: 5rpx;
-      }
-
-      .self-tag {
-        background-color: #007aff;
-        color: #fff;
-        font-size: 20rpx;
-        padding: 2rpx 8rpx;
-        border-radius: 10rpx;
-      }
+  .round-score {
+    font-size: 28rpx;
+    color: #333;
+    margin-top: 10rpx;
+    padding: 5rpx 10rpx;
+    border-radius: 5rpx;
+    
+    &:active {
+      background-color: #f0f0f0;
     }
+  }
+}
 
-    .player-score {
-      font-size: 36rpx;
-      color: #007aff;
-      font-weight: 600;
+/* 自定义可拖动滚动条样式 */
+.custom-scrollbar {
+  margin-top: 20rpx;
+  padding: 0 20rpx;
+  
+  .scroll-track {
+    height: 12rpx;
+    background-color: #f0f0f0;
+    border-radius: 6rpx;
+    position: relative;
+    
+    // 添加点击区域扩展
+    &::before {
+      content: '';
+      position: absolute;
+      top: -10rpx;
+      bottom: -10rpx;
+      left: 0;
+      right: 0;
+    }
+  }
+  
+  .scroll-thumb {
+    position: absolute;
+    height: 100%;
+    background-color: #41479b;
+    border-radius: 6rpx;
+    transition: all 0.1s ease;
+    
+    // 添加悬停效果
+    &:active {
+      background-color: #33367a;
+      transform: scale(1.1);
     }
   }
 }
@@ -451,8 +1002,8 @@ const addVirtualPlayer = () => {
   display: flex;
   padding: 40rpx;
   gap: 40rpx;
-  margin-top: 600rpx;
-
+  margin-top: 500rpx;
+  
   button {
     flex: 1;
     height: 90rpx;
@@ -573,6 +1124,67 @@ const addVirtualPlayer = () => {
   }
 }
 
+/* 添加虚拟玩家弹窗样式 */
+.add-virtual-popup-content {
+  width: 600rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+
+  .add-virtual-popup-body {
+    padding: 30rpx;
+
+    .add-virtual-title {
+      font-size: 32rpx;
+      font-weight: 600;
+      color: #000;
+      margin-bottom: 30rpx;
+      text-align: center;
+    }
+
+    .name-input-section {
+      margin-bottom: 40rpx;
+      
+      .name-input {
+        width: 100%;
+        height: 80rpx;
+        border: 1rpx solid #ddd;
+        border-radius: 8rpx;
+        padding: 0 20rpx;
+        font-size: 28rpx;
+        text-align: center;
+        
+        &:focus {
+          border-color: #41479b;
+        }
+      }
+    }
+
+    .add-virtual-popup-buttons {
+      display: flex;
+      gap: 20rpx;
+
+      button {
+        flex: 1;
+        height: 80rpx;
+        border-radius: 8rpx;
+        font-size: 30rpx;
+        font-weight: 500;
+      }
+
+      .cancel-btn {
+        background-color: #f5f5f5;
+        color: #333;
+      }
+
+      .confirm-btn {
+        background-color: #41479b;
+        color: #fff;
+      }
+    }
+  }
+}
+
 /* 结算弹窗样式 */
 .settle-popup-content {
   width: 600rpx;
@@ -668,4 +1280,5 @@ const addVirtualPlayer = () => {
     }
   }
 }
+
 </style>