12/30

src/App.vue

@@ -1,15 +1,13 @@
 <template>
   <div id="app">
-    <div class="centerContent">
+    <div class="app-content">
       <sidebar v-if="showSidebar"></sidebar>
-      <div id="right">
+      <div class="app-content-main flex1">
         <topbar v-if="showSidebar"></topbar>
           <tabbar v-if="showSidebar" :clickIndex='nowindex' :dataList='editableTabs' @itemclick='itemclick' @remove="remove"></tabbar>
-          <div class="content">
-            <keep-alive :include="include">
-              <router-view id="main" />
-            </keep-alive>
-          </div>
+          <keep-alive :include="include">
+            <router-view class="app-content-main-view flex1" />
+          </keep-alive>
       </div>
     </div>
   </div>

src/app.less

@@ -3,80 +3,93 @@ html, body {
     margin: 0;
     width:100%;
     height:100%;
+    font-size: 14px;
+    color: #232323;  
 }
 #app {
-    display: flex;
-    flex-direction: column;
-    height:100%;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    color: #2c3e50;
-    .centerContent{
-        display:flex;
-        height:100%;
-        width: 100%;
-        #right{
-            display:flex;
-            flex-direction: column;
-            overflow-y: auto;
-            width: 100%;
-            height: 100%;
-        }
-        .content{
-            background:#F6F8F9;
-            height:auto;
-            width: 100%;
-        }
-        #main{
-            overflow-y: auto;
-            -webkit-overflow-scrolling: touch;
-            background:white;
+    height: 100%;
+    .app-content {
+        display: flex;
+        height: 100%;
+        .app-content-main {
+          display: flex;
+          flex-direction: column;
+          overflow-y: auto;
+          -webkit-overflow-scrolling: touch;
+          background: #F6F8F9;
+          &::-webkit-scrollbar {
+            width: 10px;
+            height: 1px;
+          }
+          &::-webkit-scrollbar-thumb {
+            border-radius: 10px;
+            background: #ccc;
+          }
+          &::-webkit-scrollbar-track {
+            border-radius: 10px;
+          }
+          .app-content-main-view {
+            padding: 10px;
+            box-sizing: border-box;
+            background: white;
             margin: 10px;
             border-radius: 5px;
-            padding: 15px;
-            box-sizing: border-box;
-            .blackbtn{
-                background-color: #060101;
-                color: white;
+          }
+          .blackbtn{
+            background: #040000;
+            color: white;
+            }        
+          .serchArea {
+            background: #fff;
+            border-radius: 8px;
+            padding-top: 20px;
+            margin: 0 0 8px 0;
+            .el-form-item {
+              margin-bottom: 16px;
             }
-            &::-webkit-scrollbar {
-                width: 10px;
-                height: 1px;
+            .el-form-item__label {
+              line-height: 36px;
             }
-            &::-webkit-scrollbar-thumb {
-                border-radius: 10px;
-                background: #ccc;
+            .el-form-item__content {
+              line-height: 36px;
+              .el-input {
+                width: 200px;
+              }
+              .el-input__inner {
+                line-height: 36px;
+                height: 36px;
+              }
             }
-            &::-webkit-scrollbar-track {
-                border-radius: 10px;
+            .el-input__icon,
+            .el-date-editor .el-range-separator {
+              line-height: 36px;
+              height: 36px;
             }
-            .serchArea {
-                    background: #fff;
-                    border-radius: 8px;
-                    padding-top: 20px;
-                    margin: 0 0 8px 0;
-                .el-form-item__content {
-                    width: 200px;
-                    .el-input, input {
-                        width: 100%;
-                    }
-                }
-                .serchAreaButton {
-                    text-align: right;
-                    padding: 0 110px 20px 0;
-                }
+            .serchAreaButton {
+              text-align: right;
+              padding: 0 15px 20px 0;
             }
-            .operationButton{
-                background:#fff;
-                padding:20px;
+          }
+          .operationButton {
+            background: #fff;
+            padding: 20px;
+          }
+          .operationDiv {
+            & > i,
+            a {
+              margin: 0 5px;
+              cursor: pointer;
             }
-            .bottomButton{
-                text-align: center;
-                margin: 0 20px;
+          }
+          .bottomButton {
+            text-align: center;
+            .el-button {
+              margin: 0 20px;
             }
+          }
         }
+      }
     }
-}
 .pr-50{
     .el-input__inner{
         padding-right: 50px;
@@ -89,6 +102,10 @@ html, body {
     left: 50%;
     transform: translate(-50%, -50%);
 }
+.flex1 {
+    flex: 1 0 0;
+  }
+  
 .padding10{
     padding: 10px;
 }

src/components/tabbar.vue

@@ -69,6 +69,8 @@
         align-items: center;
         box-shadow: 0px 6px 6px 0px rgba(174, 174, 174, 0.09);
         z-index: 1;
+        background:white;
+        padding-top: 10px;
 
         .item {
             .content {

src/components/topbar.vue

@@ -188,7 +188,7 @@
 </script>
 <style lang="less" scoped>
 .topbarall{
-  margin-bottom: 10px;
+  background:white;
 }
   .line{
     background:#DEDEDE;

src/pages/goods/index.vue

@@ -192,7 +192,6 @@
   .btn_search {
     margin-left: 10px;
   }
-
   .serach {
     margin-bottom: 10px;
   }

src/pages/login/index.vue

@@ -105,12 +105,10 @@
     flex-direction: column;
     padding-left: 70px;
     padding-top: 70px;
-
     .logo {
       width: 100px;
       height: auto;
     }
-
     .form {
       font-weight: bold;
       margin-top: 50px;
@@ -118,13 +116,11 @@
       .el-input {
         width: 400px;
       }
-
       .loginbtn {
         width: 200px;
         margin-top: 20px;
       }
     }
-
     .welcome {
       color: #060101;
       font-size: x-large;