css 百分比

components/navigator-back/navigator-back.vue

@@ -35,20 +35,21 @@
 		box-sizing: border-box;
 		flex-direction: column;
 		width: 100%;
+		height: 120px;
 		// height: 105px;
 		background-color: #2A2832;
 		.sign{
 			display: flex;
 			box-sizing: border-box;
+			height: 50%;
 			flex-direction: row;
 			align-items: center;
 			background: linear-gradient(to right, #303373, #C9A391);
 			.robot{
-				margin: 10px 0px;
 				flex-shrink: 0;
-				width: 48px;
-				height: 48px;
-				margin-left: 15px;
+				width: 4%; // 48px;
+				height: 100%;  //48px;
+				margin-left: 2%; // 15px;
 				image{
 					width: 100%;
 					height: 100%;
@@ -56,9 +57,8 @@
 			}
 			.titleText{
 				display: flex;
-				margin-left: 10px;
-				// height: 100%;
-				font-size: 30px;
+				margin-left: 1%; //10px;
+				font-size: 3vw; //30px;
 				font-weight: 500;
 				color: #ffffff;
 			}
@@ -66,11 +66,12 @@
 		.backContent{
 			display: flex;
 			width: 100%;
+			height: 50%;
+			align-items: center;
 			.back_image{
-				margin: 15px 0px;
-				margin-left: 15px;
-				width: 35px;
-				height: 25px;
+				margin-left: 2%; //15px;
+				width: 4%; // 35px;
+				height: 50%; //25px;
 				image{
 					width: 100%;
 					height: 100%;

pages/enter/enter-navigator.vue

@@ -118,9 +118,9 @@ import { nextTick } from "vue"
 		
 		.robot{
 			flex-shrink: 0;
-			width: 48px;
-			height: 48px;
-			margin-left: 15px;
+			width: 4%; // 48px;
+			height: 90%; // 48px;
+			margin-left: 2%; // 15px;
 			image{
 				width: 100%;
 				height: 100%;
@@ -128,9 +128,8 @@ import { nextTick } from "vue"
 		}
 		.titleText{
 			display: flex;
-			margin-left: 10px;
-			// height: 100%;
-			font-size: 30px;
+			margin-left: 1%; //10px;
+			font-size: 3vw; // 30px
 			font-weight: 500;
 			color: #ffffff;
 		}
@@ -143,13 +142,13 @@ import { nextTick } from "vue"
 			.navigator_box{
 				position: relative;
 				display: flex;
-				margin-left: 30px;
-				width: 80px;
-				height: 67px;
+				margin-left: 3vw; //30px;
+				// width: 80px;
+				// height: 67px;
 				justify-content: center;
-				align-items: center;
+				align-items: center;				
+				font-size: 2.5vw; //20px;
 				
-				font-size: 20px;
 				.navigator_box_normal{
 					color: #ffffff;
 				}
@@ -161,8 +160,8 @@ import { nextTick } from "vue"
 				}
 				.navigator_box_selected_line {
 					position: absolute;
-					top: 75%;
-					width: 50%;
+					bottom: -0.3vw;
+					width: 100%;
 					height: 1.5px;
 					background: linear-gradient(90deg, #24BF74 10%, #FAEE07 90%);
 				}
@@ -173,16 +172,17 @@ import { nextTick } from "vue"
 			position: absolute;
 			display: flex;
 			box-sizing: border-box;
+			width: 20%;
 			height: 100%;
 			top: 0px;
 			right: 15px;
 			align-items: center;
 			.user_regist{
 				display: flex;
-				width: 65px;
-				height: 28px;
-				border-radius: 28px;
-				font-size: 16px;
+				width: 47%; //65px;
+				height: 50%; //28px;
+				border-radius: 5vw; //28px;
+				font-size: 1.5vw; //16px;
 				color: #878787;
 				background-color: #ffffff;
 				justify-content: center;
@@ -190,21 +190,22 @@ import { nextTick } from "vue"
 			}
 			.user_login{
 				display: flex;
-				width: 65px;
-				height: 28px;
-				border-radius: 28px;
-				font-size: 16px;
+				width: 47%; //65px;
+				height: 50%; //28px;
+				border-radius: 5vw; //28px;
+				// border-radius: 28px;
+				font-size: 1.5vw; //16px;
 				color: #ffffff;
 				background-color: #4C9CF1;
 				justify-content: center;
 				align-items: center;
-				margin-left: 15px;
+				margin-left: 6%; //15px;
 			}
 		}
 		.userState_logout{
-			width: 145px;
+			// width: 145px;
 			color: #ffffff;
-			font-size: 18px;
+			font-size: 2vw; //18px;
 			justify-content: center;
 		}
 	}

pages/login/login.vue

@@ -97,24 +97,24 @@
 			display: flex;
 			box-sizing: border-box;
 			flex-direction: column;
-			width: 497px;
-			border-radius: 10px;
-			border: 1px solid #32B3AA;
+			width: 50%; //497px;
+			border-radius: 2vw; //10px;
+			border: 1px solid #32B3AA;			
 			box-shadow: 0 0 15px #000000;
 			padding: 50px 37px;
 			align-items: center;
 			.loginText{
 				display: flex;
-				font-size: 24px;
+				font-size: 3vw; //24px;
 				font-weight: 500;
 				color: #C2C2C2;
 				justify-content: center;
 			}
 			.phone_input{
-				margin-top: 30px;
+				margin-top: 2vw;//30px;
 				width: 100%;
-				height: 70px;
-				font-size: 22px;
+				height: 8vw; //70px;
+				font-size: 2vw; //22px;
 				color: #ffffff;
 				border-bottom: 1px solid #32B3AA;
 			}
@@ -123,7 +123,7 @@
 				display: flex;
 				width: 100%;
 				.password_input{
-					margin-top: 40px;
+					margin-top: 3vw; //40px;
 					background-color: transparent;
 				}
 				.passwordcontent_hidden{
@@ -131,8 +131,8 @@
 					display: flex;
 					bottom: 10px;
 					right: 10px;
-					width: 30px;
-					height: 30px;
+					width: 3vw; //30px;
+					height: 3vw; //30px;
 					transition: all 0.5s;
 					image{
 						width: 100%;
@@ -146,11 +146,11 @@
 			}
 			.loginButton{
 				display: flex;
-				margin-top: 80px;
-				width: 260px;
-				height: 60px;
+				margin-top: 8vw; //80px;
+				width: 27vw; //260px;
+				height: 5vw; //60px;
 				border-radius: 10px;
-				font-size: 22px;
+				font-size: 2.5vw; //22px;
 				color: #ffffff;
 				background-color: #32B3AA;
 				justify-content: center;