feat: 初始化

pages/home/changeROPwd/index.scss

@@ -0,0 +1,118 @@
+.container {
+	padding: 0 24px 24px 16px;
+	.title {
+		margin: 14px 0 15px;
+	}
+	.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);
+	}
+}