.app { padding: 2%; .masks{ image{ position: absolute; bottom:380rpx; left:50%; transform: translateX(-50%); z-index: 999; width: 250rpx; border-radius: 25rpx; height: 250rpx; } .ratetitle{ font-size: 34rpx; position: absolute; bottom:320rpx; left:50%; transform: translateX(-50%); z-index: 999; } .mask{ position: absolute; bottom:0; width: 750rpx; height: 703rpx; background: #FFFFFF; border-radius: 30rpx 30rpx 0px 0px; display: flex; justify-content: space-around; .rateitem{ margin-top:200rpx; width: 217rpx; height: 222rpx; line-height: 222rpx; text-align: center; color: #ffffff; background: #BFBFBF; font-size: 40rpx; border-radius: 25rpx; } .lookrateitem{ font-size: 32rpx; margin-top:440rpx; width: 200rpx; height: 200rpx; line-height: 200rpx; text-align: center; color: #ffffff; background: #BFBFBF; border-radius: 25rpx; } } } .noorder{ margin-top: 20%; } .item { width: 99%; background: #FFFFFF; box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03); border-radius: 20rpx; padding: 0 0 100rpx 0; margin: 20rpx auto; position: relative; .name { width: 95%; height: 90rpx; font-size: 30rpx; color: #969394; line-height: 90rpx; border-bottom: 1rpx solid #D8D4D4; margin: 0 auto; span { color: #4C7BC9; float: right; } image { width: 15rpx; height: 23rpx; padding-left: 25rpx; } } .detailslist { display: flex; image { width: 182rpx; height: 182rpx; margin: 20rpx 0 0 20rpx; } .model { width: 70%; margin: 30rpx 0 0 20rpx; span { font-size: 34rpx; color: #000000; } span:nth-child(1) { display: inline-block; width: 70%; } span:nth-child(2) { color: #969394; float: right; margin-right: 30rpx; } .bottom { margin-top: 40rpx; span { font-size: 32rpx; color: #969394; } } } } .submit { width: 25%; height: 68rpx; line-height: 68rpx; background: #4C7BC9; border-radius: 26rpx; text-align: center; font-size: 32rpx; color: #FFFFFF; position: absolute; right:2%; } } }