From f18e46ba22e5bc2051f3a33f74440d49f3e75552 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Thu, 17 Mar 2022 19:35:56 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DataForm/index.vue             | 33 ++++++++++++++-----
 .../components/NavHeader/AccountDropdown.vue  |  3 ++
 src/layout/components/NavLeft/index.vue       |  6 ++--
 3 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/components/DataForm/index.vue b/src/components/DataForm/index.vue
index 8fe87d893..9852e84bc 100644
--- a/src/components/DataForm/index.vue
+++ b/src/components/DataForm/index.vue
@@ -1,9 +1,10 @@
 <template>
   <ElFormRender
     ref="form"
+    :class="mobile? 'mobile' : ''"
     :content="fields"
     :form="basicForm"
-    label-position="right"
+    :label-position="labelPosition"
     label-width="20%"
     v-bind="$attrs"
     v-on="$listeners"
@@ -68,6 +69,14 @@ export default {
       basicForm: this.form
     }
   },
+  computed: {
+    mobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    labelPosition() {
+      return this.mobile ? 'top' : 'left'
+    }
+  },
   methods: {
     // 获取表单数据
     submitForm(formName, addContinue) {
@@ -99,27 +108,35 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .el-form  ::v-deep  .el-form-item {
+  .el-form ::v-deep .el-form-item {
     margin-bottom: 12px;
   }
 
-  .el-form  ::v-deep  .el-form-item__content {
+  .el-form ::v-deep .el-form-item__content {
     width: 75%;
   }
 
-  .el-form  ::v-deep  .el-form-item__label {
+  .mobile.el-form ::v-deep .el-form-item__content {
+    width: 100%;
+  }
+
+  .el-form ::v-deep .el-form-item__label {
     padding: 0 30px 0 0;
   }
 
-  .el-form  ::v-deep  .el-form-item__error {
+  .el-form ::v-deep .el-form-item__error {
      position: inherit;
   }
 
-  .el-form  ::v-deep  .form-group-header {
+  .el-form ::v-deep .form-group-header {
     margin-left: 50px;
   }
 
-  .el-form  ::v-deep  .help-block {
+  .el-form.mobile ::v-deep .form-group-header {
+    margin-left: 0;
+  }
+
+  .el-form ::v-deep .help-block {
     display: block;
     margin-top: 5px;
     margin-bottom: 10px;
@@ -127,7 +144,7 @@ export default {
     font-size: 12px;
     line-height: 18px;
   }
-  .el-form  ::v-deep  .help-block a {
+  .el-form ::v-deep .help-block a {
     color: #1c84c6;
   }
   .form-buttons {
diff --git a/src/layout/components/NavHeader/AccountDropdown.vue b/src/layout/components/NavHeader/AccountDropdown.vue
index 420841d2c..10a85b239 100644
--- a/src/layout/components/NavHeader/AccountDropdown.vue
+++ b/src/layout/components/NavHeader/AccountDropdown.vue
@@ -65,4 +65,7 @@ export default {
     margin-right: 5px;
     vertical-align: middle;
   }
+  .mobile .header-avatar {
+    display: none;
+  }
 </style>
diff --git a/src/layout/components/NavLeft/index.vue b/src/layout/components/NavLeft/index.vue
index f804b6949..ba4042cb9 100644
--- a/src/layout/components/NavLeft/index.vue
+++ b/src/layout/components/NavLeft/index.vue
@@ -4,13 +4,13 @@
       <div class="nav-logo">
         <Logo v-if="showLogo" :collapse="isCollapse" />
       </div>
-      <div class="nav-title" :class="{'collapsed': isCollapse}">
-        {{ isTitle }}
-      </div>
       <div class="active-mobile">
         <ViewSwitcher />
         <Organization class="organization" />
       </div>
+      <div class="nav-title" :class="{'collapsed': isCollapse}">
+        {{ isTitle }}
+      </div>
     </div>
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu