From d606e5d78be61bfe02f4f71e0c9b2d9a59cc1362 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=A3=E4=BA=9B=E8=8A=B1=E5=84=BF?= <1156921458@qq.com>
Date: Thu, 15 May 2025 16:10:51 +0800
Subject: [PATCH] ..

---
 frontend/src/pages/activity/detail/index.vue | 102 ++++++++++++-------
 1 file changed, 65 insertions(+), 37 deletions(-)

diff --git a/frontend/src/pages/activity/detail/index.vue b/frontend/src/pages/activity/detail/index.vue
index d8a61c5..38d39dc 100644
--- a/frontend/src/pages/activity/detail/index.vue
+++ b/frontend/src/pages/activity/detail/index.vue
@@ -59,47 +59,49 @@
         <view class="activity-detail-section" v-if="detailData.items && detailData.items.length > 0">
           <view class="section-title">比赛项目</view>
 
-          <view class="event-items">
-            <view v-for="(item, index) in detailData.items" :key="index" class="event-item">
-              <view class="event-item-header">
-                <view class="event-item-index">{{ index + 1 }}</view>
-                <text class="event-item-name">{{ item.name }}</text>
-              </view>
-              
-              <view class="event-item-content">
-                <!-- 项目图片区域 -->
-                <t-image :src=config.fileDomain+item.img shape="round"
-                         class="event-item-image" fit="fill"/>
+          <scroll-view scroll-x class="event-items-scroll" show-scrollbar="false">
+            <view class="event-items-horizontal">
+              <view v-for="(item, index) in detailData.items" :key="index" class="event-item-card">
+                <view class="event-item-header">
+                  <view class="event-item-index">{{ index + 1 }}</view>
+                  <text class="event-item-name">{{ item.name }}</text>
+                </view>
 
-                <!-- 项目信息区域 -->
-                <view class="event-item-info">
-                  <view class="event-item-section">
-                    <view class="event-item-section-title">
-                      <t-icon name="flag" size="16px" color="var(--td-brand-color-5)"/>
-                      <text>比赛方法</text>
-                    </view>
-                    <view class="event-item-section-content">{{ item.form }}</view>
-                  </view>
+                <view class="event-item-content">
+                  <!-- 项目图片区域 -->
+                  <t-image :src=config.fileDomain+item.img shape="round"
+                           class="event-item-image" fit="fill"/>
 
-                  <view class="event-item-section">
-                    <view class="event-item-section-title">
-                      <t-icon name="chart-bar" size="16px" color="var(--td-brand-color-5)"/>
-                      <text>评分标准</text>
+                  <!-- 项目信息区域 -->
+                  <view class="event-item-info">
+                    <view class="event-item-section">
+                      <view class="event-item-section-title">
+                        <t-icon name="flag" size="16px" color="var(--td-brand-color-5)"/>
+                        <text>比赛方法</text>
+                      </view>
+                      <view class="event-item-section-content">{{ item.form }}</view>
+                    </view>
+
+                    <view class="event-item-section">
+                      <view class="event-item-section-title">
+                        <t-icon name="chart-bar" size="16px" color="var(--td-brand-color-5)"/>
+                        <text>评分标准</text>
+                      </view>
+                      <view class="event-item-section-content">{{ item.rule }}</view>
                     </view>
-                    <view class="event-item-section-content">{{ item.rule }}</view>
-                  </view>
  
-                  <view class="event-item-section">
-                    <view class="event-item-section-title">
-                      <t-icon name="help-circle" size="16px" color="var(--td-brand-color-5)"/>
-                      <text>比赛规则</text>
+                    <view class="event-item-section">
+                      <view class="event-item-section-title">
+                        <t-icon name="help-circle" size="16px" color="var(--td-brand-color-5)"/>
+                        <text>比赛规则</text>
+                      </view>
+                      <view class="event-item-section-content">{{ item.ruleForm }}</view>
                     </view>
-                    <view class="event-item-section-content">{{ item.ruleForm }}</view>
                   </view>
                 </view>
               </view>
             </view>
-          </view>
+          </scroll-view>
         </view>
       </view>
 
@@ -344,10 +346,33 @@ onLoad((option) => {
 }
 
 /* 比赛项目 */
-.event-items {
-  display: flex;
-  flex-direction: column;
-  gap: 24rpx;
+.event-items-scroll {
+  width: 100%;
+  white-space: nowrap;
+}
+
+.event-items-horizontal {
+  display: inline-flex;
+  padding: 0 12rpx;
+}
+
+.event-item-card {
+  display: inline-block;
+  width: 600rpx;
+  min-width: 600rpx;
+  max-width: 80vw;
+  background-color: #ffffff;
+  border-radius: 12rpx;
+  overflow: hidden;
+  border: 1px solid #f0f0f0;
+  margin-right: 24rpx;
+  flex-shrink: 0;
+  white-space: normal;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.event-item-card:last-child {
+  margin-right: 12rpx;
 }
 
 .event-item {
@@ -398,6 +423,9 @@ onLoad((option) => {
   margin-right: 8rpx;
   position: relative;
   z-index: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .event-item-content {
@@ -406,7 +434,7 @@ onLoad((option) => {
 
 .event-item-image {
   width: 100%;
-  height: 300rpx;
+  height: 240rpx;
   display: block;
 }