| | |
|---|
| | | <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"><view class="back-arrow"></view></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> |
|---|
| | |
|---|
| | | .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-arrow { width: 22rpx; height: 22rpx; margin-left: 10rpx; border-left-width: 4rpx; border-left-style: solid; border-left-color: #2A3441; border-bottom-width: 4rpx; border-bottom-style: solid; border-bottom-color: #2A3441; transform: rotate(45deg); } |
|---|
| | | .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; } |
|---|
