| | |
| | | <template> |
| | | <view class="container" @touchstart="touchStart" @touchend="touchEnd"> |
| | | <view class="container" @touchstart="touchStart" @touchend="touchEnd"> |
| | | <!-- 顶部海报图 --> |
| | | <!-- 动态封面区域 --> |
| | | <view class="cover-container"> |
| | |
| | | <text class="location">最大人数:{{ activityInfo.limitUserNum || '暂无' }}</text> |
| | | </view> |
| | | <view> |
| | | <text class="location">活动类型:{{ activityInfo.activityType || '暂无' }}</text> |
| | | <text class="location">活动类型:{{ activityInfo.activityType === 'online' ? '线上' : '线下' }}</text> |
| | | </view> |
| | | </view> |
| | | <view class="tags"> |
| | |
| | | |
| | | <script> |
| | | import '@/components/uview-components/uview-ui'; |
| | | import {changeCollect} from '@/api/collect.js' |
| | | import {getActivityDetail, activityReport} from '@/api/activity.js'; |
| | | import { |
| | | changeCollect |
| | | } from '@/api/collect.js' |
| | | import { |
| | | getActivityDetail, |
| | | activityReport |
| | | } from '@/api/activity.js'; |
| | | export default { |
| | | data() { |
| | | return { |
| | |
| | | this.activityInfo.startTime = res.data.data.startTime; |
| | | this.activityInfo.endTime = res.data.data.endTime; |
| | | this.activityInfo.activityLocation = res.data.data.activityLocation; |
| | | this.activityInfo.activityContent = '<h2>活动介绍</h2>' + res.data.data.activityContent; |
| | | this.activityInfo.activityContent = '<h2>活动介绍</h2>' + this.processRichText(res.data.data.activityContent); |
| | | |
| | | |
| | | this.activityInfo.activityType = res.data.data.activityType; |
| | | this.activityInfo.limitUserNum = res.data.data.limitUserNum; |
| | | this.reportBtn = res.data.data.isReport; |
| | |
| | | this.activityInfo.url = res.data.data.url; |
| | | } |
| | | }) |
| | | }, |
| | | // 在获取富文本数据后处理 |
| | | processRichText(content) { |
| | | // 处理图片 |
| | | content = content.replace(/<img[^>]*>/gi, (match) => { |
| | | if (!/style=['"]/.test(match)) { |
| | | return match.replace(/<img/, '<img style="max-width:100% !important;height:auto !important;display:block;margin:10px auto;border-radius:8rpx;"'); |
| | | } |
| | | return match; |
| | | }); |
| | | |
| | | // 处理视频 |
| | | content = content.replace(/<video[^>]*>/gi, (match) => { |
| | | if (!/style=['"]/.test(match)) { |
| | | return match.replace(/<video/, '<video style="max-width:100% !important;height:auto !important;display:block;margin:10px auto;"'); |
| | | } |
| | | return match; |
| | | }); |
| | | |
| | | return content; |
| | | }, |
| | | loadDetailData() { |
| | | //获得详情接口 |
| | |
| | | margin-bottom: 15rpx; |
| | | } |
| | | |
| | | /* 修改后的样式 */ |
| | | .status-bar { |
| | | position: absolute; |
| | | bottom: 40rpx; |
| | | position: fixed; |
| | | bottom: 0; |
| | | left: 0; |
| | | right: 0; |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 10px 15px; |
| | | padding: 20rpx 30rpx; |
| | | justify-content: space-between; |
| | | background-color: #fff; |
| | | box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1); |
| | | z-index: 100; |
| | | } |
| | | |
| | | /* 调整容器底部内边距 */ |
| | | .container { |
| | | padding-bottom: 120rpx; |
| | | } |
| | | |
| | | .signup-btn { |
| | |
| | | |
| | | .rich-text-container { |
| | | padding: 15px; |
| | | overflow: hidden; |
| | | /* 防止内容溢出 */ |
| | | } |
| | | |
| | | .rich-text-content { |
| | | width: 100%; |
| | | max-width: 100%; /* 限制最大宽度 */ |
| | | line-height: 1.6; |
| | | color: #333; |
| | | font-size: 28rpx; |
| | | } |
| | | |
| | | .rich-text-content img { |
| | | max-width: 100%; |
| | | height: auto; |
| | | display: block; |
| | | margin: 10px auto; |
| | | } |
| | | |
| | | .rich-text-content video { |
| | | max-width: 100%; |
| | | height: auto; |
| | | display: block; |
| | | margin: 10px auto; |
| | | } |
| | | |
| | | .rich-text-content p { |
| | | margin-bottom: 10px; |
| | | } |
| | | |
| | | .rich-text-content h1, |
| | | .rich-text-content h2, |
| | | .rich-text-content h3, |
| | | .rich-text-content h4 { |
| | | margin: 20px 0 10px; |
| | | color: #222; |
| | | } |
| | | |
| | | .rich-text-content h1 { |
| | | font-size: 24px; |
| | | } |
| | | |
| | | .rich-text-content h2 { |
| | | font-size: 22px; |
| | | } |
| | | |
| | | .rich-text-content h3 { |
| | | font-size: 20px; |
| | | } |
| | | |
| | | .rich-text-content h4 { |
| | | font-size: 18px; |
| | | word-wrap: break-word; |
| | | /* 长单词换行 */ |
| | | overflow: hidden; |
| | | /* 隐藏溢出内容 */ |
| | | } |
| | | </style> |