.main { width: 100vw; display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 160rpx; .card { background: #fff; z-index: 99; } .step-row { display: flex; width: 100vw; padding: 30rpx; background: #fff; z-index: 99; .step { flex-direction: column; flex: 1; display: flex; align-items: center; position: relative; padding: 4rpx; .okIcon { position: absolute; left: 60%; top: 0; z-index: 9; image { display: block; width: 38rpx; height: 38rpx; } } .arrow { position: absolute; left: 90%; top: 40%; transform: translateY(-50%); image { display: block; width: 24rpx; height: 22rpx; } } .icon { padding: 6rpx; border-radius: 50%; &.active { border: 1px solid #1989FA; } image { display: block; width: 80rpx; height: 80rpx; } } .text { margin-top: 12rpx; font-size: 24rpx; color: #333; } } } } .checkCon { padding: 96rpx 30rpx 24rpx 30rpx; } .btnBg { width: 100%; height: 128rpx; padding: 16rpx 30rpx; background: #fff; .btn { width: 100%; height: 96rpx; background: linear-gradient(180deg, #3593FB 0%, #53D3E5 100%); border-radius: 48rpx; font-size: 36rpx; color: #fff; text-align: center; line-height: 96rpx; } } .select_row { display: flex;justify-content: flex-end;width: 100%; } .line { position: relative; &::before { content: ''; height: 20rpx; width: 100vw; background-color: #f7f7f7; position: absolute; left: -30rpx; bottom: -20rpx; } } .flex1 { flex: 1 } .stepBtn_row { display: flex; padding: 30rpx; position: fixed; width: 100%; bottom: 0; left: 0; justify-content: space-between; background-color: #fff; z-index: 9; .stepBtn { width: 48%; height: 96rpx; border: 2rpx solid rgba(53, 147, 251, 1); color: #1989FA; border-radius: 50rpx; text-align: center; line-height: 96rpx; font-size: 36rpx; text-align: center; &.bg { color: #fff; border:none; } &.opacity { opacity: 0.5; } } }