page { height: 100%; width: 100%; background: #f4f4f4; } .container{ padding-bottom:200rpx; } view,text{ color:#333; font-size: 30rpx; box-sizing: border-box; } .top{ width: 750rpx; height: 200rpx; background: linear-gradient(334deg, #8BF2F7 0%, #09AFFF 100%); display: flex; align-items: center; justify-content: space-between; padding:0 48rpx; margin-bottom:26rpx; } .top view{ font-size: 50rpx; color:#fff; font-weight: bold; } .goods-block{ width: 702rpx; background: #FFFFFF; border-radius: 18rpx; margin:0 24rpx; padding:20rpx 24rpx 12rpx; } .goods-item{ border-bottom: 1rpx solid #DBDBDB; height:220rpx; padding:20rpx 10rpx 20rpx 24rpx; display: flex; } .goods-item:last-child{ border-bottom:none; } .goods-img{ width: 180rpx; height: 180rpx; border-radius: 4rpx; border: 1rpx solid #979797; margin-right:24rpx; } .goods-info{ flex:1; } .goods-name{ display: flex; justify-content: space-between; align-items: center; height: 54rpx; } .goods-name .left{ line-height: 54rpx; width:320rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .goods-spec{ height: 54rpx; line-height: 54rpx; margin-bottom:14rpx; display: flex; justify-content: space-between; align-items: center; } .goods-spec .spec{ line-height: 54rpx; width:320rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .goods-spec .arrow{ width:44rpx; height:44rpx; margin-right:-8rpx; } .goods-price{ height: 54rpx; text-align: right; } .confirm-btn{ width: 674rpx; height: 110rpx; line-height: 110rpx; background: #3D7FFF linear-gradient(270deg, rgba(0,202,255,0.5) 0%, rgba(9,175,255,0.5) 100%); border-radius: 110rpx; left:38rpx; right:38rpx; bottom:40rpx; position: fixed; font-size: 48rpx; text-align: center; color:#fff; } .tips{ font-size: 24rpx; color:#999; text-align: center; margin-top:20rpx; }