.layer { position: fixed; top: 0; right: 0; left: 0; bottom: 0; background: rgb(247,247,247); } .content { padding: 24rpx 30rpx 40rpx; background-color: #fff; text-align: center; } .title { font-size: 30rpx; color: #131D34; font-weight: bold; margin-bottom: 10rpx; } .desc { color: #999; font-size: 22rpx; margin-bottom: 10rpx; } .ctrl { height: 176rpx; background-color: #EF9B3A; border-radius: 4px; position: relative;display: flex; flex-direction: column; align-items: center; justify-content: center; } .ctrl::after, .ctrl::before { content: ''; border-radius: 50%; background:rgba(255,255,255,0.16); position: absolute; } .ctrl::before { width:44px; height:53px; top: 0; left: 0; transform: translate(-50%, -50%); } .ctrl::after { width:70px; height:93px; right: 0; bottom: 0; transform: translate(50%, 50%); } .ctrl .money { line-height: 90rpx; height: 90rpx; font-size: 90rpx; color: #fff; font-weight: bold; } .ctrl .money text { color: inherit; font-size: 34rpx; } .ctrl .btn { font-size: 22rpx; background-color: #fff; padding: 8rpx 50rpx; color: #EF9B3A; border-radius: 24rpx; display: inline-block; } .explain { padding: 34rpx; background: #fff; margin-top: 20rpx; } .explain .title { padding: 0; text-align: center; margin: 7rpx 0 44rpx; font-size: 30rpx; font-weight: normal; position: relative; font-weight: 400; } .explain .title text { background-color: #fff; z-index: 1; position: relative; padding: 0 20rpx; } .explain .title::after { content: ''; position: absolute; top: 50%; left: 10%; right: 10%; transform: translateY(-50%); height:1px; background:rgba(233,233,233,1); z-index: 0; } .explain .desc { font-size: 24rpx; color: #999; line-height: 40rpx; }