.container { padding: 0 24px 24px 16px; .title { margin: 33px 0 15px; text-align: center; color: #333333; font-size: 18px; font-weight: 500; } .validateStatusWrapper { margin-top: 6px; font-size: 12px; .validateStatus { display: flex; column-gap: 5px; align-items: center; .verificationRes { display: flex; justify-content: center; align-items: center; width: 17px; height: 17px; .right { width: 17px; height: 17px; } .error { width: 10px; height: 10px; } } .rightText { color: #43cf7c; } .errorText { color: #d43030; } } } .availableMoneyOut { display: flex; align-items: center; column-gap: 16px; margin-bottom: 16px; font-size: 14px; color: #777777; .value { font-size: 18px; font-weight: 700; color: #29bbe4; } } .exchangeRate { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 14px; color: #777777; .value { font-weight: 700; } } .detailModal { position: relative; width: calc(100vw - 50px); max-width: 363px; padding: 32px 29px 42px; background-color: #fff; box-sizing: border-box; .closeIcon { position: absolute; top: 18px; right: 21px; width: 17px; height: 17px; } .titleWrapper { display: flex; flex-direction: column; align-items: center; row-gap: 12px; color: #333333; padding: 12px; margin: 24px 0; box-shadow: -1px 0 5px 1px rgba(0, 0, 0, 0.1); .title { margin: 0; font-size: 24px; font-weight: 700; line-height: 34px; } .value { font-size: 36px; font-weight: 700; color: #29bbe4; line-height: 52px; } } .resendCode { display: flex; justify-content: flex-end; align-items: center; font-size: 14px; color: #4dc0e5; .resendIcon { width: 12px; height: 12px; &.loading { animation: rotate infinite 2s; } } } } } @keyframes rotate { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } } ::v-deep.uni-subtitle { color: #666666; font-size: 14px; font-weight: 400; margin-bottom: 8px !important; } ::v-deep .is-input-border { background: #F7F8FA !important; border: 1px solid #F7F8FA !important; }