deming/components/shop/recommend/index.vue

<template>
    <view class="recommend">
        <view class="top">
            <text>{{ type == 'spike' ? '今日秒杀推荐' : '今日拼团推荐' }}</text>
            <text>点击查看更多></text>
        </view>
        <view class="connect">
            <view class="time" v-if="type == 'spike'">
                <image src="/static/image/common/15.png"></image>
                <text>{{ info.groupbuy_starttime_histime }}</text>
            </view>
            <view class="info">
                <text class="u-line-1">{{ type == 'spike' ? info.groupbuy_name : '' }}</text>
                <text class="u-line-2">{{ info.goods_name }}</text>
                <view>
                    <text>￥{{ info.groupbuy_price }}</text>
                    <text>￥{{ info.goods_price }}</text>
                </view>
            </view>
            <image class="img" :src="info.groupbuy_image1"></image>
        </view>
    </view>
</template>
<script>
export default {
	name:"recommend",
	data() {
		return {
			info: {}
		}
	},
	props: ['recommendData', 'type'],
	created() {
		this.info = this.recommendData;
		console.log(this.recommendData);
	}
}
</script>
<style lang="scss" scoped>
.recommend{
    .top{
        height: 90rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        >text:first-child{
            font-size: 30rpx;
            color: #333;
        }
        >text:last-child{
            font-size: 18rpx;
            color: #999;
        }
    }
    .connect{
        display: flex;
        .time{
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 28rpx;
            justify-content: center;
            >image{
                width: 90rpx;
                height: 90rpx;
            }
            >text{
                font-size: 36rpx;
                margin-top: 25rpx;
                color: #FDD360;
            }
            flex-shrink: 0;
        }
        .info{
			width: 340rpx;
            display: flex;
            flex-direction: column;
            >text:nth-child(1){
                font-size: 28rpx;
                color: #333;
            }
            >text:nth-child(2){
                margin-top: 17rpx;
                line-height: 36rpx;
                font-size: 24rpx;
                color: #666;
            }
            >view{
                margin-top: 24rpx;
                display: flex;
                align-items: flex-end;
                
                >text:first-child{
                    font-size: 27rpx;
                    color: #FF3131;
                }
                >text:last-child{
                    font-size: 24rpx;
                    color: #999;
                    margin-left: 33rpx;
					text-decoration: line-through;
                }
            }
        }
        .img{
            width: 213rpx;
            height: 160rpx;
            flex-shrink: 0;
            margin-left: 13rpx;
        }
    }
}
</style>