【类 型】：factor 飞机控制模块 ui

【原  因】：
【过  程】：1.操作控件放在整下方2.适配手机竖屏 自适应
【影  响】：

package.json

@@ -1,6 +1,6 @@
 {
   "name": "food",
-  "version": "0.1.0",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "start": "npm run serve",

src/components/As.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="flex column mr mac" style="height: 100%;" id="mainBox">
+    <div class="content" :class="isContainerVisible ? 'slide-in' : ''">
+      <p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
+      <p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
+      <p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
+      <p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
+      <p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
+      <p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
+      <p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
+      <p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
+      <p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
+      <p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
+      <p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
+      <p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
+      <p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
+      <p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
+      <p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
+      <p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
+      <p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
+      <p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
+      <p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
+      <p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
+      <p>这里是隐藏的容器内容，可以根据需要添加更多内容。</p>
+    </div>
+    <div class="fb flex gap10 m-b-10" id="bar">
+      <div class="flex1 item" style="height: 100%; background-color: aqua;" @click="showContainer">1</div>
+      <div class="flex1 item" style="height: 100%; background-color: brown;" @click="showContainer">2</div>
+      <div class="flex1 item" style="height: 100%; background-color: blueviolet;" @click="showContainer">3</div>
+      <div class="flex1 item" style="height: 100%; background-color: antiquewhite;" @click="showContainer">4</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'As',
+  data () {
+    return {
+      isContainerVisible: false
+    }
+  },
+  methods: {
+    showContainer () {
+      this.isContainerVisible = true
+      console.log('hello')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/styles/theme.scss";
+
+#bar {
+  z-index: 90;
+  position: relative;
+  width: 100%;
+  max-width: 480px;
+  height: 100px;
+  padding: 0 10px;
+}
+
+@media (max-width: 480px) {
+  #bar {
+    height: calc(25vw - 20px);
+    /* 调整后的高度 */
+  }
+
+  #mainBox {
+    width: 100vw;
+  }
+}
+
+.gap10 {
+  gap: 10px;
+}
+
+.content {
+  z-index: 90;
+  position: relative;
+  width: 100%;
+  max-width: 480px;
+  background-color: aliceblue;
+  padding: 0 10px;
+  top: 1500px;
+  opacity: 0;
+  transition: top 0.5s ease, opacity 1s ease;
+}
+
+.slide-in {
+  top: -10px;
+  opacity: 1;
+}
+</style>

src/components/Breadcrumb.vue

@@ -74,4 +74,15 @@ export default {
   line-height: 50px;
   cursor: text;
 }
+
+.app-breadcrumb {
+  display: block !important;
+}
+
+/* 当屏幕宽度小于等于480px时 */
+@media (max-width: 480px) {
+  .app-breadcrumb {
+    display: none !important;
+  }
+}
 </style>

src/components/ControllerTabs.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- 弹出框 -->
-    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="320px" top="30vh">
       <!-- 起飞设置弹出框 -->
       <template v-if="dialogItem == 'takeoffBox'">
         <el-slider class="w-100" v-model="takeoffValue" :show-tooltip="false" show-input :min="1" :max="100">
@@ -282,8 +282,7 @@ export default {
       tabIsOpen: false, // 判断tab 是否弹出
       questForm: { // 送餐任务表单
         id: ''
-      },
-      a: null // 当前飞机是否被锁定
+      }
     }
   },
   props: {

src/components/MapBox.vue

@@ -154,7 +154,7 @@ export default {
         projection: 'globe'
       })
       // 地图控件
-      this.map.addControl(new mapboxgl.ScaleControl(), 'bottom-right')
+      this.map.addControl(new mapboxgl.ScaleControl(), 'top-right')
       this.map.addControl(new mapboxgl.NavigationControl(), 'bottom-left')
     },
     /**

src/router/index.js

@@ -16,15 +16,6 @@ const routes = [
       hidden: true
     }
   },
-  {
-    path: '/404',
-    component: Page404,
-    meta: {
-      title: '404',
-      roles: ['admin', 'editor'],
-      hidden: true
-    }
-  },
   {
     path: '/',
     redirect: '/home/index',
@@ -442,13 +433,22 @@ const routes = [
     ]
   },
   {
-    path: '*',
-    redirect: '/404',
+    path: '/404',
+    component: Page404,
     meta: {
       title: '404',
       roles: ['admin', 'editor'],
       hidden: true
     }
+  },
+  {
+    path: '*',
+    redirect: '/',
+    meta: {
+      title: '主页',
+      roles: ['admin', 'editor'],
+      hidden: true
+    }
   }
 ]
 

src/styles/index.scss

@@ -217,6 +217,23 @@ label {
   }
 }
 
+/* 当屏幕宽度小于等于420px时 */
+@media (max-width: 420px) {
+  .el-dialog {
+    width: 90% !important; /* 根据需要调整宽度 */
+    max-width: 360px !important; /* 根据需要设置最大宽度 */
+  }
+  
+  .el-message-box {
+    width: 90% !important; /* 调整宽度以适应小屏幕 */
+    max-width: 360px !important; /* 根据需要设置最大宽度 */
+  }
+}
+/*隐藏声音api 的弹出框*/
+.rvNotification {
+  display: none;
+}
+
 .flex {
   display: flex;
 }

src/views/layout/components/BlogBox.vue

@@ -85,6 +85,13 @@ export default {
   width: calc(100% - 60px);
 }
 
+/* 竖屏模式样式 */
+@media (orientation: portrait) {
+  .min {
+    width: calc(100% - 0px);
+  }
+}
+
 .logDot {
   width: 14px;
   height: 14px;

src/views/layout/components/headbar.vue

@@ -32,7 +32,8 @@
       <el-button :type="pendingCount + processingCount + shippedCount + requestedCount !== 0 ? 'primary' : ''"
         @click="drawer = true" size="small" :icon="orderIcon" circle></el-button>
     </el-badge>
-    <el-drawer :visible.sync="drawer" size="60%" :append-to-body="true" :modal-append-to-body="false">
+    <el-drawer :visible.sync="drawer" :size="drawerSize" :append-to-body="true" :modal-append-to-body="false"
+      :direction="drawerDirection">
       <template slot="title">
         <div>
           <i class="l f-s-18 iconfont icon-jinjidingdan m-r-5 l-h-18"></i>
@@ -110,6 +111,18 @@ export default {
     SelectionShopId
   },
   computed: {
+    /**
+     * @description: 任务抽屉根据分辨率自适应
+     */
+    drawerDirection () {
+      return window.innerWidth < 480 ? 'btt' : 'rtl'
+    },
+    /**
+     * @description: 任务抽屉根据分辨率自适应
+     */
+    drawerSize () {
+      return window.innerWidth < 480 ? '90%' : '60%' // 根据需要设置不同的宽度
+    },
     /**
      * @description: 侧边栏显隐
      */
@@ -272,7 +285,7 @@ export default {
 @import "@/styles/theme.scss";
 
 #menuTabB:hover {
-  background-color: $border4-color;
+  background-color: $white-color;
   cursor: pointer;
 }
 

src/views/layout/components/main/planes/index.vue

@@ -2,8 +2,9 @@
   <div class="h-100">
     <map-box ref="mapbox" :key="mapBoxKey">
       <template #content>
-        <PlaneStatus :plane="plane" />
-        <ControllerTabs :plane="plane" @mapXOffset="mapXOffset" @makeRoute="makeRoute" @clearRoute="clearRoute" />
+        <!-- <PlaneStatus :plane="plane" /> -->
+        <As />
+        <!-- <ControllerTabs :plane="plane" @mapXOffset="mapXOffset" @makeRoute="makeRoute" @clearRoute="clearRoute" /> -->
       </template>
     </map-box>
   </div>
@@ -12,8 +13,9 @@
 <script>
 import mqtt from '@/utils/mqtt'
 import MapBox from '@/components/MapBox'
-import ControllerTabs from '@/components/ControllerTabs'
-import PlaneStatus from '@/components/PlaneStatus'
+// import ControllerTabs from '@/components/ControllerTabs'
+import As from '@/components/As'
+// import PlaneStatus from '@/components/PlaneStatus'
 
 export default {
   name: 'Planes',
@@ -26,8 +28,9 @@ export default {
   },
   components: {
     MapBox,
-    ControllerTabs,
-    PlaneStatus
+    As
+    // ControllerTabs,
+    // PlaneStatus
   },
   computed: {
     plane () {

src/views/layout/index.vue

@@ -156,6 +156,13 @@ export default {
   width: 60px !important;
 }
 
+/* 竖屏模式样式 */
+@media (orientation: portrait) {
+  .menuW {
+    width: 0px !important;
+  }
+}
+
 .menuS {
   width: 210px !important;
 }

src/views/login.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="login-container flex column mc">
-    <div class="title-container fb l-h-32">
+    <div class="title-container fb l-h-32 flex mac">
       <img src="@/assets/logo.png" class="m-r-15">
       <font class="f1 f-s-22">飞行魔方</font>
       <font class="f2 f-s-10 m-l-5" style="vertical-align :top">v.1.0.1</font>
@@ -129,7 +129,7 @@ h3 {
 
   .login-form {
     position: relative;
-    max-width: 85vw;
+    max-width: 90vw;
     width: 500px;
     margin: 0 auto;
     overflow: hidden;