|
|
@@ -28,13 +28,16 @@
|
|
|
<text class="detail-category">{{ article.categoryName || '' }}</text>
|
|
|
</view>
|
|
|
<view v-if="article.relatedDimensions" class="detail-dimensions">
|
|
|
- <view v-for="dim in parseDimensions(article)" :key="dim.code" class="dim-bar-item">
|
|
|
+ <view v-for="dim in parseDimensions(article) :key="dim.code" class="dim-bar-item">
|
|
|
<view class="dim-bar" :style="{ background: dim.color, width: dim.weight + '%' }"></view>
|
|
|
<text class="dim-label">{{ dim.name }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="detail-summary" v-if="article.summary">
|
|
|
+ <text class="detail-summary-text">{{ article.summary }}</text>
|
|
|
+ </view>
|
|
|
<view class="divider"></view>
|
|
|
- <view class="detail-body"><mp-html :content="article.content" :domain="config.API_BASE_URL" /></view>
|
|
|
+ <view class="detail-body"><mp-html :content="article.content" :domain="config.API_BASE_URL" :tag-style="contentTagStyle" /></view>
|
|
|
|
|
|
<!-- 评论区（已屏蔽） -->
|
|
|
<view style="height: 200rpx;"></view>
|
|
|
@@ -99,6 +102,7 @@ export default {
|
|
|
currentChildId: null,
|
|
|
showPoster: false, posterQrCode: '',
|
|
|
posterDimension: '', posterSummary: '', posterInviteText: '',
|
|
|
+ contentTagStyle: { p: 'font-size:32rpx;color:#444;line-height:1.8;', div: 'font-size:32rpx;color:#444;line-height:1.8;', section: 'font-size:32rpx;color:#444;line-height:1.8;', li: 'font-size:32rpx;color:#444;line-height:1.8;', blockquote: 'font-size:32rpx;color:#444;line-height:1.8;' },
|
|
|
// 答题
|
|
|
showQuiz: false, quizQuestions: [], quizAnswers: [], showResult: false, quizResult: {},
|
|
|
mascotList: [{ icon: '🐶', name: '浠宝' }, { icon: '🐼', name: '福宝' }],
|
|
|
@@ -330,8 +334,10 @@ export default {
|
|
|
.dim-bar-item { flex: 1; }
|
|
|
.dim-bar { height: 8rpx; border-radius: 4rpx; }
|
|
|
.dim-label { font-size: 18rpx; color: #999; text-align: center; display: block; margin-top: 4rpx; }
|
|
|
+.detail-summary { padding: 20rpx 30rpx; }
|
|
|
+.detail-summary-text { font-size: 26rpx; color: #888; line-height: 1.7; display: block; border-left: 4rpx solid #F97316; padding-left: 20rpx; }
|
|
|
.divider { height: 1rpx; background: #eee; margin: 24rpx 30rpx; }
|
|
|
-.detail-body { padding: 0 30rpx; font-size: 28rpx; color: #444; line-height: 1.8; }
|
|
|
+.detail-body { padding: 0 30rpx; font-size: 32rpx; color: #444; line-height: 1.8; }
|
|
|
|
|
|
.detail-footer { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; padding: 20rpx 30rpx; display: flex; align-items: center; gap: 16rpx; box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.06); z-index: 10; }
|
|
|
.share-btn { height: 72rpx; padding: 0 30rpx; background: linear-gradient(135deg, #F97316, #FB923C); border-radius: 36rpx; display: flex; align-items: center; justify-content: center; border: none; }
|
iwt