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 14:44:27 +08:00
parent 277ddf9e6a
commit 053edabb58
18 changed files with 548 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/activity/detail/index.vue
+81 -85
View File
@@ -59,93 +59,47 @@
<view class="activity-detail-section" v-if="detailData.items && detailData.items.length > 0">
<view class="section-title">比赛项目</view>
<!-- :navigation="{ showControls: true, paginationPosition: 'bottom-right' }"-->
<t-swiper
:autoplay="false"
:navigation="{ type: 'fraction', paginationPosition: 'bottom-right' }"
height="500px"
>
<t-swiper-item v-for="(item, index) in detailData.items" :key="index" style="height: 192px"
class="event-item">
<view>
<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-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"/>
<view class="event-item-content">
<!-- 项目图片区域 -->
<!-- v-if="item.img"-->
<!-- :src="item.img"-->
<!-- <image
src="https://api.zzzmh.cn/v2/bz/v3/getUrl/c9d3deb2880411ebb6edd017c2d2eca220"
mode="aspectFill"
class="event-item-image"
/>-->
<t-image :src=config.fileDomain+item.img shape="round"
class="event-item-image" fit="fill"/>
<!-- 项目信息区域 -->
<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 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 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">
<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>
</view>
</t-swiper-item>
</t-swiper>
<!-- <view class="event-items">-->
<!-- <view v-for="(item, index) in detailData.items" :key="item.id" 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">-->
<!-- &lt;!&ndash; 项目图片区域 &ndash;&gt;-->
<!-- &lt;!&ndash; v-if="item.img"&ndash;&gt;-->
<!-- &lt;!&ndash; :src="item.img"&ndash;&gt;-->
<!-- <image-->
<!-- src="https://api.zzzmh.cn/v2/bz/v3/getUrl/c9d3deb2880411ebb6edd017c2d2eca220"-->
<!-- mode="aspectFill" -->
<!-- class="event-item-image"-->
<!-- />-->
<!-- -->
<!-- &lt;!&ndash; 项目信息区域 &ndash;&gt;-->
<!-- <view class="event-item-info">-->
<!-- <view class="event-item-section">-->
<!-- <view class="event-item-section-title">-->
<!-- <t-icon name="flag" size="16px" color="var(&#45;&#45;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(&#45;&#45;td-brand-color-5)" />-->
<!-- <text>评分规则</text>-->
<!-- </view>-->
<!-- <view class="event-item-section-content">{{ item.rule }}</view>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
</view>
</view>
</view>
</view>
@@ -402,6 +356,13 @@ onLoad((option) => {
overflow: hidden;
//box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
border: 1px solid #f0f0f0;
height: auto;
max-height: none;
margin-bottom: 24rpx;
}
.event-item:last-child {
margin-bottom: 0;
}
.event-item-header {
@@ -451,6 +412,9 @@ onLoad((option) => {
.event-item-info {
padding: 24rpx;
max-height: 600rpx;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.event-item-section {
@@ -513,14 +477,46 @@ onLoad((option) => {
}
}
::v-deep .t-swiper__container {
//min-height: 300rpx!important;
height: unset;
/* 内容折叠样式 */
.content-collapsed {
max-height: 200rpx;
overflow: hidden;
position: relative;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60rpx;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
}
.expand-button {
margin-top: 12rpx;
text-align: center;
color: var(--td-brand-color-5);
font-size: 26rpx;
padding: 8rpx 0;
}
.scrollable-content {
max-height: 300rpx;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-right: 10rpx;
}
::v-deep .t-swiper {
height: auto !important;
min-height: 500px;
}
::v-deep .t-swiper-item {
//height: 100%!important;
height: unset !important;
height: auto !important;
overflow-y: auto;
}
</style>