page { background-color: #f6f6f6; } /* 返回 */ .navigation { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 90rpx; background-color: transparent; transition: .2s; padding: 0 20rpx; box-sizing: border-box; } .navigationCont { background: white; padding: 0 10rpx; box-sizing: border-box; display: inline-block; border-radius: 80rpx; height: 58rpx; margin-top: 10rpx; } .navigation-arrow { width: 38rpx; height: 38rpx; margin: 10rpx 15rpx; } /* 产品图 */ .banner { overflow: hidden; position: relative; padding-top: 100%; } .swiperCont, .swiperImg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* 产品 */ /* 产品详情 */ .goodsCont { padding: 30rpx; border-bottom: 60px solid transparent; box-sizing: border-box; } .goodsWhite { background-color: #ffffff; box-sizing: border-box; border-radius: 15rpx; margin-bottom: 30rpx; } .goodsInfo { padding: 30rpx; box-sizing: border-box; position: relative; } .goodsInfo-price { display: flex; position: relative; line-height: 52rpx; color: #da2b54; } .goodsInfo-cost { font-size: 48rpx; } .goodsInfo-cost text { font-size: 28rpx; } .goodsInfo-vip { background-color: #ffebeb; border-radius: 80rpx; margin-left: 30rpx; padding: 0 25rpx; height: 52rpx; font-size: 32rpx; } .goodsInfo-vip text { font-size: 24rpx; padding-right: 5rpx; } .goodsInfo-name { margin-top: 20rpx; font-size: 32rpx; } button.goodsInfo-share[size="mini"] { position: absolute; top: 40rpx; right: 30rpx; display: flex; font-size: 27rpx; line-height: 34rpx; color: #9b9b9b; padding: 0; background: transparent; font-weight: normal; } .goodsInfo-share-image { width: 34rpx; height: 34rpx; margin-right: 10rpx; } /* 参数 */ .goodsItem { padding: 0 30rpx; } .goodsItem-label { display: flex; padding: 30rpx 0; box-sizing: border-box; } .goodsItem-label-name { color: #999999; display: flex; } .goodsItem-label-logo { width: 80rpx; height: 80rpx; background-color: #fff; border: 2rpx solid #cecece; padding: 9rpx; text-align: center; box-sizing: border-box; margin-right:30rpx; } .goodsItem-label-logo image { width: 60rpx; height: 60rpx; } .goodsItem-label-see { display: flex; width: calc(100% - 120rpx); background-color: #fff9fa; padding: 10rpx 0; border-radius: 15rpx; } .goodsItem-label-block { flex: 3; text-align: center; font-size: 26rpx; position: relative; } .goodsItem-label-block::after { position: absolute; content: ''; background-color: #cdcdcd; width: 1rpx; height: 60%; top: 20%; left: -1rpx; } .goodsItem-label-block:first-child::after { display: none; } .goodsItem-label-title { color: #da2b54; line-height: 50rpx; } .goodsItem-label-tips { color: #999999; } .goodsItem-label-tips { font-size: 26rpx; margin-top: 10rpx; } .goodsItem-label-tips text { color: #da2b54; } /* 底部 */ .footer { width: 100%; height: 60px; background-color: #ffffff; position: fixed; left: 0; bottom: 0; z-index: 9; box-sizing: border-box; display: flex; } .number { flex: 1; line-height: 60px; color: #da2b54; display: flex; padding: 0 30rpx; box-sizing: border-box; } .number text { font-size: 28rpx; padding-top: 10rpx; } .number-price { padding: 0 5rpx; font-size: 46rpx; } .number-vip { margin-left: 20rpx; font-size: 26rpx; color: #8d97a1; padding-top: 6rpx; box-sizing: border-box; } .btn-disabled { color: #FFFFFF; line-height: 60px; text-align: center; border: none; border-radius:0; background-color: #da2b54; padding: 0; margin: 0; } button[disabled]{ padding: 0; padding: 0; height: 100rpx; line-height: 60px; color: white !important; opacity: .8; background-color: transparent !important; } /* 规格弹出 */ /* 规格 */ .goods-size-back { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.3); z-index: 9; display: none; } .goods-size-back.active { display: block; } .goods-size-content { position: fixed; bottom: -100%; left: 0; width: 100%; background: white; z-index: 100; transition: all 0.2s; } .goods-size-close { position: absolute; width: 36rpx; right: 20rpx; top: 30rpx; } .goods-size-content.active { bottom: 0; } .goods-size-img { position: absolute; left: 15rpx; top: -40rpx; background: white; width: 200rpx; height: 200rpx; padding: 15rpx; box-sizing: border-box; border-radius: 6rpx; } .goods-size-img image { width: 100%; height: 100%; } .goods-size-info { padding: 30rpx 30rpx 30rpx 230rpx; height: 160rpx; box-sizing: border-box; } .goods-size-info-price { line-height: 60rpx; font-size: 32rpx; color: #da2b54; font-weight: bold; } .goods-size-info-price text { font-size: 26rpx; } .goods-size-info-text { line-height: 40rpx; color: #747788; font-size: 26rpx; } .goods-size-specs { padding: 10rpx 30rpx; } .goods-size-title { color: #747788; font-size: 26rpx; } .goods-size-tag { padding: 0 20rpx 20rpx 20rpx; } .goods-size-tag-text { background: #f5f6fa; color: #999; margin: 20rpx 10rpx 0 10rpx; line-height: 50rpx; padding: 0 15rpx; display: inline-block; font-size: 24rpx; border-radius: 10rpx; } .goods-size-tag-text.active { color: #fff; background: #da2b54; } .goods-size-number { padding: 10rpx 30rpx 80rpx 30rpx; line-height: 60rpx; color: #747788; } .goods-number { display: flex; float: right; margin-top: 25rpx; height: 48rpx; border: 2rpx solid #d7d7d7; border-radius: 10rpx; } .goods-number-btn { background-color: transparent; width: 48rpx; height: 48rpx; line-height: 48rpx; text-align: center; } .goods-number-input { width: 80rpx; text-align: center; height: 48rpx; border-left: 2rpx solid #d7d7d7; border-right: 2rpx solid #d7d7d7; } .goods-size-btn button[size="default"] { text-align: center; line-height: 90rpx; padding: 0; border-radius: 0; font-size: 28rpx; background: #da2b54; color: white; width: 100%; float: left; } .goods-size-btn view.active { background: #b8b8b8; } /* 邀请码弹出 */ .namePop { position: fixed; background-color: rgba(0, 0, 0, .5); left: 0; top: 0; height: 100vh; width: 100vw; z-index: 100000; display: none; } .namePop.active { display: block; } .nameCont { -webkit-box-orient: vertical; -webkit-box-pack: center; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 100000; padding: 0 15%; box-sizing: border-box; display: none; } .nameCont.active { display: -webkit-box; } .nameCont-white { background-color: #ffffff; border-radius: 15rpx; overflow: hidden; } .nameCont-top { padding: 30rpx; box-sizing: border-box; } .nameCont-title { font-size: 34rpx; margin-bottom: 30rpx; } .nameCont-input { height: 90rpx; line-height: 90rpx; position: relative; background-color: #f3f3f3; border-radius: 10rpx; overflow: hidden; padding: 0 25rpx; box-sizing: border-box; } .nameCont-input input { width: calc(100% - 40rpx); height: 100%; background-color: transparent; } .nameCont-colse { width: 40rpx; height: 40rpx; top: 25rpx; right: 20rpx; position: absolute; z-index: 9; } .nameCont-btn { line-height: 100rpx; background-color: #f3f3f3; display: flex; margin-top: 30rpx; border-top: 2rpx solid #dfdfdf; } .nameCont-btn-go { text-align: center; flex: 2; } .nameCont-btn-go:last-child { position: relative; color: #ff9951; } .nameCont-btn-go:last-child::after { position: absolute; content: ''; left: 0; top: 0; width: 2rpx; height: 100%; background-color: #dfdfdf; }