integral-shop/single_uniapp22miao/components/homeIndex/articleListV2.vue

<template>
	<!-- 文章列表 -->
	<view>
		<view class="articleList" :style="[boxStyle]" v-if="articleList.length">
			<view v-if="listStyle">
				<navigator :url='"/pages/news/design_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="pictrue">
						<easy-loadimage :image-src="item.imageInput"
							:radius="dataConfig.contentStyle.val"></easy-loadimage>
					</view>
					<view class="text footer">
						<view class="name line2" :style="[titleColor]">{{item.title}}</view>
						<view class="title-row">
							<view class="row-left" :style="[timeColor]">{{item.synopsis}}</view>
							<view class="row-right btns">
								<button class="publish" @click="">立即发布</button>
								<button class="recreate" @click="">做同款</button>
							</view>

						</view>
					</view>
				</navigator>
			</view>
			<view v-else>
				<navigator :url='"/pages/news/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.synopsis}}</view>
					</view>
					<view class="pictrue">
						<easy-loadimage :image-src="item.imageInput"
							:radius="dataConfig.contentStyle.val"></easy-loadimage>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>
<script>
	// +----------------------------------------------------------------------
	// |
	// +----------------------------------------------------------------------
	import easyLoadimage from '@/components/base/easy-loadimage.vue';
	export default {
		name: 'homeArticle',
		props: {
			dataConfig: {
				type: Object,
				default: () => {}
			},
		},
		data() {
			return {}
		},
		components: {
			easyLoadimage
		},
		computed: {
			//布局样式
			listStyle() {
				return this.dataConfig.layoutConfig.tabVal === 0
			},
			//文章分类
			articleList() {
				return this.dataConfig.selectConfig.articleList
			},
			//最外层盒子的样式
			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
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.articleList {

		.item {
			padding: 0 20rpx;

			&:last-child {
				margin-bottom: 0 !important;
			}

			.text {
				width: 98%;
				margin-top: 8rpx;

				.name {
					font-size: 30rpx;
					color: #000 !important;
					line-height: 60rpx;
					height: 60rpx;
				}

				.time {
					font-size: 30rpx;
					color: #999;
					// margin-top: 40rpx;
				}
			}

			.pictrue {
				width: 100%;
				height: 366rpx;
				border-radius: 6rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 6rpx;
				}
			}
		}

		.title-row {
			width: 100%;
			border: solid 0px red;
			display: flex;
			line-height: 60rpx;

			.row-left {
				flex-grow: 1;
				font-weight: bold;
				font-size: 26rpx;
				color: #666 !important;
			}

			.row-right {
				font-size: 28rpx;
			}
		}

		.footer {
			// width: 444rpx;
			// height: 76rpx;
		}

		.footer .btns {
			text-align: center;
			border: solid 0px red;
			width: 290rpx;
		}

		.footer .btns .publish {
			border-radius: 10rpx;
			width: 130rpx;
			float: right;
			border: solid 1px #5eae72 !important;
			margin-left: 20rpx;
			background-color: #5eae72 !important;
			padding: 10rpx 8rpx !important;
			color: #fff;
			font-size: 26rpx;
		}

		.footer .btns .recreate {
			border-radius: 10rpx;
			width: 130rpx;
			float: right;
			border: solid 1px black;
			padding: 10rpx 8rpx !important;
			background-color: #fff;
			color: #000;
			font-size: 26rpx;
		}

	}
</style>