From 34936349532fcb8ce079b35e4e0e85d3c30f3e6c Mon Sep 17 00:00:00 2001
From: tk <szdot@live.com>
Date: Thu, 8 Aug 2024 17:16:12 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E7=B1=BB=20=20=E5=9E=8B=E3=80=91?=
 =?UTF-8?q?=EF=BC=9Afix=201=E5=88=86=E7=B1=BB=E6=A8=A1=E5=9D=97=20?=
 =?UTF-8?q?=E6=89=8B=E6=9C=BA=E5=88=86=E8=BE=A8=E7=8E=87=E8=87=AA=E9=80=82?=
 =?UTF-8?q?=E5=BA=94=202=E8=A1=A8=E5=8D=95=E6=89=8B=E6=9C=BA=E5=88=86?=
 =?UTF-8?q?=E8=BE=A8=E7=8E=87=E8=87=AA=E9=80=82=E5=BA=94=20=E3=80=90?=
 =?UTF-8?q?=E5=8E=9F=20=20=E5=9B=A0=E3=80=91=EF=BC=9A=20=E3=80=90=E8=BF=87?=
 =?UTF-8?q?=20=20=E7=A8=8B=E3=80=91=EF=BC=9A=20=E3=80=90=E5=BD=B1=20=20?=
 =?UTF-8?q?=E5=93=8D=E3=80=91=EF=BC=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/modules/app.js                            | 1 +
 src/views/layout/components/main/category/index.vue | 6 +++---
 src/views/layout/components/main/planes/index.vue   | 8 +-------
 src/views/layout/components/menubar.vue             | 2 +-
 4 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index f871e12..eb3e6e6 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -2,6 +2,7 @@ const state = {
   mqttState: false, // mqtt连接状态
   isCollapse: localStorage.getItem('isCollapse') ? !!+localStorage.getItem('isCollapse') : true, // 侧边导航栏 显隐
   isMobile: null, // 是否是pc端 true电脑端 false为移动端
+  isWideScreen: window.innerWidth < 480, // 屏幕宽度是否小于480
   defaultLngLat: null, // 地图默认经纬度
   defaultZoom: null, // 地图默认缩放
   orderSerch: null// 订单列表页搜索条件
diff --git a/src/views/layout/components/main/category/index.vue b/src/views/layout/components/main/category/index.vue
index b0bbefc..0f4bcff 100644
--- a/src/views/layout/components/main/category/index.vue
+++ b/src/views/layout/components/main/category/index.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <el-row class="m-t-0" :gutter="10">
       <!-- 分类树窗口 -->
-      <el-col :span="10">
+      <el-col :span="10" :xs="24" class="m-b-10">
         <el-container>
           <el-header height="42px" class="l-h-42 p-l-10 p-r-10 border border-b-n">
             <div class="l">
@@ -43,7 +43,7 @@
         </el-container>
       </el-col>
       <!-- 分类操作窗口 -->
-      <el-col v-if="winIsShow" :span="14">
+      <el-col v-if="winIsShow" :span="14" :xs="24" class="m-b-20">
         <el-container>
           <el-header height="42px" class="l-h-42 p-l-10 p-r-10 border border-b-n">
             <div class="l">
@@ -57,7 +57,7 @@
             </div>
           </el-header>
           <el-main class="border p-20">
-            <el-form ref="form" :model="form" label-width="120px">
+            <el-form ref="form" :model="form" label-width="120px" :label-position="this.$store.state.app.isWideScreen?'top':'right'">
               <el-form-item label="分类名称">
                 <el-input v-model="form.name" placeholder="分类的名称" />
               </el-form-item>
diff --git a/src/views/layout/components/main/planes/index.vue b/src/views/layout/components/main/planes/index.vue
index 1f42be2..559d726 100644
--- a/src/views/layout/components/main/planes/index.vue
+++ b/src/views/layout/components/main/planes/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="h-100">
-    <map-box ref="mapbox" :enableFollow="true" :enblueScale="!widthLt480">
+    <map-box ref="mapbox" :enableFollow="true" :enblueScale="!$store.state.app.isWideScreen">
       <template #content>
         <BatteryStatus :plane="plane" />
         <PlaneStatus :plane="plane" />
@@ -54,12 +54,6 @@ export default {
      */
     isCollapse () {
       return this.$store.state.app.isCollapse
-    },
-    /**
-     * @description: 屏幕宽度是否小于480
-     */
-    widthLt480 () {
-      return window.innerWidth < 480
     }
   },
   methods: {
diff --git a/src/views/layout/components/menubar.vue b/src/views/layout/components/menubar.vue
index f1a7692..ff9fca0 100644
--- a/src/views/layout/components/menubar.vue
+++ b/src/views/layout/components/menubar.vue
@@ -104,7 +104,7 @@ export default {
      */
     lt480Collapse () {
       // 判断屏幕宽度是否小于 480 像素
-      if (window.innerWidth < 480) {
+      if (this.$store.state.app.isWideScreen) {
         setTimeout(() => {
           this.$store.commit('app/setCollapse')
         }, 10)