Browse Source

2023-02-17

完善样式
master
guoxing 2 years ago
parent
commit
190466c9c6
  1. 2
      mallplusui-web-admin/src/icons/svg/cross.svg
  2. 70
      mallplusui-web-admin/src/styles/index.scss
  3. 116
      mallplusui-web-admin/src/views/pms/product/index.vue

2
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>

After

Width:  |  Height:  |  Size: 1.5 KiB

70
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;

116
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">
@ -344,7 +344,7 @@
name: "productList",
data() {
return {
status: 0,
status: 0,
btndisabled: false,
isSearchShow: false,
searchxianshitit: '显示查询条件',
@ -436,6 +436,12 @@
label: '回收站'
}],
btnList: [{
type: 'primary',
size: 'small',
icon: 'add',
btnKey: 'toAdd',
btnLabel: '新增'
}, {
type: 'info',
size: 'small',
icon: 'cross',
@ -443,20 +449,20 @@
btnLabel: '关闭'
}],
queryParams: {
current: 1,
size: 10,
total: 0,
params: {
orderId: '',
supplierName: '',
auditStatus: '',
goodsStatus: '',
orderStartDate: '',
orderEndDate: '',
arrivalStartDate: '',
arrivalEndDate: '',
queryType: ''
}
current: 1,
size: 10,
total: 0,
params: {
orderId: '',
supplierName: '',
auditStatus: '',
goodsStatus: '',
orderStartDate: '',
orderEndDate: '',
arrivalStartDate: '',
arrivalEndDate: '',
queryType: ''
}
},
}
},
@ -516,27 +522,27 @@
}
},
dosearch() {
this.queryParams.current = 1
// this.loadList()
this.queryParams.current = 1
// this.loadList()
},
resetQuery() {
this.queryParams = {
current: 1,
size: 10,
total: 0,
params: {
orderId: '',
supplierName: '',
auditStatus: '',
goodsStatus: '',
orderStartDate: '',
orderEndDate: '',
arrivalStartDate: '',
arrivalEndDate: '',
queryType: ''
}
}
// this.loadList()
this.queryParams = {
current: 1,
size: 10,
total: 0,
params: {
orderId: '',
supplierName: '',
auditStatus: '',
goodsStatus: '',
orderStartDate: '',
orderEndDate: '',
arrivalStartDate: '',
arrivalEndDate: '',
queryType: ''
}
}
// this.loadList()
},
doClose() {
this.$store.dispatch('tagsView/delView', this.$route)

Loading…
Cancel
Save