<template>
|
<view class="article-item" @click="openarticle">
|
<view class="u-line-1 u-font-32 article-name">
|
{{item.title}}
|
</view>
|
<view class="detail">
|
<image class="picture" :src="item.avatar+'?x-oss-process=image/resize,m_fill,h_150,w_240'"
|
mode="aspectFill"></image>
|
<view class="article-desc">
|
<view class="u-line-3 u-font-20 desc">
|
{{item.excerpt}}
|
</view>
|
<view class="foot-info">
|
<u-icon name="clock" color="#C5C5C5" label-color="#C5C5C5" size="28" label-size="28"
|
:label="item._add_time_str.substr(0,10)"></u-icon>
|
|
<u-icon name="eye" color="#C5C5C5" label-color="#C5C5C5" size="28" label-size="28"
|
:label="item.view_count+'次浏览'" :custom-style="{marginLeft:'20rpx'}"></u-icon>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: "pay-article-item",
|
props: ['item'],
|
data() {
|
return {
|
|
};
|
},
|
methods: {
|
openarticle() {
|
uni.vk.navigateTo('/uni_modules/uce-pay-article/pages/detail?id=' + this.item._id, false);
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.article-item {
|
position: relative;
|
overflow: hidden;
|
margin: 0 auto;
|
height: 252rpx;
|
width: 696rpx;
|
border-bottom: 2px solid #f5f5f5;
|
padding: 20rpx 0;
|
|
.article-name {
|
width: 100%;
|
font-weight: bold;
|
color: #303030;
|
}
|
|
.detail {
|
display: flex;
|
width: 100%;
|
position: relative;
|
overflow: hidden;
|
margin-top: 15rpx;
|
|
.picture {
|
width: 240rpx;
|
height: 150rpx;
|
}
|
|
.article-desc {
|
position: relative;
|
flex: 1;
|
padding-left: 15rpx;
|
|
.desc {
|
font-size: 28rpx;
|
line-height: 38rpx;
|
text-indent: 48rpx;
|
// font-weight: bold;
|
color: #C5C5C5;
|
min-height: 114rpx;
|
}
|
|
.foot-info {
|
height: 30rpx;
|
}
|
}
|
}
|
}
|
</style>
|
