样式适配

pages/login/login.vue

@@ -2,16 +2,16 @@
 	<view class="container" style="background-image: url('../../static/login.gif');height:100vh;">
 		<view :style="{ height: height }" />
 		<view class="logo">
-			<u--image src="/static/img/logo.png" width="294rpx" height="94rpx" mode="scaleToFill">
+			<u--image src="/static/img/logo.png" width="39.200vw" height="12.533vw" mode="scaleToFill">
 				<template v-slot:loading>
 					<u-loading-icon color="red"></u-loading-icon>
 				</template>
-				<view slot="error" style="font-size: 24rpx;">加载失败</view>
+				<view slot="error" style="font-size: 12px;">加载失败</view>
 			</u--image>
 		</view>
 		<account v-show="loginMethod == 'account'" />
 		<phone v-show="loginMethod == 'phone'" />
-		<view style="height: 50rpx;" />
+		<view style="height: 25px;" />
 		<other-login :loginMethod="loginMethod" @onChange="changeLoginMethod" />
 	</view>
 </template>
@@ -35,10 +35,10 @@ export default {
 	onLoad() {
 		this.loginMethod = uni.getStorageSync('loginMethod') || 'account';//登录方式
 		// #ifdef H5
-		this.height = "200rpx";
+		this.height = "100px";
 		// #endif
 		// #ifndef H5
-		this.height = "300rpx";
+		this.height = "150px";
 		// #endif 
 	},
 	methods: {
@@ -50,16 +50,16 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .container {
 	width: 100vw;
 	box-sizing: border-box;
-	background-color: #282C35;
+	background: #282C35 !important;
 
 	.logo {
-		width: 294rpx;
-		height: 84rpx;
-		margin: 0 auto 100rpx;
+		width: 147px;
+		height: 42px;
+		margin: 0 auto 50px;
 	}
 }
 </style>

pages/login/modules/account.vue

@@ -4,7 +4,7 @@
 			<view class="icon" />
 			<input type="text" :value="account.account" placeholder="请输入账号" data-name='account' @input="onInput">
 		</view>
-		<view class="input-box" style="margin-top:30rpx;">
+		<view class="input-box" style="margin-top:15px;">
 			<view class="icon" />
 			<input type="password" :value="account.password" placeholder="请输入密码" data-name='password' @input="onInput">
 		</view>
@@ -14,10 +14,10 @@
 			</label>
 			<navigator url="#">忘记密码?</navigator>
 		</view>
-		<u-button :customStyle="butSty" :disabled="account.account == '' || account.password == ''" :loading="loading" loadingText='登陆中...' text="确 定"
-			@click="startLogging" />
+		<u-button :customStyle="butSty" :disabled="account.account == '' || account.password == ''" :loading="loading"
+			loadingText='登陆中...' text="确 定" @click="startLogging" />
 	</view>
-</view></template>
+</template>
 
 <script>
 import { hexMD5 } from "./md5";
@@ -33,24 +33,24 @@ export default {
 				password: ""
 			},
 			butSty: {
-				width: "550rpx",
-				height: "90rpx",
+				width: "73.333vw",
+				height: "12.000vw",
 				background: "#0A3971",
-				borderRadius: "8rpx",
+				borderRadius: "1.067vw",
 				opacity: "0.65",
 				borderWidth: 0,
-				fontSize: "32rpx",
+				fontSize: "4.267vw",
 				fontFamily: " PingFang SC - Regular, PingFang SC",
 				color: " #FFFFFF",
-				margin: "134rpx auto 0",
+				margin: "17.867vw auto 0"
 			}
 		};
 	},
 	mounted() {
 		this.account = uni.getStorageSync("account") || {
-				account: "",
-				password: ""
-			};
+			account: "",
+			password: ""
+		};
 		this.memory = uni.getStorageSync("memory") || 0;
 	},
 	methods: {
@@ -93,7 +93,51 @@ export default {
 </script>
 
 <style lang="scss">
-@import url("./input.css");
+.input-box {
+	display: flex;
+	align-items: center;
+	width: 275px;
+	height: 45px;
+	background: #FFFFFF;
+	border-radius: 4px;
+	opacity: 0.65;
+	margin: 0 auto 0;
+}
+
+.icon {
+	width: 16px;
+	height: 16px;
+	margin: 0 10px;
+}
+
+input {
+	width: 80%;
+}
+
+/* 验证码 */
+.authcode {
+	display: flex;
+	justify-content: space-between;
+	height: 45px;
+	width: 275px;
+	margin: 0 auto 0;
+}
+
+.authcode .input-box {
+	width: 170px;
+}
+
+.authcode .cu-btn {
+	width: 97px;
+	height: 45px;
+	background: #0A3971;
+	border-radius: 4px;
+	opacity: 0.65;
+	margin-left: 8px;
+	font-size: 24px;
+	font-family: PingFang SC-Regular, PingFang SC;
+	padding: 0;
+}
 
 .icon {
 	background-color: $my-color-main;
@@ -107,12 +151,12 @@ export default {
 .assist {
 	display: flex;
 	justify-content: space-between;
-	width: 548rpx;
-	height: 34rpx;
-	font-size: 24rpx;
+	width: 274px;
+	height: 17px;
+	font-size: 12px;
 	font-family: PingFang SC-Regular, PingFang SC;
 	color: #FFFFFF;
-	margin: 26rpx auto 0;
+	margin: 13px auto 0;
 
 	label {
 		display: flex;
@@ -122,14 +166,14 @@ export default {
 			transform: scale(0.6);
 			background: #0A3971;
 			color: #0A3971;
-			border-radius: 8rpx;
+			border-radius: 4px;
 			opacity: 0.65;
-			border: 2rpx solid rgba(11, 63, 126, 0.1);
+			border: 1px solid rgba(11, 63, 126, 0.1);
 		}
 	}
 
 	navigator {
-		padding-right: 10rpx;
+		padding-right: 5px;
 	}
 }
 </style>

pages/login/modules/input.css

@@ -1,45 +0,0 @@
-.input-box {
-    display: flex;
-    align-items: center;
-    width: 550rpx;
-    height: 90rpx;
-    background: #FFFFFF;
-    border-radius: 8rpx;
-    opacity: 0.65;
-    margin: 0 auto 0;
-}
-
-.icon {
-    width: 32rpx;
-    height: 32rpx;
-    margin: 0 20rpx;
-}
-
-input {
-    width: 80%;
-}
-
-/* 验证码 */
-.authcode {
-    display: flex;
-    justify-content: space-between;
-    height: 90rpx;
-    width: 550rpx;
-    margin: 0 auto 0;
-}
-
-.authcode .input-box {
-    width: 340rpx;
-}
-
-.authcode .cu-btn {
-    width: 194rpx;
-    height: 90rpx;
-    background: #0A3971;
-    border-radius: 8rpx;
-    opacity: 0.65;
-    margin-left: 16rpx;
-    font-size: 28rpx;
-    font-family: PingFang SC-Regular, PingFang SC;
-    padding: 0;
-}

pages/login/modules/otherLogin.vue

@@ -1,6 +1,6 @@
 <template>
     <view class="container">
-        <u-divider text="其他登录方式" textSize="24rpx" textColor="#fff" lineColor="#fff" />
+        <u-divider text="其他登录方式" textSize="3.2vw" textColor="#fff" lineColor="#fff" />
         <view class="grid-box">
             <view class="item">
                 微信
@@ -30,7 +30,7 @@ export default {
 
 <style lang="scss" scoped>
 .container {
-    width: 550rpx !important;
+    width: 275px !important;
     margin: -20px auto 0;
 
     .grid-box {
@@ -40,14 +40,14 @@ export default {
         flex-wrap: wrap;
 
         .item {
-            width: 80rpx;
-            height: 80rpx;
+            width: 40px;
+            height: 40px;
             border-radius: 50%;
             background-color: red;
             flex-shrink: 0;
-            margin: 0 14rpx 14rpx;
+            margin: 0 7px 7px;
             text-align: center;
-            line-height: 80rpx;
+            line-height: 40px;
             color: #fff;
         }
     }

pages/login/modules/phone.vue

@@ -4,7 +4,7 @@
 			<view class="icon" />
 			<input type="number" :value="phoneNumber" placeholder="请输入手机号码" data-name='phoneNumber' @input="onInput">
 		</view>
-		<view class="authcode" style="margin-top:30rpx;">
+		<view class="authcode" style="margin-top:15px;">
 			<view class="input-box">
 				<view class="icon" />
 				<input type="number" :value="password" placeholder="请输入验证码" data-name='password' @input="onInput">
@@ -31,16 +31,16 @@ export default {
 			password: "",
 			butText: "获取验证码",
 			butSty: {
-				width: "550rpx",
-				height: "90rpx",
+				width: "73.333vw",
+				height: "12.000vw",
 				background: "#0A3971",
-				borderRadius: "8rpx",
+				borderRadius: "1.067vw",
 				opacity: "0.65",
 				borderWidth: 0,
-				fontSize: "32rpx",
+				fontSize: "4.267vw",
 				fontFamily: " PingFang SC - Regular, PingFang SC",
 				color: " #FFFFFF",
-				margin: "134rpx auto 0",
+				margin: "17.867vw auto 0"
 			}
 		};
 	},
@@ -116,7 +116,51 @@ export default {
 </script>
 
 <style lang="scss">
-@import url("./input.css");
+.input-box {
+	display: flex;
+	align-items: center;
+	width: 275px;
+	height: 45px;
+	background: #FFFFFF;
+	border-radius: 4px;
+	opacity: 0.65;
+	margin: 0 auto 0;
+}
+
+.icon {
+	width: 16px;
+	height: 16px;
+	margin: 0 10px;
+}
+
+input {
+	width: 80%;
+}
+
+/* 验证码 */
+.authcode {
+	display: flex;
+	justify-content: space-between;
+	height: 45px;
+	width: 275px;
+	margin: 0 auto 0;
+}
+
+.authcode .input-box {
+	width: 170px;
+}
+
+.authcode .cu-btn {
+	width: 97px;
+	height: 45px;
+	background: #0A3971;
+	border-radius: 4px;
+	opacity: 0.65;
+	margin-left: 8px;
+	font-size: 24px;
+	font-family: PingFang SC-Regular, PingFang SC;
+	padding: 0;
+}
 
 .icon {
 	background-color: $my-color-main;
@@ -130,12 +174,12 @@ export default {
 .assist {
 	display: flex;
 	justify-content: space-between;
-	width: 548rpx;
-	height: 34rpx;
-	font-size: 24rpx;
+	width: 274px;
+	height: 17px;
+	font-size: 12px;
 	font-family: PingFang SC-Regular, PingFang SC;
 	color: #FFFFFF;
-	margin: 26rpx auto 0;
+	margin: 13px auto 0;
 
 	label {
 		display: flex;
@@ -145,14 +189,14 @@ export default {
 			transform: scale(0.6);
 			background: #0A3971;
 			color: #0A3971;
-			border-radius: 8rpx;
+			border-radius: 4px;
 			opacity: 0.65;
-			border: 2rpx solid rgba(11, 63, 126, 0.1);
+			border: 1px solid rgba(11, 63, 126, 0.1);
 		}
 	}
 
 	navigator {
-		padding-right: 10rpx;
+		padding-right: 5px;
 	}
 }
 </style>

pages/login/selectSite.vue

@@ -1,10 +1,10 @@
 <template>
     <view>
         <cu-custom bgImage="https://yostest175549.obs.cn-east-2.myhuaweicloud.com:443/202306151686796745663B52544232.png"
-            :isBack="true" contentStyle="height:50px;">
+            :isBack="true"><!--  -->
             <block slot="backText">返回</block>
             <block slot="content">
-                <view class="cu-load load-cuIcon" style="margin-top: -16rpx;" :class="isLoad && 'loading'">选择登录站点</view>
+                <view class="cu-load load-cuIcon" :class="isLoad && 'loading'">选择登录站点</view>
             </block>
         </cu-custom>
         <navigator class="site" url="#" v-for="item in account_list" :key="item.userid" @click="selectSite(item)">
@@ -43,13 +43,13 @@ export default {
 
 <style lang="scss" scoped>
 .site {
-    width: 690rpx;
-    border-radius: 8rpx;
+    width: 345px;
+    border-radius: 4px;
     background: #fff;
-    padding: 20rpx 30rpx;
+    padding: 10px 15px;
     box-sizing: border-box;
-    margin: 20rpx auto;
-    font-size: 28rpx;
+    margin: 10px auto;
+    font-size: 14px;
     color: #333333;
 }
 </style>