货位管理

src/views/Home.less

@@ -0,0 +1,45 @@
+.common-layout{
+  width: 100%;
+  background: #fff;
+  &>.toolbar{
+    background: #fff;
+    border-radius: 4px;
+    padding: 16px;
+    display: flex;
+    align-items: flex-start;
+    border-bottom: 1px solid #f0f0f0;
+    flex-shrink: 0;
+  }
+  &>.query-form{
+    flex-shrink: 0;
+    padding: 14px 0 0 16px;
+    text-align: left;
+    .el-form-item {
+      margin-bottom: 14px;
+    }
+  }
+  &>.yv-table{
+    margin:0 10px 10px 10px;
+    .ag-root-wrapper.ag-layout-normal{
+      border:none;
+    }
+    .ag-header{
+      background: #f8f8f8;
+      border-bottom-color: #dfe6ec;
+    }
+    &.ag-theme-alpine .ag-header-row{
+      color:#444;
+      .ag-header-cell-text{
+        font-size: 14px;
+        font-weight: bold;
+      }
+    }
+    .ag-row{
+      color:#606266;
+      border-color:#ebeef5;
+      .ag-cell{
+        font-weight: 300;
+      }
+    }
+  }
+}

src/views/HomeView.vue

@@ -33,6 +33,7 @@
   import {useRoute} from "vue-router";
   import Sidebar from './Sidebar.vue'
   import Header from './Header.vue'
+  import './Home.less'
   const route = useRoute()
   console.log(route.meta?.title)
   const collapsed = ref(false)

src/views/device/locations.vue

@@ -104,19 +104,19 @@ function reload() {
 </script>
 
 <template>
-    <div class="dashboard flex-column-container">
+    <div class="common-layout dashboard flex-column-container">
-        <div class="tools flex-item-fixed">
+        <div class="flex-item-fixed toolbar">
-            <ElButton :icon="Search" :loading="state.loading" @click="reload">查询</ElButton>
+            <ElButton :icon="Search" :loading="state.loading" @click="reload" type="warning" plain>查询</ElButton>
         </div>
         <DataForm
             class="query-form flex-item-fixed"
-            style="width: 500px;"
             :data="state.queryData"
             :formFields="data.formFields"
             :columnCount="2"
             layout="bothFixed"
             labelWidth="85px"
             inputWidth="200px"
+            :inline="true"
         />
         <AgGridVue
             ref="gridRef"
@@ -133,10 +133,6 @@ function reload() {
     height: 100%;
 }
 
-.tools {
-    margin-bottom: 8px;
-}
-
 .query-form {
     height: unset;
 }