style(layout): 页面样式修改

BoBoooooo · Sep 11, 2020 · 5641a17 · 5641a17
1 parent 98c6d23
commit 5641a17
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 19 deletions.
diff --git a/src/components/CrudTable/CrudTable.vue b/src/components/CrudTable/CrudTable.vue
@@ -395,7 +395,7 @@ export default class CrudTable extends Vue {
   @Prop({ type: Boolean, default: false }) fullHeight!: boolean;
 
   // 高度minus
-  @Prop({ type: Number, default: 205 }) maxHeightMinus!: number;
+  @Prop({ type: Number, default: 235 }) maxHeightMinus!: number;
 
   // 高度minus
   @Prop(Number) height!: number;

diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue
@@ -13,7 +13,7 @@
     <div class="main-container">
       <!-- TAB标签页 -->
       <!-- <TagsView /> -->
-      <!-- <Breadcrumb></Breadcrumb> -->
+      <Breadcrumb></Breadcrumb>
       <!-- 包含二级路由，可以继续嵌套子页面 -->
       <AppMain />
     </div>
@@ -26,7 +26,7 @@
 <script>
 
 import { AppMain, Header } from '@/views/layout/components/index.ts';
-// import Breadcrumb from '@/components/Breadcrumb/index.vue';
+import Breadcrumb from '@/components/Breadcrumb/index.vue';
 
 export default {
   name: 'Layout',
@@ -37,7 +37,7 @@ export default {
     AppMain,
     // TagsView,
     Header,
-    // Breadcrumb,
+    Breadcrumb,
   },
   computed: {
     sidebar() {
@@ -67,8 +67,8 @@ export default {
   // 主体区域
   .main-container {
     background: #f0f3f7;
-    padding: 10px 50px;
-    height: calc(100% - 100px);
+    padding: 0 50px 10px;
+    height: calc(100% - 80px);
   }
 }
 </style>
diff --git a/src/views/layout/components/AppMain.vue b/src/views/layout/components/AppMain.vue
@@ -48,6 +48,6 @@ export default {
 <style lang="scss" scoped>
 .app-main {
   // padding-top: 16px;
-  height:100%;
+  height:calc(100% - 40px);
 }
 </style>
diff --git a/src/views/system/Users.vue b/src/views/system/Users.vue
@@ -8,12 +8,13 @@
   <div class="page-container">
     <el-row :gutter="15"
             class="full-height">
-      <el-col :span="5"
+      <el-col :span="4"
               class="full-height">
         <div class="full-height"
              style="overflow:auto">
           <el-input placeholder="请输入查询内容"
                     v-model="filterText"
+                    size="small"
                     prefix-icon="el-icon-search"> </el-input>
           <!-- 部门树 -->
           <el-tree v-loading="loading"
@@ -41,7 +42,7 @@
           </el-tree>
         </div>
       </el-col>
-      <el-col :span="19">
+      <el-col :span="20">
         <CrudTable ref="table"
                    table-name="users"
                    :tableTitle="tableTitle"
@@ -153,10 +154,7 @@ export default {
         // 请求部门tree
         funcGetDeptTree: (resolve) => {
           // 此处暂时写死 admin权限的账号可以看到全部部门
-          crud(
-            DML.TREE,
-            'dept',
-          ).then((res) => {
+          crud(DML.TREE, 'dept').then((res) => {
             resolve(res.data);
           });
         },

diff --git a/src/views/system/users.vue b/src/views/system/users.vue
@@ -8,12 +8,13 @@
   <div class="page-container">
     <el-row :gutter="15"
             class="full-height">
-      <el-col :span="5"
+      <el-col :span="4"
               class="full-height">
         <div class="full-height"
              style="overflow:auto">
           <el-input placeholder="请输入查询内容"
                     v-model="filterText"
+                    size="small"
                     prefix-icon="el-icon-search"> </el-input>
           <!-- 部门树 -->
           <el-tree v-loading="loading"
@@ -41,7 +42,7 @@
           </el-tree>
         </div>
       </el-col>
-      <el-col :span="19">
+      <el-col :span="20">
         <CrudTable ref="table"
                    table-name="users"
                    :tableTitle="tableTitle"
@@ -153,10 +154,7 @@ export default {
         // 请求部门tree
         funcGetDeptTree: (resolve) => {
           // 此处暂时写死 admin权限的账号可以看到全部部门
-          crud(
-            DML.TREE,
-            'dept',
-          ).then((res) => {
+          crud(DML.TREE, 'dept').then((res) => {
             resolve(res.data);
           });
         },