cosmetics_shop_wxapp/pages/index/index.vue

<template>
	<view class="index">
		<!-- section -->
		<view class="section">
			<view v-for="(item, index) in 5" :key="index" class="item padding bg-white ">
				<view class="flex">
					<view style="width: 20upx;background-color: #4d6bab;" class="margin-right-xs"></view>
					<view  style="flex: auto; background-image: linear-gradient(120deg,#4d6bab  0%, #fff 80%);" class="padding-tb-sm text-white bg-white padding-left-sm">商品分类</view>
				</view>
				<view class="content padding-tb flex flex-wrap align-center">
					<view @click="handler" v-for="(it, ind) in 5" :key="ind" class="content-item  margin-bottom" style="width: calc(100vw / 3 - 40upx);border-radius: 20upx;overflow: hidden;">
						<image
							style="width: calc(100vw / 3 - 40upx);height: calc(100vw / 3 - 40upx);"
							lazy-load="true"
							src="https://gd-hbimg.huaban.com/d478a9c4bd0167adae79806c6ccaa2d7f59ded5dd101-WmmTdI_fw658/format/webp"
							mode="aspectFit"
						></image>
						<view class="padding-xs">
							<view  class="name text-black">前端运行日志，请另行在小程序开发工具的控制台查看</view>
							<view class="text-gray">销量：1000</view>
							<view class="flex justify-between">
								<view class="text-red text-price">
									<cu-price value="100" size="32" />
								</view>
								<text class="cuIcon-cart text-xl"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- footer -->
		<cu-bar active="0" />
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	onLoad() {},
	methods: {
		handler() {
			uni.navigateTo({
				url: '/pages/detail/index'
			});
		}
	},
	onShareAppMessage() {
		return {};
	},
	onShareTimeline() {
		return {};
	}
};
</script>

<style lang="scss" scoped>
.index {
	.section {
		.item {
			.content {
				.content-item{
					margin-right: 30upx;
					image{
						vertical-align: top;
					}
					.name{
						text-align: justify;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
				.content-item:nth-child(3n) {
					margin-right: 0;
				}
			}
		}
	}
}
</style>