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
+65 -37
View File
@@ -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;
}