init project

miniprogram/pages/main/about/index.less

@@ -0,0 +1,107 @@
+/* pages/info/info.less */
+page {
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+}
+
+.info {
+	height: 100%;
+	display: flex;
+	padding: 100rpx 0;
+	box-sizing: border-box;
+	flex-direction: column;
+
+	.cotainer {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+
+		.header {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-direction: column;
+	
+			.logo {
+				width: 128px;
+				height: 128px;
+				display: block;
+				border-radius: 4px;
+				box-shadow: 2px 2px 8px rgba(0, 0, 0, .2);
+				margin-bottom: 1rem;
+			}
+	
+			.name {
+				margin: 0 .5rem;
+				display: inline-block;
+	
+				&.gao {
+					color: #FF7A9B;
+				}
+		
+				&.yeyu {
+					color: #7A9BFF;
+				}
+			}
+		}
+
+		.text {
+			color: #777;
+			font-size: 12px;
+			text-align: center;
+
+			.love {
+				color: transparent;
+				font-size: 1rem;
+				animation: loveGradient 1500ms linear infinite;
+				text-align: center;
+				background: linear-gradient(90deg, #FFB5C7, #FF7A9B, #FF3A6B, #FF7A9B, #FFB5C7);
+				font-weight: bold;
+				font-family: "Arial", sans-serif;
+				margin-bottom: 1rem;
+				background-size: 200% 100%;
+				background-clip: text;
+				-webkit-background-clip: text;
+				-webkit-text-fill-color: transparent;
+			}
+				
+			@keyframes loveGradient {
+				0% {
+					background-position: 0% 50%;
+				}
+				100% {
+					background-position: 200% 50%;
+				}
+			}
+		}
+	
+		.footer {
+			display: flex;
+			align-items: center;
+			flex-direction: column;
+
+			.exit {
+				color: #E64340;
+				width: 10rem;
+				margin-bottom: 1rem;
+			}
+	
+			.item {
+				font-size: 14px;
+				text-align: center;
+	
+				.label {
+					color: #777;
+				}
+	
+				&.copyright {
+					display: flex;
+					font-size: 12px;
+					flex-direction: column;
+				}
+			}
+		}
+	}
+}