<template>
    <view class="recommend">
        <view class="top">
            <text>今日秒杀推荐</text>
            <text>点击查看更多></text>
        </view>
        <view class="connect">
            <view class="time">
                <image></image>
                <text>12:00</text>
            </view>
            <view class="info">
                <text>修身套头上衣</text>
                <text class="u-line-2">珂莱蒂尔雪纺衫2020春装新简约百搭V领蕾丝九分... </text>
                <view>
                    <text>￥99</text>
                    <text>￥299</text>
                </view>
            </view>
            <image class="img"></image>
        </view>
    </view>
</template>
<script>
export default {
    name:"recommend"
}
</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: 18rpx;
            justify-content: center;
            >image{
                width: 90rpx;
                height: 90rpx;
            }
            >text{
                font-size: 36rpx;
                margin-top: 25rpx;
                color: #FDD360;
            }
            flex-shrink: 0;
        }
        .info{
            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;
                }
            }
        }
        .img{
            width: 213rpx;
            height: 160rpx;
            flex-shrink: 0;
            margin-left: 13rpx;
        }
    }
}
</style>