index.scss 4.01 KB
.product-page {
    display: flex;
    flex-direction: column;

    .product-swiper {
        width: 750px;
        height: 750px;
    }
    
    .swiperNum {
        height: 88px;
        line-height: 88px;
        text-align: right;
        padding-right: 40px;
        font-family: DINAlternate-Bold;
        font-weight: 500;
        font-size: 28px;
        color: #000;
    }

    .swiper-img {
        margin-left: 76rpx;
        margin-top: 76rpx;
        width: 600px;
        height: 600px;
    }

    .product-ctr {
        width: 670px;
        height: 160px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        border-bottom: 2px solid #000;

        .collect,
        .share {
            width: 50%;
            text-align: center;
            font-family: PingFang-SC-Medium;
            font-size: 20px;
            color: #000;
        }

        .collect-icon {
            width: 48px;
            height: 48px;
        }

        .share-icon {
            width: 48px;
            height: 48px;
        }

        .text {
            display: block;
            margin-top: 16px;
        }
    }

    .product-name {
        width: 600px;
        margin: 0 auto;
        font-family: DINAlternate-Bold;
        font-size: 40px;
        color: #000;
        letter-spacing: 0;
        text-align: center;
        line-height: 56px;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .product-info {
        width: 670px;
        height: 120px;
        margin: 0 auto;
        border-bottom: 2px solid #eee;
        display: flex;
        align-items: center;

        .lable {
            width: 30%;
            text-align: left;
            float: left;
            font-family: PingFang-SC-Regular;
            font-size: 28px;
            color: #999;
        }

        .value {
            width: 70%;
            float: right;
            text-align: right;
            font-family: SFProText-Medium;
            font-weight: bold;
            font-size: 28px;
            color: #000;
            text-align: right;
        }

        .number {
            font-family: DINAlternate-Bold;
        }
    }

    .product-dec {
        width: 670px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        border: 2px solid #000;
        box-sizing: border-box;
        margin: 60px auto 0;
        font-family: PingFang-SC-Light;
        font-size: 32px;
        color: #000;

        .c:before{
            content: "X";
            display: inline-block;
            margin: 0 8px;
            font-size: 32px;
        }
    }

    .recommend-goods {
        padding-bottom: 120px;
        
        .title {
            width: 100%;
            height: 120px;
            line-height: 120px;
            text-align: center;
            font-family: PingFang-SC-Medium;
            font-size: 40px;
            color: #000;
            text-align: center;
            border-bottom: 2px solid #eee;
            margin-top: 40px;
        }
    }

    .product-buy {
        width: 100%;
        height: 120px;
        border-top: 2px solid #000;
        line-height: 120px;
        display: flex;
        align-items: center;
        position: fixed;
        bottom: 0;
        z-index: 2;

        .sell-btn {
            background: #fff;
            width: 240px;
            font-family: PingFang-SC-Semibold;
            font-size: 28px;
            color: #000;
            text-align: center;
        }

        .buy-btn {
            width: 100%;
            background: #08304B;
            font-family: PingFang-SC-Medium;
            font-size: 28px;
            color: #fff;
            text-align: center;

            .price {
                font-family: DINAlternate-Bold;
                font-size: 32px;
                color: #64AD88;
                text-align: center;
            }
        }
    }

    .goYohoBuy {
        width: 80px;
        height: 160px;
        right: 34px;
        bottom: 258px;
        float: right;
        position: fixed;
        z-index: 2;
    }
}