yihuo/pages/product/recommend.vue

<template>
    <view class="wrapper">
        <view class="font4 bold color-1">商品推荐</view>
        <view class="marginT15">
            <scroll-view scroll-x class="scroll-wrapper">
                <view v-for="item in data" :key="item.id" class="item" @click="showDetail(item)">
                    <image :src="item.cover" class="image" mode="aspectFit"/>
                    <view class="paddingT2 title">{{item.name}}</view>
                    <view class="paddingT6 flex-align">
                        <view class="color-money font0 marginL6">¥{{item.price}}</view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        data: Array
    },
    methods: {
        showDetail(item) {
            this.$router.pushCheck('product', {
                id: item.id
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.wrapper {
    margin-top: 20rpx;
    background: #fff;
    border-radius: 20rpx;
    padding: 36rpx 28rpx;
    overflow: hidden;
    .scroll-wrapper {
        overflow: hidden;
        height: 290rpx;
        white-space: nowrap;
        width: 100%;
        .item {
            display: inline-block;
            width: 180rpx;
            height: 290rpx;
            margin-right: 20rpx;
            .image {
                width: 180rpx;
                height: 180rpx;
                border-radius: 8rpx;
            }
            .title {
                line-clamp: 2;
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}
</style>