单位换算适配平板

colorui/animation.css

@@ -5,180 +5,180 @@
 
 /* css 滤镜 控制黑白底色gif的 */
 .gif-black{  
-  mix-blend-mode: screen;  
-}
-.gif-white{  
-  mix-blend-mode: multiply; 
-}
-
-
-/* Animation css */
-[class*=animation-] {
-    animation-duration: .5s;
-    animation-timing-function: ease-out;
-    animation-fill-mode: both
-}
-
-.animation-fade {
-    animation-name: fade;
-    animation-duration: .8s;
-    animation-timing-function: linear
-}
-
-.animation-scale-up {
-    animation-name: scale-up
-}
-
-.animation-scale-down {
-    animation-name: scale-down
-}
-
-.animation-slide-top {
-    animation-name: slide-top
-}
-
-.animation-slide-bottom {
-    animation-name: slide-bottom
-}
-
-.animation-slide-left {
-    animation-name: slide-left
-}
-
-.animation-slide-right {
-    animation-name: slide-right
-}
-
-.animation-shake {
-    animation-name: shake
-}
-
-.animation-reverse {
-    animation-direction: reverse
-}
-
-@keyframes fade {
-    0% {
-        opacity: 0
-    }
-
-    100% {
-        opacity: 1
-    }
-}
-
-@keyframes scale-up {
-    0% {
-        opacity: 0;
-        transform: scale(.2)
-    }
-
-    100% {
-        opacity: 1;
-        transform: scale(1)
-    }
-}
-
-@keyframes scale-down {
-    0% {
-        opacity: 0;
-        transform: scale(1.8)
-    }
-
-    100% {
-        opacity: 1;
-        transform: scale(1)
-    }
-}
-
-@keyframes slide-top {
-    0% {
-        opacity: 0;
-        transform: translateY(-100%)
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateY(0)
-    }
-}
-
-@keyframes slide-bottom {
-    0% {
-        opacity: 0;
-        transform: translateY(100%)
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateY(0)
-    }
-}
-
-@keyframes shake {
-
-    0%,
-    100% {
-        transform: translateX(0)
-    }
-
-    10% {
-        transform: translateX(-9px)
-    }
-
-    20% {
-        transform: translateX(8px)
-    }
-
-    30% {
-        transform: translateX(-7px)
-    }
-
-    40% {
-        transform: translateX(6px)
-    }
-
-    50% {
-        transform: translateX(-5px)
-    }
-
-    60% {
-        transform: translateX(4px)
-    }
-
-    70% {
-        transform: translateX(-3px)
-    }
-
-    80% {
-        transform: translateX(2px)
-    }
-
-    90% {
-        transform: translateX(-1px)
-    }
-}
-
-@keyframes slide-left {
-    0% {
-        opacity: 0;
-        transform: translateX(-100%)
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateX(0)
-    }
-}
-
-@keyframes slide-right {
-    0% {
-        opacity: 0;
-        transform: translateX(100%)
-    }
-
-    100% {
-        opacity: 1;
-        transform: translateX(0)
-    }
-}
+    mix-blend-mode: screen;  
+  }
+  .gif-white{  
+    mix-blend-mode: multiply; 
+  }
+  
+  
+  /* Animation css */
+  [class*=animation-] {
+      animation-duration: .5s;
+      animation-timing-function: ease-out;
+      animation-fill-mode: both
+  }
+  
+  .animation-fade {
+      animation-name: fade;
+      animation-duration: .8s;
+      animation-timing-function: linear
+  }
+  
+  .animation-scale-up {
+      animation-name: scale-up
+  }
+  
+  .animation-scale-down {
+      animation-name: scale-down
+  }
+  
+  .animation-slide-top {
+      animation-name: slide-top
+  }
+  
+  .animation-slide-bottom {
+      animation-name: slide-bottom
+  }
+  
+  .animation-slide-left {
+      animation-name: slide-left
+  }
+  
+  .animation-slide-right {
+      animation-name: slide-right
+  }
+  
+  .animation-shake {
+      animation-name: shake
+  }
+  
+  .animation-reverse {
+      animation-direction: reverse
+  }
+  
+  @keyframes fade {
+      0% {
+          opacity: 0
+      }
+  
+      100% {
+          opacity: 1
+      }
+  }
+  
+  @keyframes scale-up {
+      0% {
+          opacity: 0;
+          transform: scale(.2)
+      }
+  
+      100% {
+          opacity: 1;
+          transform: scale(1)
+      }
+  }
+  
+  @keyframes scale-down {
+      0% {
+          opacity: 0;
+          transform: scale(1.8)
+      }
+  
+      100% {
+          opacity: 1;
+          transform: scale(1)
+      }
+  }
+  
+  @keyframes slide-top {
+      0% {
+          opacity: 0;
+          transform: translateY(-100%)
+      }
+  
+      100% {
+          opacity: 1;
+          transform: translateY(0)
+      }
+  }
+  
+  @keyframes slide-bottom {
+      0% {
+          opacity: 0;
+          transform: translateY(100%)
+      }
+  
+      100% {
+          opacity: 1;
+          transform: translateY(0)
+      }
+  }
+  
+  @keyframes shake {
+  
+      0%,
+      100% {
+          transform: translateX(0)
+      }
+  
+      10% {
+          transform: translateX(-2.400vw)
+      }
+  
+      20% {
+          transform: translateX(2.133vw)
+      }
+  
+      30% {
+          transform: translateX(-1.867vw)
+      }
+  
+      40% {
+          transform: translateX(1.600vw)
+      }
+  
+      50% {
+          transform: translateX(-1.333vw)
+      }
+  
+      60% {
+          transform: translateX(1.067vw)
+      }
+  
+      70% {
+          transform: translateX(-0.800vw)
+      }
+  
+      80% {
+          transform: translateX(0.533vw)
+      }
+  
+      90% {
+          transform: translateX(-0.267vw)
+      }
+  }
+  
+  @keyframes slide-left {
+      0% {
+          opacity: 0;
+          transform: translateX(-100%)
+      }
+  
+      100% {
+          opacity: 1;
+          transform: translateX(0)
+      }
+  }
+  
+  @keyframes slide-right {
+      0% {
+          opacity: 0;
+          transform: translateX(100%)
+      }
+  
+      100% {
+          opacity: 1;
+          transform: translateX(0)
+      }
+  }

components/bottomTabControl.vue

@@ -36,9 +36,9 @@ export default {
 .tabbar-box-wrap {
     position: absolute;
     width: 100%;
-    padding: 50upx;
+    padding: 6.667vw;
     box-sizing: border-box;
-    bottom: calc(52px + env(safe-area-inset-bottom) / 2);
+    bottom: calc(13.867vw + env(safe-area-inset-bottom) / 2);
     left: 0;
 
     .tabbar-box {
@@ -46,26 +46,26 @@ export default {
         display: flex;
         width: 100%;
         background: #fff;
-        border-radius: 20upx;
-        padding: 15upx 20upx;
+        border-radius: 2.667vw;
+        padding: 2.000vw 2.667vw;
         box-sizing: border-box;
         z-index: 2;
-        box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.1);
+        box-shadow: 0.000vw 0.533vw 1.333vw 0.533vw rgba(0, 0, 0, 0.1);
 
         &:after {
             content: '';
             position: absolute;
-            bottom: -16upx;
+            bottom: -2.133vw;
             left: 0;
             right: 0;
             margin: auto;
-            width: 50upx;
-            height: 50upx;
+            width: 6.667vw;
+            height: 6.667vw;
             transform: rotate(45deg);
             background: #fff;
             z-index: 1;
-            box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
-            border-radius: 2px;
+            box-shadow: 0.533vw 0.533vw 1.333vw 0.267vw rgba(0, 0, 0, 0.1);
+            border-radius: 0.533vw;
         }
 
         &:before {
@@ -76,7 +76,7 @@ export default {
             width: 100%;
             height: 100%;
             background: #ffffff;
-            border-radius: 20upx;
+            border-radius: 2.667vw;
             z-index: 2;
         }
 
@@ -84,7 +84,7 @@ export default {
             // position: relative;
             width: 100%;
             z-index: 3;
-            margin: 10upx;
+            margin: 1.333vw;
             color: $uni-color-subtitle;
             text-align: center;
             font-size: $uni-font-size-base;

pages/index/index.vue

@@ -53,7 +53,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .action .iconfont {
 	width: 52px;
 	position: relative;
@@ -69,7 +69,7 @@ export default {
 }
 
 .more {
-	height: 30px !important;
+	height: 40px !important;
 	font-size: 25px !important;
 }
 </style>

pages/index/modules/home.vue

@@ -14,7 +14,7 @@
 		<view style="width:120px;height: 100vh;background-color: red;">
 		</view>
 
-		<view style="height: calc(62px + env(safe-area-inset-bottom) / 2);" />
+		<view style="height: calc(16.533vw + env(safe-area-inset-bottom) / 2);" />
 	</view>
 </template>
 

pages/index/modules/mine.vue

@@ -19,7 +19,7 @@
 							{{ userMsg.name }}
 						</view>
 						<view class="replenish">
-							<text class="iconfont icon-daka" style="margin-right: 5px;" />
+							<text class="iconfont icon-daka" />
 							{{ userMsg.phonenumber || '未填写' }}
 							<text style="margin: 0 10px;">
 								|
@@ -32,31 +32,29 @@
 		</cu-custom>
 		<view class="nav-box">
 			<navigator class="nav-item" url="#">
-				<text class="iconfont icon-wode-xuanzhong" style="margin-right: 10px;" />
-				<view>
+				<text class="iconfont icon-wode-xuanzhong" />
+				<view class="view">
 					修改登录密码
 				</view>
 				<text class="iconfont icon-wode-xuanzhong" />
 			</navigator>
 			<navigator class="nav-item" url="#">
-				<text class="iconfont icon-wode-xuanzhong" style="margin-right: 10px;" />
-				<view>
+				<text class="iconfont icon-wode-xuanzhong" />
+				<view class="view">
 					修改登录手机号
 				</view>
 				<text class="iconfont icon-wode-xuanzhong" />
 			</navigator>
 			<navigator class="nav-item" url="#">
-				<text class="iconfont icon-wode-xuanzhong" style="margin-right: 10px;" />
-				<view>
+				<text class="iconfont icon-wode-xuanzhong" />
+				<view class="view">
 					绑定微信
 				</view>
 				<text class="iconfont icon-wode-xuanzhong" />
 			</navigator>
 		</view>
-
 		<upload>
 		</upload>
-
 		<u-button :customStyle="butStyle" @click="logOut()">退出登录</u-button>
 	</view>
 </template>
@@ -88,9 +86,6 @@ export default {
 	},
 	created() {
 		this.getUserMsg()
-		console.log(this.posTop)
-		console.log(this.headHeight)
-		console.log(this.customBar)
 	},
 	methods: {
 		// 获取用户信息
@@ -188,6 +183,11 @@ export default {
 				line-height: 20px;
 				font-size: 14px;
 				color: #FFFFFF;
+
+				.iconfont {
+					font-size: 14px;
+					margin-right: 5px;
+				}
 			}
 		}
 	}
@@ -203,18 +203,20 @@ export default {
 	.nav-item {
 		display: flex;
 		align-items: center;
-		width: 355px;
+		width: 100%;
 		height: 45px;
 		padding: 0 10px;
 		box-sizing: border-box;
 		color: #fff;
 		font-size: 14px;
 
-		view {
+		.view {
 			flex: 1;
+			margin-left: 10px;
 		}
 
-		text {
+		.iconfont {
+			font-size: 14px;
 			flex-shrink: 0;
 		}
 	}

pages/index/modules/my-map.vue

@@ -1,6 +1,7 @@
 <template>
 	<view>
-		<map name="map" subkey="UVVBZ-UOGWZ-ZUWXC-TJQMT-TUWLO-IVFTN" layer-style="1" show-location enable-poi></map>
+		<map name="map" style="width: 100%;height: 100vh;" subkey="UVVBZ-UOGWZ-ZUWXC-TJQMT-TUWLO-IVFTN" layer-style="1" show-location
+			enable-poi></map>
 	</view>
 </template>
 
@@ -26,9 +27,4 @@ page {
 	height: 100vh;
 	overflow: hidden;
 }
-
-map {
-	width: 375px;
-	height: 100vh;
-}
 </style>

pages/login/modules/account.vue

@@ -2,11 +2,13 @@
 	<view class="container">
 		<view class="input-box">
 			<view class="icon" />
-			<input type="text" :value="account.account" placeholder="请输入账号" data-name='account' @input="onInput">
+			<input class="input" type="text" :value="account.account" placeholder="请输入账号" data-name='account'
+				@input="onInput">
 		</view>
 		<view class="input-box" style="margin-top:15px;">
 			<view class="icon" />
-			<input type="password" :value="account.password" placeholder="请输入密码" data-name='password' @input="onInput">
+			<input class="input" type="password" :value="account.password" placeholder="请输入密码" data-name='password'
+				@input="onInput">
 		</view>
 		<view class="assist">
 			<label @click="memory = memory == '1' ? '0' : '1'">
@@ -15,7 +17,11 @@
 			<navigator url="#">忘记密码?</navigator>
 		</view>
 		<u-button :customStyle="butSty" :disabled="account.account == '' || account.password == ''" :loading="loading"
-			loadingText='登陆中...' text="确 定" @click="startLogging" />
+			loadingText='登陆中...' @click="startLogging">
+			<text style="font-size: 4.267vw;">
+				确 定
+			</text>
+		</u-button>
 	</view>
 </template>
 
@@ -39,7 +45,6 @@ export default {
 				borderRadius: "1.067vw",
 				opacity: "0.65",
 				borderWidth: 0,
-				fontSize: "4.267vw",
 				fontFamily: " PingFang SC - Regular, PingFang SC",
 				color: " #FFFFFF",
 				margin: "17.867vw auto 0"
@@ -102,6 +107,10 @@ export default {
 	border-radius: 4px;
 	opacity: 0.65;
 	margin: 0 auto 0;
+
+	.input {
+		font-size: 14px;
+	}
 }
 
 .icon {

pages/login/modules/otherLogin.vue

@@ -29,6 +29,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+page {
+    width: 100vw;
+    background: #282C35 !important;
+}
+
 .container {
     width: 275px !important;
     margin: -20px auto 0;

pages/login/modules/phone.vue

@@ -2,17 +2,23 @@
 	<view class="container">
 		<view class="input-box">
 			<view class="icon" />
-			<input type="number" :value="phoneNumber" placeholder="请输入手机号码" data-name='phoneNumber' @input="onInput">
+			<input class="input" type="number" :value="phoneNumber" placeholder="请输入手机号码" data-name='phoneNumber'
+				@input="onInput">
 		</view>
 		<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">
+				<input class="input" type="number" :value="password" placeholder="请输入验证码" data-name='password'
+					@input="onInput">
 			</view>
 			<button class="cu-btn bg-red" :loading='loading' @click="getAuthcode">{{ butText }}</button>
 		</view>
 		<u-button :customStyle="butSty" :disabled="phoneNumber == '' || password == ''" :loading="loading"
-			loadingText='登陆中...' text="确 定" @click="startLogging" />
+			loadingText='登陆中...' @click="startLogging">
+			<text style="font-size: 4.267vw;">
+				确 定
+			</text>
+		</u-button>
 	</view>
 </template>
 
@@ -37,7 +43,6 @@ export default {
 				borderRadius: "1.067vw",
 				opacity: "0.65",
 				borderWidth: 0,
-				fontSize: "4.267vw",
 				fontFamily: " PingFang SC - Regular, PingFang SC",
 				color: " #FFFFFF",
 				margin: "17.867vw auto 0"
@@ -125,6 +130,10 @@ export default {
 	border-radius: 4px;
 	opacity: 0.65;
 	margin: 0 auto 0;
+
+	.input {
+		font-size: 14px;
+	}
 }
 
 .icon {
@@ -157,7 +166,7 @@ input {
 	border-radius: 4px;
 	opacity: 0.65;
 	margin-left: 8px;
-	font-size: 24px;
+	font-size: 12px;
 	font-family: PingFang SC-Regular, PingFang SC;
 	padding: 0;
 }

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"><!--  -->
+            :isBack="true">
             <block slot="backText">返回</block>
             <block slot="content">
-                <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)">
@@ -19,8 +19,7 @@ export default {
     name: "SelectSite",
     data() {
         return {
-            account_list: uni.getStorageSync('account_list'),
-            isLoad: false
+            account_list: uni.getStorageSync('account_list')
         }
     },
     methods: {
@@ -31,7 +30,6 @@ export default {
                 content: `是否确定登录“${site.sitename}”站点的“${site.name}”账号`,
                 success: ({ confirm }) => {
                     if (confirm) {
-                        that.isLoad = true;
                         loginMsg([site], this.$Http);
                     }
                 }

uni.scss

@@ -14,11 +14,15 @@
 @import '@/uni_modules/uview-ui/theme.scss';
 
 page {
-    background-color: #052E5D;
+    background: #052E5D;
     font-family: PingFang SC-Regular, PingFang SC;
     overflow: auto;
 }
 
+body {
+    background: #052E5D;
+}
+
 /* 颜色变量 */
 $my-color-main: #007aff;
 /* 行为相关颜色 */
@@ -46,38 +50,38 @@ $uni-border-color:#c8c7cc;
 /* 尺寸变量 */
 
 /* 文字尺寸 */
-$uni-font-size-sm:12px;
-$uni-font-size-base:14px;
+$uni-font-size-sm:3.200vw;
+$uni-font-size-base:3.733vw;
 $uni-font-size-lg:16;
 
 /* 图片尺寸 */
-$uni-img-size-sm:20px;
-$uni-img-size-base:26px;
-$uni-img-size-lg:40px;
+$uni-img-size-sm:5.333vw;
+$uni-img-size-base:6.933vw;
+$uni-img-size-lg:10.667vw;
 
 /* Border Radius */
-$uni-border-radius-sm: 2px;
-$uni-border-radius-base: 3px;
-$uni-border-radius-lg: 6px;
+$uni-border-radius-sm: 0.533vw;
+$uni-border-radius-base: 0.800vw;
+$uni-border-radius-lg: 1.600vw;
 $uni-border-radius-circle: 50%;
 
 /* 水平间距 */
-$uni-spacing-row-sm: 5px;
-$uni-spacing-row-base: 10px;
-$uni-spacing-row-lg: 15px;
+$uni-spacing-row-sm: 1.333vw;
+$uni-spacing-row-base: 2.667vw;
+$uni-spacing-row-lg: 4.000vw;
 
 /* 垂直间距 */
-$uni-spacing-col-sm: 4px;
-$uni-spacing-col-base: 8px;
-$uni-spacing-col-lg: 12px;
+$uni-spacing-col-sm: 1.067vw;
+$uni-spacing-col-base: 2.133vw;
+$uni-spacing-col-lg: 3.200vw;
 
 /* 透明度 */
 $uni-opacity-disabled: 0.3; // 组件禁用态的透明度
 
 /* 文章场景相关 */
 $uni-color-title: #2C405A; // 文章标题颜色
-$uni-font-size-title:20px;
+$uni-font-size-title:5.333vw;
 $uni-color-subtitle: #555555; // 二级标题颜色
-$uni-font-size-subtitle:26px;
+$uni-font-size-subtitle:6.933vw;
 $uni-color-paragraph: #3F536E; // 文章段落颜色
-$uni-font-size-paragraph:15px;
+$uni-font-size-paragraph:4.000vw;