You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
6.3 KiB
99 lines
6.3 KiB
<template>
|
|
<view class="dp-article" :style="{
|
|
backgroundColor:params.bgcolor,margin:(params.margin_y*2.2)+'rpx '+(params.margin_x*2.2)+'rpx 0',
|
|
padding:(params.padding_y*2.2)+'rpx '+(params.padding_x*2.2)+'rpx'
|
|
}">
|
|
<!--单排-->
|
|
<view v-if="params.style=='1'" class="article-item1" v-for="(item,index) in data" :key="item.id" @click="goto" :data-url="'/pagesA/article/detail?id='+item.artid">
|
|
<view class="article-pic" v-if="params.showpic==1">
|
|
<image class="image" :src="item.pic" mode="widthFix"/>
|
|
</view>
|
|
<view class="article-info">
|
|
<view class="p1">{{item.name}}</view>
|
|
<view class="p2">
|
|
<text style="overflow:hidden" class="flex1" v-if="params.showtime==1">{{item.createtime}}</text>
|
|
<text style="overflow:hidden" v-if="params.showreadcount==1">阅读 {{item.readcount}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!--双排-->
|
|
<view v-if="params.style=='2'" class="article-item2" v-for="(item,index) in data" :style="{marginRight:index%2==0?'2%':'0'}" :key="item.id" @click="goto" :data-url="'/pagesA/article/detail?id='+item.artid">
|
|
<view class="article-pic" v-if="params.showpic==1">
|
|
<image class="image" :src="item.pic" mode="widthFix"/>
|
|
</view>
|
|
<view class="article-info">
|
|
<view class="p1">{{item.name}}</view>
|
|
<view class="p2">
|
|
<text style="overflow:hidden" class="flex1" v-if="params.showtime==1">{{item.createtime}}</text>
|
|
<text style="overflow:hidden" v-if="params.showreadcount==1">阅读 {{item.readcount}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!--左图-->
|
|
<view v-if="params.style=='4'" class="article-itemlist" v-for="(item,index) in data" :key="item.id" @click="goto" :data-url="'/pagesA/article/detail?id='+item.artid">
|
|
<view class="article-pic" v-if="params.showpic==1">
|
|
<image class="image" :src="item.pic" mode="widthFix"/>
|
|
</view>
|
|
<view class="article-info">
|
|
<view class="p1">{{item.name}}</view>
|
|
<view class="p2">
|
|
<text style="overflow:hidden" class="flex1" v-if="params.showtime==1">{{item.createtime}}</text>
|
|
<text style="overflow:hidden" v-if="params.showreadcount==1">阅读 {{item.readcount}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!--右图-->
|
|
<view v-if="params.style=='5'" class="article-itemlist" v-for="(item,index) in data" :key="item.id" @click="goto" :data-url="'/pagesA/article/detail?id='+item.artid">
|
|
<view class="article-info" style="padding-left:10rpx">
|
|
<view class="p1">{{item.name}}</view>
|
|
<view class="p2">
|
|
<text style="overflow:hidden" class="flex1" v-if="params.showtime==1">{{item.createtime}}</text>
|
|
<text style="overflow:hidden" v-if="params.showreadcount==1">阅读 {{item.readcount}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="article-pic" v-if="params.showpic==1">
|
|
<image class="image" :src="item.pic" mode="widthFix"/>
|
|
</view>
|
|
</view>
|
|
<waterfall-article v-if="params.style=='6'" :list="data" ref="waterfall" :showtime="params.showtime" :showreadcount="params.showreadcount" idKey="artid"></waterfall-article>
|
|
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
params:{},
|
|
data:{}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.dp-article{height: auto; position: relative;overflow: hidden; padding:10rpx 0px; background: #fff;}
|
|
.dp-article .article-item1 {width: 100%;display: inline-block;position: relative;margin-bottom:12rpx;background: #fff;border-radius:12rpx;overflow:hidden}
|
|
.dp-article .article-item1 .article-pic {width:100%;height:auto;overflow:hidden;background: #ffffff;}
|
|
.dp-article .article-item1 .article-pic .image{width: 100%;height:auto}
|
|
.dp-article .article-item1 .article-info {padding:10rpx 20rpx;}
|
|
.dp-article .article-item1 .article-info .p1{color:#222222;font-weight:bold;font-size:28rpx;line-height:46rpx;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
|
|
.dp-article .article-item1 .article-info .t1{word-break: break-all;text-overflow: ellipsis;overflow: hidden;display: block;font-size: 32rpx;}
|
|
.dp-article .article-item1 .article-info .t2{word-break: break-all;text-overflow: ellipsis;padding-top:4rpx;overflow:hidden;}
|
|
.dp-article .article-item1 .article-info .p2{flex-grow:0;flex-shrink:0;display:flex;padding:10rpx 0;font-size:24rpx;color:#a88;overflow:hidden}
|
|
|
|
.dp-article .article-item2 {width: 49%;display: inline-block;position: relative;margin-bottom: 12rpx;background: #fff;border-radius:8rpx;}
|
|
/*.article-item2:nth-child(even){margin-right:2%}*/
|
|
.dp-article .article-item2 .article-pic {width: 100%;height:0;overflow:hidden;background: #ffffff;padding-bottom:70%;position: relative;border-radius:8rpx 8rpx 0 0;}
|
|
.dp-article .article-item2 .article-pic .image{position:absolute;top:0;left:0;width: 100%;height:auto}
|
|
.dp-article .article-item2 .article-info {padding:10rpx 20rpx;display:flex;flex-direction:column;}
|
|
.dp-article .article-item2 .article-info .p1{color:#222222;font-weight:bold;font-size:28rpx;line-height:46rpx;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
|
|
.dp-article .article-item2 .article-info .p2{flex-grow:0;flex-shrink:0;display:flex;align-items:center;padding-top:10rpx;font-size:24rpx;color:#a88;overflow:hidden}
|
|
|
|
.dp-article .article-itemlist {width:100%;display: inline-block;position: relative;margin-bottom:12rpx;padding:12rpx;background: #fff;display:flex;border-radius:8rpx;}
|
|
.dp-article .article-itemlist .article-pic {width: 35%;height:0;overflow:hidden;background: #ffffff;padding-bottom: 25%;position: relative;}
|
|
.dp-article .article-itemlist .article-pic .image{position:absolute;top:0;left:0;width: 100%;height:auto}
|
|
.dp-article .article-itemlist .article-info {width: 65%;height:172rpx;overflow:hidden;padding:0 20rpx;display:flex;flex-direction:column;justify-content:space-between}
|
|
.dp-article .article-itemlist .article-info .p1{color:#222222;font-weight:bold;font-size:28rpx;line-height:46rpx;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;height:92rpx}
|
|
.dp-article .article-itemlist .article-info .p2{display:flex;flex-grow:0;flex-shrink:0;font-size:24rpx;color:#a88;overflow:hidden}
|
|
|
|
.dp-article .article-waterfall-info{padding:10rpx 20rpx 20rpx 20rpx;display:flex;flex-direction:column;}
|
|
.dp-article .article-waterfall-info .p1{color:#222222;font-weight:bold;font-size:28rpx;line-height:46rpx;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
|
|
.dp-article .article-waterfall-info .p2{flex-grow:0;flex-shrink:0;display:flex;align-items:center;padding-top:10rpx;font-size:24rpx;color:#a88;overflow:hidden}
|
|
</style>
|