.app { padding: 0; .mask { .information { width: 70%; height: 400rpx; margin: 50% auto; background: #FFFFFF; border-radius: 30rpx; text-align: center; color: #FFFFFF; position: relative; .determine, .cancel { width: 200rpx; height: 70rpx; border-radius: 26rpx; font-size: 34rpx; line-height: 70rpx; position: absolute; top: 74%; } .determine { background: #4C7BC9; right: 36rpx; } .cancel { background: #C5BFBF; left: 36rpx; } .title { font-size: 42rpx; margin-top: 40rpx; color: #000000; } image { width: 100rpx; height: 100rpx; margin: 10% 0 0 0; } } } .mask { .PurchasePage { position: fixed; bottom: 0; width: 100%; background: #FFFFFF; border-radius: 30rpx 30rpx 0px 0px; font-size: 36rpx; padding-bottom: 20rpx; .close { width: 31rpx; height: 31rpx; position: absolute; top: 2%; right: 2%; } .topcontent { width: 90%; margin: 0 auto; padding-bottom: 24rpx; border-bottom: 1rpx solid #D8D4D4; position: relative; .goodsStock{ font-size: 24rpx; position: absolute; top: 73%; left: 75%; } .price { color: #D43953; position: absolute; top: 70%; left: 37%; } .title { font-size: 36rpx; position: absolute; top: 0%; left: 38%; font-weight: 600; width: 58%; height: 85rpx; } .image { width: 215rpx; height: 215rpx; background: rgba(150, 147, 148, 0.21); margin: 35rpx 0 0 0; image { width: 201rpx; height: 201rpx; margin: 7rpx 0 0 7rpx; } } } .buy { width: 60%; height: 71rpx; background: #4C7BC9; color: #FFFFFF; text-align: center; line-height: 71rpx; border-radius: 26rpx; margin: 40rpx 0 0 20%; } .bottomcontent { margin-top: 34rpx; padding-bottom: 35rpx; .header { display: inline-block; vertical-align: middle; } .number { display: inline-block; position: absolute; right: 10%; } } .centercontent { margin-top: 34rpx; font-size: 36rpx; .header { margin-bottom: 20rpx; } .productmodel { font-size: 24rpx; display: inline-block; height: 60rpx; border: 1rpx solid #D8D4D4; line-height: 60rpx; border-radius: 25rpx; text-align: center; padding: 0 15rpx; margin: 15rpx 15rpx 0 0; } .Productmodel { font-size: 24rpx; display: inline-block; height: 60rpx; background: #ECF1FA; border: 1rpx solid #4C7BC9; line-height: 60rpx; border-radius: 25rpx; color: #4C7BC9; text-align: center; padding: 0 15rpx; margin: 15rpx 15rpx 0 0; } } } } .Purchasecolumn { width: 100%; height: 110rpx; background: #FFFFFF; position: fixed; bottom: 0; .buy { width: 263rpx; height: 80rpx; background: #4C7BC9; border-radius: 25rpx; font-size: 38rpx; color: #FFFFFF; line-height: 80rpx; text-align: center; position: absolute; right: 5%; top: 15rpx; } } .common { padding-left: 5%; } .choice, .Discount, .service { height: 80rpx; background: #FFFFFF; box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03); font-size: 34rpx; line-height: 80rpx; margin-bottom: 15rpx; position: relative; image { width: 17rpx; height: 26rpx; position: absolute; right: 5%; top: 50%; transform: translateY(-50%); } .content { width: 65%; display: inline-block; position: absolute; left: 25%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: #000111; } .selected { color: #969394; display: inline-block; } } .picture { background: #FFFFFF; box-shadow: 0px 9px 31px 9px rgba(0, 0, 0, 0.03); position: relative; padding-bottom: 110rpx; .selected { padding: 20rpx 0 0 5%; color: #969394; display: inline-block; margin-bottom: 20rpx; } image { height: 750rpx; width: 100%; background-size: 100%; } } .service { height: 130rpx; line-height: 65rpx; .content { display: inline-block; position: absolute; left: 25%; } .selected { color: #969394; display: inline-block; } } .Commodity { background: #FFFFFF; margin: 15rpx 0 15rpx 0; box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03); font-size: 36rpx; line-height: 60rpx; .name, .number { width: 100%; display: inline-block; line-height: 50rpx; } .price { color: #D43953; line-height: 70rpx; } .number { padding-left: 30rpx; } } }