部分样式修改

src/styles/index.scss

@@ -58,16 +58,6 @@ a:hover {
   padding: 20px;
 }
 
-//外框样式
-.container-frame {
-  padding: 10px;
-  border: 1px solid rgb(235, 235, 235);
-  border-image: initial;
-  border-radius: 3px;
-  transition: 0.2s;
-  overflow: hidden;
-}
-
 //搜索栏样式
 .filter-container {
 

src/views/pms/brand/components/BrandDetail.vue

@@ -1,5 +1,5 @@
 <template> 
-  <div class="form-container container-frame">
+  <el-card class="form-container" shadow="never">
     <el-form :model="brand" :rules="rules" ref="brandFrom" label-width="150px">
       <el-form-item label="品牌名称：" prop="name">
         <el-input v-model="brand.name"></el-input>
@@ -40,7 +40,7 @@
         <el-button v-if="!isEdit" @click="resetForm('brandFrom')">重置</el-button>
       </el-form-item>
     </el-form>
-  </div>
+  </el-card>
 </template>
 <script>
   import {createBrand, getBrand, updateBrand} from '@/api/brand'

src/views/pms/brand/index.vue

@@ -1,36 +1,35 @@
 <template> 
   <div class="app-container">
-    <div class="filter-container container-frame">
-      <div>
-        <i class="el-icon-search"></i>
-        <span>筛选搜索</span>
-        <el-button
-          style="float: right"
-          @click="searchBrandList()"
-          type="primary"
-          size="small">
-          查询结果
-        </el-button>
-      </div>
-      <div style="margin-top: 15px">
-        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
-          <el-form-item label="输入搜索：">
-            <el-input style="width: 203px" v-model="listQuery.keyword" placeholder="品牌名称/关键字"></el-input>
-          </el-form-item>
-        </el-form>
-      </div>
-    </div>
-    <div class="operate-container container-frame">
-
-      <i class="el-icon-tickets" style="margin-top: 5px"></i>
-      <span style="margin-top: 5px">数据列表</span>
+    <el-card class="filter-container" shadow="never">
+        <div>
+          <i class="el-icon-search"></i>
+          <span>筛选搜索</span>
+          <el-button
+            style="float: right"
+            @click="searchBrandList()"
+            type="primary"
+            size="small">
+            查询结果
+          </el-button>
+        </div>
+        <div style="margin-top: 15px">
+          <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
+            <el-form-item label="输入搜索：">
+              <el-input style="width: 203px" v-model="listQuery.keyword" placeholder="品牌名称/关键字"></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+    </el-card>
+    <el-card class="operate-container" shadow="never">
+      <i class="el-icon-tickets"></i>
+      <span>数据列表</span>
       <el-button
         class="btn-add"
         @click="addBrand()"
         size="mini">
         添加
       </el-button>
-    </div>
+    </el-card>
     <div class="table-container">
       <el-table ref="brandTable"
                 :data="list"

src/views/pms/product/add.vue

@@ -1,11 +1,18 @@
 <template> 
-  <div> {{msg}}</div>
+  <el-card class="form-container" shadow="never">
+    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+      <el-tab-pane label="first" name="first">first</el-tab-pane>
+      <el-tab-pane label="second" name="second">second</el-tab-pane>
+      <el-tab-pane label="third" name="third">third</el-tab-pane>
+      <el-tab-pane label="fourth" name="fourth">fourth</el-tab-pane>
+    </el-tabs>
+  </el-card>
 </template>
 <script>
   export default {
     name: 'addProduct',
     data() {
-      return {msg: '添加商品'}
+      return {activeName: 'first'}
     }
   }
 </script>

src/views/pms/product/index.vue

@@ -1,6 +1,6 @@
 <template> 
   <div class="app-container">
-    <div class="filter-container container-frame">
+    <el-card class="filter-container" shadow="never">
       <div>
         <i class="el-icon-search"></i>
         <span>筛选搜索</span>
@@ -65,18 +65,17 @@
           </el-form-item>
         </el-form>
       </div>
-    </div>
-    <div class="operate-container container-frame">
-
-      <i class="el-icon-tickets" style="margin-top: 5px"></i>
-      <span style="margin-top: 5px">数据列表</span>
+    </el-card>
+    <el-card class="operate-container" shadow="never">
+      <i class="el-icon-tickets"></i>
+      <span>数据列表</span>
       <el-button
         class="btn-add"
         @click="handleAddItem()"
         size="mini">
         添加
       </el-button>
-    </div>
+    </el-card>
     <div class="table-container">
       <el-table ref="productTable"
                 :data="list"

src/views/pms/productAttr/components/ProductAttrDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="form-container container-frame">
+  <el-card class="form-container" shadow="never">
     <el-form :model="productAttr" :rules="rules" ref="productAttrFrom" label-width="150px">
       <el-form-item label="属性名称：" prop="name">
         <el-input v-model="productAttr.name"></el-input>
@@ -63,7 +63,7 @@
         <el-button  v-if="!isEdit" @click="resetForm('productAttrFrom')">重置</el-button>
       </el-form-item>
     </el-form>
-  </div>
+  </el-card>
 </template>
 
 <script>

src/views/pms/productAttr/index.vue

@@ -1,6 +1,6 @@
 <template> 
   <div class="app-container">
-    <div class="operate-container container-frame">
+    <el-card class="operate-container" shadow="never">
       <i class="el-icon-tickets" style="margin-top: 5px"></i>
       <span style="margin-top: 5px">数据列表</span>
       <el-button
@@ -9,7 +9,7 @@
         size="mini">
         添加
       </el-button>
-    </div>
+    </el-card>
     <div class="table-container">
       <el-table ref="productAttrCateTable"
                 style="width: 100%"

src/views/pms/productAttr/productAttrList.vue

@@ -1,6 +1,6 @@
 <template> 
   <div class="app-container">
-    <div class="operate-container container-frame">
+    <el-card class="operate-container" shadow="never">
 
       <i class="el-icon-tickets" style="margin-top: 5px"></i>
       <span style="margin-top: 5px">数据列表</span>
@@ -10,7 +10,7 @@
         size="mini">
         添加
       </el-button>
-    </div>
+    </el-card>
     <div class="table-container">
       <el-table ref="productAttrTable"
                 :data="list"

src/views/pms/productCate/components/ProductCateDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="form-container container-frame">
+  <el-card class="form-container" shadow="never">
     <el-form :model="productCate"
              :rules="rules"
              ref="productCateFrom"
@@ -64,7 +64,7 @@
         <el-button v-if="!isEdit" @click="resetForm('productCateFrom')">重置</el-button>
       </el-form-item>
     </el-form>
-  </div>
+  </el-card>
 </template>
 
 <script>

src/views/pms/productCate/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <div class="operate-container container-frame">
+    <el-card class="operate-container" shadow="never">
       <i class="el-icon-tickets" style="margin-top: 5px"></i>
       <span style="margin-top: 5px">数据列表</span>
       <el-button
@@ -9,7 +9,7 @@
         size="mini">
         添加
       </el-button>
-    </div>
+    </el-card>
     <div class="table-container">
       <el-table ref="productCateTable"
                 style="width: 100%"