..

frontend/src/pages/activity/detail/index.vue

@@ -59,8 +59,9 @@
         <view class="activity-detail-section" v-if="detailData.items && detailData.items.length > 0">
           <view class="section-title">比赛项目</view>
 
-          <view class="event-items">
+          <scroll-view scroll-x class="event-items-scroll" show-scrollbar="false">
-            <view v-for="(item, index) in detailData.items" :key="index" class="event-item">
+            <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>
@@ -100,6 +101,7 @@
                 </view>
               </view>
             </view>
+          </scroll-view>
         </view>
       </view>
 
@@ -344,10 +346,33 @@ onLoad((option) => {
 }
 
 /* 比赛项目 */
-.event-items {
+.event-items-scroll {
-  display: flex;
+  width: 100%;
-  flex-direction: column;
+  white-space: nowrap;
-  gap: 24rpx;
+}
+
+.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;
 }