refactor: 优化评分列表页面UI和代码结构

- 重构场地和项目选择区域布局
- 优化选手卡片样式
- 添加日期时间格式化方法
- 改进分数显示格式
- 统一样式命名规范

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/pages/score-list-multi/score-list-multi.vue

@@ -4,57 +4,45 @@
     <view class="nav-bar">
       <view class="nav-title">评分系统</view>
       <view class="nav-right">
-        <view class="icon-menu">···</view>
+        <view class="nav-dots">···</view>
-        <view class="icon-close">⊗</view>
+        <view class="nav-circle">◎</view>
       </view>
     </view>
 
     <!-- 比赛信息 -->
     <view class="match-info">
       <view class="match-title">{{ matchInfo.name }}</view>
-      <view class="match-time">比赛时间：{{ matchInfo.time }}</view>
+      <view class="match-time">比赛时间：{{ formatDateTime(matchInfo.time) }}</view>
     </view>
 
-    <!-- 场地和项目选择 -->
+    <!-- 场地和项目卡片 -->
-    <view class="venue-section">
+    <view class="venue-card">
-      <!-- 场地切换 - 横向滚动 -->
+      <!-- 场地标题行 -->
-      <scroll-view class="venue-scroll" scroll-x="true" show-scrollbar="false">
+      <view class="venue-header">
-        <view class="venue-tabs">
+        <view class="venue-name">{{ venueInfo.name }}</view>
-          <view
+        <view class="refresh-link" @click="handleRefresh">刷新</view>
-            v-for="venue in venues"
+      </view>
-            :key="venue.venueId"
+
-            :class="['venue-tab', currentVenue === venue.venueId ? 'active' : '']"
+      <!-- 项目筛选 -->
-            @click="switchVenue(venue.venueId)"
+      <view class="project-row">
-          >
+        <view class="project-grid">
-            {{ venue.venueName }}
-          </view>
-        </view>
-      </scroll-view>
-
-      <view class="venue-tip">
-        <!-- <text class="tip-bold">裁判长可看见所有场地和项目</text> -->
-        <!-- <text class="tip-normal">（场地和项目可动态全部），可以点击切换</text> -->
-      </view>
-
-      <!-- 项目选择 - 横向滚动 -->
-      <scroll-view class="project-scroll" scroll-x="true" show-scrollbar="false">
-        <view class="project-list">
           <view
+            class="project-chip"
+            :class="{ active: index === currentProjectIndex }"
             v-for="(project, index) in projects"
             :key="project.projectId"
-            :class="['project-btn', currentProject === project.projectId ? 'active' : '']"
+            @click="switchProject(index)"
-            @click="switchProject(project.projectId)"
           >
             {{ project.projectName }}
           </view>
         </view>
-      </scroll-view>
+      </view>
     </view>
 
     <!-- 已评分统计 -->
     <view class="score-stats">
-      <text class="stats-text">已评分：</text>
+      <text class="stats-label">已评分：</text>
-      <text class="stats-number">{{ scoredCount }}/{{ totalCount }}</text>
+      <text class="stats-value">{{ scoredCount }}/{{ totalCount }}</text>
     </view>
 
     <!-- 选手列表 -->
@@ -65,24 +53,41 @@
         v-for="player in players"
         :key="player.athleteId"
       >
-        <view class="player-header">
+        <view class="card-header">
           <view class="player-name">{{ player.name }}</view>
 
           <!-- 已评分：显示总分和修改按钮 -->
           <view class="action-area" v-if="player.totalScore">
-            <text class="total-score">总分：{{ player.totalScore }}</text>
+            <view class="score-tag">
-            <view class="chief-actions">
+              <text class="tag-label">总分：</text>
-              <!-- <text class="chief-hint">裁判长功能：修改评分、修改按钮需等总分出来才出现</text> -->
+              <text class="tag-value">{{ formatScore(player.totalScore) }}</text>
+            </view>
             <button class="modify-btn" @click="goToModify(player)">修改</button>
           </view>
         </view>
+
+        <view class="player-details">
+          <view class="detail-row">
+            <text class="detail-text">身份证：{{ player.idCard }}</text>
+          </view>
+          <view class="detail-row">
+            <text class="detail-text">队伍：{{ player.team }}</text>
+          </view>
+          <view class="detail-row">
+            <text class="detail-text">编号：{{ player.number }}</text>
+          </view>
+        </view>
       </view>
 
-        <view class="player-info">
+      <!-- 加载状态 -->
-          <view class="info-item">身份证：{{ player.idCard }}</view>
+      <view class="loading-status" v-if="players.length > 0">
-          <view class="info-item">队伍：{{ player.team }}</view>
+        <view v-if="isLoading" class="loading-text">加载中...</view>
-          <view class="info-item">编号：{{ player.number }}</view>
+        <view v-else-if="!hasMore" class="no-more-text">— 没有更多了 —</view>
       </view>
+
+      <!-- 空状态 -->
+      <view class="empty-state" v-if="!isLoading && players.length === 0">
+        <text class="empty-text">暂无选手数据</text>
       </view>
     </view>
   </view>
@@ -96,38 +101,47 @@ export default {
   data() {
     return {
       matchInfo: {
-        id: '',
         name: '',
         time: ''
       },
-      competitionId: '',
+      venueInfo: {
-      currentVenue: '',
+        id: '',
-      currentProject: '',
+        name: ''
-      venues: [],
+      },
+      projectInfo: {
+        id: '',
+        name: ''
+      },
+      judgeId: '',
       projects: [],
+      currentProjectIndex: 0,
       players: [],
       scoredCount: 0,
-      totalCount: 0
+      totalCount: 0,
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      isLoading: false,
+      hasMore: true,
+      isFirstLoad: true
     }
   },
 
   async onLoad() {
-    // 获取全局数据
     const app = getApp()
     const globalData = app.globalData || {}
 
     // 检查登录状态
     if (!globalData.judgeId || !globalData.token) {
-      console.warn('用户未登录，跳转到登录页')
       uni.showToast({
         title: '请先登录',
         icon: 'none',
         duration: 1500
       })
       setTimeout(() => {
-        uni.reLaunch({
+        uni.reLaunch({ url: '/pages/login/login' })
-          url: '/pages/login/login'
-        })
       }, 1500)
       return
     }
@@ -143,171 +157,197 @@ export default {
 
     // 加载比赛信息
     this.matchInfo = {
-      id: globalData.matchId,
       name: globalData.matchName || '比赛名称',
-      time: globalData.matchTime || '比赛时间'
+      time: globalData.matchTime || ''
     }
 
-    // 注意：裁判长没有固定场地和项目，需要查看所有
+    // 从 globalData 获取场地信息（与普通裁判相同）
-    this.competitionId = globalData.matchId
+    this.venueInfo = {
+      id: globalData.venueId,
+      name: globalData.venueName || '场地'
+    }
+
+    // 从 globalData 获取项目列表
+    this.projects = globalData.projects || []
+    this.currentProjectIndex = globalData.currentProjectIndex || 0
+    this.updateCurrentProject()
+    this.judgeId = globalData.judgeId
 
     // 调试信息
     if (config.debug) {
       console.log('裁判长列表页加载:', {
         userRole: globalData.userRole,
-        competitionId: this.competitionId
+        judgeId: this.judgeId,
+        venueId: this.venueInfo.id,
+        projectId: this.projectInfo.id
       })
     }
 
-    // 加载场地和项目列表
+    await this.loadPlayers(true)
-    await this.loadVenuesAndProjects()
+    this.isFirstLoad = false
+  },
+
+  async onShow() {
+    // 从修改评分页返回时刷新数据
+    if (!this.isFirstLoad) {
+      if (config.debug) {
+        console.log('页面显示，刷新数据')
+      }
+      await this.loadPlayers(true)
+    }
+  },
+
+  async onPullDownRefresh() {
+    await this.loadPlayers(true)
+    uni.stopPullDownRefresh()
+  },
+
+  async onReachBottom() {
+    if (this.hasMore && !this.isLoading) {
+      await this.loadMore()
+    }
   },
 
   methods: {
-    async loadVenuesAndProjects() {
+    formatDateTime(dateTimeStr) {
+      if (!dateTimeStr) return ''
       try {
-        uni.showLoading({
+        const date = new Date(dateTimeStr)
-          title: '加载中...',
+        if (isNaN(date.getTime())) return dateTimeStr
-          mask: true
+        const year = date.getFullYear()
-        })
+        const month = date.getMonth() + 1
-
+        const day = date.getDate()
-        // 🔥 关键改动：使用 dataAdapter 获取场地列表
+        const hours = date.getHours()
-        // Mock模式：调用 mock/athlete.js 的 getVenues 函数
+        const minutes = date.getMinutes()
-        // API模式：调用 api/athlete.js 的 getVenues 函数（GET /martial/venue/list）
+        const paddedMinutes = minutes < 10 ? '0' + minutes : minutes
-        const venuesRes = await dataAdapter.getData('getVenues', {
+        return year + '年' + month + '月' + day + '日 ' + hours + ':' + paddedMinutes
-          competitionId: this.competitionId
-        })
-
-        // 🔥 关键改动：使用 dataAdapter 获取项目列表
-        // Mock模式：调用 mock/athlete.js 的 getProjects 函数
-        // API模式：调用 api/athlete.js 的 getProjects 函数（GET /martial/project/list）
-        const projectsRes = await dataAdapter.getData('getProjects', {
-          competitionId: this.competitionId
-        })
-
-        this.venues = venuesRes.data || []
-        this.projects = projectsRes.data || []
-
-        // 默认选中第一个场地和项目
-        if (this.venues.length > 0) {
-          this.currentVenue = this.venues[0].venueId
-        }
-        if (this.projects.length > 0) {
-          this.currentProject = this.projects[0].projectId
-        }
-
-        uni.hideLoading()
-
-        // 调试信息
-        if (config.debug) {
-          console.log('场地和项目加载成功:', {
-            venues: this.venues.length,
-            projects: this.projects.length,
-            currentVenue: this.currentVenue,
-            currentProject: this.currentProject
-          })
-        }
-
-        // 加载选手列表
-        if (this.currentVenue && this.currentProject) {
-          await this.loadPlayers()
-        }
-
       } catch (error) {
-        uni.hideLoading()
+        return dateTimeStr
-        console.error('加载场地和项目失败:', error)
-        uni.showToast({
-          title: error.message || '加载失败',
-          icon: 'none'
-        })
       }
     },
 
-    async loadPlayers() {
+    formatScore(score) {
-      try {
+      // 处理 null、undefined、-1 等无效值
-        uni.showLoading({
+      if (score === null || score === undefined || score === -1 || score === '-1') {
-          title: '加载中...',
+        return '--'
-          mask: true
+      }
-        })
+      // 如果是字符串类型的数字，直接返回
+      if (typeof score === 'string' && !isNaN(parseFloat(score))) {
+        return score
+      }
+      // 如果是数字类型，保留3位小数
+      if (typeof score === 'number') {
+        return score.toFixed(3)
+      }
+      return score
+    },
 
-        // 🔥 关键改动：使用 dataAdapter 获取选手列表（裁判长视图）
+    async handleRefresh() {
-        // Mock模式：调用 mock/athlete.js 的 getAthletesForAdmin 函数
+      if (this.isLoading) return
-        // API模式：调用 api/athlete.js 的 getAthletesForAdmin 函数（GET /mini/score/athletes）
+      uni.showToast({ title: '刷新中...', icon: 'loading', duration: 1000 })
+      await this.loadPlayers(true)
+      uni.showToast({ title: '刷新成功', icon: 'success', duration: 1000 })
+    },
+
+    async loadPlayers(refresh = false) {
+      if (this.isLoading) return
+      try {
+        this.isLoading = true
+        if (refresh) {
+          this.pagination.current = 1
+          this.hasMore = true
+        }
+        if (refresh && this.isFirstLoad) {
+          uni.showLoading({ title: '加载中...', mask: true })
+        }
         const app = getApp()
         const globalData = app.globalData || {}
-        const response = await dataAdapter.getData('getAthletesForAdmin', {
+        const params = {
-          judgeId: globalData.judgeId,
+          matchCode: globalData.matchCode,
-          competitionId: this.competitionId,
+          judgeId: this.judgeId,
-          venueId: this.currentVenue,
+          venueId: this.venueInfo.id,
-          projectId: this.currentProject
+          projectId: this.projectInfo.id,
+          current: this.pagination.current,
+          size: this.pagination.size
+        }
+        Object.keys(params).forEach(key => {
+          if (params[key] === undefined || params[key] === null || params[key] === '') {
+            delete params[key]
+          }
         })
 
-        uni.hideLoading()
-
-        // 保存选手列表
-        this.players = response.data || []
-
-        // 计算评分统计（裁判长视图：统计有总分的选手）
-        this.totalCount = this.players.length
-        this.scoredCount = this.players.filter(p => p.totalScore).length
-
-        // 调试信息
         if (config.debug) {
-          console.log('选手列表加载成功:', {
+          console.log('请求选手列表参数:', params)
-            venueId: this.currentVenue,
+        }
-            projectId: this.currentProject,
+
-            total: this.totalCount,
+        // 裁判长使用 getAthletesForAdmin 接口
+        const response = await dataAdapter.getData('getAthletesForAdmin', params)
+
+        if (config.debug) {
+          console.log('选手列表响应:', response)
+        }
+
+        if (refresh && this.isFirstLoad) {
+          uni.hideLoading()
+        }
+        const responseData = response.data || {}
+        const records = responseData.records || response.data || []
+        const total = responseData.total || records.length
+        this.pagination.total = total
+        this.totalCount = total
+        if (refresh) {
+          this.players = records
+        } else {
+          this.players = [...this.players, ...records]
+        }
+        // 裁判长视图：统计有总分的选手
+        this.scoredCount = this.players.filter(p => p.totalScore).length
+        this.hasMore = this.players.length < total
+
+        if (config.debug) {
+          console.log('选手列表处理结果:', {
+            total: total,
+            loaded: this.players.length,
             scored: this.scoredCount,
             players: this.players
           })
         }
-
       } catch (error) {
         uni.hideLoading()
         console.error('加载选手列表失败:', error)
-        uni.showToast({
+        uni.showToast({ title: error.message || '加载失败', icon: 'none' })
-          title: error.message || '加载失败',
+      } finally {
-          icon: 'none'
+        this.isLoading = false
-        })
       }
     },
 
-    async switchVenue(venueId) {
+    async loadMore() {
-      if (this.currentVenue === venueId) return
+      if (!this.hasMore || this.isLoading) return
-
+      this.pagination.current++
-      this.currentVenue = venueId
+      await this.loadPlayers(false)
-
-      // 调试信息
-      if (config.debug) {
-        console.log('切换场地:', venueId)
-      }
-
-      // 重新加载选手列表
-      await this.loadPlayers()
-    },
-
-    async switchProject(projectId) {
-      if (this.currentProject === projectId) return
-
-      this.currentProject = projectId
-
-      // 调试信息
-      if (config.debug) {
-        console.log('切换项目:', projectId)
-      }
-
-      // 重新加载选手列表
-      await this.loadPlayers()
     },
 
     goToModify(player) {
-      // 保存当前选手信息到全局数据
       const app = getApp()
       app.globalData.currentAthlete = player
+      uni.navigateTo({ url: '/pages/modify-score/modify-score' })
+    },
 
-      uni.navigateTo({
+    updateCurrentProject() {
-        url: '/pages/modify-score/modify-score'
+      const currentProject = this.projects[this.currentProjectIndex] || {}
-      })
+      this.projectInfo = {
+        id: currentProject.projectId,
+        name: currentProject.projectName || '项目'
+      }
+    },
+
+    async switchProject(index) {
+      if (index === this.currentProjectIndex) return
+      this.currentProjectIndex = index
+      const app = getApp()
+      app.globalData.currentProjectIndex = index
+      this.updateCurrentProject()
+      await this.loadPlayers(true)
     }
   }
 }
@@ -320,7 +360,7 @@ export default {
   padding-bottom: 40rpx;
 }
 
-/* 导航栏 */
+/* ==================== 导航栏 ==================== */
 .nav-bar {
   height: 90rpx;
   background: linear-gradient(135deg, #1B7C5E 0%, #2A9D7E 100%);
@@ -335,7 +375,6 @@ export default {
   font-size: 36rpx;
   font-weight: 600;
   color: #FFFFFF;
-  letter-spacing: 2rpx;
 }
 
 .nav-right {
@@ -343,24 +382,15 @@ export default {
   right: 30rpx;
   display: flex;
   align-items: center;
-  gap: 30rpx;
+  gap: 20rpx;
 }
 
-.icon-menu,
+.nav-dots, .nav-circle {
-.icon-close {
-  width: 60rpx;
-  height: 60rpx;
-  background-color: rgba(255, 255, 255, 0.25);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   font-size: 32rpx;
   color: #FFFFFF;
-  font-weight: bold;
 }
 
-/* 比赛信息 */
+/* ==================== 比赛信息 ==================== */
 .match-info {
   padding: 30rpx;
   background-color: #F5F5F5;
@@ -369,132 +399,94 @@ export default {
 .match-title {
   font-size: 32rpx;
   font-weight: 600;
-  color: #333333;
+  color: #1B7C5E;
-  line-height: 1.6;
+  line-height: 1.5;
-  margin-bottom: 10rpx;
+  margin-bottom: 8rpx;
-}
-
-.tip-text {
-  font-size: 24rpx;
-  color: #FF4D6A;
-  margin-bottom: 10rpx;
 }
 
 .match-time {
   font-size: 28rpx;
-  color: #666666;
+  color: #333333;
 }
 
-/* 场地和项目区域 */
+/* ==================== 场地卡片 ==================== */
-.venue-section {
+.venue-card {
+  margin: 0 30rpx 20rpx;
   background-color: #FFFFFF;
-  margin: 20rpx 30rpx;
   border-radius: 16rpx;
   padding: 30rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
 }
 
-/* 场地滚动容器 */
+.venue-header {
-.venue-scroll {
+  display: flex;
-  width: 100%;
+  align-items: center;
-  white-space: nowrap;
+  justify-content: space-between;
-  margin-bottom: 20rpx;
+  padding-bottom: 24rpx;
+  border-bottom: 4rpx solid #1B7C5E;
+  margin-bottom: 24rpx;
 }
 
-.venue-tabs {
+.venue-name {
-  display: inline-flex;
-  gap: 30rpx;
-  padding-bottom: 20rpx;
-  border-bottom: 4rpx solid #E0E0E0;
-  position: relative;
-}
-
-.venue-tab {
   font-size: 32rpx;
-  font-weight: 500;
-  color: #666666;
-  padding: 0 20rpx;
-  position: relative;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.venue-tab.active {
   font-weight: 600;
   color: #333333;
 }
 
-.venue-tab.active::after {
+.refresh-link {
-  content: '';
+  font-size: 26rpx;
-  position: absolute;
+  color: #4A90D9;
-  bottom: -24rpx;
-  left: 0;
-  right: 0;
-  height: 4rpx;
-  background-color: #1B7C5E;
 }
 
-.venue-tip {
+.project-row {
-  font-size: 24rpx;
+  display: flex;
-  line-height: 1.6;
+  flex-direction: column;
-  margin-bottom: 20rpx;
 }
 
-.tip-bold {
+.project-grid {
-  color: #FF4D6A;
+  display: grid;
-  font-weight: 500;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16rpx;
 }
 
-.tip-normal {
+.project-chip {
-  color: #FF4D6A;
+  padding: 20rpx 12rpx;
-}
+  border: 2rpx solid #1B7C5E;
-
-/* 项目滚动容器 */
-.project-scroll {
-  width: 100%;
-  white-space: nowrap;
-}
-
-.project-list {
-  display: inline-flex;
-  gap: 20rpx;
-}
-
-.project-btn {
-  padding: 20rpx 30rpx;
-  background-color: #FFFFFF;
-  border: 2rpx solid #CCCCCC;
   border-radius: 8rpx;
   font-size: 26rpx;
-  color: #666666;
+  color: #1B7C5E;
+  background-color: #FFFFFF;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
-  flex-shrink: 0;
 }
 
-.project-btn.active {
+.project-chip.active {
   background-color: #1B7C5E;
   color: #FFFFFF;
-  border-color: #1B7C5E;
-  font-weight: 500;
 }
 
-/* 评分统计 */
+/* ==================== 评分统计 ==================== */
 .score-stats {
   padding: 20rpx 30rpx;
+  display: flex;
+  align-items: center;
+}
+
+.stats-label {
   font-size: 28rpx;
   color: #333333;
 }
 
-.stats-text {
+.stats-value {
-  color: #666666;
+  font-size: 32rpx;
-}
-
-.stats-number {
   color: #1B7C5E;
   font-weight: 600;
+  margin-left: 8rpx;
 }
 
-/* 选手列表 */
+/* ==================== 选手卡片 ==================== */
 .player-list {
   padding: 0 30rpx;
 }
@@ -502,12 +494,12 @@ export default {
 .player-card {
   background-color: #FFFFFF;
   border-radius: 16rpx;
-  padding: 30rpx;
+  padding: 24rpx;
   margin-bottom: 20rpx;
-  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
 }
 
-.player-header {
+.card-header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
@@ -520,32 +512,31 @@ export default {
   color: #333333;
 }
 
+/* ==================== 操作区域 ==================== */
 .action-area {
   display: flex;
-  flex-direction: column;
+  align-items: center;
-  align-items: flex-end;
+  gap: 16rpx;
-  gap: 10rpx;
 }
 
-.total-score {
+.score-tag {
-  font-size: 26rpx;
-  color: #333333;
-  font-weight: 600;
-}
-
-.chief-actions {
   display: flex;
-  flex-direction: column;
+  align-items: center;
-  align-items: flex-end;
+  padding: 12rpx 20rpx;
-  gap: 10rpx;
+  background-color: #F5F5F5;
+  border-radius: 8rpx;
+  border: 2rpx solid #E5E5E5;
 }
 
-.chief-hint {
+.tag-label {
-  font-size: 22rpx;
+  font-size: 24rpx;
-  color: #FF4D6A;
+  color: #666666;
-  text-align: right;
+}
-  line-height: 1.5;
+
-  max-width: 400rpx;
+.tag-value {
+  font-size: 28rpx;
+  color: #333333;
+  font-weight: 500;
 }
 
 .modify-btn {
@@ -555,21 +546,50 @@ export default {
   font-size: 28rpx;
   color: #FFFFFF;
   font-weight: 500;
+  border: none;
+  line-height: 1.4;
 }
 
-.modify-btn:active {
+/* ==================== 选手详情 ==================== */
-  opacity: 0.9;
+.player-details {
-}
-
-.player-info {
   display: flex;
   flex-direction: column;
-  gap: 12rpx;
+  gap: 8rpx;
 }
 
-.info-item {
+.detail-row {
+  line-height: 1.6;
+}
+
+.detail-text {
   font-size: 26rpx;
   color: #666666;
-  line-height: 1.5;
+}
+
+/* ==================== 加载状态 ==================== */
+.loading-status {
+  padding: 30rpx 0;
+  text-align: center;
+}
+
+.loading-text {
+  font-size: 26rpx;
+  color: #1B7C5E;
+}
+
+.no-more-text {
+  font-size: 26rpx;
+  color: #999999;
+}
+
+/* ==================== 空状态 ==================== */
+.empty-state {
+  padding: 100rpx 0;
+  text-align: center;
+}
+
+.empty-text {
+  font-size: 28rpx;
+  color: #999999;
 }
 </style>

src/pages/score-list/score-list.vue

@@ -25,8 +25,7 @@
 
       <!-- 项目筛选 -->
       <view class="project-row">
-        <scroll-view class="project-scroll" scroll-x="true" :show-scrollbar="false">
+        <view class="project-grid">
-          <view class="project-chips">
           <view
             class="project-chip"
             :class="{ active: index === currentProjectIndex }"
@@ -37,7 +36,6 @@
             {{ project.projectName }}
           </view>
         </view>
-        </scroll-view>
       </view>
     </view>
 
@@ -443,23 +441,23 @@ export default {
   flex-direction: column;
 }
 
-.project-scroll {
+.project-grid {
-  white-space: nowrap;
+  display: grid;
-}
+  grid-template-columns: repeat(3, 1fr);
-
+  gap: 16rpx;
-.project-chips {
-  display: inline-flex;
-  gap: 20rpx;
 }
 
 .project-chip {
-  display: inline-block;
+  padding: 20rpx 12rpx;
-  padding: 16rpx 32rpx;
   border: 2rpx solid #1B7C5E;
   border-radius: 8rpx;
-  font-size: 28rpx;
+  font-size: 26rpx;
   color: #1B7C5E;
   background-color: #FFFFFF;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .project-chip.active {