Files
FirstUI-vue/pages/layout/topTab/fNewsItem.nvue
2023-08-17 21:28:49 +08:00

75 lines
1.7 KiB
Plaintext

<template>
<fui-list :topBorder="false" bottomBorder bottomLeft="32" bottomRight="32">
<view class="fui-news__item" @tap="handleClick">
<fui-overflow-hidden :text="item.title" :size="36" :rows="3"></fui-overflow-hidden>
<view class="fui-image__list" v-if="item.imageList && item.imageList.length">
<fui-lazyload :src="src" v-for="(src,idx) in item.imageList" :key="idx"
:width="item.imageList.length>1?200:400" :height="item.imageList.length>1?200:0" marginRight="20"
mode="aspectFill"></fui-lazyload>
</view>
<view class="fui-news__info">
<fui-text v-if="item.isTop" :padding="['0','20rpx','0','0']" text="置顶" :size="25" color="#FF2B2B">
</fui-text>
<fui-text :padding="['0','20rpx','0','0']" :text="item.source" :size="25" color="#7F7F7F">
</fui-text>
<fui-text :text="`${item.comment}评论`" :size="25" color="#7F7F7F"></fui-text>
</view>
</view>
</fui-list>
</template>
<script>
export default {
name: 'fNewsItem',
emits: ['click'],
props: {
item: {
type: Object,
default () {
return {}
}
}
},
methods: {
handleClick() {
this.$emit('click');
}
}
};
</script>
<style scoped>
.fui-news__item {
/* #ifndef APP-NVUE */
width: 100%;
box-sizing: border-box;
/* #endif */
padding: 20rpx 32rpx;
background-color: #fff;
}
.fui-news__item:active {
background-color: rgba(0, 0, 0, 0.2);
}
.fui-image__list {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
flex-wrap: wrap;
padding-top: 20rpx;
padding-bottom: 16rpx;
}
.fui-news__info {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
transform: scale(0.8);
transform-origin: 0 100%;
}
</style>