通用样式整理

src/styles/index.scss

@@ -58,7 +58,7 @@ a:hover {
   padding: 20px;
 }
 
-/*外框样式*/
+//外框样式
 .container-frame {
   padding: 10px;
   border: 1px solid rgb(235, 235, 235);
@@ -67,3 +67,35 @@ a:hover {
   transition: 0.2s;
   overflow: hidden;
 }
+
+//搜索栏样式
+.filter-container {
+
+}
+
+//操作栏样式
+.operate-container {
+  margin-top: 20px;
+}
+
+.operate-container .btn-add {
+  float: right;
+}
+
+//表格栏样式
+.table-container {
+  margin-top: 20px;
+}
+
+//批量操作栏样式
+.batch-operate-container {
+  display: inline-block;
+  margin-top: 20px;
+}
+
+//分页栏样式
+.pagination-container {
+  display: inline-block;
+  float: right;
+  margin-top: 20px;
+}

src/views/pms/brand/index.vue

@@ -27,6 +27,7 @@
       <i class="el-icon-tickets" style="margin-top: 5px"></i>
       <span style="margin-top: 5px">数据列表</span>
       <el-button
+        class="btn-add"
         @click="addBrand()"
         size="mini">
         添加
@@ -139,6 +140,7 @@
 </template>
 <script>
   import {fetchList, updateShowStatus, updateFactoryStatus, deleteBrand} from '@/api/brand'
+
   export default {
     name: 'brandList',
     data() {
@@ -226,7 +228,8 @@
         });
       },
       handleShowStatusChange(index, row) {
-        let data = new URLSearchParams();;
+        let data = new URLSearchParams();
+        ;
         data.append("ids", row.id);
         data.append("showStatus", row.showStatus);
         updateShowStatus(data).then(response => {
@@ -302,32 +305,7 @@
   }
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .filter-container {
 
-  }
-
-  .operate-container {
-    margin-top: 20px;
-  }
-
-  .operate-container .el-button {
-    float: right;
-  }
-
-  .table-container {
-    margin-top: 20px;
-  }
-
-  .batch-operate-container {
-    display: inline-block;
-    margin-top: 20px;
-  }
-
-  .pagination-container {
-    display: inline-block;
-    float: right;
-    margin-top: 20px;
-  }
 
 </style>
 

src/views/pms/productAttr/index.vue

@@ -4,6 +4,7 @@
       <i class="el-icon-tickets" style="margin-top: 5px"></i>
       <span style="margin-top: 5px">数据列表</span>
       <el-button
+        class="btn-add"
         @click="addProductAttrCate()"
         size="mini">
         添加
@@ -198,19 +199,6 @@
   }
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .operate-container .el-button {
-    float: right;
-  }
-
-  .table-container {
-    margin-top: 20px;
-  }
-
-  .pagination-container {
-    display: inline-block;
-    float: right;
-    margin-top: 20px;
-  }
 </style>
 
 

src/views/pms/productAttr/productAttrList.vue

@@ -5,6 +5,7 @@
       <i class="el-icon-tickets" style="margin-top: 5px"></i>
       <span style="margin-top: 5px">数据列表</span>
       <el-button
+        class="btn-add"
         @click="addProductAttr()"
         size="mini">
         添加
@@ -212,28 +213,7 @@
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .operate-container {
-    margin-top: 20px;
-  }
 
-  .operate-container .el-button {
-    float: right;
-  }
-
-  .table-container {
-    margin-top: 20px;
-  }
-
-  .batch-operate-container {
-    display: inline-block;
-    margin-top: 20px;
-  }
-
-  .pagination-container {
-    display: inline-block;
-    float: right;
-    margin-top: 20px;
-  }
 </style>