xwc/components/hua-power-product/hua-power-product.vue

<template>
	<view>
		<view class="wrapper d-flex flex-wrap justify-content-between">
			<router-link class="item" v-for="(item,index) in data" :key="index"
				:to="{path: '/pages/goods_details/goods_details', query: {id: item.goods_id || item.id}}">
				<image :src="item.image" mode="" class="pic"></image>
				<view class="cont">
					<view class="title">
						{{item.name}}
					</view>
					<view class="desc">
						<!-- 	<image src="../../static/nl.png" mode="heightFix"></image> -->
						<text>
							<!-- 可用{{item.use_energy}}点抵用券抵扣 -->
							可用{{(item.min_price * item.use_energy / 100 / appConfig.energyprice).toFixed(6) }}抵用券抵扣￥{{(item.min_price * item.use_energy / 100).toFixed(2)}}
						</text>
					</view>
				</view>
			</router-link>
		</view>
	</view>
</template>

<script>
	export default {
		name: "hua-power-product",
		props: {
			data: {}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.wrapper {
		.item {
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			width: 344rpx;
			padding: 10rpx;
			box-sizing: border-box;
			color: #040404;

			.pic {
				width: 324rpx;
				height: 284rpx;
			}

			.cont {
				padding-bottom: 40rpx;

				.title {
					font-weight: 500;
					line-height: 40rpx;
					height: 80rpx;
					font-size: 28rpx;
					margin: 16rpx auto;
					overflow: hidden;
					text-overflow: ellipsis;
					/* 超出部分省略号 */
					word-break: break-all;
					/* break-all(允许在单词内换行。) */
					display: -webkit-box;
					/* 对象作为伸缩盒子模型显示 */
					-webkit-box-orient: vertical;
					/* 设置或检索伸缩盒对象的子元素的排列方式 */
					-webkit-line-clamp: 2;
					/* 显示的行数 */
					max-height: 80rpx;
					/* 设置最大高度，根据行高，要几行乘以几倍 */
				}

				image {
					height: 24rpx;
					margin-right: 6rpx;
				}

				.desc {
					font-size: 24rpx;
					color: #0EB5F1;
				}
			}
		}
	}
</style>