|
|
@@ -24,6 +24,9 @@
|
|
|
|
|
|
<view v-if="!isLoading">
|
|
|
<view class="news-card" v-for="item in filteredList" :key="item.id">
|
|
|
+ <view class="news-header">
|
|
|
+ <text class="title">{{ item.title }}</text>
|
|
|
+ </view>
|
|
|
<view class="news-content">
|
|
|
<view v-if="item.coverImage" class="news-image-container">
|
|
|
<image class="news-image" :src="(isProtectedUrl(resolveImageUrl(item.coverImage)) ? (downloadedCovers[resolveImageUrl(item.coverImage)] || defaultCover) : (resolveImageUrl(item.coverImage) || defaultCover))" mode="aspectFill" @load="onCoverImageLoad" @error="onCoverImageError(item.coverImage, $event)" />
|
|
|
@@ -32,7 +35,6 @@
|
|
|
<image class="placeholder-icon" src="/static/icons/remixicon/image-line.svg" />
|
|
|
</view>
|
|
|
<view class="meta">
|
|
|
- <text class="title">{{ item.title }}</text>
|
|
|
<text class="summary">{{ item.summary }}</text>
|
|
|
<text class="author">作者: {{ item.authorName }}</text>
|
|
|
<text class="time">发布时间: {{ item.publishTime }}</text>
|
|
|
@@ -330,18 +332,24 @@ onPullDownRefresh(() => {
|
|
|
margin: 18rpx 20rpx;
|
|
|
border-radius: 12rpx;
|
|
|
overflow: hidden;
|
|
|
- box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
|
|
+ box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
|
|
|
transition: transform 0.12s ease, box-shadow 0.12s ease;
|
|
|
}
|
|
|
.news-card:hover {
|
|
|
transform: translateY(-4rpx);
|
|
|
- box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.12);
|
|
|
+ box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.2);
|
|
|
+}
|
|
|
+.news-header {
|
|
|
+ padding: 20rpx;
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ border-bottom: 1rpx solid #e6e6e6;
|
|
|
}
|
|
|
.news-content {
|
|
|
display: flex;
|
|
|
padding: 20rpx;
|
|
|
gap: 20rpx;
|
|
|
align-items: center;
|
|
|
+ background-color: #fff;
|
|
|
}
|
|
|
.news-image-container {
|
|
|
width: 220rpx;
|
|
|
@@ -408,9 +416,10 @@ onPullDownRefresh(() => {
|
|
|
display: flex;
|
|
|
gap: 12rpx;
|
|
|
padding: 12rpx 18rpx;
|
|
|
- border-top: 1rpx solid #f5f5f5;
|
|
|
+ border-top: 1rpx solid #e6e6e6;
|
|
|
justify-content: flex-end;
|
|
|
flex-wrap: wrap;
|
|
|
+ background-color: #f8f9fa;
|
|
|
}
|
|
|
.action-btn {
|
|
|
padding: 10rpx 22rpx;
|
mcbaiyun