xmhjc-applet/pages/components/wenzhanList.vue

<template>
    <view>
        <view class="content">
            <view @click="linkDetails(item)" v-for="(item,index) in newsList" :key="index" class="box" >
                <view class="box_img">
                    <u--image radius='16rpx' width="224rpx" height="168rpx" :src="item.coverList[0].fileUrl" ></u--image>
                </view>
                <view class="box_right">
                    <view class="box_title">
                        {{item.title}}
                    </view>
                    <view class="box_type">
                        <view style="display: flex;justify-content: space-between;">
                            <view v-for="item2 in item.columnTag" :class="currentName == 'default' ?'type_one':'type_one_index'">
                                {{item2}}
                            </view>
                        </view>
                        <!-- <view>{{ computerTime(item) }}</view> -->
                    </view>
                </view>
            </view>
        </view>

    </view>
</template>
<script>
export default {
    props: {
        listdata: {
            type: Array,
            default: ()=>[],
        },
        currentName:{
            type:String,
            default:'default'
        }
    },
watch:{
    listdata: {
        immediate: true,
        handler(val) {
        //    console.log(val);
           this.newsList = val.map(v => {
               let columnTag = []
               if (v?.columnTag) {
                columnTag = v?.columnTag.split(',')
               }
                
                return {
                    ...v,
                    columnTag
                }
           })
           console.log('this.newsList',this.newsList );
        },
    }
},
data() {
return {
    newsList:[]
}
},
onLoad(e) {
    
},
methods: {
    computerTime(data){
        let time = data?.time || data?.createTime
        if (time) {
            return time.slice(5,10)
        }else{
            return ''
        }
    },
    linkDetails(e){
        uni.navigateTo({
             url: '/pages/home/ArticleDetails?id=' + e.id
        });
    }
}
}
</script>

<style>
.content{
    width: 100vw;
    background-color: #FFFFFF;
    padding: 30rpx 0 30rpx 0;
}
.box{
    display: flex;
    margin: 40rpx auto;
    justify-content: flex-start;
    width: 90vw;
    height: 160rpx;
}
.box_img{
    width: 224rpx;
    height: 168rpx;
    border-radius: 16rpx;
    background-color: #999999;
}
.box_right{
    margin-left: 10rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.box_title{
    width: 454rpx;
    height: 80rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
    line-height: 40rpx;

    margin-left: 12rpx;

    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}
.box_type{
    display: flex;
    justify-content: space-between;

    font-size: 28rpx;
    font-weight: 400;
    color: #999999;
    line-height: 40rpx;
}
.type_one{
    width: 136rpx;
    height: 48rpx;
    background: #DEEEFC;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    opacity: 1;
    margin-left: 4rpx;
    
    
    font-size: 28rpx;
    font-weight: 400;
    color: #46A6FF;
    line-height: 48rpx;
    text-align: center;
}
.type_one_index{
    width: 136rpx;
    height: 48rpx;
    /* background: #DEEEFC; */
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    opacity: 1;
    
    
    font-size: 28rpx;
    font-weight: 400;
    color: #999;
    line-height: 48rpx;
    text-align: center;
}
</style>