2023-02-17

完善样式

mallplusui-web-admin/src/icons/svg/cross.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1654485972937" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="33086" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
+</style></defs><path d="M561.17013333 509.06026667L858.02666667 213.73973333c14.03733333-13.968 14.1088-36.60053333 0.1408-50.63786666-13.99893333-14.06826667-36.592-14.10773333-50.62933334-0.1408L510.6048 458.31466667 216.256 163.06986667c-13.9328-13.96693333-36.59733333-14.03733333-50.63466667-0.07146667-14.00426667 13.96586667-14.03733333 36.63146667-0.0704 50.6688l294.27733334 295.1744-296.71466667 295.14026667c-14.0384 13.968-14.1088 36.59733333-0.14293333 50.63786666a35.7216 35.7216 0 0 0 25.3856 10.56c9.13066667 0 18.26666667-3.4688 25.25013333-10.4192l296.78613333-295.2128L807.4304 857.48266667c6.9824 7.02186667 16.15253333 10.53013333 25.35253333 10.53013333a35.72906667 35.72906667 0 0 0 25.28213334-10.45973333c13.99893333-13.96586667 14.03733333-36.592 0.07146666-50.62933334L561.17013333 509.06026667z m0 0" p-id="33087" fill="#ffffff"></path></svg>

mallplusui-web-admin/src/styles/index.scss

@@ -55,14 +55,80 @@ a:hover {
 }
 
 .app-container {
-  padding: 20px;
+     margin: 0 0 25px 0;
+     background-color: #fff;
 }
 
 //搜索栏样式
 .filter-container {
 
 }
+// 搜索的
+.webtop {
+  // position: fixed;top: 110px;width: calc(100% - 240px);z-index: 6000;
+  background-color: #fff;
+  display: flex !important;
+  flex-direction: row;
+  justify-content: space-between !important;
+  align-items: center;
+  margin-bottom: 0px !important;
+  font-size: 20px;
+}
+.tab-header {
+    background-color: #edf1f7;
+    padding: 10px 20px;
+}
+// 设置了页面头部的内边距和背景色
+.tab-header {
+  font-size: 20px;
+  font-weight: bold;
+}
+// 设置了搜索条件里的样式
+.search {
+  .tab-header {
+    .el-form-item {
+      margin-right: 16px;
+      .el-form-item__label {
+        font-size: 16px;
+        font-weight: 500;
+      }
+    }
+  }
+}
+.search .btn {
+    padding: 5px 0;
+    border: 1px solid #e0e3eb;
+    text-align: center;
+    margin-bottom: 5px;
+}
+.searchcon{margin: 0px 0 10px 0;}
+.searchcon .searchbtn{margin: 10px 0;border: #2cab69 1px solid;color: #2cab69;}
+// 隐藏显示按钮
+.main-content {
+  .searchcon {
+    .searchbtn {
+      margin: 5px 0;
+      border: #2cab69 1px solid;
+      color: #2cab69;
+    }
+  }}
+  // 页面上的button按钮
+  .app-container {
+    .el-button--medium {
+      padding: 10px 14px;
+      font-size: 16px;
+    }
   
+    .el-button--small {
+      padding: 8px 12px;
+      font-size: 14px;
+    }
+  
+    .el-button--mini {
+      padding: 7px 10px;
+      font-size: 12px;
+    }
+  }
 //操作栏样式
 .operate-container {
   margin-top: 20px;

mallplusui-web-admin/src/views/pms/product/index.vue

@@ -1,6 +1,6 @@
 <template> 
 	<div class="app-container">
-		<button-bar ref="btnbar" view-title="库存信息查询" :btndisabled="btndisabled" @btnhandle="btnHandle" />
+		<button-bar ref="btnbar" view-title="商品列表" :btndisabled="btndisabled" @btnhandle="btnHandle" />
 
 		<!-- <el-card class="filter-container" shadow="never">
 			<div>
@@ -54,7 +54,7 @@
 			</div>
 		</el-card> -->
 
-		<div class="main-content">
+		<div class="main-content" style="margin-left: 20px;margin-right: 20px;">
 			<div class="searchcon">
 				<el-button size="small" class="searchbtn" @click="clicksearchShow">
 					{{ searchxianshitit }}
@@ -102,16 +102,31 @@
 				<el-tab-pane name="4">
 					<span slot="label"><i class="el-icon-truck"></i> 回收站</span>
 				</el-tab-pane>
-				<el-tab-pane name="5">
+				<!-- <el-tab-pane name="5">
 					<span slot="label"><i class="el-icon-truck"></i>
 						<el-button class="btn-add" @click="handleAddProduct()" size="mini">
 							添加商品
 						</el-button>
 					</span>
-				</el-tab-pane>
+				</el-tab-pane> -->
 			</el-tabs>
 
-
+			<div class="batch-operate-container">
+				<el-select size="small" v-model="operateType" placeholder="批量操作">
+					<el-option v-for="item in operates" :key="item.value" :label="item.label" :value="item.value">
+					</el-option>
+				</el-select>
+				<el-button style="margin-left: 20px" class="search-button" @click="handleBatchOperate()" type="primary"
+					size="small">
+					确定
+				</el-button>
+			</div>
+			<div class="pagination-container">
+				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+					layout="total, sizes,prev, pager, next,jumper" :page-size="listQuery.pageSize"
+					:page-sizes="[5,10,15]" :current-page.sync="listQuery.pageNum" :total="total">
+				</el-pagination>
+			</div>
 			<div class="table-container">
 				<el-table ref="productTable" :data="list" style="width: 100%" @selection-change="handleSelectionChange"
 					v-loading="listLoading" border>
@@ -203,22 +218,7 @@
 					</el-table-column>
 				</el-table>
 			</div>
-			<div class="batch-operate-container">
+
-				<el-select size="small" v-model="operateType" placeholder="批量操作">
-					<el-option v-for="item in operates" :key="item.value" :label="item.label" :value="item.value">
-					</el-option>
-				</el-select>
-				<el-button style="margin-left: 20px" class="search-button" @click="handleBatchOperate()" type="primary"
-					size="small">
-					确定
-				</el-button>
-			</div>
-			<div class="pagination-container">
-				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
-					layout="total, sizes,prev, pager, next,jumper" :page-size="listQuery.pageSize"
-					:page-sizes="[5,10,15]" :current-page.sync="listQuery.pageNum" :total="total">
-				</el-pagination>
-			</div>
 			<el-dialog title="审核信息" :visible.sync="vertyProduct.dialogVisible" width="40%">
 				<el-form :model="vertyProduct" ref="brandFrom" label-width="150px">
 					<el-form-item label="审核状态：" prop="verifyStatus">
@@ -436,6 +436,12 @@
 					label: '回收站'
 				}],
 				btnList: [{
+					type: 'primary',
+					size: 'small',
+					icon: 'add',
+					btnKey: 'toAdd',
+					btnLabel: '新增'
+				}, {
 					type: 'info',
 					size: 'small',
 					icon: 'cross',