simple-coder/templates/mini/Detail.less

simple code tool

.goods-root-container{
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .goods-info-container{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: scroll;
        padding-bottom: 140px;
        .goods-image-box{
            position: relative;
            padding: 12rpx 12rpx;
            border-bottom: 5rpx solid #ededed;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .goods-image{
                width: 100%;
                height: 300rpx;
            }
        }
        .goods-info{
            height: auto;
            width: 100vw;
            display: flex;
            flex-direction: column;
            padding-left: 24rpx;
            padding-top: 20px;
            padding-bottom: 20px;
            border-bottom: 15rpx solid #ededed;
            .goods-name{
                font-size: 34rpx;
                color: #222222;
            }
            .goods-price{
                font-size: 32rpx;
                color: orange;
                margin-top: 5px;
            }
            .goods-description{
                margin-top: 5px;
                font-size: 28px;
                color: #666666;
            }
        
        }
        .goods-content{
            display: flex;
            flex-direction: column;
            padding: 12pt;
            color: #222222;
            font-size: 14pt;
            .device-list{
                margin-top: 12pt;
                font-size: 13pt;

                .device-item{
                    border-radius: 4pt;
                    margin-top: 10pt;
                    padding-top: 6pt;
                    padding-bottom: 6pt;
                    padding-left: 12pt;
                    padding-right: 12pt;
                    color: #0086f6;
                    border: 2px lightskyblue solid;
                    text-align: center;
                }
            }
        }
    }
    .add-cart-container{
        height: 80rpx;
        width: 100%;
        position: absolute;
        bottom: 0rpx;
        background-color: white;
        margin-bottom: 0px;
        padding-bottom: 15px;
        padding-top: 15px;
        box-shadow: 0px -8px 8px 0px #ededed;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;

        .cart-info-container{
            margin-left: 20px;
            display: flex;
            flex-direction: row;
            .to-carts-icon{
                width: 65rpx;
                height: 65rpx;
                opacity: .6;
                -webkit-animation: to_cart .3s ease-out;
                animation: to_cart .3s ease-out;
            }
            .carts-num{
                margin-left: -8px;
                margin-top: -4px;
                color: white;
                padding-left: 10px;
                padding-right: 10px;
                padding-bottom: 2px;
                align-items: center;
                text-align: center;
                justify-content: center;
                background-color: red;
                height: 40px;
                width: auto;
                border-radius: 50%;
            }
        }
    }

    .bottom-space{
        height: 45px;
        width: 100%;
        position: absolute;
        bottom: -45px;
    }
}
@-webkit-keyframes to_cart {
    0%{
        right:100rpx;
        top:530rpx;
        -webkit-transform: scale(4);
    }
    /*60%{
        top: 20rpx;
    }*/
}
@keyframes to_cart {
    0%{
        right:100rpx;
        top:530rpx;
        transform: scale(4);
    }
    /*60%{
        top: 20rpx;
    }*/
}
.carts-icon{
    position: absolute;
    right: 40rpx;
    top: 40rpx;
    width: 75rpx;
    height: 75rpx;
}
.carts-icon image{
    width: 100%;
    height: 100%;
}
.carts-icon.on{
    -webkit-animation: to_cart_scale .3s ease;
    animation: to_cart_scale .3s ease;
}
@-webkit-keyframes to_cart_scale {
    50%{
        -webkit-transform: scale(1.2);
    }
}
@keyframes to_cart_scale {
    50%{
        transform: scale(1.2);
    }
}