| | |
|---|
| | | <view class="nav-shell"> |
|---|
| | | <view class="safe-space" :style="'height:' + navTop + 'px'"></view> |
|---|
| | | <view class="nav-row" :style="'height:' + navHeight + 'px;padding-right:' + navRight + 'px'"> |
|---|
| | | <view class="back" @tap="goBack"><image src="/static/news-assets/arrow-left.svg" mode="aspectFit"></image></view> |
|---|
| | | <view class="nav-back" @tap="goBack"><image src="/static/news-assets/arrow-left.svg" mode="aspectFit"></image></view> |
|---|
| | | <text class="nav-title">资讯详情</text> |
|---|
| | | <view class="capsule-reserve" :style="'width:' + navWidth + 'px'"></view> |
|---|
| | | </view> |
|---|
| | | <view class="nav-bottom-space"></view> |
|---|
| | | </view> |
|---|
| | | |
|---|
| | | <scroll-view class="article-scroll" scroll-y> |
|---|
| | | <scroll-view :show-scrollbar="false" class="article-scroll" scroll-y> |
|---|
| | | <view v-if="isLoading" class="state-panel"> |
|---|
| | | <view class="loading-spinner"></view> |
|---|
| | | <text class="state-title">正在加载资讯</text> |
|---|
| | |
|---|
| | | getNewsDetail(newsId.value, (data: any) => { |
|---|
| | | articleTitle.value = data != null && data.title != null ? data.title as string : '' |
|---|
| | | publisher.value = data != null && data.source != null ? data.source as string : '东区发布' |
|---|
| | | if (data != null && data.author != null && (data.author as string).length > 0) publisher.value = data.author as string |
|---|
| | | const publishValue = data != null && data.publishTime != null ? '' + data.publishTime : '' |
|---|
| | | publishTime.value = publishValue.length >= 16 ? publishValue.substring(0, 16).replace('T', ' ') : publishValue.replace('T', ' ') |
|---|
| | | viewCount.value = data != null && data.viewCount != null ? '' + data.viewCount : '0' |
|---|
| | |
|---|
| | | loadErrorMessage.value = error.message |
|---|
| | | console.error('资讯详情请求失败', error) |
|---|
| | | }) |
|---|
| | | return |
|---|
| | | } |
|---|
| | | if (apiEnvironment != 'development') { |
|---|
| | | isLoading.value = false |
|---|
| | | loadFailed.value = true |
|---|
| | | loadErrorMessage.value = '资讯内容加载失败' |
|---|
| | | return |
|---|
| | | } |
|---|
| | | setTimeout(() => { |
|---|
| | |
|---|
| | | .page { display: flex; flex-direction: column; width: 100%; height: 100vh; background-color: #FFFFFF; } |
|---|
| | | .nav-shell { flex-shrink: 0; background-image: linear-gradient(180deg, #FFF0B8 0%, #FFF8E4 58%, #FFFFFF 100%); } |
|---|
| | | .safe-space { height: 28px; } |
|---|
| | | .nav-row { display: flex; position: relative; height: 32px; align-items: center; justify-content: flex-end; box-sizing: border-box; } |
|---|
| | | .back { display: flex; position: absolute; z-index: 2; left: 24rpx; top: 0; width: 72rpx; height: 100%; justify-content: center; align-items: center; } .back image { width: 38rpx; height: 38rpx; } |
|---|
| | | .nav-row { display: flex; position: relative; height: 32px; box-sizing: border-box; align-items: center; justify-content: flex-end; } |
|---|
| | | .nav-back { display: flex; position: absolute; z-index: 9; left: 16rpx; top: 0; bottom: 0; width: 88rpx; min-height: 64rpx; justify-content: center; align-items: center; } |
|---|
| | | .nav-back image { width: 40rpx; height: 40rpx; } |
|---|
| | | .nav-title { position: absolute; left: 190rpx; right: 190rpx; color: #171717; font-size: 35rpx; font-weight: 700; text-align: center; white-space: nowrap; } |
|---|
| | | .capsule-reserve { width: 88px; height: 100%; flex-shrink: 0; } |
|---|
| | | .nav-bottom-space { height: 34rpx; } |
|---|
