.page-preview { display: flex; height: 100%; padding:0; box-sizing: border-box; flex-direction: column; } .page-preview .preview-top{ margin-left: 76rpx; position: relative; } .page-preview .preview-top image{ width: 100%; } .page-preview .part .title{ display: flex; color:#161616; font-size:28rpx; height: 40rpx; align-items: center; } .page-preview .part .title .left-line{ width: 4rpx; height: 40rpx; background:#161616; margin-right: 52rpx; } .page-preview .part1 .pic{ padding-left: 64rpx; padding-right: 62rpx; margin-top: 28rpx; margin-bottom: 52rpx; } .page-preview .part1 .pic image{ width: 100%; } .page-preview .part2 .list{ padding-left: 46rpx; padding-right: 54rpx; } .page-preview .part2 .list .item{ padding-left: 10rpx; padding-right: 8rpx; border-bottom:2rpx solid #ECEEF3; display: flex; height: 80rpx; align-items: center; justify-content: space-between; margin-top: 32rpx; } .page-preview .part2 .list .item .name{ font-size:28rpx; color:#161616; } .page-preview .part2 .list .right-box{ display: flex; height: 80rpx; align-items: center; } .page-preview .part2 .list .price-box{ text-align:right; margin-right: 34rpx; } .page-preview .part2 .list .price-box .price1{ color:#1DB696; font-size:28rpx; } .page-preview .part2 .list .price-box .price2{ color:#9B9B9B; font-size:24rpx; } .page-preview .part2 .list .more{ display: flex; height: 80rpx; align-items: center; } .page-preview .part2 .list .more image{ width: 12rpx; height: 20rpx; } .page-preview .part2 .list .count{ display: flex; height: 90rpx; align-items: center; justify-content: space-between; } .page-preview .affirm{ width:650rpx; height:100rpx; line-height:100rpx; text-align: center; margin:0 auto; margin-top:20rpx; background:rgba(29,182,150,1); font-size:32rpx; color:#fff; } .page-preview .tip{ text-align: center; } .page-preview .tip image{ width: 24rpx; height: 24rpx; margin-top: 22rpx; margin-bottom: 20rpx; } .page-preview .tip .tip-msg{ color:#8D8D8D; font-size:24rpx; margin-bottom: 70rpx; } .page-preview .hidden-wrap{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; background:rgba(29,33,41,0.67); } .page-preview .hidden-wrap .hidden-part{ background:#fff; padding-top: 20rpx; padding-bottom: 64rpx; } .page-preview .hidden-wrap .list{ padding-left: 20rpx; padding-right: 20rpx; } .page-preview .mid-box{ position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding-left: 80rpx; padding-right: 70rpx; } .page-preview .mid-box .close-box{ text-align: center; } .page-preview .mid-box .close{ width: 100rpx; height: 100rpx; margin:0 auto; margin-top: 46rpx; }