page { background-color: #f3f3f5; } /* 产品轮播 */ .banner { overflow: hidden; position: relative; padding-top: 100%; } .swiperCont, .swiperImg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* 用户 */ .user-cont { width: 100%; position: absolute; bottom: 0; left: 0; z-index: 99; padding: 20rpx 30rpx; display: flex; box-sizing: border-box; } .user-head { position: relative; width: 90rpx; height: 90rpx; border-radius: 50%; border: 6rpx solid #ffe0a8; margin-top: 10rpx; } .user-avatar { position: absolute; width: 100%; height: 100%; border-radius: 50%; } .user-ancrown { position: absolute; width: 48rpx; height: 48rpx; right: 0; top: -34rpx; } .user-text { height: 120rpx; width: calc(100% - 120rpx); padding-left: 20rpx; box-sizing: border-box; } .user-top { display: flex; line-height: 58rpx; } .user-name { color: #ffffff; padding-right: 10rpx; } .user-icon image { width: 32rpx; height: 32rpx; margin: 12rpx 0 0 5rpx; } .user-identity { margin-top: 5rpx; width: 120rpx; } .water { background-color: rgba(0, 0, 0, .3); border-radius: 30rpx 30rpx 30rpx 0; padding: 0 15rpx 0 10rpx; height: 60rpx; line-height: 60rpx; display: flex; position: absolute; right: 30rpx; top: 50rpx; color: #ffffff; } .water image { width: 46rpx; height: 46rpx; margin: 6rpx 5rpx 0 0; } /* 商品信息 */ .goodsInfo { background-color: #ffffff; padding: 30rpx; width: 100%; box-sizing: border-box; font-weight: 600; font-size: 32rpx; } .goodsInfo-name { margin-bottom: 20rpx; } .goodsInfo-info { display: flex; line-height: 44rpx; } .goodsInfo-price { font-size: 36rpx; color: #df723a; flex: 1; } .goodsInfo-price-symbol { font-size: 28rpx; display: inline-block; margin-right: 5rpx; } .goodsInfo-price-see { font-weight: normal; color: #959595; font-size: 28rpx; } /* 产品详情 */ .detailsBrief { padding: 30rpx 0; box-sizing: border-box; background-color: #ffffff; margin-top: 20rpx; /* border-bottom: 60px solid transparent; */ } .detailsBrief-title { position: relative; font-size: 32rpx; height: 70rpx; margin-bottom: 10rpx; font-weight: 600; text-align: center; } .goods-info-footer { line-height: 40rpx; text-align: center; font-size: 24rpx; color: #747788; padding-top: 20rpx; } .detailsBrief-text { padding: 30rpx; box-sizing: border-box; line-height: 44rpx; } .detailsBrief-back { text-align: center; padding: 0 30rpx; box-sizing: border-box; } .cardcase-like-online { font-weight: normal; font-size: 24rpx; border: solid 2rpx #d8c283; color: #c7a232; border-radius: 4rpx; display: inline-block; height: 32rpx; line-height: 32rpx; padding: 0 10rpx; margin: 2rpx 10rpx; } /* 底部 */ .footer { width: 100%; height: 60px; background-color: #FFFFFF; position: fixed; left: 0; bottom: 0; z-index: 9; padding: 8px 30rpx; box-sizing: border-box; display: flex; } .number { flex: 1; line-height: 44px; color: #6c78f8; } .number text { padding: 0 5rpx; font-weight: 600; font-size: 38rpx; } .btn { height: 36px; line-height: 36px; background-color: #6c78f8; text-align: center; color: #FFFFFF; border-radius: 60rpx; font-size: 28rpx; padding: 0 30rpx; margin-top: 8rpx; } .detailsBrief-back { width: 100%; }