You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

123 lines
2.6 KiB
Vue

<template>
<!-- 文章组 -->
<view class="diy-article">
<view class="article-item" :class="[`show-type__${item.show_type}`]" v-for="(item, index) in dataList" :key="index"
@click="onTargetDetail(item.article_id)">
<!-- 小图模式 -->
<block v-if="item.show_type == 10">
<view class="article-item__left flex-box">
<view class="article-item__title twolist-hidden">
<text>{{ item.title }}</text>
</view>
<view class="article-item__footer m-top10">
<text class="article-views f-24 col-8">{{ item.show_views }}次浏览</text>
</view>
</view>
<view class="article-item__image">
<image class="image" mode="widthFix" :src="item.image_url"></image>
</view>
</block>
<!-- 大图模式 -->
<block v-if="item.show_type == 20">
<view class="article-item__title twolist-hidden">
<text>{{ item.title }}</text>
</view>
<view class="article-item__image m-top20">
<image class="image" mode="widthFix" :src="item.image_url"></image>
</view>
<view class="article-item__footer m-top10">
<text class="article-views f-24 col-8">{{ item.show_views }}</text>
</view>
</block>
</view>
</view>
</template>
<script>
export default {
name: "Article",
/**
* 组件的属性列表
* 用于组件自定义设置
*/
props: {
itemIndex: String,
params: Object,
dataList: Array
},
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
/**
* 跳转文章详情页
*/
onTargetDetail(id) {
uni.navigateTo({
url: '/pages/article/detail?articleId=' + id
})
}
}
}
</script>
<style lang="scss" scoped>
.diy-article {
background: #f7f7f7;
.article-item {
margin-bottom: 20rpx;
padding: 30rpx;
background: #fff;
&:last-child {
margin-bottom: 0;
}
.article-item__title {
max-height: 80rpx;
font-size: 30rpx;
color: #333;
}
.article-item__image .image {
display: block;
}
}
}
/* 小图模式 */
.show-type__10 {
display: flex;
.article-item__left {
padding-right: 20rpx;
}
.article-item__title {
// min-height: 72rpx;
}
.article-item__image .image {
width: 240rpx;
}
}
/* 大图模式 */
.show-type__20 .article-item__image .image {
width: 100%;
}
</style>