c-chengc1/hmc_gbhd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

..

Browse Source
This commit is contained in:
那些花儿
2025-05-15 16:10:51 +08:00
parent 053edabb58
commit d606e5d78b
1 changed files with 65 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/activity/detail/index.vue
+63 -35
View File
@@ -59,47 +59,49 @@
<view class="activity-detail-section" v-if="detailData.items && detailData.items.length > 0"> <view class="activity-detail-section" v-if="detailData.items && detailData.items.length > 0">
<view class="section-title">比赛项目</view> <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 class="event-item-header"> <view v-for="(item, index) in detailData.items" :key="index" class="event-item-card">
<view class="event-item-index">{{ index + 1 }}</view> <view class="event-item-header">
<text class="event-item-name">{{ item.name }}</text> <view class="event-item-index">{{ index + 1 }}</view>
</view> <text class="event-item-name">{{ item.name }}</text>
</view>
<view class="event-item-content"> <view class="event-item-content">
<!-- 项目图片区域 --> <!-- 项目图片区域 -->
<t-image :src=config.fileDomain+item.img shape="round" <t-image :src=config.fileDomain+item.img shape="round"
class="event-item-image" fit="fill"/> class="event-item-image" fit="fill"/>
<!-- 项目信息区域 --> <!-- 项目信息区域 -->
<view class="event-item-info"> <view class="event-item-info">
<view class="event-item-section"> <view class="event-item-section">
<view class="event-item-section-title"> <view class="event-item-section-title">
<t-icon name="flag" size="16px" color="var(--td-brand-color-5)"/> <t-icon name="flag" size="16px" color="var(--td-brand-color-5)"/>
<text>比赛方法</text> <text>比赛方法</text>
</view>
<view class="event-item-section-content">{{ item.form }}</view>
</view> </view>
<view class="event-item-section-content">{{ item.form }}</view>
</view>
<view class="event-item-section"> <view class="event-item-section">
<view class="event-item-section-title"> <view class="event-item-section-title">
<t-icon name="chart-bar" size="16px" color="var(--td-brand-color-5)"/> <t-icon name="chart-bar" size="16px" color="var(--td-brand-color-5)"/>
<text>评分标准</text> <text>评分标准</text>
</view>
<view class="event-item-section-content">{{ item.rule }}</view>
</view> </view>
<view class="event-item-section-content">{{ item.rule }}</view>
</view>
<view class="event-item-section"> <view class="event-item-section">
<view class="event-item-section-title"> <view class="event-item-section-title">
<t-icon name="help-circle" size="16px" color="var(--td-brand-color-5)"/> <t-icon name="help-circle" size="16px" color="var(--td-brand-color-5)"/>
<text>比赛规则</text> <text>比赛规则</text>
</view>
<view class="event-item-section-content">{{ item.ruleForm }}</view>
</view> </view>
<view class="event-item-section-content">{{ item.ruleForm }}</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </scroll-view>
</view> </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 { .event-item {
@@ -398,6 +423,9 @@ onLoad((option) => {
margin-right: 8rpx; margin-right: 8rpx;
position: relative; position: relative;
z-index: 1; z-index: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.event-item-content { .event-item-content {
@@ -406,7 +434,7 @@ onLoad((option) => {
.event-item-image { .event-item-image {
width: 100%; width: 100%;
height: 300rpx; height: 240rpx;
display: block; display: block;
} }