获取状态栏高度，元素上边距+状态栏高度

pages/index/details.vue

@@ -4,7 +4,7 @@
     <!-- <view class="title">STM32智能AI家居系统</view> -->
     <u-navbar class="navbar" title="阈值设定" fixed @leftClick="handleBack">
     </u-navbar>
-    <view class="view-data">
+    <view class="view-data" :style="{ marginTop: systemBarHeight + 45 + 'px' }">
       <u--input
         type="number"
         placeholder="请输入内容"
@@ -32,9 +32,18 @@ export default {
       value: 30,
       name: "",
       deviceId: "",
+      systemBarHeight: 0, // 状态栏高度
     };
   },
   methods: {
+    getSysteminfo() {
+      uni.getSystemInfo({
+        success: (res) => {
+          this.systemBarHeight = res.statusBarHeight;
+          console.log("systemBarHeight", this.systemBarHeight);
+        },
+      });
+    },
     handleBack() {
       console.log("返回");
       uni.navigateBack({
@@ -70,6 +79,7 @@ export default {
     this.name = options.name; // 参数名称
     this.value = options.value; // 阈值
     this.deviceId = options.deviceId; // 设备id
+    this.getSysteminfo();
   },
 };
 </script>

pages/index/index.vue

@@ -4,7 +4,7 @@
     <!-- <view class="title">STM32智能AI家居系统</view> -->
     <u-navbar class="navbar" title="STM32智能AI家居系统" fixed> </u-navbar>
     <!-- 显示数据部分：温度、湿度、Co2、Tvoc、烟雾浓度、光照强度、是否有人、声光报警状态 -->
-    <view class="view-data">
+    <view class="view-data" :style="{ marginTop: systemBarHeight + 45 + 'px' }">
       <!-- 温度 -->
       <view class="view-data-item">
         <view class="data-item-img-box">
@@ -147,8 +147,8 @@
         <view class="data-item-img-box">
           <image class="data-item-img" src="./jhq.png" mode="widthFix"></image>
         </view>
-        <view class="data-item-text"
+        <view class="data-item-text">
-          >空气净化器
+          <view class="item-text-title">空气净化器</view>
           <view>{{ deviceInfo.airCleaner == 0 ? "OFF" : "ON" }}</view>
         </view>
       </view>
@@ -201,6 +201,7 @@ import {
 export default {
   data() {
     return {
+      systemBarHeight: 0, // 状态栏高度
       value: 30,
       deviceId: "", // 设备id
       // 温度、湿度、Co2、Tvoc、烟雾浓度、光照强度、是否有人、声光报警状态
@@ -211,6 +212,14 @@ export default {
   },
 
   methods: {
+    getSysteminfo() {
+      uni.getSystemInfo({
+        success: (res) => {
+          this.systemBarHeight = res.statusBarHeight;
+          console.log("systemBarHeight", this.systemBarHeight);
+        },
+      });
+    },
     // 跳转到阈值设定页面
     handleSettingThreshold(_name, _valueName) {
       let value = this.deviceInfo[_valueName];
@@ -393,13 +402,14 @@ export default {
         };
         console.log("this.deviceInfo", this.deviceInfo);
         // 定时请求接口，每次结束后等待10秒再请求
-        this.timer = setTimeout(() => {
+        // this.timer = setTimeout(() => {
-          this.getAttributes(this.deviceId); // 根据设备id查找设备信息
+        //   this.getAttributes(this.deviceId); // 根据设备id查找设备信息
-        }, 15000);
+        // }, 15000);
       }
     },
   },
   created() {
+    this.getSysteminfo();
     this.handleLogin();
   },
   onShow() {
@@ -439,8 +449,6 @@ export default {
 .control {
   margin-top: 16px;
   display: flex;
-  grid-template-columns: repeat(2, 1fr); // 明确两列布局
-  gap: 14px; // 统一间距
   flex-wrap: wrap;
   justify-content: space-between;
   .view-data-item {
@@ -452,6 +460,7 @@ export default {
     background: #fff;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     border-radius: 10px;
+    margin: 6px 0;
 
     .data-item-img-box {
       width: 38px;
@@ -471,6 +480,14 @@ export default {
       flex: 1;
       color: #999;
       font-size: 18px;
+      .item-text-title {
+        // 多行文本溢出显示省略号
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1; // 限制行数为1
+        -webkit-box-orient: vertical;
+      }
     }
   }
 }
@@ -503,7 +520,7 @@ export default {
     }
     .data-item-text {
       color: #3d7ccd;
-      font-size: 28px;
+      font-size: 20px;
       span {
         font-size: 16px;
         font-weight: normal;
@@ -518,10 +535,8 @@ export default {
   background: #fcfcfc;
 }
 .title {
-  line-height: 40px;
+  height: 44px;
-  font-size: 18px;
+  background-color: rgb(255, 255, 255);
-  text-align: center;
-  background: #fff;
 }
 </style>
 <style>

unpackage/dist/dev/app-plus/app-config-service.js

@@ -1,8 +1,8 @@
 
 var isReady=false;var onReadyCallbacks=[];
 var isServiceReady=false;var onServiceReadyCallbacks=[];
-var __uniConfig = {"pages":["pages/index/index","pages/login/login","pages/healthService/healthService","pages/healthService/healthService2","pages/healthService/healthService3","pages/healthService/healthService4","pages/healthService/healthService5","pages/patientAdd/patientAdd"],"window":{"navigationBarTextStyle":"black","navigationBarTitleText":"uView","navigationBarBackgroundColor":"#FFFFFF","backgroundColor":"#FFFFFF","navigationStyle":"custom"},"darkmode":false,"nvueCompiler":"uni-app","nvueStyleCompiler":"weex","renderer":"auto","splashscreen":{"alwaysShowBeforeRender":true,"autoclose":false},"appname":"老年健康","compilerVersion":"4.29","entryPagePath":"pages/index/index","networkTimeout":{"request":60000,"connectSocket":60000,"uploadFile":60000,"downloadFile":60000}};
+var __uniConfig = {"pages":["pages/index/index","pages/login/login","pages/index/details"],"window":{"navigationBarTextStyle":"black","navigationBarTitleText":"uView","navigationBarBackgroundColor":"#FFFFFF","backgroundColor":"#FFFFFF","navigationStyle":"custom"},"darkmode":false,"nvueCompiler":"uni-app","nvueStyleCompiler":"weex","renderer":"auto","splashscreen":{"alwaysShowBeforeRender":true,"autoclose":false},"appname":"小优智能家居","compilerVersion":"4.66","entryPagePath":"pages/index/index","networkTimeout":{"request":60000,"connectSocket":60000,"uploadFile":60000,"downloadFile":60000}};
-var __uniRoutes = [{"path":"/pages/index/index","meta":{"isQuit":true},"window":{}},{"path":"/pages/login/login","meta":{},"window":{}},{"path":"/pages/healthService/healthService","meta":{},"window":{}},{"path":"/pages/healthService/healthService2","meta":{},"window":{}},{"path":"/pages/healthService/healthService3","meta":{},"window":{}},{"path":"/pages/healthService/healthService4","meta":{},"window":{}},{"path":"/pages/healthService/healthService5","meta":{},"window":{}},{"path":"/pages/patientAdd/patientAdd","meta":{},"window":{}}];
+var __uniRoutes = [{"path":"/pages/index/index","meta":{"isQuit":true},"window":{}},{"path":"/pages/login/login","meta":{},"window":{}},{"path":"/pages/index/details","meta":{},"window":{}}];
 __uniConfig.onReady=function(callback){if(__uniConfig.ready){callback()}else{onReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"ready",{get:function(){return isReady},set:function(val){isReady=val;if(!isReady){return}const callbacks=onReadyCallbacks.slice(0);onReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});
 __uniConfig.onServiceReady=function(callback){if(__uniConfig.serviceReady){callback()}else{onServiceReadyCallbacks.push(callback)}};Object.defineProperty(__uniConfig,"serviceReady",{get:function(){return isServiceReady},set:function(val){isServiceReady=val;if(!isServiceReady){return}const callbacks=onServiceReadyCallbacks.slice(0);onServiceReadyCallbacks.length=0;callbacks.forEach(function(callback){callback()})}});
 service.register("uni-app-config",{create(a,b,c){if(!__uniConfig.viewport){var d=b.weex.config.env.scale,e=b.weex.config.env.deviceWidth,f=Math.ceil(e/d);Object.assign(__uniConfig,{viewport:f,defaultFontSize:Math.round(f/20)})}return{instance:{__uniConfig:__uniConfig,__uniRoutes:__uniRoutes,global:void 0,window:void 0,document:void 0,frames:void 0,self:void 0,location:void 0,navigator:void 0,localStorage:void 0,history:void 0,Caches:void 0,screen:void 0,alert:void 0,confirm:void 0,prompt:void 0,fetch:void 0,XMLHttpRequest:void 0,WebSocket:void 0,webkit:void 0,print:void 0}}}});

unpackage/dist/dev/app-plus/manifest.json

@@ -1 +1 @@
-{"@platforms":["android","iPhone","iPad"],"id":"__UNI__FBDBEC9","name":"老年健康","version":{"name":"1.0.0.2","code":1},"description":"多平台快速开发的UI框架","launch_path":"__uniappview.html","developer":{"name":"","email":"","url":""},"permissions":{"Webview-x5":{},"UniNView":{"description":"UniNView原生渲染"}},"plus":{"useragent":{"value":"uni-app","concatenate":true},"splashscreen":{"target":"id:1","autoclose":true,"waiting":true,"delay":0},"popGesture":"close","launchwebview":{"render":"always","id":"1","kernel":"WKWebview"},"statusbar":{"immersed":"supportedDevice","style":"dark","background":"#FFFFFF"},"optimization":{"subPackages":true},"safearea":{"bottom":{"offset":"none"}},"usingComponents":true,"nvueCompiler":"uni-app","compilerVersion":3,"distribute":{"icons":{"android":{"hdpi":"unpackage/res/icons/72x72.png","xhdpi":"unpackage/res/icons/96x96.png","xxhdpi":"unpackage/res/icons/144x144.png","xxxhdpi":"unpackage/res/icons/192x192.png"},"ios":{"appstore":"unpackage/res/icons/1024x1024.png","ipad":{"app":"unpackage/res/icons/76x76.png","app@2x":"unpackage/res/icons/152x152.png","notification":"unpackage/res/icons/20x20.png","notification@2x":"unpackage/res/icons/40x40.png","proapp@2x":"unpackage/res/icons/167x167.png","settings":"unpackage/res/icons/29x29.png","settings@2x":"unpackage/res/icons/58x58.png","spotlight":"unpackage/res/icons/40x40.png","spotlight@2x":"unpackage/res/icons/80x80.png"},"iphone":{"app@2x":"unpackage/res/icons/120x120.png","app@3x":"unpackage/res/icons/180x180.png","notification@2x":"unpackage/res/icons/40x40.png","notification@3x":"unpackage/res/icons/60x60.png","settings@2x":"unpackage/res/icons/58x58.png","settings@3x":"unpackage/res/icons/87x87.png","spotlight@2x":"unpackage/res/icons/80x80.png","spotlight@3x":"unpackage/res/icons/120x120.png"}}},"google":{"permissions":["<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>","<uses-permission android:name=\"android.permission.VIBRATE\"/>","<uses-permission android:name=\"android.permission.READ_LOGS\"/>","<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>","<uses-feature android:name=\"android.hardware.camera.autofocus\"/>","<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>","<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.CAMERA\"/>","<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>","<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>","<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>","<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>","<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>","<uses-permission android:name=\"android.permission.CALL_PHONE\"/>","<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>","<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>","<uses-feature android:name=\"android.hardware.camera\"/>","<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>","<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"],"abiFilters":["armeabi-v7a","arm64-v8a"]},"apple":{"idfa":false,"dSYMs":false},"plugins":{"ad":{},"audio":{"mp3":{"description":"Android平台录音支持MP3格式文件"}}}},"allowsInlineMediaPlayback":true,"uni-app":{"compilerVersion":"4.29","control":"uni-v3","nvueCompiler":"uni-app","renderer":"auto","nvue":{"flex-direction":"column"},"nvueLaunchMode":"normal"},"launch_path":"__uniappview.html"}}
+{"@platforms":["android","iPhone","iPad"],"id":"__UNI__FBDBEC9","name":"小优智能家居","version":{"name":"1.0.0.2","code":1},"description":"多平台快速开发的UI框架","launch_path":"__uniappview.html","developer":{"name":"","email":"","url":""},"permissions":{"Webview-x5":{},"UniNView":{"description":"UniNView原生渲染"}},"plus":{"useragent":{"value":"uni-app","concatenate":true},"splashscreen":{"target":"id:1","autoclose":true,"waiting":true,"delay":0},"popGesture":"close","launchwebview":{"render":"always","id":"1","kernel":"WKWebview"},"statusbar":{"immersed":"supportedDevice","style":"dark","background":"#FFFFFF"},"optimization":{"subPackages":true},"safearea":{"bottom":{"offset":"none"}},"usingComponents":true,"nvueCompiler":"uni-app","compilerVersion":3,"distribute":{"icons":{"android":{"hdpi":"unpackage/res/icons/72x72.png","xhdpi":"unpackage/res/icons/96x96.png","xxhdpi":"unpackage/res/icons/144x144.png","xxxhdpi":"unpackage/res/icons/192x192.png"},"ios":{"appstore":"unpackage/res/icons/1024x1024.png","ipad":{"app":"unpackage/res/icons/76x76.png","app@2x":"unpackage/res/icons/152x152.png","notification":"unpackage/res/icons/20x20.png","notification@2x":"unpackage/res/icons/40x40.png","proapp@2x":"unpackage/res/icons/167x167.png","settings":"unpackage/res/icons/29x29.png","settings@2x":"unpackage/res/icons/58x58.png","spotlight":"unpackage/res/icons/40x40.png","spotlight@2x":"unpackage/res/icons/80x80.png"},"iphone":{"app@2x":"unpackage/res/icons/120x120.png","app@3x":"unpackage/res/icons/180x180.png","notification@2x":"unpackage/res/icons/40x40.png","notification@3x":"unpackage/res/icons/60x60.png","settings@2x":"unpackage/res/icons/58x58.png","settings@3x":"unpackage/res/icons/87x87.png","spotlight@2x":"unpackage/res/icons/80x80.png","spotlight@3x":"unpackage/res/icons/120x120.png"}}},"google":{"permissions":["<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>","<uses-permission android:name=\"android.permission.VIBRATE\"/>","<uses-permission android:name=\"android.permission.READ_LOGS\"/>","<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>","<uses-feature android:name=\"android.hardware.camera.autofocus\"/>","<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>","<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.CAMERA\"/>","<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>","<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>","<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>","<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>","<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>","<uses-permission android:name=\"android.permission.CALL_PHONE\"/>","<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>","<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>","<uses-feature android:name=\"android.hardware.camera\"/>","<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>","<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"],"abiFilters":["armeabi-v7a","arm64-v8a"]},"apple":{"idfa":false,"dSYMs":false},"plugins":{"ad":{},"audio":{"mp3":{"description":"Android平台录音支持MP3格式文件"}}}},"allowsInlineMediaPlayback":true,"uni-app":{"compilerVersion":"4.66","control":"uni-v3","nvueCompiler":"uni-app","renderer":"auto","nvue":{"flex-direction":"column"},"nvueLaunchMode":"normal"},"launch_path":"__uniappview.html"}}