import styled from 'styled-components'
import {rem} from '../style/function.style'


export const ShelfContainer  = styled.div`
    font-family: PingFangSC-Medium;
    min-height: 30px;
    .shelf-list{
        margin-left: auto;
        margin-right: auto;
    }
    .shelf-item{
        box-sizing: border-box;
        display: block;
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: ${rem(8)};
        -webkit-border-radius: ${rem(8)};
        img{
            display:block;
        }
        .text1{
            color: #1F1F1F;
            letter-spacing: 0;
        }
        .text2{
            font-size: ${rem(24)};
            color: #FF5367;
            letter-spacing: 0;
        }
        .go-to{
            width:${rem(24)};
            height:${rem(24)};
            background: url(https://easyreadfs.nosdn.127.net/fle/a0df1d4009c7a2ec5fee/1581333546317/go_to.png);
            background-size: 100% 100%;
        }
    }
    
    .shelf-1 {
        width: ${rem(702)};
        height: ${rem(128)};
        .shelf-item{
            width: ${rem(702)};
            height: ${rem(128)};
            padding-left: ${rem(34)};
            line-height: ${rem(128)};
        }
        .icon{
            background: url(https://easyreadfs.nosdn.127.net/fle/a0df1d4009c7a2ec5fee/1581333546317/sales.png);
            background-size: 100% 100%;
            width:${rem(60)};
            height:${rem(60)};
            margin-top: ${rem(34)};
        }
        .text1{
            margin-left: ${rem(23)};
            font-size: ${rem(32)};
        }
        .text2{
            margin-left: ${rem(24)};
        }
        .go-to{
            margin: ${rem(51)} 0 0 ${rem(6)};
        }
    }
    .shelf-2{
        width: ${rem(702)};
        height: ${rem(128)};
        .shelf-item{
            width: ${rem(347)};
            height: ${rem(128)};
            padding: ${rem(14)};
        }
        .shelf-item: first-child{
            margin-right: ${rem(7)};
        }
        img{
            width: ${rem(100)};
            height: ${rem(100)};
            border-radius:${rem(4)};
            -webkit-border-radius:${rem(4)};
        }
        .text1{
            margin: ${rem(10)} 0 0 ${rem(16)};
            font-size: ${rem(28)};
        }
        .text2{
            margin: ${rem(6)} 0 0 ${rem(16)};
        }
        .go-to{
            margin: ${rem(17)} 0 0 ${rem(8)};
        }
    }
    .shelf-3{
        width: ${rem(702)};
        height: ${rem(305)};
        .shelf-item{
            width: ${rem(228)};
            height: ${rem(305)};
            padding: ${rem(16)};
            margin-right: ${rem(9)};

        }
        .shelf-item:last-child{
            margin-right: 0;
        }
        img{
            width: ${rem(196)};
            height: ${rem(196)};
            border-radius:${rem(4)};
            -webkit-border-radius:${rem(4)};
        }
        .text-w{
            position: relative;
            top: -${rem(20)};
            text-align: center;
        }
        .text1{
            font-size: ${rem(28)};
            margin-top: ${rem(10)};
        }
        .text2{
            display: inline-block;
            padding: 0 ${rem(16)};
            font-size: ${rem(24)};
            line-height: ${rem(40)};
            color: #FFFFFF;
            background-image: linear-gradient(150deg, #FF5367 0%, #FF7990 100%);
            border-radius: ${rem(23)};
            -webkit-border-radius: ${rem(23)};
        }
    }
`