webb2b/src/packages/pc/views/warehousing/goods/components/details/index.less

.goods-details {
    padding: 20px 48px;
    width: 1200px;

    &__close {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 28px;
        color: #666;
        cursor: pointer;
    }

    &__wrapper {
        position: relative;
        display: flex;
        background-color: #fff;
        border-radius: 4px;
        overflow: hidden;
        padding: 6px;
    }

    &__aside {
        background-color: #f4f8fe;
        padding: 60px 30px;

        .sku {
            &-gallery {
                margin-bottom: 20px;
            }

            &-address {
                background-color: #fff;
                padding: 20px;

                ul {
                    li {
                        display: flex;
                        font-size: 12px;
                        padding: 5px 0;

                        span {
                            flex: 1;

                            &:first-child {
                                color: #94A0AF;
                            }

                            &:last-child {
                                text-align: right;
                            }
                        }
                    }
                }
            }
        }
    }

    &__main {
        flex: 1;
        padding: 60px 30px;

        .sku {
            &-title {
                display: flex;
                align-items: center;

                h1 {
                    font-size: 24px;
                }
            }

            &-info {
                margin-top: 30px;
            }

            &-spec {
                margin-top: 30px;

                ul {
                    display: flex;
                    flex-wrap: wrap;

                    li {
                        width: 25%;
                    }
                }
            }

            &-price {
                margin-top: 30px;

                span {
                    &:first-child {
                        color: #FD565C;
                        font-size: 36px;
                        font-weight: bold;
                    }

                    &:not(:first-child) {
                        color: #999;
                        margin-left: 10px;
                    }
                }
            }

            &-button {
                margin-top: 30px;
            }

            &-parameter {
                border-top: 1px solid #f2f2f2;
                margin-top: 30px;

                h4 {
                    font-size: 18px;
                    color: #999;
                    padding: 20px 0;
                }

                ul {
                    display: flex;
                    flex-wrap: wrap;

                    li {
                        display: flex;
                        justify-content: space-between;
                        width: calc(~"50% - 10px");
                        padding: 10px 15px;

                        &:nth-child(4n+1),
                        &:nth-child(4n+2) {
                            background-color: #E3E8F1;
                        }

                        &:nth-child(odd) {
                            margin-right: 10px;
                        }

                        &:nth-child(even) {
                            margin-left: 10px;
                        }

                        span {
                            &:first-child {
                                color: #94A0AF;
                            }
                        }
                    }
                }
            }
        }
    }
}