159 lines
4.2 KiB
Vue
159 lines
4.2 KiB
Vue
<template>
|
||
<!-- 文章列表 -->
|
||
<view>
|
||
<view class="articleList" :style="[boxStyle]" v-if="articleList.length">
|
||
<view v-if="listStyle">
|
||
<navigator :url='"/pages/goods/news_details/index?id="+item.id' hover-class='none' :style="[itemStyle]"
|
||
v-if="item.status" v-for="(item,index) in articleList" :key='index'
|
||
class="item acea-row row-between-wrapper">
|
||
<view class="pictrue">
|
||
<easy-loadimage :image-src="item.cover" :radius="dataConfig.contentStyle.val*2+'rpx'"></easy-loadimage>
|
||
</view>
|
||
<view class="text">
|
||
<view class="name line2" :style="[titleColor]">{{item.title}}</view>
|
||
<view class="time" :style="[timeColor]">{{item.createTime}}</view>
|
||
</view>
|
||
</navigator>
|
||
</view>
|
||
<view v-else>
|
||
<navigator v-if="item.status" :url='"/pages/goods/news_details/index?id="+item.id' hover-class='none'
|
||
:style="[itemStyle]" v-for="(item,index) in articleList" :key='index'
|
||
class="item acea-row row-between-wrapper">
|
||
<view class="text">
|
||
<view class="name line2" :style="[titleColor]">{{item.title}}</view>
|
||
<view class="time" :style="[timeColor]">{{item.createTime}}</view>
|
||
</view>
|
||
<view class="pictrue">
|
||
<easy-loadimage :image-src="item.cover" :radius="dataConfig.contentStyle.val*2+'rpx'"></easy-loadimage>
|
||
</view>
|
||
</navigator>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
// +----------------------------------------------------------------------
|
||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||
// +----------------------------------------------------------------------
|
||
// | Copyright (c) 2016~2026 https://www.crmeb.com All rights reserved.
|
||
// +----------------------------------------------------------------------
|
||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||
// +----------------------------------------------------------------------
|
||
// | Author: CRMEB Team <admin@crmeb.com>
|
||
// +----------------------------------------------------------------------
|
||
import easyLoadimage from '@/components/base/easy-loadimage.vue';
|
||
import {getArticleList} from "@/api/api";
|
||
export default {
|
||
name: 'homeArticle',
|
||
props: {
|
||
dataConfig: {
|
||
type: Object,
|
||
default: () => {}
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
articleList: []
|
||
}
|
||
},
|
||
components: {
|
||
easyLoadimage
|
||
},
|
||
computed: {
|
||
//布局样式
|
||
listStyle() {
|
||
return this.dataConfig.layoutConfig.tabVal === 0
|
||
},
|
||
// 展示的文章数量
|
||
numConfig(){
|
||
return this.dataConfig.numConfig.val
|
||
},
|
||
articleClassify() {
|
||
return this.dataConfig.selectConfig.activeValue
|
||
},
|
||
//最外层盒子的样式
|
||
boxStyle() {
|
||
return {
|
||
borderRadius: this.dataConfig.bgStyle.val * 2 + 'rpx',
|
||
background: `linear-gradient(${this.dataConfig.bgColor.color[0].item}, ${this.dataConfig.bgColor.color[1].item})`,
|
||
margin: this.dataConfig.mbConfig.val * 2 + 'rpx' + ' ' + this.dataConfig.lrConfig.val * 2 + 'rpx' +
|
||
' ' + 0,
|
||
padding: this.dataConfig.upConfig.val * 2 + 'rpx' + ' ' + 0 + ' ' + this.dataConfig.downConfig.val *
|
||
2 + 'rpx'
|
||
}
|
||
},
|
||
//文章间距
|
||
itemStyle() {
|
||
return {
|
||
'margin-bottom': this.dataConfig.contentConfig.val * 2 + 'rpx'
|
||
}
|
||
},
|
||
//时间颜色
|
||
timeColor() {
|
||
return {
|
||
'color': this.dataConfig.timeColor.color[0].item
|
||
}
|
||
},
|
||
//标题颜色
|
||
titleColor() {
|
||
return {
|
||
'color': this.dataConfig.titleColor.color[0].item
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.getCidArticle()
|
||
},
|
||
methods: {
|
||
//文章列表
|
||
async getCidArticle() {
|
||
let { data } = await getArticleList(this.articleClassify, {
|
||
page: 1,
|
||
limit: this.numConfig
|
||
})
|
||
this.articleList = data.list
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.articleList {
|
||
|
||
.item {
|
||
padding: 0 20rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
.text {
|
||
width: 60%;
|
||
|
||
.name {
|
||
font-size: 30rpx;
|
||
color: #282828;
|
||
height: 82rpx;
|
||
}
|
||
|
||
.time {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 40rpx;
|
||
}
|
||
}
|
||
|
||
.pictrue {
|
||
width: 37%;
|
||
height: 156rpx;
|
||
border-radius: 6rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |