style(article/list): 优化文章列表项样式与交互

1.  修复无图文章项布局对齐问题,添加no-image类处理无图场景
2.  将点击事件从click改为tap适配小程序
3.  调整图片模式为aspectFill并补全高度样式
4.  优化标签行高与日期块对齐方式
5.  仅在有封面图时渲染图片区域
This commit is contained in:
2026-06-29 09:53:23 +08:00
parent 1150dad0b5
commit 7e4400267e

View File

@@ -4,10 +4,10 @@
<block slot="list">
<view class="article-wrap" v-if="list.length">
<ns-adv keyword="NS_ARTICLE" class-name="adv-wrap"></ns-adv>
<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
<view class="article-img">
<image class="cover-img" :src="$util.img(item.cover_img)" mode="widthFix"
@error="imgError(index)" show-menu-by-longpress/>
<view :class="['item', !item.cover_img ? 'no-image' : '']" v-for="(item, index) in list" :key="index" @tap="toDetail(item)">
<view class="article-img" v-if="item.cover_img">
<image class="cover-img" :src="$util.img(item.cover_img)" mode="aspectFill"
@error="imgError(index)" show-menu-by-longpress/>
</view>
<view class="info-wrap">
<text class="title">{{ item.article_title }}</text>
@@ -154,6 +154,7 @@ export default {
image {
width: 100%;
height: 100%;
}
}
@@ -182,6 +183,7 @@ export default {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: $font-size-tag;
line-height: 1.4;
}
.read-wrap {
@@ -211,10 +213,21 @@ export default {
}
.date {
margin-left: 20rpx;
margin-left: auto;
}
}
}
// 无图 item:隐藏图位,并给 info-wrap 固定最小高度,使 read-wrap 与有图 item 底部对齐
&.no-image {
.article-img {
display: none;
}
.info-wrap {
min-height: 160rpx;
}
}
}
}
</style>
</style>