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

1.  修复无图文章项布局对齐问题，添加no-image类处理无图场景
2.  将点击事件从click改为tap适配小程序
3.  调整图片模式为aspectFill并补全高度样式
4.  优化标签行高与日期块对齐方式
5.  仅在有封面图时渲染图片区域

pages_tool/article/list.vue

@@ -4,9 +4,9 @@
 			<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="['item', !item.cover_img ? 'no-image' : '']" v-for="(item, index) in list" :key="index" @tap="toDetail(item)">
-						<view class="article-img">
+						<view class="article-img" v-if="item.cover_img">
-							<image class="cover-img" :src="$util.img(item.cover_img)" mode="widthFix"
+							<image class="cover-img" :src="$util.img(item.cover_img)" mode="aspectFill"
 								@error="imgError(index)" show-menu-by-longpress/>
 						</view>
 						<view class="info-wrap">
@@ -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>