style(article/list): 优化文章列表项样式与交互
1. 修复无图文章项布局对齐问题,添加no-image类处理无图场景 2. 将点击事件从click改为tap适配小程序 3. 调整图片模式为aspectFill并补全高度样式 4. 优化标签行高与日期块对齐方式 5. 仅在有封面图时渲染图片区域
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user