deming/components/shop/recommend/index.vue

101 lines
2.6 KiB
Vue
Raw Normal View History

2020-06-11 09:34:23 +08:00
<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>